Flex Examples » TileLayout http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a tile layout Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/#comments Thu, 16 Apr 2009 06:59:24 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ The following example shows how you can create a Spark DropDownList with a tile layout in Flex 4 by setting the layout property to a TileList object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_TileLayout_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:DropDownList id="dropDownList" labelField="label" requireSelection="true" skinClass="skins.CustomDropDownListSkin" horizontalCenter="0" width="100" top="20"> <s:dataProvider> <s:ArrayList> [...]]]> The following example shows how you can create a Spark DropDownList with a tile layout in Flex 4 by setting the layout property to a TileList object.

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/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_TileLayout_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:DropDownList id="dropDownList"
            labelField="label"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            horizontalCenter="0"
            width="100"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="The" />
                <fx:Object label="Quick" />
                <fx:Object label="Brown" />
                <fx:Object label="Fox" />
                <fx:Object label="Jumps" />
                <fx:Object label="Over" />
                <fx:Object label="The" />
                <fx:Object label="Lazy" />
                <fx:Object label="Dog" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

And the custom skin class, skins/CustomDropDownListSkin.mxml, is as follows

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Skin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5"> 
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 
 
    <!--- The PopUpAnchor control that opens the drop-down list. -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
            left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
            popUpPosition="below" popUpWidthMatchesAnchorWidth="false">
 
        <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22" >
            <!-- drop shadow -->
            <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" 
                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
 
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x686868" weight="1"/>
                </s:stroke>
            </s:Rect>
 
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
 
            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false"
                    minViewportInset="1" verticalScrollPolicy="on">
                <!--- The container for the data items in the drop-down list. -->
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:TileLayout horizontalGap="0" verticalGap="0"
                                requestedColumnCount="3" requestedRowCount="2" columnWidth="100" />
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
 
    <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
            skinClass="spark.skins.spark.DropDownListButtonSkin" />
 
    <!--- The prompt area of the DropDownList. -->
    <s:SimpleText id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
            left="7" right="30" top="2" bottom="2" verticalCenter="1" /> 
 
</s:Skin>

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.

 
]]> http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/feed/ 4 Creating a tile layout Spark ButtonBar control in Flex 4 http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/#comments Thu, 26 Mar 2009 14:08:04 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ In a previous example, “Creating a vertical Spark ButtonBar control in Flex 4″, we saw how you can create a vertical Spark ButtonBar control in Flex 4 by setting the layout property to a VerticalLayout object.

The following example shows how you can create a tile layout on the Spark ButtonBar control in Flex [...]]]> In a previous example, “Creating a vertical Spark ButtonBar control in Flex 4″, we saw how you can create a vertical Spark ButtonBar control in Flex 4 by setting the layout property to a VerticalLayout object.

The following example shows how you can create a tile layout on the Spark ButtonBar control in Flex 4 by setting the layout property to a TileLayout object.

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/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_TileLayout_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:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0"
            skinClass="skins.CustomButtonBarSkin">
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

The custom skin class, skins/CustomButtonBarSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Skin name="CustomButtonBarSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>

    <fx:Metadata>
        <![CDATA[
            [HostComponent("spark.components.ButtonBar")]
        ]]>
    </fx:Metadata>

    <fx:Declarations>
        <fx:Component id="middleButton">
            <s:ButtonBarButton skinClass="spark.skins.default.ButtonBarMiddleButtonSkin" />
        </fx:Component>
    </fx:Declarations>

    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:TileLayout requestedColumnCount="3"
                    columnWidth="200"
                    horizontalGap="-1"
                    verticalGap="-1" />
        </s:layout>
    </s:DataGroup>

</s:Skin>

View source is enabled in the following example.

You can also set the skinClass style 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/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_TileLayout_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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";

        s|ButtonBar {
            skinClass: ClassReference("skins.CustomButtonBarSkin");
        }
    </fx:Style>

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:ButtonBar>

</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/ -->
<s:Application name="Spark_ButtonBar_TileLayout_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 skins.CustomButtonBarSkin;

            private function btn_click(evt:MouseEvent):void {
                btnBar.setStyle("skinClass", CustomButtonBarSkin);
            }
        ]]>
    </fx:Script>

    <s:Button id="btn"
            label="Set skin class"
            click="btn_click(event);"
            left="10"
            top="10" />

    <s:ButtonBar id="btnBar"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
        </s:dataProvider>
    </s:ButtonBar>

