Flex Examples » itemRenderer http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Fading an item renderer background fill on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/#comments Fri, 25 Jun 2010 22:12:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=3196 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.

<?xml version="1.0" encoding="utf-8"?> [...]]]> 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.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ -->
<s:Application 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">
 
    <s:List id="lst"
            itemRenderer="skins.FadingItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="7" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer 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">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:transitions>
        <s:Transition fromState="normal" toState="hovered" autoReverse="true">
            <s:Fade target="{bgRect}" duration="600" />
        </s:Transition>
    </s:transitions>
 
    <s:Rect id="bgRect"
            includeIn="hovered,selected"
            left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="{getStyle('rollOverColor')}"
                          color.selected="{getStyle('selectionColor')}" />
        </s:fill>
    </s:Rect>
 
    <s:Label id="labelDisplay"
            left="5" right="5" top="5" bottom="4" />
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/feed/ 0 Creating a radio button item renderer on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/#comments Thu, 20 May 2010 15:39:48 +0000 Peter deHaan http://blog.flexexamples.com/?p=3133 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.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ --> <s:Application 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"> <s:controlBarContent> <s:Label text="selected RadioButton: {dgr1.selection.label}" /> </s:controlBarContent>   <fx:Declarations> <s:RadioButtonGroup id="dgr1" selectedValue="Three" /> </fx:Declarations> [...]]]> 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.

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/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:Application 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">
    <s:controlBarContent>
        <s:Label text="selected RadioButton: {dgr1.selection.label}" />
    </s:controlBarContent>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="dgr1" selectedValue="Three" />
    </fx:Declarations>
 
    <s:List id="lst"
            itemRenderer="skins.RadioButtonItemRen"
            width="100"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object val="One" gr="{dgr1}" />
                <fx:Object val="Two" gr="{dgr1}" />
                <fx:Object val="Three" gr="{dgr1}" />
                <fx:Object val="Four" gr="{dgr1}" />
                <fx:Object val="Five" gr="{dgr1}" />
                <fx:Object val="Six" gr="{dgr1}" />
                <fx:Object val="Seven" gr="{dgr1}" />
                <fx:Object val="Eight" gr="{dgr1}" />
                <fx:Object val="Nine" gr="{dgr1}" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="RadioButtonItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        autoDrawBackground="false"
        dataChange="itemrenderer1_dataChangeHandler(event);">
 
    <fx:Script>
        <![CDATA[
            protected function itemrenderer1_dataChangeHandler(evt:Event):void {
                rdBtn.label = data.val;
                rdBtn.value = data.val;
                rdBtn.group = data.gr;
            }
        ]]>
    </fx:Script>
 
    <s:RadioButton id="rdBtn"
            left="3" right="3" top="5" bottom="5" />
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/feed/ 1 Setting the text roll over color on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/#comments Thu, 13 May 2010 23:52:02 +0000 Peter deHaan http://blog.flexexamples.com/?p=3109 In a previous example, “Setting the text roll over color on a ComboBox control in Flex”, we saw how you could change the text roll over color for a Flex MX ComboBox control by setting the textRollOverColor style.

The following example shows how you can change the text roll over color in the Spark [...]]]> In a previous example, “Setting the text roll over color on a ComboBox control in Flex”, we saw how you could change the text roll over color for a Flex MX ComboBox control by setting the textRollOverColor style.

