Displaying images in a Spark DropDownList control in Flex 4

The following example shows how you can display images in a Spark DropDownList control in Flex 4 by creating a custom skin and setting the itemRenderer property.

Full code after the jump.

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/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_itemRenderer_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:DropDownList id="dropDownList"
            labelField="label"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <s:BitmapImage source="@Embed('assets/air_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/cf_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/dw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fl_player_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fw_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/fx_appicon-tn.gif')" />
                <s:BitmapImage source="@Embed('assets/ai_appicon-tn.gif')" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

The custom skin, skins/CustomDropDownListSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/14/displaying-images-in-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Skin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        alpha.disabled="0.5"> 
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
    <![CDATA[ 
        [HostComponent("spark.components.DropDownList")]
    ]]>
    </fx:Metadata> 
 
    <!--- The PopUpAnchor control that opens the drop-down list. -->
    <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
            left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"
            popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
 
        <!--- The drop down area of the skin. This includes borders, background colors, scrollers, and filters. -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22" >
 
            <!-- drop shadow -->
            <s:RectangularDropShadow blurX="20" blurY="20" alpha="1.0" distance="5" 
                 angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
 
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke color="0x686868" weight="1"/>
                </s:stroke>
            </s:Rect>
 
            <!-- fill -->
            <!--- Defines the appearance of drop-down list's background fill. -->
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    <!--- The color of the drop down's background fill. The default color is 0xFFFFFF. -->
                    <s:SolidColor id="bgFill" color="0xFFFFFF" />
                </s:fill>
            </s:Rect>
 
            <s:Scroller left="0" top="0" right="0" bottom="0" focusEnabled="false" minViewportInset="1">
                <!--- The container for the data items in the drop-down list. -->
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                    <s:layout>
                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
 
    <!--- The anchor button used by the DropDownList. The default skin is DropDownListButtonSkin. -->
    <s:Button id="openButton" left="0" right="0" top="0" bottom="0" focusEnabled="false"
            skinClass="spark.skins.spark.DropDownListButtonSkin" />  
 
    <s:BitmapImage source="{hostComponent.selectedItem.source}"
        left="10" right="30" top="10" bottom="10" />
 
</s:Skin>

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.

11 thoughts on “Displaying images in a Spark DropDownList control in Flex 4

  1. Sorry, I’m very newbie on Flex, just trying to learn it. I copied and paste the code above in my Adobe Flex Builder 3 and I got this problem:

    Could not resolve to a component implementation. HelloWorld/src HelloWorld.mxml line 6 1239934954236 53

    Is there some cofiguration to do before just copy and paste those codes?

  2. Anyone able to use a both an bitmapImage and the original SimplText in the dropdownlistskin?

    Not sure how to use a dataprovider with both s:BitmapImage and Label ?

  3. Thanks for the samples, Peter!

    If possible, can you add Flex 4 build number along with sample ?

    I use FB 4 plugin with 4.0.0.7791 build and there’s no popUpWidthMatchesAnchorWidth=”true” attribute with PopUpAnchor and spark.skins.spark.DefaultItemRenderer is actually spark.skins.default.DefaultItemRenderer

    1. Lately I’ve been putting the build number in the readme.html in the “view source” app. But that’d only really work for samples w/ SWFs.

      But for most of these examples, I always used the latest Flex 4 SDK available (in this case it was 4.0.0.8811). The best way to test these examples would be to grab the latest Nightly Flex 4 SDK build from http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4 and test with the latest nightly build available. If it doesn’t compile using one of THOSE builds, then leave a comment. I know I still have a number of really old Flex 4 examples with Fx prefixes, and old namespaces, and old package names, and …

      Peter

Comments are closed.