Creating a tile list using the Spark List control in Flex 4

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

[GoogleAdsWide]

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.

11 thoughts on “Creating a tile list using the Spark List control in Flex 4

  1. Great concept, I tried using the itemRenderer with a custom item renderer but I never thought of doing a Tile List this way without the actual Tile list. This gives me new insight on doing things.

    Thanks

  2. Please note that at the time I write this comment, DefaultComplexItemRenderer is located in the following package:
    spark.skins.default.DefaultComplexItemRenderer

    1. @maddec,

      Correct. I believe the DefaultComplexItemRenderer was in the spark.skins.default.* package, but then moved to the spark.skins.spark.* package in newer builds.

      In fact, according to http://opensource.adobe.com/wiki/display/flexsdk/Rename+List the package was renamed around June 15th (which would mean I’m guessing you’re using a build older than 4.0.0.7756):

      Note: The spark.skins.default.* package is changing to spark.skins.spark.* on Monday, June 15.

      Peter

      1. Thanks guys – the text book I’m reading uses “.default” instead of “.spark”, so I was quickly losing the will to live…

  3. Nice,
    but how to reenable snapping for the rows ?
    Free scrolling looks anytime broken since you can even scroll so that one visual item is half seen.

    Please reenable Snapping for Spark Components

    1. @fox,

      I don’t believe that the old MX scrolling behavior is available using the newer Spark components (at least not when dragging the scroll bar thumb in a s:List or similar controls). You do get the MX behavior when scrolling using the keyboard, or clicking the ScrollBar track, increment, or decrement buttons though.
      I’ve filed an enhancement request at http://bugs.adobe.com/jira/browse/SDK-25700, feel free to vote and/or add any additional comments you want in the bug report.

      Thanks,
      Peter

  4. Hi,
    I having trouble setting the direction of the layout as there seems to be no such property in TileLayout.
    I can’t use requestedColumnCount or requestedRowCount because i don’t know in advance how much stuff I’m going to be rendering.

    Any thoughts?

Comments are closed.