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

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 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/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.

[GoogleAdsWide]

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.

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

  1. 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?

    1. @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. 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.

    1. @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

Comments are closed.