Flex Examples » List (Spark)

Fading an item renderer background fill on a Spark List control in Flex 4

Peter deHaan — Fri, 25 Jun 2010 22:12:20 +0000

The following example shows how you can fade an item renderer background fill on a Spark List control in Flex 4 by creating a custom item renderer, setting the Boolean autoDrawBackground property to false, drawing your own background fill, and then setting a fade transition from the normal and hovered states.

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.

"1.0" encoding="utf-8"?>

 name="Spark_List_itemRenderer_fade_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">
 
     id="lst"
            itemRenderer="skins.FadingItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="7" />
        >
        >
             source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="FadingItemRenderer"
        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="false">
    >
         name="normal" />
         name="hovered" />
         name="selected" />
    >
    >
         fromState="normal" toState="hovered" autoReverse="true">
             target="{bgRect}" duration="600" />
        >
    >
 
     id="bgRect"
            includeIn="hovered,selected"
            left="0" right="0" top="0" bottom="0">
        >
             color="{getStyle('rollOverColor')}"
                          color.selected="{getStyle('selectionColor')}" />
        >
    >
 
     id="labelDisplay"
            left="5" right="5" top="5" bottom="4" />
 
>

View source is enabled in the following example.

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.

Creating a radio button item renderer on a Spark List control in Flex 4

Peter deHaan — Thu, 20 May 2010 15:39:48 +0000

The following example shows how you can use a Spark RadioButton control as an item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

"1.0" encoding="utf-8"?>

 name="Spark_List_itemRenderer_RadioButton_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">
    >
         text="selected RadioButton: {dgr1.selection.label}" />
    >
 
    >
         id="dgr1" selectedValue="Three" />
    >
 
     id="lst"
            itemRenderer="skins.RadioButtonItemRen"
            width="100"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="6" />
        >
        >
            >
                 val="One" gr="{dgr1}" />
                 val="Two" gr="{dgr1}" />
                 val="Three" gr="{dgr1}" />
                 val="Four" gr="{dgr1}" />
                 val="Five" gr="{dgr1}" />
                 val="Six" gr="{dgr1}" />
                 val="Seven" gr="{dgr1}" />
                 val="Eight" gr="{dgr1}" />
                 val="Nine" gr="{dgr1}" />
            >
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="RadioButtonItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        autoDrawBackground="false"
        dataChange="itemrenderer1_dataChangeHandler(event);">
 
    >
        [CDATA[
            protected function itemrenderer1_dataChangeHandler(evt:Event):void {
                rdBtn.label = data.val;
                rdBtn.value = data.val;
                rdBtn.group = data.gr;
            }
        ]]>
    >
 
     id="rdBtn"
            left="3" right="3" top="5" bottom="5" />
 
>

Detecting the current state on a Spark List control item renderer in Flex 4

Peter deHaan — Sat, 15 May 2010 07:20:58 +0000

The following example shows how you can detect the current state on a Spark List control item renderer in Flex 4 by using the currentState property.

"1.0" encoding="utf-8"?>

 name="Spark_List_itemRenderer_currentState_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">
 
     id="lst"
            itemRenderer="skins.CustomItemRen"
            width="200"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="6" />
        >
        >
             source="[one,two,three,four,five,six,seven,eight,nine]" />
        >
    >
 
>

And the custom Spark item renderer, skins/CustomItemRen.mxml, is as follows:

"1.0" encoding="utf-8"?>

 name="CustomItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        autoDrawBackground="true">
    >
         name="normal" />
         name="hovered" />
         name="selected" />
         name="normalAndShowsCaret" />
         name="hoveredAndShowsCaret" />
         name="selectedAndShowsCaret" />
    >
 
     text="{itemIndex}) {currentState}"
            left="3" right="3" top="5" bottom="5" />
 
>

View source is enabled in the following example.

Detecting an item click event on a Spark List control in Flex 4

Peter deHaan — Sat, 15 May 2010 06:23:03 +0000

The following example shows how you can dispatch an itemClick event on a Spark List control in Flex 4 by creating a custom item renderer which listens for the click event and redispatches an itemClick event object.

