Clipping the content in a Spark Panel container in Flex 4

By Peter deHaan On November 14, 2009 · 5 Comments

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.

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

5 Responses to Clipping the content in a Spark Panel container in Flex 4

Anonymous says:

November 14, 2009 at 12:41 pm

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

Reply
Idemax says:

November 16, 2009 at 2:11 am

I had some doubts about the Scroller component, but now it’s a little lighter use.
Congratulations for the post.
Thank you.

Reply
zikaS says:

April 4, 2010 at 10:30 am

Thank you!!! you’ve saved my life!!!!

Reply
tsintian says:

July 27, 2011 at 6:14 am

Ha ha ,this is really a good website for learning flex.
Thank u!

Reply
JTtheGeek says:

September 20, 2011 at 1:33 pm

Holy crap that just saved me a lot of headache. Thanks so much for this!

Reply