The following examples show how you can clip the overflowing content in a Spark Panel container in Flex 4 by setting the Boolean clipAndEnableScrolling property or using a Spark Scroller container.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
1) The following example shows how you can set the Boolean clipAndEnableScrolling property on the Panel container’s internal contentGroup skin part:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/14/clipping-the-content-in-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_contentGroup_clipAndEnableScrolling_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <s:CheckBox id="chckBx" label="clipAndEnableScrolling" change="pnl.contentGroup.clipAndEnableScrolling = chckBx.selected;" /> </s:controlBarContent> <s:Panel id="pnl" title="Spark Panel title" width="300" height="200" horizontalCenter="0" top="50"> <s:Rect width="400" height="300"> <s:fill> <s:LinearGradient rotation="45"> <s:GradientEntry color="red" /> <s:GradientEntry color="white" /> <s:GradientEntry color="blue" /> </s:LinearGradient> </s:fill> </s:Rect> </s:Panel> </s:Application>
2) The following example shows how you can set the Boolean clipAndEnableScrolling property on a nested Spark Group container:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/14/clipping-the-content-in-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_contentGroup_clipAndEnableScrolling_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <s:CheckBox id="chckBx" label="clipAndEnableScrolling" /> </s:controlBarContent> <s:Panel id="pnl" title="Spark Panel title" width="300" height="200" horizontalCenter="0" top="50"> <s:Group id="gr" clipAndEnableScrolling="{chckBx.selected}" width="100%" height="100%"> <s:Rect width="400" height="300"> <s:fill> <s:LinearGradient rotation="45"> <s:GradientEntry color="red" /> <s:GradientEntry color="white" /> <s:GradientEntry color="blue" /> </s:LinearGradient> </s:fill> </s:Rect> </s:Group> </s:Panel> </s:Application>
3) The following example shows how you can clip the overflow content by using a Spark Scroller container to add horizontal and vertical scroll bars, if needed:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/11/14/clipping-the-content-in-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_contentGroup_clipAndEnableScrolling_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:Panel id="pnl" title="Spark Panel title" width="300" height="200" horizontalCenter="0" top="50"> <s:Scroller width="100%" height="100%"> <s:Group> <s:Rect width="400" height="300"> <s:fill> <s:LinearGradient rotation="45"> <s:GradientEntry color="red" /> <s:GradientEntry color="white" /> <s:GradientEntry color="blue" /> </s:LinearGradient> </s:fill> </s:Rect> </s:Group> </s:Scroller> </s:Panel> </s:Application>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
{ 3 comments… read them below or add one }
Thanks, Peter.
As far as I understand, integrating Scroller inside Panel has been a problem for some time. At least for me.
Now, it’s solved.
Thanks,
Igor Borodin
I had some doubts about the Scroller component, but now it’s a little lighter use.
Congratulations for the post.
Thank you.
Thank you!!! you’ve saved my life!!!!