Creating a show effect on a Spark Panel container in Flex 4

The following example shows how you can create a simple transition effect when the visibility is toggled on the Spark Panel container in Flex 4 by specifying the showEffect and hideEffect effects.

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see 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/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_showEffect_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:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Declarations>
        <s:Parallel id="showEff">
            <s:Rotate3D angleYFrom="-90" angleYTo="0" />
            <s:Fade alphaFrom="0.0" alphaTo="1.0" />
        </s:Parallel>
 
        <s:Parallel id="hideEff">
            <s:Rotate3D angleYFrom="0" angleYTo="-90" />
            <s:Fade alphaFrom="1.0" alphaTo="0.0" />
        </s:Parallel>
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Toggle Panel visibility"
                click="panel.visible = !panel.visible;" />
    </mx:ApplicationControlBar>
 
    <s:Group width="100%" height="100%">
        <s:Panel id="panel"
                title="Panel title"
                showEffect="{showEff}"
                hideEffect="{hideEff}"
                horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
            <mx:Form>
                <mx:FormItem label="From:" width="100%">
                    <s:DropDownList id="fromEmail"
                            requireSelection="true"
                            width="100%">
                        <s:ArrayList source="me@me.com" />
                    </s:DropDownList>
                </mx:FormItem>
                <mx:FormItem label="To:" width="100%">
                    <s:TextInput id="toEmail" width="100%" />
                </mx:FormItem>
                <mx:FormItem label="Message:" width="100%">
                    <s:TextArea id="message" width="100%" />
                </mx:FormItem>
                <mx:FormItem horizontalAlign="right" width="100%">
                    <s:Button label="Send" />
                </mx:FormItem>
            </mx:Form>
        </s:Panel>
    </s:Group>
 
</s:Application>

Or, instead of using databinding, you could declare the showEffect and hideEffect effects in the Panel declaration itself, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_showEffect_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:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Toggle Panel visibility"
                click="panel.visible = !panel.visible;" />
    </mx:ApplicationControlBar>
 
    <s:Group width="100%" height="100%">
        <s:Panel id="panel"
                title="Panel title"
                horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
            <s:showEffect>
                <s:Parallel>
                    <s:Rotate3D angleYFrom="-90" angleYTo="0" />
                    <s:Fade alphaFrom="0.0" alphaTo="1.0" />
                </s:Parallel>
            </s:showEffect>
            <s:hideEffect>
                <s:Parallel>
                    <s:Rotate3D angleYFrom="0" angleYTo="-90" />
                    <s:Fade alphaFrom="1.0" alphaTo="0.0" />
                </s:Parallel>
            </s:hideEffect>
            <mx:Form>
                <mx:FormItem label="From:" width="100%">
                    <s:DropDownList id="fromEmail"
                            requireSelection="true"
                            width="100%">
                        <s:ArrayList source="me@me.com" />
                    </s:DropDownList>
                </mx:FormItem>
                <mx:FormItem label="To:" width="100%">
                    <s:TextInput id="toEmail" width="100%" />
                </mx:FormItem>
                <mx:FormItem label="Message:" width="100%">
                    <s:TextArea id="message" width="100%" />
                </mx:FormItem>
                <mx:FormItem horizontalAlign="right" width="100%">
                    <s:Button label="Send" />
                </mx:FormItem>
            </mx:Form>
        </s:Panel>
    </s:Group>
 
</s:Application>

