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

By Peter deHaan On March 24, 2009 · 11 Comments

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.

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.

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

Pheng Vang says:

August 22, 2009 at 9:23 am

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

Reply
maddec says:

September 30, 2009 at 7:06 am

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

Reply
- Peter deHaan says:
  
  September 30, 2009 at 7:49 am
  
  @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
  
  Reply
  - Jerry says:
    
    October 18, 2011 at 7:59 am
    
    Thanks guys – the text book I’m reading uses “.default” instead of “.spark”, so I was quickly losing the will to live…
johans says:

February 15, 2010 at 10:35 am

Nice example. Metadata does not need to be enclosed in a CDATA block.

Reply
- Peter deHaan says:
  
  February 15, 2010 at 12:07 pm
  
  @johans,
  
  Correct, I just copied whatever the default Spark skin had at the time.
  
  Peter
  
  Reply
fox says:

February 28, 2010 at 3:02 am

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

Reply
- Peter deHaan says:
  
  March 1, 2010 at 11:52 am
  
  @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
  
  Reply
Actionscript Developer says:

August 23, 2011 at 11:16 am

Hi,

This tutorial helped me a lot thanks

Reply
Alex Druga says:

December 19, 2011 at 3:51 am

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?

Reply
Alex Druga says:

December 19, 2011 at 3:53 am

Oh.. nevermind… I just found the orientation property
silly me…

Reply