"1.0" encoding="utf-8"?>

 name="Spark_List_itemClick_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">
    >
         horizontalAlign="center" verticalAlign="middle" />
    >
 
    >
        [CDATA[
            import mx.events.ItemClickEvent;
            import spark.events.IndexChangeEvent;
 
            protected function init():void {
                lst.addEventListener(ItemClickEvent.ITEM_CLICK, lst_itemClickHandler);
            }
 
            protected function lst_itemClickHandler(evt:ItemClickEvent):void {
                addAndAutoScroll(evt);
            }
 
            protected function lst_changeHandler(evt:IndexChangeEvent):void {
                addAndAutoScroll(evt);
            }
 
            protected function addAndAutoScroll(obj:Event):void {
                arrList.addItem({time:now(), type:obj.type, item:obj.currentTarget.selectedItem});
                grid.validateNow();
                grid.verticalScrollPosition = grid.maxVerticalScrollPosition;
            }
 
            protected function now():String {
                return new Date().toTimeString();
            }
        ]]>
    >
 
     id="lst"
            itemRenderer="skins.CustomItemClickItemRenderer"
            horizontalCenter="0" verticalCenter="0"
            initialize="init();"
            change="lst_changeHandler(event)">
        >
             gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="8" />
        >
        >
             source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine]" />
        >
    >
 
     id="grid" verticalScrollPolicy="on">
        >
             dataField="time" width="150" />
             dataField="type" />
             dataField="item" />
        >
        >
             id="arrList" />
        >
    >
 
>

And the custom Spark item renderer, skins/CustomItemClickItemRenderer.mxml, is as follows:

"1.0" encoding="utf-8"?>

 name="CustomItemClickItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        autoDrawBackground="true"
        click="itemrenderer1_clickHandler(event);">
 
    >
        [CDATA[
            import mx.events.ItemClickEvent;
 
            protected function itemrenderer1_clickHandler(evt:MouseEvent):void {
                var e:ItemClickEvent = new ItemClickEvent(ItemClickEvent.ITEM_CLICK, true);
                e.item = data;
                e.index = itemIndex;
                dispatchEvent(e);
            }
        ]]>
    >
 
     id="labelDisplay"
            left="3" right="3" top="5" bottom="5" />
 
>

Scrolling to a specific index in a Spark List control in Flex 4

Peter deHaan — Wed, 12 May 2010 23:51:45 +0000

In a previous example, “Scrolling to a specific index in a Flex List control”, we saw how you could scroll to a specific item index in Flex by using the scrollToIndex() method.

The following example shows how you can scroll to a specific item index in a Spark List control in Flex 4 by using the ensureIndexIsVisible() method.

"1.0" encoding="utf-8"?>

 name="Spark_List_ensureIndexIsVisible_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">
    >
        >
             label="ensureIndexIsVisible():">
                 id="sl1" 
                        minimum="0"
                        maximum="{list.dataProvider.length-1}"
                        change="sl1_changeHandler(event);" />
            >
             label="selectedIndex:">
                 id="sl2"
                        minimum="-1"
                        maximum="{list.dataProvider.length-1}"
                        value="-1"/>
            >
        >
    >
 
    >
        [CDATA[
            protected function sl1_changeHandler(evt:Event):void {
                list.ensureIndexIsVisible(sl1.value);
            }
 
            protected function list_labelFunc(item:Object):String {
                return item.index + ") " + item.label;
            }
        ]]>
    >
 
     id="list"
            labelFunction="list_labelFunc" 
            selectedIndex="{sl2.value}"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="5" />
        >
        >
            >
                 label="One"       index="0" />
                 label="Two"       index="1" />
                 label="Three"     index="2" />
                 label="Four"      index="3" />
                 label="Five"      index="4" />
                 label="Six"       index="5" />
                 label="Seven"     index="6" />
                 label="Eight"     index="7" />
                 label="Nine"      index="8" />
                 label="Ten"       index="9" />
                 label="Eleven"    index="10" />
                 label="Twelve"    index="11" />
                 label="Thirteen"  index="12" />
                 label="Fourteen"  index="13" />
                 label="Fifteen"   index="14" />
                 label="Sixteen"   index="15" />
                 label="Seventeen" index="16" />
                 label="Eighteen"  index="17" />
                 label="Ninteen"   index="18" />
                 label="Twenty"    index="19" />
            >
        >
    >
 
>

View source is enabled in the following example.

Setting a conditional text color on a Spark List control item renderer in Flex 4

Peter deHaan — Fri, 07 May 2010 00:56:44 +0000

The following example shows how you can set the text color on a Spark List control item renderer label in Flex 4 by setting the color style in the item renderer’s dataChange event handler.

