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"?>
<!-- http://blog.flexexamples.com/2010/04/30/determining-if-the-scroll-bars-are-visible-in-a-spark-scroller-container-in-flex-4/ -->
<s:Application name="Spark_Scroller_verticalScrollBar_visible_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>
        <mx:Form>
            <mx:FormItem label="width:">
                <s:HSlider id="wSl"
                        minimum="100" maximum="400"
                        value="100"
                        change="wSl_changeHandler(event);"
                        changeEnd="wSl_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="height:">
                <s:HSlider id="hSl"
                        minimum="100" maximum="300"
                        value="100"
                        change="hSl_changeHandler(event);"
                        changeEnd="hSl_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function wSl_changeHandler(evt:Event):void {
                horFrmItm.required = scr.horizontalScrollBar.visible;
            }
 
            protected function hSl_changeHandler(evt:Event):void {
                verFrmItm.required = scr.verticalScrollBar.visible;
            }
        ]]>
    </fx:Script>
 
    <s:Panel horizontalCenter="0" verticalCenter="0">
        <s:controlBarContent>
            <mx:Form paddingTop="0" paddingBottom="0">
                <mx:FormItem id="horFrmItm" label="horizontal scroll bar visible:" />
                <mx:FormItem id="verFrmItm" label="vertical scroll bar visible:" />
            </mx:Form>
        </s:controlBarContent>
        <s:Scroller id="scr"
                width="300" height="160">
            <s:Group>
                <s:Rect id="rect"
                        width="{wSl.value}" height="{hSl.value}">
                    <s:fill>
                        <s:LinearGradient rotation="45">
                            <s:GradientEntry color="haloGreen" />
                            <s:GradientEntry color="haloBlue" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
            </s:Group>
        </s:Scroller>
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

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.

 

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/28/hiding-the-text-field-on-an-mx-datefield-control-in-flex-3/ -->
<mx:Application name="MX_DateField_getTextInput_test"
                xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                verticalAlign="top"
                backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
 
            protected function init():void {
                var tf:TextInput = df.mx_internal::getTextInput();
                tf.visible = false;
                tf.includeInLayout = false;
            }
        ]]>
    </mx:Script>
 
    <mx:DateField id="df" initialize="init();" width="23" />
    <mx:Label text="{df.selectedDate}" />
 
</mx:Application>

 

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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/12/07/pausing-a-video-in-the-spark-videoplayer-control-when-it-is-removed-from-the-display-list-in-flex-4/ -->
<s:Application name="Spark_VideoPlayer_pauseWhenHidden_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>
        <mx:Form styleName="plain" contentBackgroundAlpha="0.0">
            <mx:FormItem label="pauseWhenHidden:">
                <s:CheckBox id="chBx1"
                        selected="true" />
            </mx:FormItem>
            <mx:FormItem label="visible:">
                <s:CheckBox id="chBx2"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:VideoPlayer id="vdPlyr"
            source="http://helpexamples.com/flash/video/caption_video.flv"
            pauseWhenHidden="{chBx1.selected}"
            visible="{chBx2.selected}"
            horizontalCenter="0" verticalCenter="0" />
 
</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.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_getDividerAt_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx < len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="Disable dividers:"
                labelPlacement="left"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                width="100%"
                height="100%"
                backgroundColor="haloGreen">
        </mx:HBox>
        <mx:HBox id="hBox2"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
        </mx:HBox>
        <mx:HBox id="hBox3"
                width="100%"
                height="100%"
                backgroundColor="haloOrange">
        </mx:HBox>
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_getDividerAt_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.HBox;
            import mx.containers.HDividedBox;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;

            private var checkBox:CheckBox;
            private var hBox1:HBox;
            private var hBox2:HBox;
            private var hBox3:HBox;
            private var hDividedBox:HDividedBox;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.label = "Disable dividers:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.addEventListener(Event.CHANGE,
                            checkBox_change);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChildAt(appControlBar, 0);

                hBox1 = new HBox();
                hBox1.percentWidth = 100;
                hBox1.percentHeight = 100;
                hBox1.setStyle("backgroundColor", "haloGreen");

                hBox2 = new HBox();
                hBox2.percentWidth = 100;
                hBox2.percentHeight = 100;
                hBox2.setStyle("backgroundColor", "haloBlue");

                hBox3 = new HBox();
                hBox3.percentWidth = 100;
                hBox3.percentHeight = 100;
                hBox3.setStyle("backgroundColor", "haloOrange");

                hDividedBox = new HDividedBox();
                hDividedBox.percentWidth = 100;
                hDividedBox.percentHeight = 100;
                hDividedBox.addChild(hBox1);
                hDividedBox.addChild(hBox2);
                hDividedBox.addChild(hBox3);
                addChild(hDividedBox);
            }

            private function checkBox_change(evt:Event):void {
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx < len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
            }
        ]]>
    </mx:Script>

