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

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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.

For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0"?>
<!-- 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>

[GoogleAdsWide]

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.

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

  1. This is great but for the life of me I can’t figure out how to change the text color in a ComboBox dropdown when rolling over items in its dropdown list. I just want to change the text from black to white since the rollOverColor changes to black. Any ideas?

    Thanks for all your hard work!

    1. @sushidub,

      You could create a custom item renderer and override the color in the hovered and/or selected state, as seen in the following example:

      <?xml version="1.0" encoding="utf-8"?>
      <s:ItemRenderer 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.selected="white"
                   left="3" right="3" top="4" bottom="3" />
       
      </s:ItemRenderer>

      Peter

  2. I have a problem.I have used checkBox as itemrenderer and also as itemeditor in a column of AdvanceDataGrid.Now I need to prevent the editing of this column if the checkbox is already selected other wise it will be editable.Now for this,I have used the preventDefault() method in itemEditBegin event ….but it is still editable.
    Please help me out,how do I achieve this requirement.
    Thanks in advance.

Comments are closed.