The following example shows how you can change the text roll over color in the Spark DropDownList control’s hovered and selected states by creating a custom item renderer and setting the color style.

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/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_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">
 
    <s:DropDownList id="ddl"
            itemRenderer="skins.CustomSparkItemRenderer"
            selectionColor="black"
            requireSelection="true"
            selectedIndex="0"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:ItemRenderer name="CustomSparkItemRenderer"
        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">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <s:Label id="labelDisplay"
            color="black"
            color.hovered="red"
            color.selected="white"
            left="3" right="3" top="4" bottom="3" />
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/feed/ 0 Setting a conditional text color on a Spark List control item renderer in Flex 4 http://blog.flexexamples.com/2010/05/06/setting-a-conditional-text-color-on-a-spark-list-control-item-renderer-in-flex-4/ http://blog.flexexamples.com/2010/05/06/setting-a-conditional-text-color-on-a-spark-list-control-item-renderer-in-flex-4/#comments Fri, 07 May 2010 00:56:44 +0000 Peter deHaan http://blog.flexexamples.com/?p=2948 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.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2010/05/06/setting-a-conditional-text-color-on-a-spark-list-control-item-renderer-in-flex-4/ --> <s:Application 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">   <s:List id="lst" itemRenderer="skins.CustomColumnItemRen" width="250" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:VerticalLayout gap="0" [...]]]> 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.

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"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-a-conditional-text-color-on-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application 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"> 
 
    <s:List id="lst"
            itemRenderer="skins.CustomColumnItemRen"
            width="250"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Adobe Systems Incorporated" price="32.49" pctChange="1.43%" />
                <fx:Object label="Apple Inc." price="246.25" pctChange="-3.8%" />
                <fx:Object label="Google Inc." price="498.67" pctChange="2.18%" />
                <fx:Object label="Hewlett-Packard Company" price="48.33" pctChange="-5.11%" />
                <fx:Object label="International Business Machines Corp." price="123.92" pctChange="-2.28%" />
                <fx:Object label="NVIDIA Corporation" price="14.20" pctChange="2.07%" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-a-conditional-text-color-on-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer 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);">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:layout>
        <s:HorizontalLayout gap="0"
                paddingLeft="3" paddingRight="3"
                paddingTop="5" paddingBottom="5"
                verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![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);
            }
        ]]>
    </fx:Script>
 
    <s:Label id="labelDisplay" maxDisplayedLines="1" showTruncationTip="true" width="100%" />
    <s:Label id="priceTxt" textAlign="right" fontWeight="bold" />
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/05/06/setting-a-conditional-text-color-on-a-spark-list-control-item-renderer-in-flex-4/feed/ 4 Setting a custom context menu on a Spark List control item renderer in Flex 4 http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/ http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/#comments Fri, 07 May 2010 00:27:11 +0000 Peter deHaan http://blog.flexexamples.com/?p=2945 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.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/ --> <s:Application 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">   <fx:Script> <![CDATA[ import mx.utils.StringUtil;   protected function lst_labelFunc(data:Object):String { return [...]]]> 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.

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"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application 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"> 
 
    <fx:Script>
        <![CDATA[
            import mx.utils.StringUtil;
 
            protected function lst_labelFunc(data:Object):String {
                return StringUtil.substitute("[{0}]\t{1}", data.symbol, data.name);
            }
        ]]>
    </fx:Script>
 
    <s:List id="lst"
            labelFunction="lst_labelFunc"
            itemRenderer="skins.CustomColumnItemRen"
            width="250"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object symbol="ADBE" name="Adobe Systems Incorporated" price="32.49" isNew="true" />
                <fx:Object symbol="AAPL" name="Apple Inc." price="246.25" isNew="false" />
                <fx:Object symbol="GOOG" name="Google Inc." price="498.67" isNew="true" />
                <fx:Object symbol="HPQ" name="Hewlett-Packard Company" price="48.33" isNew="false" />
                <fx:Object symbol="IBM" name="International Business Machines Corp." price="123.92" isNew="false" />
                <fx:Object symbol="NVDA" name="NVIDIA Corporation" price="14.20" isNew="true" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer 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);">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:layout>
        <s:HorizontalLayout gap="0"
                paddingLeft="3" paddingRight="3"
                paddingTop="3" paddingBottom="3"
                verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![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);
            }
        ]]>
    </fx:Script>
 
    <s:Label id="labelDisplay" maxDisplayedLines="1" showTruncationTip="true" width="100%" />
    <s:Label id="priceTxt" textAlign="right" fontWeight="bold" />
    <s:BitmapImage id="bmpImg" width="16" height="16" />
 
</s:ItemRenderer>

View source is enabled in the following example.

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.

 
]]> http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/feed/ 2 Displaying icons in a Spark List control in Flex 4 http://blog.flexexamples.com/2010/04/29/displaying-icons-in-a-spark-list-control-in-flex-4-2/ http://blog.flexexamples.com/2010/04/29/displaying-icons-in-a-spark-list-control-in-flex-4-2/#comments Fri, 30 Apr 2010 00:48:47 +0000 Peter deHaan http://blog.flexexamples.com/?p=2909 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.