</mx:Application>

If you want to remove the gap between the HDividedBox children after disabling the dividers, you can set the horizontalGap style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_getDividerAt_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var hGap:Class = hDividedBox.getStyle("dividerSkin");
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx < len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
                if (value) {
                    hDividedBox.setStyle("horizontalGap", hGap.width);
                } else {
                    hDividedBox.setStyle("horizontalGap", 0);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="Disable dividers:"
                labelPlacement="left"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hDividedBox"
            minHeight="100"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                minWidth="20"
                width="100%"
                height="100%"
                backgroundColor="haloGreen">
        </mx:HBox>
        <mx:HBox id="hBox2"
                minWidth="20"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
        </mx:HBox>
        <mx:HBox id="hBox3"
                minWidth="20"
                width="100%"
                height="100%"
                backgroundColor="haloOrange">
        </mx:HBox>
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ -->
<mx:Application name="FormItem_includeInLayout_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Form {
            indicatorGap: 0;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 0;
            paddingBottom: 0;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="bccButton"
                label="Show BCC"
                toggle="true"
                selected="false" />
        <mx:Button id="fromButton"
                label="Show From"
                toggle="true"
                selected="false" />
    </mx:ApplicationControlBar>

    <mx:HBox width="100%">
        <mx:Button id="sendButton"
                label="Send"
                height="100%" />
        <mx:Form width="100%">
            <mx:FormItem label="From:"
                    includeInLayout="{fromButton.selected}"
                    visible="{fromButton.selected}"
                    width="100%">
                <mx:ComboBox id="fromComboBox"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="To:" width="100%">
                <mx:TextInput id="toTextInput"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="CC:" width="100%">
                <mx:TextInput id="ccTextInput"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="BCC:"
                    includeInLayout="{bccButton.selected}"
                    visible="{bccButton.selected}"
                    width="100%">
                <mx:TextInput id="bccTextInput"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="Subject:"
                    width="100%">
                <mx:TextInput id="subjectTextInput"
                        width="100%" />
            </mx:FormItem>
        </mx:Form>
    </mx:HBox>

    <mx:TextArea id="bodyTextArea"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ -->
<mx:Application name="FormItem_includeInLayout_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.HBox;
            import mx.controls.Button;
            import mx.controls.ComboBox;
            import mx.controls.TextArea;
            import mx.controls.TextInput;

            private var bccButton:Button;
            private var bccFormItem:FormItem;
            private var bccTextInput:TextInput;
            private var bodyTextArea:TextArea;
            private var ccFormItem:FormItem;
            private var ccTextInput:TextInput;
            private var fromButton:Button;
            private var fromComboBox:ComboBox;
            private var fromFormItem:FormItem;
            private var sendButton:Button;
            private var subjectFormItem:FormItem;
            private var subjectTextInput:TextInput;
            private var toFormItem:FormItem;
            private var toTextInput:TextInput;

            private function init():void {
                bccButton = new Button();
                bccButton.label = "Show BCC";
                bccButton.toggle = true;
                bccButton.selected = true;
                bccButton.addEventListener(Event.CHANGE,
                            bccButton_change);

                fromButton = new Button();
                fromButton.label = "Show From";
                fromButton.toggle = true;
                fromButton.selected = true;
                fromButton.addEventListener(Event.CHANGE,
                            fromButton_change);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(bccButton);
                appControlBar.addChild(fromButton);
                addChildAt(appControlBar, 0);

                sendButton = new Button();
                sendButton.label = "Send";
                sendButton.percentHeight = 100;

                fromComboBox = new ComboBox();
                fromComboBox.percentWidth = 100;

                fromFormItem = new FormItem();
                fromFormItem.label = "From:";
                fromFormItem.includeInLayout = fromButton.selected;
                fromFormItem.visible = fromButton.selected;
                fromFormItem.percentWidth = 100;
                fromFormItem.addChild(fromComboBox);

                toTextInput = new TextInput();
                toTextInput.percentWidth = 100;

                toFormItem = new FormItem();
                toFormItem.label = "To:";
                toFormItem.percentWidth = 100;
                toFormItem.addChild(toTextInput);

                ccTextInput = new TextInput();
                ccTextInput.percentWidth = 100;

                ccFormItem = new FormItem();
                ccFormItem.label = "CC:";
                ccFormItem.percentWidth = 100;
                ccFormItem.addChild(ccTextInput);

                bccTextInput = new TextInput();
                bccTextInput.percentWidth = 100;

                bccFormItem = new FormItem();
                bccFormItem.label = "BCC:";
                bccFormItem.percentWidth = 100;
                bccFormItem.addChild(bccTextInput);

                subjectTextInput = new TextInput();
                subjectTextInput.percentWidth = 100;

                subjectFormItem = new FormItem();
                subjectFormItem.label = "Subject:";
                subjectFormItem.percentWidth = 100;
                subjectFormItem.addChild(subjectTextInput);

                var form:Form = new Form();
                form.percentWidth = 100;
                form.addChild(fromFormItem);
                form.addChild(toFormItem);
                form.addChild(ccFormItem);
                form.addChild(bccFormItem);
                form.addChild(subjectFormItem);
                form.setStyle("indicatorGap", 0);
                form.setStyle("paddingLeft", 0);
                form.setStyle("paddingRight", 0);
                form.setStyle("paddingTop", 0);
                form.setStyle("paddingBottom", 0);

                var hBox:HBox = new HBox();
                hBox.percentWidth = 100;
                hBox.addChild(sendButton);
                hBox.addChild(form);
                addChild(hBox);

                bodyTextArea = new TextArea();
                bodyTextArea.percentWidth = 100;
                bodyTextArea.percentHeight = 100;
                addChild(bodyTextArea);
            }

            private function bccButton_change(evt:Event):void {
                bccFormItem.includeInLayout = bccButton.selected;
                bccFormItem.visible = bccButton.selected;
            }

            private function fromButton_change(evt:Event):void {
                fromFormItem.includeInLayout = fromButton.selected;
                fromFormItem.visible = fromButton.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;

            private function toggle_linkTextInput():void {
                var textInput:TextInput = richTextEditor.linkTextInput;
                var isSelected:Boolean = checkBox.selected;
                textInput.visible = isSelected;
                textInput.includeInLayout = isSelected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="RichTextEditor linkTextInput visible:"
                labelPlacement="left"
                selected="true"
                change="toggle_linkTextInput();" />
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/20/triggering-effects-when-a-containers-visibility-is-changed/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Zoom id="zoom" />

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="hide"
                click="panel.visible = false;"
                enabled="{panel.visible}" />
        <mx:Button label="show"
                click="panel.visible = true;"
                enabled="{!panel.visible}" />
    </mx:ApplicationControlBar>

    <mx:Panel id="panel"
            title="title"
            status="status"
            showEffect="{zoom}"
            hideEffect="{zoom}"
            width="100%"
            height="100%">

        <mx:ControlBar>
            <mx:Label text="control bar" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

If you want to use a specific easing type (Back, Bounce, Elastic, etc), you can use the following snippet specify the easing function that will be applied to the animation:

<mx:Script>
    <![CDATA[
        import mx.effects.easing.Bounce;
    ]]>
</mx:Script>

<mx:Zoom id="zoom" easingFunction="Bounce.easeOut" />

View source is enabled in the following example.