</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/03/26/creating-a-tile-layout-fxbuttonbar-control-in-flex-gumbo/feed/ 1 Setting the layout direction on a tile layout Spark List control in Flex 4 http://blog.flexexamples.com/2009/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/#comments Thu, 26 Mar 2009 03:21:37 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/ The following example shows how you can set the tile layout direction on a Flex 4 Spark List control by setting the orientation property on the TileLayout layout to one of the static constants in the spark.layouts.TileOrientation class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/ --> <s:Application name="Spark_List_layout_TileLayout_orientation_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"> [...]]]> The following example shows how you can set the tile layout direction on a Flex 4 Spark List control by setting the orientation property on the TileLayout layout to one of the static constants in the spark.layouts.TileOrientation class.

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/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_layout_TileLayout_orientation_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.TileOrientation;
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <s:ArrayList id="arrList">
            <s:BitmapImage source="assets/ai_appicon-tn.gif" />
            <s:BitmapImage source="assets/air_appicon-tn.gif" />
            <s:BitmapImage source="assets/dw_appicon-tn.gif" />
            <s:BitmapImage source="assets/fl_appicon-tn.gif" />
            <s:BitmapImage source="assets/fl_player_appicon-tn.gif" />
            <s:BitmapImage source="assets/fw_appicon-tn.gif" />
            <s:BitmapImage source="assets/fx_appicon-tn.gif" />
            <s:BitmapImage source="assets/lr_appicon-tn.gif" />
        </s:ArrayList>
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="orientation:">
                <s:DropDownList id="dropDownList" requireSelection="true" width="100">
                    <s:dataProvider>
                        <s:ArrayList source="{[TileOrientation.COLUMNS, TileOrientation.ROWS]}" />
                    </s:dataProvider>
                </s:DropDownList>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:List id="list"
            dataProvider="{arrList}"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:TileLayout requestedColumnCount="3"
                    requestedRowCount="2"
                    horizontalGap="0"
                    verticalGap="0"
                    orientation="{dropDownList.selectedItem}" />
        </s:layout>
    </s:List>
 
</s:Application>

View source is enabled in the following example.


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/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_List_layout_TileLayout_orientation_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();">
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.events.IndexChangedEvent;
            import spark.components.DropDownList;
            import spark.components.List;
            import spark.events.IndexChangeEvent;
            import spark.layouts.TileLayout;
            import spark.layouts.TileOrientation;
            import spark.primitives.BitmapImage;
            import spark.skins.spark.DefaultComplexItemRenderer;
 
 
            private var dropDownList:DropDownList;
            private var list:List;
            private var arrList:ArrayList;
 
            private function init():void {
                /* Adobe Illustrator */
                var bmpImgAi:BitmapImage = new BitmapImage();
                bmpImgAi.source = "assets/ai_appicon-tn.gif";
                /* Adobe AIR */
                var bmpImgAIR:BitmapImage = new BitmapImage();
                bmpImgAIR.source = "assets/air_appicon-tn.gif";
                /* Adobe Dreamweaver */
                var bmpImgDw:BitmapImage = new BitmapImage();
                bmpImgDw.source = "assets/dw_appicon-tn.gif";
                /* Adobe Flash Professional */
                var bmpImgFl:BitmapImage = new BitmapImage();
                bmpImgFl.source = "assets/fl_appicon-tn.gif";
                /* Adobe Flash Player */
                var bmpImgFlP:BitmapImage = new BitmapImage();
                bmpImgFlP.source = "assets/fl_player_appicon-tn.gif";
                /* Adobe Fireworks */
                var bmpImgFw:BitmapImage = new BitmapImage();
                bmpImgFw.source = "assets/fw_appicon-tn.gif";
                /* Adobe Flex */
                var bmpImgFx:BitmapImage = new BitmapImage();
                bmpImgFx.source = "assets/fx_appicon-tn.gif";
                /* Adobe Lightroom */
                var bmpImgLr:BitmapImage = new BitmapImage();
                bmpImgLr.source = "assets/lr_appicon-tn.gif";
 
                arrList = new ArrayList();
                arrList.addItem(bmpImgAi);
                arrList.addItem(bmpImgAIR);
                arrList.addItem(bmpImgDw);
                arrList.addItem(bmpImgFl);
                arrList.addItem(bmpImgFlP);
                arrList.addItem(bmpImgFw);
                arrList.addItem(bmpImgFx);
                arrList.addItem(bmpImgLr);
 
                dropDownList = new DropDownList();
                dropDownList.dataProvider = new ArrayList([TileOrientation.COLUMNS, TileOrientation.ROWS]);
                dropDownList.requireSelection = true;
                dropDownList.width = 100;
                dropDownList.addEventListener(IndexChangedEvent.CHANGE, dropDownList_change);
 
                var formItem:FormItem = new FormItem();
                formItem.label = "orientation:";
                formItem.addElement(dropDownList);
 
                var form:Form = new Form();
                form.styleName = "plain";
                form.addElement(formItem);
 
                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.percentWidth = 100;
                appControlBar.setStyle("cornerRadius", 0);
                appControlBar.addElement(form);
                addElementAt(appControlBar, 0);
 
                var tileLayout:TileLayout = new TileLayout();
                tileLayout.requestedColumnCount = 3;
                tileLayout.requestedRowCount = 2;
                tileLayout.horizontalGap = 0;
                tileLayout.verticalGap = 0;
                tileLayout.orientation = dropDownList.selectedItem;
 
                list = new List();
                list.dataProvider = arrList;
                list.itemRenderer = new ClassFactory(DefaultComplexItemRenderer);
                list.layout = tileLayout;
                list.horizontalCenter = 0;
                list.verticalCenter = 0;
                addElement(list);
            }
 
            protected function dropDownList_change(evt:IndexChangeEvent):void {
                TileLayout(list.layout).orientation = dropDownList.selectedItem;
            }
        ]]>
    </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.

 
]]> http://blog.flexexamples.com/2009/03/25/setting-the-layout-direction-on-a-tile-layout-fxlist-control-in-flex-gumbo/feed/ 4 Creating a tile list using the Spark List control in Flex 4 http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/#comments Wed, 25 Mar 2009 04:35:33 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ The following example shows how you can create a simple TileList control in Flex 4 using the Spark List control and using a TileLayout layout with the default complex item renderer to display images.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ --> <s:Application name="SparkList_layout_TileLayout_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:List id="list" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer" [...]]]> The following example shows how you can create a simple TileList control in Flex 4 using the Spark List control and using a TileLayout layout with the default complex item renderer to display images.

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/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="SparkList_layout_TileLayout_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:List id="list"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0"
            verticalCenter="0">
        <s:layout>
            <s:TileLayout requestedColumnCount="3"
                    requestedRowCount="2"
                    horizontalGap="0"
                    verticalGap="0" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

View source is enabled in the following example.


You can also set the layout property in a custom skin file and then set the skinClass style, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="SparkList_layout_TileLayout_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:List id="list"
            skinClass="skins.CustomListSkin"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

The custom Spark List skin file, skins/CustomListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="112" minHeight="112"
        alpha.disabled="0.5"
        blendMode="normal">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.List")]
    ]]>
    </fx:Metadata> 
 
    <fx:Script>
        /* Define the skin elements that should not be colorized. 
           For list, the skin itself is colorized but the individual parts are not. */
        static private const exclusions:Array = ["scroller", "background"];
 
        override public function get colorizeExclusions():Array {
            return exclusions;
        }
 
        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
        static private const contentFill:Array = ["bgFill"];
 
        override public function get contentItems():Array {return contentFill};
    </fx:Script>
 
    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0x686868" weight="1"/>
        </s:stroke>
    </s:Rect>
 
    <!-- fill -->
    <!--- Defines the background appearance of the list-based component. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
        <s:fill>
            <!--- Defines the color of the background. The default color is 0xFFFFFF. -->
            <s:SolidColor id="bgFill" color="0xFFFFFF" />
        </s:fill>
    </s:Rect>
 
    <!--- The Scroller component to add scroll bars to the list. -->
    <s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" focusEnabled="false">
        <!--- The container for the data items. -->
        <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
            <s:layout>
                <s:TileLayout requestedColumnCount="3"
                        requestedRowCount="2"
                        horizontalGap="0"
                        verticalGap="0" />
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
 