"1.0"?>

 name="Spark_List_itemRenderer_color_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"> 
 
     id="lst"
            itemRenderer="skins.CustomColumnItemRen"
            width="250"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="5" />
        >
        >
            >
                 label="Adobe Systems Incorporated" price="32.49" pctChange="1.43%" />
                 label="Apple Inc." price="246.25" pctChange="-3.8%" />
                 label="Google Inc." price="498.67" pctChange="2.18%" />
                 label="Hewlett-Packard Company" price="48.33" pctChange="-5.11%" />
                 label="International Business Machines Corp." price="123.92" pctChange="-2.28%" />
                 label="NVIDIA Corporation" price="14.20" pctChange="2.07%" />
            >
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="CustomColumnItemRen"
        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"
        dataChange="dataChangeHandler(event);">
    >
         name="normal" />
         name="hovered" />
         name="selected" />
    >
    >
         gap="0"
                paddingLeft="3" paddingRight="3"
                paddingTop="5" paddingBottom="5"
                verticalAlign="middle" />
    >
 
    >
        [CDATA[
            import mx.formatters.CurrencyFormatter;
 
            protected function dataChangeHandler(evt:Event):void {
                const currFmt:CurrencyFormatter = new CurrencyFormatter();
                currFmt.precision = 2;
 
                const txtColor:Object = (parseFloat(data.pctChange) >= 0) ? "green" : "red";
 
                priceTxt.text = currFmt.format(data.price);
                priceTxt.toolTip = data.pctChange;
                priceTxt.setStyle("color", txtColor);
            }
        ]]>
    >
 
     id="labelDisplay" maxDisplayedLines="1" showTruncationTip="true" width="100%" />
     id="priceTxt" textAlign="right" fontWeight="bold" />
 
>

View source is enabled in the following example.

Setting a custom context menu on a Spark List control item renderer in Flex 4

Peter deHaan — Fri, 07 May 2010 00:27:11 +0000

The following example shows how you can set a custom context menu on a Spark List control item renderer in Flex 4 by setting the contextMenu property in the item renderer’s dataChange event.

"1.0"?>

 name="Spark_List_itemRenderer_contextMenu_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"> 
 
    >
        [CDATA[
            import mx.utils.StringUtil;
 
            protected function lst_labelFunc(data:Object):String {
                return StringUtil.substitute("[{0}]\t{1}", data.symbol, data.name);
            }
        ]]>
    >
 
     id="lst"
            labelFunction="lst_labelFunc"
            itemRenderer="skins.CustomColumnItemRen"
            width="250"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="5" />
        >
        >
            >
                 symbol="ADBE" name="Adobe Systems Incorporated" price="32.49" isNew="true" />
                 symbol="AAPL" name="Apple Inc." price="246.25" isNew="false" />
                 symbol="GOOG" name="Google Inc." price="498.67" isNew="true" />
                 symbol="HPQ" name="Hewlett-Packard Company" price="48.33" isNew="false" />
                 symbol="IBM" name="International Business Machines Corp." price="123.92" isNew="false" />
                 symbol="NVDA" name="NVIDIA Corporation" price="14.20" isNew="true" />
            >
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="CustomColumnItemRen"
        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"
        dataChange="dataChangeHandler(event);">
    >
         name="normal" />
         name="hovered" />
         name="selected" />
    >
    >
         gap="0"
                paddingLeft="3" paddingRight="3"
                paddingTop="3" paddingBottom="3"
                verticalAlign="middle" />
    >
 
    >
        [CDATA[
            import mx.controls.Alert;
            import mx.formatters.CurrencyFormatter;
 
            [Embed("assets/bullet_star.png")]
            protected const ICON:Class;
 
            protected function dataChangeHandler(evt:Event):void {
                const currFmt:CurrencyFormatter = new CurrencyFormatter();
                currFmt.precision = 2;
 
                priceTxt.text = currFmt.format(data.price);
                if (data.isNew) {
                    bmpImg.source = ICON;
                }
 
                // Create custom context menu. 
                const cmi:ContextMenuItem = new ContextMenuItem("Copy quote");
                cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cmi_menuItemSelect);
 
                const cm:ContextMenu = new ContextMenu();
                cm.hideBuiltInItems();
                cm.customItems = [cmi];
 
                contextMenu = cm;
            }
 
            protected function cmi_menuItemSelect(evt:ContextMenuEvent):void {
                System.setClipboard(labelDisplay.text + "\t" + priceTxt.text);
            }
        ]]>
    >
 
     id="labelDisplay" maxDisplayedLines="1" showTruncationTip="true" width="100%" />
     id="priceTxt" textAlign="right" fontWeight="bold" />
     id="bmpImg" width="16" height="16" />
 