<?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> [...]]]> 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.

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.

 
]]> http://blog.flexexamples.com/2010/04/29/displaying-icons-in-a-spark-list-control-in-flex-4-2/feed/ 0 Removing the rollover and selection highlight on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/#comments Thu, 22 Apr 2010 22:31:08 +0000 Peter deHaan http://blog.flexexamples.com/?p=2851 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.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ --> <s:Application 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"> <s:controlBarContent> <mx:Form> <mx:FormItem label="List selectedIndex:"> [...]]]> 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.

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/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ -->
<s:Application 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">
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="List selectedIndex:">
                <s:Label text="{lst.selectedIndex}" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer 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">
 
    <s:Label text="{data.label}"
            left="2" right="2" top="4" bottom="4" />
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/04/22/removing-the-rollover-and-selection-highlight-on-a-spark-list-control-in-flex-4/feed/ 11 Creating an item renderer with a corner radius on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/04/15/creating-an-item-renderer-with-a-corner-radius-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/04/15/creating-an-item-renderer-with-a-corner-radius-on-a-spark-list-control-in-flex-4/#comments Thu, 15 Apr 2010 17:08:56 +0000 Peter deHaan http://blog.flexexamples.com/?p=2794 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 [...]]]> 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.

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/15/creating-an-item-renderer-with-a-corner-radius-on-a-spark-list-control-in-flex-4/ -->
<s:Application 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">
 
    <s:List id="lst"
            itemRenderer="skins.CustomCornerRadiusItemRenderer"
            allowMultipleSelection="true"
            requireSelection="true"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:TileLayout requestedColumnCount="3" requestedRowCount="3"
                    columnWidth="80" rowHeight="60"
                    horizontalGap="0" verticalGap="0" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
                <fx:Object label="Ten" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/15/creating-an-item-renderer-with-a-corner-radius-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer 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">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            override public function set data(value:Object):void {
                labelDisplay.text = value.label;
            }
        ]]>
    </fx:Script>
 
    <s:Rect id="bgFill"
            radiusX="10"
            includeIn="hovered,selected"
            left="2" right="2" top="2" bottom="2">
        <s:fill>
            <s:SolidColor color="haloSilver"
                    color.selected="haloBlue"
                    alpha="0.6" />
        </s:fill>
    </s:Rect>
 
    <s:Label id="labelDisplay"
            left="10" right="10" top="10" bottom="10" />
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/04/15/creating-an-item-renderer-with-a-corner-radius-on-a-spark-list-control-in-flex-4/feed/ 0 Adding a delete button in the hovered state of a Spark List control item renderer in Flex 4 http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/#comments Fri, 09 Apr 2010 23:10:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=2718 The following example shows how you can add a delete button to the hovered state of a Spark List control item renderer in Flex 4 by creating a custom item renderer and listening for the mouseDown event.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_hovered_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.CustomItemRen" width="300" horizontalCenter="0" [...]]]> The following example shows how you can add a delete button to the hovered state of a Spark List control item renderer in Flex 4 by creating a custom item renderer and listening for the mouseDown event.

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/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_hovered_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.CustomItemRen"
            width="300"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="8" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Application" />
                <fx:Object label="BorderContainer" />
                <fx:Object label="Button" />
                <fx:Object label="ButtonBar" />
                <fx:Object label="CheckBox" />
                <fx:Object label="ComboBox" />
                <fx:Object label="DataGroup" />
                <fx:Object label="DataRenderer" />
                <fx:Object label="DropDownList" />
                <fx:Object label="Group" />
                <fx:Object label="HGroup" />
                <fx:Object label="HScrollBar" />
                <fx:Object label="HSlider" />
                <fx:Object label="Label" />
                <fx:Object label="List" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRen"
        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"
        minHeight="24">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
 
            import spark.components.List;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                Alert.show(data.label,
                        "Are you sure you want to delete this item?",
                        Alert.YES|Alert.CANCEL,
                        null,
                        alrt_closeHandler);
            }
 
            protected function alrt_closeHandler(evt:CloseEvent):void {
                switch (evt.detail) {
                    case Alert.YES:
                    case Alert.OK:
                        Object(owner).dataProvider.removeItemAt(itemIndex);
                        break;
                    case Alert.CANCEL:
                    case Alert.NO:
                        Object(owner).selectedIndex = -1;
                        break;
                    default:
                        break;
                }
            }
        ]]>
    </fx:Script>
 
    <s:HGroup width="100%" height="100%"
            verticalAlign="middle"
            paddingLeft="2" paddingRight="2"
            paddingTop="2" paddingBottom="2">
        <s:Label id="lbl" text="{data.label}" width="100%" />
        <s:Button id="btn"
                accentColor="red" emphasized="true"
                includeIn="hovered"
                width="12" height="12"
                mouseDown="button1_clickHandler(event);" />
    </s:HGroup>
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/feed/ 6 Creating an alternating item renderer in a Spark List control in Flex 4 http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/#comments Fri, 09 Apr 2010 01:15:35 +0000 Peter deHaan http://blog.flexexamples.com/?p=2709 The following example shows how you can create a custom item renderer in Flex 4 which repositions elements based on the current item renderer’s index in the data provider using the itemIndex property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_itemIndex_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.CustomItemRenderer" textAlign="justify" alternatingItemColors="[white, haloSilver]" width="320" height="200" horizontalCenter="0" [...]]]> The following example shows how you can create a custom item renderer in Flex 4 which repositions elements based on the current item renderer’s index in the data provider using the itemIndex property.

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/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_itemIndex_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.CustomItemRenderer"
            textAlign="justify"
            alternatingItemColors="[white, haloSilver]"
            width="320" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    variableRowHeight="true" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object img="http://helpexamples.com/flash/images/image1.jpg"
                        label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt, risus at venenatis lobortis, enim justo imperdiet urna, et luctus metus nisl nec erat." />
                <fx:Object img="http://helpexamples.com/flash/images/image2.jpg"
                        label="Integer elementum felis at nulla elementum porta. Proin imperdiet sapien vitae turpis rutrum porta." />
                <fx:Object img="http://helpexamples.com/flash/images/image3.jpg"
                        label="Integer vitae massa eu magna cursus tincidunt feugiat eu tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec mauris nunc, dictum at sollicitudin vel, rutrum vehicula sem." />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer 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">
 
    <fx:Script>
        <![CDATA[
            override public function set data(value:Object):void {
                super.data = value;
 
                if ((itemIndex % 2) == 0) {
                    hGr.addElementAt(img, 0)
                }
            }
        ]]>
    </fx:Script>
 
    <s:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
        <s:RichText id="lbl" text="({itemIndex}) {data.label}" width="100%" />
        <mx:Image id="img" source="{data.img}" toolTip="{data.img}" width="100" height="67" />
    </s:HGroup>
 
</s:ItemRenderer>

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.

 
]]> http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/feed/ 6