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/2010/04/29/displaying-icons-in-a-spark-list-control-in-flex-4-2/ -->
<s:Application name="Spark_List_itemRenderer_icon_test"
        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"
            itemRenderer="skins.StarredItemRenderer"
            width="100"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Red" />
                <fx:Object label="Orange" starred="true" />
                <fx:Object label="Yellow" starred="false" />
                <fx:Object label="Green" starred="true" />
                <fx:Object label="Blue" starred="true" />
                <fx:Object label="The quick brown fox jumps over the lazy dog" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List control item renderer, skins/StarredItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/29/displaying-icons-in-a-spark-list-control-in-flex-4-2/ -->
<s:ItemRenderer name="StarredItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="true">
 
    <fx:Script>
        <![CDATA[
            override public function set data(obj:Object):void {
                if (obj.hasOwnProperty("starred") && (obj['starred'] == true)) {
                    star.visible = true;
                }
            }
        ]]>
    </fx:Script>
 
    <s:HGroup verticalAlign="middle" left="3" right="3" top="3" bottom="3" gap="2">
        <s:BitmapImage id="star" source="@Embed('assets/bullet_star.png')" visible="false" />
        <s:Label id="labelDisplay" maxDisplayedLines="1" width="100%" />
    </s:HGroup>
 
</s:ItemRenderer>

Icons copyright of famfamfam.com.

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.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public static const accept:Class;
 
            [Embed("assets/anchor.png")]
            public static const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    cursorManager.setCursor(dat.curses);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void {
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            width="200"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="{anchor}" />
                <mx:Object label="Accept cursor" curses="{accept}" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>

Or, if you didn’t want to use data binding in the data provider, you could set a simple string to an embedded image, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/changing-the-mouse-cursor-when-rolling-over-items-in-an-mx-list-control-in-flex/ -->
<mx:Application name="MX_List_itemRollOver_cursor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import flash.utils.getDefinitionByName;
            import mx.events.ListEvent;
 
            [Embed("assets/accept.png")]
            public const accept:Class;
 
            [Embed("assets/anchor.png")]
            public const anchor:Class;
 
            protected function list_itemRollOverHandler(evt:ListEvent):void {
                var dat:Object = evt.itemRenderer.data;
                if (dat.hasOwnProperty("curses")) {
                    var cursorClass:Class = this[dat.curses] as Class;
                    cursorManager.setCursor(cursorClass);
                }
            }
 
            protected function list_itemRollOutHandler(evt:ListEvent):void{
                cursorManager.removeAllCursors();
            }
        ]]>
    </mx:Script>
 
    <mx:List id="list"
            itemRollOver="list_itemRollOverHandler(event);"
            itemRollOut="list_itemRollOutHandler(event);">
        <mx:dataProvider>
            <mx:ArrayCollection>
                <mx:Object label="Anchor cursor" curses="anchor" />
                <mx:Object label="default cursor" />
                <mx:Object label="Anchor cursor" curses="anchor" />
                <mx:Object label="Accept cursor" curses="accept" />
            </mx:ArrayCollection>
        </mx:dataProvider>
    </mx:List>
 
</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function tree_itemClick(evt:ListEvent):void {
                var t:Tree = evt.currentTarget as Tree;
                var dataObj:Object = evt.itemRenderer.data;
                if (dataObj.hasOwnProperty("@src")) {
                    swfLoader.source = dataObj.@src;
                } else if (t.dataDescriptor.isBranch(t.selectedItem)) {
                    swfLoader.source = null;
                    panel.status = "";
                }
            }

            private function tree_labelFunc(item:Object):String {
                var suffix:String = "";
                if (tree.dataDescriptor.isBranch(item)) {
                    suffix = " (" + item.children().length() + ")";
                }
                return item.@label + suffix;
            }

            private function swfLoader_complete(evt:Event):void {
                panel.status = (swfLoader.bytesTotal/1024).toFixed(2) + 'KB';
            }
        ]]>
    </mx:Script>

    <mx:XML id="dp" source="data/dp.xml" />

    <mx:HDividedBox width="100%" height="100%">
        <mx:Panel width="200" height="100%">
            <mx:Tree id="tree"
                    dataProvider="{dp}"
                    labelFunction="tree_labelFunc"
                    showRoot="false"
                    width="100%"
                    height="100%"
                    itemClick="tree_itemClick(event);" />
        </mx:Panel>
        <mx:Panel id="panel"
                width="100%"
                height="100%"
                backgroundColor="white">
            <mx:SWFLoader id="swfLoader"
                    scaleContent="true"
                    width="100%"
                    height="100%"
                    complete="swfLoader_complete(event);" />
            <mx:ControlBar>
                <mx:LinkButton label="{swfLoader.source.toString()}" />
            </mx:ControlBar>
        </mx:Panel>
    </mx:HDividedBox>

</mx:Application>

data/dp.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/04/creating-a-simple-image-gallery-with-the-flex-tree-control/ -->
<root>
    <gallery label="RIA">
        <file label="ColdFusion" src="assets/cf_appicon.jpg" />
        <file label="Dreamweaver" src="assets/dw_appicon.jpg" />
        <file label="Flash" src="assets/fl_appicon.jpg" />
        <file label="Flash Player" src="assets/fl_player_appicon.jpg" />
        <file label="Flex" src="assets/fx_appicon.jpg" />
    </gallery>
</root>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/05/removing-duplicate-items-from-an-array-using-the-arrayfilter-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            private var keys:Object = {};

            /**
             * Called by the Application container's creationComplete
             * event handler. This method creates a new Array object
             * which will be used as a data provider as well as a
             * filtered view of that array which does not contain
             * duplicated items.
             */
            private function init():void {
                /* Create a dummy data source with some semi-random
                    data. */
                var arr:Array = [];
                arr.push({data:1, label:"one"});
                arr.push({data:1, label:"one"});
                arr.push({data:1, label:"one"});
                arr.push({data:1, label:"one"});
                arr.push({data:2, label:"two"});
                arr.push({data:2, label:"two"});
                arr.push({data:2, label:"two"});
                arr.push({data:1, label:"one"});
                arr.push({data:3, label:"three"});
                arr.push({data:3, label:"three"});

                /* Filter the original array and call the
                    removeDuplicates() function on each item
                    in the array. */
                var filteredArr:Array = arr.filter(removedDuplicates);

                arrColl.source = arr;
                dedupedArrColl.source = filteredArr;
            }

            /**
             * This method is used to filter an array so that no
             * duplicate items are created. It works by first
             * checking to see if a keys object already contains
             * a key equal to the current value of the item.data
             * value. If the key already exists, the  current item
             * will not be readded to the data provider. If the key
             * does not already exist, add the key to the keys
             * object and add this item to the data provider.
             */
            private function removedDuplicates(item:Object, idx:uint, arr:Array):Boolean {
                if (keys.hasOwnProperty(item.data)) {
                    /* If the keys Object already has this property,
                        return false and discard this item. */
                    return false;
                } else {
                    /* Else the keys Object does *NOT* already have
                        this key, so add this item to the new data
                        provider. */
                    keys[item.data] = item;
                    return true;
                }
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />
    <mx:ArrayCollection id="dedupedArrColl" />

    <mx:HBox>
        <mx:VBox>
            <mx:Label text="Original ({arrColl.length} items):" />
            <mx:List dataProvider="{arrColl}" />
        </mx:VBox>
        <mx:VBox>
            <mx:Label text="Filtered ({dedupedArrColl.length} items):" />
            <mx:List dataProvider="{dedupedArrColl}" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.