>

View source is enabled in the following example.

Icons copyright of famfamfam.com.

Displaying icons in a Spark List control in Flex 4

Peter deHaan — Fri, 30 Apr 2010 00:48:47 +0000

The following example shows how you can display icons in a Spark List control in Flex 4 by creating a custom item renderer and setting the itemRenderer property.

"1.0" encoding="utf-8"?>

 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">
 
     id="lst"
            itemRenderer="skins.StarredItemRenderer"
            width="100"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0" horizontalAlign="justify" />
        >
        >
            >
                 label="Red" />
                 label="Orange" starred="true" />
                 label="Yellow" starred="false" />
                 label="Green" starred="true" />
                 label="Blue" starred="true" />
                 label="The quick brown fox jumps over the lazy dog" />
            >
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 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">
 
    >
        [CDATA[
            override public function set data(obj:Object):void {
                if (obj.hasOwnProperty("starred") && (obj['starred'] == true)) {
                    star.visible = true;
                }
            }
        ]]>
    >
 
     verticalAlign="middle" left="3" right="3" top="3" bottom="3" gap="2">
         id="star" source="@Embed('assets/bullet_star.png')" visible="false" />
         id="labelDisplay" maxDisplayedLines="1" width="100%" />
    >
 
>

Icons copyright of famfamfam.com.

Removing the rollover and selection highlight on a Spark List control in Flex 4

Peter deHaan — Thu, 22 Apr 2010 22:31:08 +0000

The following example shows how you can remove the item highlight background on a Spark List control in Flex 4 by setting the itemRenderer property to a custom item renderer with the Boolean autoDrawBackground property set to false.

"1.0" encoding="utf-8"?>

 name="Spark_List_itemRenderer_autoDrawBackground_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">
    >
        >
             label="List selectedIndex:">
                 text="{lst.selectedIndex}" />
            >
        >
    >
 
     id="lst"
            itemRenderer="skins.CustomItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        >
             gap="0" horizontalAlign="justify" requestedRowCount="5" />
        >
        >
            >
                 label="One" />
                 label="Two" />
                 label="Three" />
                 label="Four" />
                 label="Five" />
                 label="Six" />
                 label="Seven" />
                 label="Eight" />
                 label="Nine" />
            >
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="CustomItemRenderer"
        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="false">
 
     text="{data.label}"
            left="2" right="2" top="4" bottom="4" />
 
>

View source is enabled in the following example.

Creating an item renderer with a corner radius on a Spark List control in Flex 4

Peter deHaan — Thu, 15 Apr 2010 17:08:56 +0000

The following example shows how you can create a custom item renderer with a corner radius on a Spark List control in Flex 4 by setting the cornerRadius property and creating a custom item renderer which sets its autoDrawBackground property to false and draws its own rounded background fill using the radiusX property in the hovered and selected states.

"1.0" encoding="utf-8"?>

 name="Spark_List_itemRenderer_radiusX_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">
 
     id="lst"
            itemRenderer="skins.CustomCornerRadiusItemRenderer"
            allowMultipleSelection="true"
            requireSelection="true"
            horizontalCenter="0" verticalCenter="0">
        >
             requestedColumnCount="3" requestedRowCount="3"
                    columnWidth="80" rowHeight="60"
                    horizontalGap="0" verticalGap="0" />
        >
        >
            >
                 label="One" />
                 label="Two" />
                 label="Three" />
                 label="Four" />
                 label="Five" />
                 label="Six" />
                 label="Seven" />
                 label="Eight" />
                 label="Nine" />
                 label="Ten" />
            >
        >
    >
 
>

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

"1.0" encoding="utf-8"?>

 name="CustomCornerRadiusItemRenderer"
        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="false">
    
    >
         name="normal" />
         name="hovered" />
         name="selected" />
    >
 
    >
        [CDATA[
            override public function set data(value:Object):void {
                labelDisplay.text = value.label;
            }
        ]]>
    >
 
     id="bgFill"
            radiusX="10"
            includeIn="hovered,selected"
            left="2" right="2" top="2" bottom="2">
        >
             color="haloSilver"
                    color.selected="haloBlue"
                    alpha="0.6" />
        >
    >
 
     id="labelDisplay"
            left="10" right="10" top="10" bottom="10" />
 
>

View source is enabled in the following example.