Setting the layout direction on a Spark Panel container in Flex 4

The following example shows how you can set the layout direction on a Flex 4 Spark Panel container by setting the layout property to use a basic/absolute layout (<BasicLayout> – default), vertical layout (<VerticalLayout>), or horizontal layout (<HorizontalLayout>).

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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".

In previous versions of the Flex SDK (v3 and lower), you could set a Panel container’s layout direction by settnig the layout property to either “vertical” (default) or “horizontal”, as seen in the following snippet:

<mx:Panel title="I'm a Halo Panel title" layout="horizontal">
    <mx:Button label="One" />
    <mx:Button label="Two" />
    <mx:Button label="Three" />
    <mx:Button label="Four" />
    <mx:Button label="Five" />
</mx:Panel>

In Flex 4 you can create a Spark Panel container and use a vertical layout by setting the layout property to a VerticalLayout object, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/18/setting-the-layout-direction-on-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_layout_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 title="I'm a Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:Button label="One" />
        <s:Button label="Two" />
        <s:Button label="Three" />
        <s:Button label="Four" />
        <s:Button label="Five" />
    </s:Panel>

</s:Application>

Or, if you wanted to use a horizontal layout instead, you could set the layout property to an HorizontalLayout object, or if you wanted to use an absolute layout (similar to a Canvas container) you could set the layout property to a BasicLayout object.

You can also change a Spark Panel containers layout property dynamically using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/18/setting-the-layout-direction-on-a-fxpanel-container-in-flex-gumbo/ -->
<s:Application name="Spark_Panel_layout_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">

    <fx:Script>
        <![CDATA[
            import spark.layouts.supportClasses.LayoutBase;
            import mx.events.IndexChangedEvent;
            import spark.layouts.*;

            protected function dropDownList_selectionChanged(evt:IndexChangedEvent):void {
                var panelLayout:LayoutBase;
                switch (dropDownList.selectedItem) {
                    case "VerticalLayout":
                        panelLayout = new VerticalLayout();
                        break;
                    case "HorizontalLayout":
                        panelLayout = new HorizontalLayout();
                        break;
                    case "TileLayout":
                        var tileLayout:TileLayout = new TileLayout();
                        tileLayout.requestedColumnCount = 3;
                        panelLayout = tileLayout;
                        break;
                    default:
                        panelLayout = new BasicLayout();
                        break;
                }
                panel.layout = panelLayout;
            }
        ]]>
    </fx:Script>

    <mx:Form>
        <mx:FormItem label="layout:">
            <s:DropDownList id="dropDownList"
                    requiresSelection="true"
                    selectionChanged="dropDownList_selectionChanged(event);">
                <s:dataProvider>
                    <s:ArrayList>
                        <fx:String>VerticalLayout</fx:String>
                        <fx:String>HorizontalLayout</fx:String>
                        <fx:String>TileLayout</fx:String>
                    </s:ArrayList>
                </s:dataProvider>
            </s:DropDownList>
        </mx:FormItem>
    </mx:Form>

    <s:Panel id="panel"
            title="I'm a Spark Panel title"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <s:Button label="One" />
        <s:Button label="Two" />
        <s:Button label="Three" />
        <s:Button label="Four" />
        <s:Button label="Five" />
    </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.

Tagged as: BasicLayout, layout