Or, you can set the showEffect and hideEffect effects in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_showEffect_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:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Panel {
            showEffect: showEff;
            hideEffect: hideEff;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:Parallel id="showEff">
            <s:Rotate3D angleYFrom="-45" angleYTo="0" />
            <s:Fade alphaFrom="0.0" alphaTo="1.0" />
        </s:Parallel>
        <s:Parallel id="hideEff">
            <s:Rotate3D angleYFrom="0" angleYTo="-45" />
            <s:Fade alphaFrom="1.0" alphaTo="0.0" />
        </s:Parallel>
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Toggle Panel visibility"
                click="panel.visible = !panel.visible;" />
    </mx:ApplicationControlBar>
 
    <s:Group width="100%" height="100%">
        <s:Panel id="panel"
                title="Panel title"
                horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
            <mx:Form>
                <mx:FormItem label="From:" width="100%">
                    <s:DropDownList id="fromEmail"
                            requireSelection="true"
                            width="100%">
                        <s:ArrayList source="me@me.com" />
                    </s:DropDownList>
                </mx:FormItem>
                <mx:FormItem label="To:" width="100%">
                    <s:TextInput id="toEmail" width="100%" />
                </mx:FormItem>
                <mx:FormItem label="Message:" width="100%">
                    <s:TextArea id="message" width="100%" />
                </mx:FormItem>
                <mx:FormItem horizontalAlign="right" width="100%">
                    <s:Button label="Send" />
                </mx:FormItem>
            </mx:Form>
        </s:Panel>
    </s:Group>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/30/creating-a-show-effect-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_showEffect_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"
        initialize="init();">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.effects.Parallel;
            import spark.components.Button;
            import spark.components.DropDownList;
            import spark.components.Group;
            import spark.components.Panel;
            import spark.components.TextArea;
            import spark.components.TextInput;
            import spark.effects.Fade;
            import spark.effects.Rotate3D;
            import spark.layouts.VerticalLayout;
 
            private var showEff:Parallel;
            private var hideEff:Parallel;
            private var btn:Button;
            private var panel:Panel;
            private var fromEmail:DropDownList;
            private var toEmail:TextInput;
            private var message:TextArea;
            private var sendBtn:Button;
 
            private function init():void {
                var showRotate:Rotate3D = new Rotate3D();
                showRotate.angleYFrom = -90;
                showRotate.angleYTo = 0;
 
                var showFade:Fade = new Fade();
                showFade.alphaFrom = 0.0;
                showFade.alphaTo = 1.0;
 
                var hideRotate:Rotate3D = new Rotate3D();
                hideRotate.angleYFrom = 0;
                hideRotate.angleYTo = -90;
 
                var hideFade:Fade = new Fade();
                hideFade.alphaFrom = 1.0;
                hideFade.alphaTo = 0.0;
 
                showEff = new Parallel();
                showEff.children = [showRotate, showFade];
 
                hideEff = new Parallel();
                hideEff.children = [hideRotate, hideFade];
 
                btn = new Button();
                btn.label = "Toggle Panel visibility";
                btn.addEventListener(MouseEvent.CLICK, btn_click);
 
                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.percentWidth = 100;
                appControlBar.setStyle("cornerRadius", 0);
                appControlBar.addElement(btn);
                addElementAt(appControlBar, 0);
 
                fromEmail = new DropDownList();
                fromEmail.dataProvider = new ArrayList(["me@me.com"]);
                fromEmail.requireSelection = true;
                fromEmail.percentWidth = 100;
 
                toEmail = new TextInput();
                toEmail.percentWidth = 100;
 
                message = new TextArea();
                message.percentWidth = 100;
 
                sendBtn = new Button();
                sendBtn.label = "Send";
 
                var gr:Group = new Group();
                gr.percentWidth = 100;
                gr.percentHeight = 100;
                addElement(gr);
 
                panel = new Panel();
                gr.addElement(panel);
                panel.title = "Panel title";
                panel.layout = new VerticalLayout();
                panel.horizontalCenter = 0;
                panel.verticalCenter = 0;
                panel.setStyle("showEffect", showEff);
                panel.setStyle("hideEffect", hideEff);
 
                var form:Form = new Form();
                panel.addElement(form);
 
                var formItem1:FormItem = new FormItem();
                form.addElement(formItem1);
                formItem1.label = "From:";
                formItem1.percentWidth = 100;
                formItem1.addElement(fromEmail);
 
                var formItem2:FormItem = new FormItem();
                form.addElement(formItem2);
                formItem2.label = "To:";
                formItem2.percentWidth = 100;
                formItem2.addElement(toEmail);
 
                var formItem3:FormItem = new FormItem();
                form.addElement(formItem3);
                formItem3.label = "Message:";
                formItem3.percentWidth = 100;
                formItem3.addElement(message);
 
                var formItem4:FormItem = new FormItem();
                form.addElement(formItem4);
                formItem4.percentWidth = 100;
                formItem4.setStyle("horizontalAlign", "right");
                formItem4.addElement(sendBtn);
            }
 
            private function btn_click(evt:MouseEvent):void {
                panel.visible = !panel.visible;
            }
        ]]>
    </fx:Script>
 
</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.

5 thoughts on “Creating a show effect on a Spark Panel container in Flex 4

  1. Great example and great website…wish I cud learn from You….thanks a lot…had been for something like this.

Comments are closed.