Flex Examples » contentGroup http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Determining the inner content dimensions in a Spark Panel container in Flex 4 http://blog.flexexamples.com/2010/04/12/determining-the-inner-content-dimensions-in-a-spark-panel-container-in-flex-4/ http://blog.flexexamples.com/2010/04/12/determining-the-inner-content-dimensions-in-a-spark-panel-container-in-flex-4/#comments Mon, 12 Apr 2010 17:58:56 +0000 Peter deHaan http://blog.flexexamples.com/?p=2727 The following example shows how you can determine the internal content dimensions in a Spark Panel container in Flex 4 by checking the contentGroup skin parts width and height properties.

<?xml version="1.0" encoding="utf-8"?> <!-- --> <s:Application name="Spark_Panel_contentGroup_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:controlBarContent> <s:CheckBox id="chckBx" label="Spark Panel controlBarVisible" /> </s:controlBarContent>   <fx:Script> <![CDATA[ protected function lbl1_enterFrameHandler(evt:Event):void [...]]]> The following example shows how you can determine the internal content dimensions in a Spark Panel container in Flex 4 by checking the contentGroup skin parts width and height properties.

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.

<?xml version="1.0" encoding="utf-8"?>
<!--  -->
<s:Application name="Spark_Panel_contentGroup_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:controlBarContent>
        <s:CheckBox id="chckBx" label="Spark Panel controlBarVisible" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function lbl1_enterFrameHandler(evt:Event):void {
                lbl1.text = pnl.width + "x" + pnl.height;
            }
 
            protected function lbl2_enterFrameHandler(evt:Event):void {
                lbl2.text = pnl.contentGroup.width + "x" + pnl.contentGroup.height;
            }
        ]]>
    </fx:Script>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            controlBarVisible="{chckBx.selected}"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <s:Button label="Spark Panel control bar contents" />
        </s:controlBarContent>
 
        <mx:Form>
            <mx:FormItem label="Panel width/height:">
                <s:Label id="lbl1" enterFrame="lbl1_enterFrameHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="Panel contentGroup width/height:">
                <s:Label id="lbl2" enterFrame="lbl2_enterFrameHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </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.

 
]]> http://blog.flexexamples.com/2010/04/12/determining-the-inner-content-dimensions-in-a-spark-panel-container-in-flex-4/feed/ 0 Clipping the content in a Spark Panel container in Flex 4 http://blog.flexexamples.com/2009/11/14/clipping-the-content-in-a-spark-panel-container-in-flex-4/ http://blog.flexexamples.com/2009/11/14/clipping-the-content-in-a-spark-panel-container-in-flex-4/#comments Sat, 14 Nov 2009 15:20:52 +0000 Peter deHaan http://blog.flexexamples.com/?p=2195 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.

1) The following example shows how you can set the Boolean clipAndEnableScrolling property on the Panel container’s internal [...]]]> 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.

 
]]> http://blog.flexexamples.com/2009/11/14/clipping-the-content-in-a-spark-panel-container-in-flex-4/feed/ 5