thanks for your examples!

How would i create a combobox or dropdown list to fall down same slowly – slider effect and not just drop down as default. Can not find no info bout it in network. Would be very thankful if you could explain – how its done?

Thanks!

Peter

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: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">
 
    <s:DropDownList id="ddl"
            itemRenderer="skins.SparkItemRenderer"
            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/SparkItemRenderer.mxml, is as follows:

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

Thanks.
Jeremy

Now when you set the rollOverColor style on your custom combobox, it will work the way you expect.

Curtis

BS_C3

Thanks!

That was really helpful. Yea when I was looking into it on Friday I realized that it might have been a skinning issue but I haven’t dealt with skins at all and was having a tough time looking at how to do skinning. Thanks both for your bug submission/change for me and also for the tip on the skin design extension for flash. Very helpful. I’d also like to add thank you for running and maintaining this site. I’ve been using flash for years but just recently started using Flex for my job and this site has been extremely helpful. Keep up the good work!

Thanks again,
Ben

Peter

Off the top of my head I’d say you may need a custom skin. Looking at the API I don’t see an easy way to override the arrow icon. The easiest way is probably to download the “Flex Skin Design Extension for Flash” and create a new skin by going “File > New”, select the “Templates” tab and “Flex Skins” category, and finally select the ComboBox template. For each of the four states, select the down arrow and then select “Modify > Transform > Flip Vertical”. Save and publish the .FLA to generate the .SWC and .SWF file (the .SWC and .SWF will be located in the same directory as your .FLA.)

Next, in Flex Builder, copy the .SWC file into the /libs/ folder and add this code to the .MXML file:

<mx:Style>
    ComboBox {
        skin: Embed(skinClass="ComboBox_skin");
    }
</mx:Style>

Finally, save and run your Flex application and with any luck, you should see the arrow icons pointing upwards.

There may be a much easier way that I’m not seeing at first glance. You may want to try asking on the FlexCoders list, or even filing an enhancement request in the Flex bug base at http://bugs.adobe.com/flex/.

Peter