Setting the layout direction on a tile layout Spark List control in Flex 4

By On March 25, 2009 · 4 Comments

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.

 
Tagged with: •
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

  • Add Widgets (Content Sidebar)

    This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

Share
Facebook Twitter

4 Responses to Setting the layout direction on a tile layout Spark List control in Flex 4

  1. James says:
    May 27, 2010 at 11:02 pm

    Hi, is it possible to auto adjust the list to fit it’s content when in tile layout? because if I have more that 6 items in my list it starts to show the vertical scroll. is it possible to show all the items without having the scroll on a Tile Layout?

    • Peter deHaan says:
      May 28, 2010 at 7:15 am

      @James,

      Not sure I understand what you’re doing. In the following example, my TileLayout Spark Tree control automatically tries to resize to the number of items in the data provider:

       
<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:List id="lst" horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:TileLayout requestedColumnCount="6"
                    columnWidth="100" rowHeight="30"
                    horizontalGap="0" verticalGap="0" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten,Eleven,Twelve,Thirteen,Fourteen,Fifteen,Sixteen,Seventeen,Eighteen,Nineteen]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

      Are you explicitly setting a width or height on your List?

      Peter

  2. Prashant Chaudhari says:
    August 27, 2010 at 11:38 pm

    When i change the dataprovider of list with tile layout,it is not updating the list properly.After changinmg the dataProvider i have called invalidateDisplayList()
    still it shows some items from previous dataProvider value.
    Please Help.

    • Peter deHaan says:
      August 28, 2010 at 12:30 am

      @Prashant Chaudhari,

      I don’t think I’ve seen that issue before. Can you please file a bug with a simple test case at http://bugs.adobe.com/flex/ and somebody on the Flex team can take a look. Also, if you post the bug number here, some of us can vote and I can try and get somebody to investigate a bit sooner.

      Thanks,
      Peter