Setting the text roll over color on a Spark DropDownList control in Flex 4

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 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" 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>

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