</s:SparkSkin>

You can also set the skinClass style 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/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="SparkList_layout_TileLayout_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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        s|List {
            skinClass: ClassReference("skins.CustomListSkin");
        }
    </fx:Style>
 
    <s:List id="list"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

Or, you can set the skinClass style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/ -->
<s:Application name="SparkList_layout_TileLayout_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 skins.CustomListSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                list.setStyle("skinClass", CustomListSkin);
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
              label="Set skin class"
              click="btn_click(event);"
              x="10" y="10" />
 
    <s:List id="list"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0"
            verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</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/03/24/creating-a-tile-list-using-the-fxlist-control-in-flex-gumbo/feed/ 11 Setting a column count and row count on a TileLayout FxList component in Flex Gumbo http://blog.flexexamples.com/2009/02/26/setting-a-column-count-and-row-count-on-a-tilelayout-fxlist-component-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/26/setting-a-column-count-and-row-count-on-a-tilelayout-fxlist-component-in-flex-gumbo/#comments Thu, 26 Feb 2009 14:56:09 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/26/setting-a-column-count-and-row-count-on-a-tilelayout-fxlist-component-in-flex-gumbo/ The following example shows how you can set a column count and row count on a Flex Gumbo FxList contrl with a tile layout by setting the columnCount, columnWidth, rowCount, and rowHeight properties on the TileLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 [...]]]> The following example shows how you can set a column count and row count on a Flex Gumbo FxList contrl with a tile layout by setting the columnCount, columnWidth, rowCount, and rowHeight properties on the TileLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/26/setting-a-column-count-and-row-count-on-a-tilelayout-fxlist-component-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_TileLayout_columnCount_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0">
        <layout>
            <TileLayout columnCount="3"
                    columnWidth="100"
                    rowCount="2"
                    rowHeight="100"
                    horizontalGap="0"
                    verticalGap="0" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/26/setting-a-column-count-and-row-count-on-a-tilelayout-fxlist-component-in-flex-gumbo/feed/ 0 Setting the layout direction on an FxList control in Flex Gumbo http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/#comments Wed, 25 Feb 2009 05:09:55 +0000 Peter deHaan http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ The following examples show how you can set the layout direction on a Flex Gumbo FxList control by setting the layout property to a VerticalLayout object (default), HorizontalLayout object, or a TileLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo [...]]]> The following examples show how you can set the layout direction on a Flex Gumbo FxList control by setting the layout property to a VerticalLayout object (default), HorizontalLayout object, or a TileLayout object.

Full code after the jump.

To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.

By default the FxList control uses a vertical layout, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            width="150"
            height="100">
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

If you wanted to use a horizontal layout simply set the layout property to a HorizontalLayout object, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            width="150"
            height="100">
        <layout>
            <HorizontalLayout gap="0" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

Or, if you wanted to use a tile layout (similar to a Halo TileList control) simply set the layout property to a TileLayout object, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/ -->
<FxApplication name="FxList_layout_test"
        xmlns="http://ns.adobe.com/mxml/2009"
        backgroundColor="white">

    <FxList id="list"
            horizontalCenter="0"
            verticalCenter="0"
            width="150"
            height="100">
        <layout>
            <TileLayout horizontalGap="0" verticalGap="0" />
        </layout>
        <dataProvider>
            <ArrayCollection>
                <String>1. The</String>
                <String>2. Quick</String>
                <String>3. Brown</String>
                <String>4. Fox</String>
                <String>5. Jumps</String>
                <String>6. Over</String>
                <String>7. The</String>
                <String>8. Lazy</String>
                <String>9. Dog</String>
            </ArrayCollection>
        </dataProvider>
    </FxList>

</FxApplication>

This entry is based on a beta version of the Flex Gumbo 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 Gumbo SDK.

 
]]> http://blog.flexexamples.com/2009/02/24/setting-the-layout-direction-on-an-fxlist-control-in-flex-gumbo/feed/ 0