Archive

Archive for the ‘tutorials’ Category

Spark ComboBox textRollOverColor

May 11th, 2010 Michael Schmalle No comments

The transition from halo to spark has blurred the lines of what a developer in Flex 3 thinks they can do with styles in Flex 4.

Here is an example of creating an itemRenderer with a textRollOverColor and textSelectedColor styles (known in Flex 3).

Spark ComboBox textRollOverColor01

We have some components that will be released in our open source Spark framework that addresses some of these issues. Pre-made itemRenderers, abstracted styles for the developers that still want some style control.

http://teotios.googlecode.com

The application needs to define the styles for the ComboBox and set it’s itemRenderer to the new enhanced renderer.

Application.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|ComboBox
        {
            textRollOverColor:#FF0000;
            textSelectedColor:#FFFFFF;
        }
 
    </fx:Style>    
 
    <!-- 
    The ComboBox renders it's data elements with the
    provided item renderer. 
    -->
    <s:ComboBox itemRenderer="MyItemRenderer"
                horizontalCenter="0" top="10">
        <s:dataProvider>
            <s:ArrayList>
                <fx:String>One</fx:String>
                <fx:String>Two</fx:String>
                <fx:String>Three</fx:String>
                <fx:String>Four</fx:String>
            </s:ArrayList>
        </s:dataProvider>
    </s:ComboBox>
 
</s:Application>

Subclass the ItemRenderer class in MXML to create the data’s visual appearance.

We implement the states expected by ItemRenderer and use getStyle() to retrieve the correct style values.

Note the autoDrawBackground, Adobe added this property right before Flex 4 was released. This took out the mandatory normal, hover and selected backgrounds. Now this drawing is natively supported in the ItemRenderer class.

MyItemRenderer.mxml

<?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">
 
    <!-- Declare the states the ItemRenderer super class needs. -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
        <s:State name="normalAndShowsCaret"/>
        <s:State name="hoveredAndShowsCaret"/>
        <s:State name="selectedAndShowsCaret"/>
    </s:states>
 
    <!-- 
    The default implementation of the ItemRenderer uses the data
    property to pass the item's data item.
    Use getStyle() to retrieve any style set in the parent's style chain.
    -->
    <s:Label text="{data}" 
             color.hovered="{getStyle('textRollOverColor')}"
             color.selectedAndShowsCaret="{getStyle('textSelectedColor')}"
             top="5" right="5" bottom="5" left="5"/>
 
</s:ItemRenderer>

Mike

Categories: tutorials Tags: