Flex Examples » ComboBox http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Creating a simple estimate form in Flex http://blog.flexexamples.com/2010/02/15/creating-a-simple-estimate-form-in-flex/ http://blog.flexexamples.com/2010/02/15/creating-a-simple-estimate-form-in-flex/#comments Tue, 16 Feb 2010 05:50:03 +0000 Peter deHaan http://blog.flexexamples.com/?p=2488 The following example shows how you can create a simple online estimate form in Flex using some ComboBox controls and some simple ActionScript.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/15/creating-a-simple-estimate-form-in-flex/ --> <mx:Application name="EstimateForm_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ import mx.events.ListEvent;   protected function button1_clickHandler(evt:MouseEvent):void { cb1.selectedIndex = -1; cb2.selectedIndex = -1; cb3.selectedIndex = -1; [...]]]> The following example shows how you can create a simple online estimate form in Flex using some ComboBox controls and some simple ActionScript.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/15/creating-a-simple-estimate-form-in-flex/ -->
<mx:Application name="EstimateForm_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                cb1.selectedIndex = -1;
                cb2.selectedIndex = -1;
                cb3.selectedIndex = -1;
                cb4.selectedIndex = -1;
                cb_changeHandler(null); // reset estimate
            }
 
            protected function cb_changeHandler(evt:ListEvent):void {
                var total:Number = 0;
                if (cb1.selectedIndex > -1) {
                    total += parseFloat(cb1.selectedItem.data);
                }
                if (cb2.selectedIndex > -1) {
                    total += parseFloat(cb2.selectedItem.data);
                }
                if (cb3.selectedIndex > -1) {
                    total += parseFloat(cb3.selectedItem.data);
                }
                if (cb4.selectedIndex > -1) {
                    total += parseFloat(cb4.selectedItem.data);
                }
 
                if (total >= 0) {
                    estimate.text = fmt.format(total);
                } else {
                    estimate.text = "";
                }
            }
        ]]>
    </mx:Script>
 
    <mx:CurrencyFormatter id="fmt" precision="0" />
 
    <mx:VBox>
        <mx:Form indicatorGap="0"
                paddingLeft="0" paddingRight="0">
            <mx:FormItem label="Square Footage of Your Home:">
                <mx:ComboBox id="cb1"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:dataProvider>
                        <mx:Object label="Up to 1500 Sq. Ft." data="400" />
                        <mx:Object label="1501 - 3000 Sq. Ft." data="450" />
                        <mx:Object label="3001 - 5000 Sq. Ft." data="500" />
                        <mx:Object label="Over 5000 Sq. Ft." data="550" />
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Number of Stories:">
                <mx:ComboBox id="cb2"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:dataProvider>
                        <mx:Object label="1" data="0" />
                        <mx:Object label="2" data="50" />
                        <mx:Object label="3" data="150" />
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Roof Pitch:">
                <mx:ComboBox id="cb3"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:Object label="Flat" data="0" />
                    <mx:Object label="Low" data="100" />
                    <mx:Object label="Steep" data="200" />
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="Number of Sides:">
                <mx:ComboBox id="cb4"
                        prompt="Please Select"
                        selectedIndex="-1"
                        change="cb_changeHandler(event);">
                    <mx:Object label="1" data="0" />
                    <mx:Object label="2" data="150" />
                    <mx:Object label="3" data="250" />
                    <mx:Object label="4" data="350" />
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
 
        <mx:HBox width="100%">
            <mx:Button label="Reset To Zero"
                    click="button1_clickHandler(event);" />
            <mx:Spacer width="100%" />
            <mx:HBox toolTip="{disclaimer.text}">
                <mx:Label text="Estimate*:" />
                <mx:TextInput id="estimate" editable="false" width="70" />
            </mx:HBox>
        </mx:HBox>
 
        <mx:Text id="disclaimer"
                text="* Note: This is just an estimate. Price includes set up, take down, and includes LED Lights."
                selectable="false"
                fontWeight="bold"
                width="100%" />
    </mx:VBox>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/02/15/creating-a-simple-estimate-form-in-flex/feed/ 2 Changing the opening and closing easing functions on a Halo ComboBox control in Flex 4 http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/ http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/#comments Wed, 05 Aug 2009 14:20:05 +0000 Peter deHaan http://blog.flexexamples.com/?p=1504 In a previous example, “Changing the Flex ComboBox control’s opening and closing easing functions”, we saw how you could control how the open/close duration and easing functions on the drop down list in a Halo ComboBox control by setting the openDuration, openEasingFunction, closeDuration, and closeEasingFunction styles.

The following example shows how you can set [...]]]> In a previous example, “Changing the Flex ComboBox control’s opening and closing easing functions”, we saw how you could control how the open/close duration and easing functions on the drop down list in a Halo ComboBox control by setting the openDuration, openEasingFunction, closeDuration, and closeEasingFunction styles.

The following example shows how you can set the Halo ComboBox control’s openEasingFunction and closeEasingFunction styles in a <Style/> block using the new PropertyReference() method in Flex 4.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_openEasingFunction_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">
 
    <fx:Script>
        <![CDATA[
            import mx.effects.easing.*;
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ComboBox {
            openDuration: 1000;
            openEasingFunction: PropertyReference("mx.effects.easing.Bounce.easeOut");
            closeDuration: 1000;
            closeEasingFunction: PropertyReference("mx.effects.easing.Bounce.easeIn");
            alternatingItemColors: #DFDFDF, #EEEEEE;
        }
    </fx:Style>
 
    <mx:ComboBox id="comboBox"
            prompt="Please select an item..."
            selectedIndex="-1"
            dropdownWidth="150"
            horizontalCenter="0"
            top="20">
        <mx:dataProvider>
            <fx:Array>
                <fx:Object label="Item 1" />
                <fx:Object label="Item 2" />
                <fx:Object label="Item 3" />
                <fx:Object label="Item 4" />
                <fx:Object label="Item 5" />
                <fx:Object label="Item 6" />
                <fx:Object label="Item 7" />
                <fx:Object label="Item 8" />
            </fx:Array>
        </mx:dataProvider>
    </mx:ComboBox>
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/08/05/changing-the-opening-and-closing-easing-functions-on-a-halo-combobox-control-in-flex-4/feed/ 8 Setting the icon symbol color on a Halo ComboBox control in Flex 4 http://blog.flexexamples.com/2009/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/ http://blog.flexexamples.com/2009/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/#comments Mon, 13 Jul 2009 06:59:17 +0000 Peter deHaan http://blog.flexexamples.com/?p=1492 The following example shows how you can set the icon/symbol color on a Halo ComboBox control in Flex 4 by setting the symbolColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/ --> <s:Application name="Halo_ComboBox_symbolColor_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">   <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="symbolColor:"> <mx:ColorPicker id="colorPicker" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> [...]]]> The following example shows how you can set the icon/symbol color on a Halo ComboBox control in Flex 4 by setting the symbolColor style.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_symbolColor_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">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="symbolColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            symbolColor="{colorPicker.selectedColor}"
            horizontalCenter="0" top="60" />
 
</s:Application>

You can also set the symbolColor style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_symbolColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ComboBox {
            symbolColor: red;
        }
    </fx:Style>
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" top="60" />
 
</s:Application>

Or, you can set the symbolColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_symbolColor_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">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                comboBox.setStyle("symbolColor", evt.color);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="symbolColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" top="60" />
 
</s:Application>

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.

 
]]> http://blog.flexexamples.com/2009/07/12/setting-the-icon-symbol-color-on-a-halo-combobox-control-in-flex-4/feed/ 0 Removing the vertical separator from the Halo ComboBox control in Flex 4 http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/ http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/#comments Sun, 12 Jul 2009 06:59:31 +0000 Peter deHaan http://blog.flexexamples.com/?p=1486 In a previous example, “Removing the vertical separator from the ComboBox control in Flex”, we saw how you could remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

The following example shows how you can remove the vertical separator fro a Halo ComboBox control (with default [...]]]> In a previous example, “Removing the vertical separator from the ComboBox control in Flex”, we saw how you could remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

The following example shows how you can remove the vertical separator fro a Halo ComboBox control (with default Spark skin) in Flex 4 by creating a custom skin and setting the skin style.

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 http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://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/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/ -->
<s:Application name="Halo_ComboBox_skin_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">
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            skin="skins.CustomComboBoxSkin"
            horizontalCenter="0" verticalCenter="-60" />
 
</s:Application>

And the custom ComboBox skin class, skins/CustomComboBoxSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomComboBoxSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- states -->
    <local:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </local:states>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized. 
           For button, the graphics are colorized but the arrow is not. */
        static private const exclusions:Array = ["arrow"];
        override public function get colorizeExclusions():Array {
            return exclusions;
        }
 
        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
        static private const symbols:Array = ["arrowFill1", "arrowFill2"];
        override public function get symbolItems():Array {
            return symbols
        }
 
        /* Define the border items.*/
        static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
        override protected function get borderItems():Array {
            return borderItem;
        }
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                        color.down="0xFFFFFF"
                        alpha="0.01"
                        alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                        color.down="0xFFFFFF" 
                        alpha="0.07"
                        alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                        color.over="0xBBBDBD" 
                        color.down="0xAAAAAA" 
                        alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                        color.over="0x9FA0A1" 
                        color.down="0x929496" 
                        alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                    alpha="0.33" 
                    alpha.over="0.22" 
                    alpha.down="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2" radiusY="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1" 
                        alpha="0.5625"
                        alpha.down="0.6375" />
                <s:GradientEntry id="borderEntry2" 
                        alpha="0.75" 
                        alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: arrow -->
    <s:Path right="6" verticalCenter="0" id="arrow"
          data="M 4.0 4.0 L 4.0 3.0 L 5.0 3.0 L 5.0 2.0 L 6.0 2.0 L 6.0 1.0 L 7.0 1.0 L 7.0 0.0 L 0.0 0.0 L 0.0 1.0 L 1.0 1.0 L 1.0 2.0 L 2.0 2.0 L 2.0 3.0 L 3.0 3.0 L 3.0 4.0 L 4.0 4.0">
        <s:fill>
            <s:RadialGradient rotation="90" focalPointRatio="1">
                <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
            </s:RadialGradient>
        </s:fill>
    </s:Path>
 
</local:SparkSkinForHalo>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.

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.

 
]]> http://blog.flexexamples.com/2009/07/11/removing-the-vertical-separator-from-the-halo-combobox-control-in-flex-4/feed/ 0 Removing the vertical separator from the ComboBox control in Flex http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/#comments Tue, 24 Mar 2009 02:25:42 +0000 Peter deHaan http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ The following example shows how you can remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ --> <mx:Application name="ComboBox_skin_test" xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white">   <mx:ComboBox id="comboBox" dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" skin="skins.CustomComboBoxSkin" />   </mx:Application>

The custom ComboBox skin class, skins/CustomComboBoxSkin.as, is [...]]]> The following example shows how you can remove the vertical separator from the Flex ComboBox control by creating a custom ComboBox skin using ActionScript.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            skin="skins.CustomComboBoxSkin" />
 
</mx:Application>

The custom ComboBox skin class, skins/CustomComboBoxSkin.as, is as follows:

/**
 * http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/
 */
package skins {
    import flash.display.GradientType;
    import flash.display.Graphics;
 
    import mx.skins.halo.ComboBoxArrowSkin;
    import mx.skins.halo.HaloColors;
    import mx.styles.StyleManager;
    import mx.utils.ColorUtil;
 
    public class CustomComboBoxSkin extends ComboBoxArrowSkin {
        private static var cache:Object = {};
 
        public function CustomComboBoxSkin() {
            super();
        }
 
        private static function calcDerivedStyles(themeColor:uint, borderColor:uint, fillColor0:uint, fillColor1:uint):Object {
            var key:String = HaloColors.getCacheKey(themeColor, borderColor, fillColor0, fillColor1);
            if (!cache[key]) {
                var o:Object = cache[key] = {};
                HaloColors.addHaloColors(o, themeColor, fillColor0, fillColor1);
            }
            return cache[key];
        }
 
        override protected function updateDisplayList(w:Number, h:Number):void {
            super.updateDisplayList(w, h);
 
            var arrowColor:uint = getStyle("iconColor");
            var borderColor:uint = getStyle("borderColor");
            var cornerRadius:Number = getStyle("cornerRadius");
            var dropdownBorderColor:Number = getStyle("dropdownBorderColor");
            var fillAlphas:Array = getStyle("fillAlphas");
            var fillColors:Array = getStyle("fillColors");
            StyleManager.getColorNames(fillColors);
            var highlightAlphas:Array = getStyle("highlightAlphas");
            var themeColor:uint = getStyle("themeColor");
 
            // The dropdownBorderColor is currently only used
            // when displaying an error state.
            if (!isNaN(dropdownBorderColor)) {
                borderColor = dropdownBorderColor;
            }
 
            var derStyles:Object = calcDerivedStyles(themeColor, borderColor, fillColors[0], fillColors[1]);
            var borderColorDrk1:Number = ColorUtil.adjustBrightness2(borderColor, -50);
            var themeColorDrk1:Number = ColorUtil.adjustBrightness2(themeColor, -25);
            var cornerRadius1:Number = Math.max(cornerRadius - 1, 0);
            var cr:Object = { tl: 0, tr: cornerRadius, bl: 0, br: cornerRadius };
            var cr1:Object = { tl: 0, tr: cornerRadius1, bl: 0, br: cornerRadius1 };
            var arrowOnly:Boolean = true;
 
            // If our name doesn't include "editable", we are drawing the non-edit
            // skin which spans the entire control
            if (name.indexOf("editable") < 0) {
                arrowOnly = false;
                cr.tl = cr.bl = cornerRadius;
                cr1.tl = cr1.bl = cornerRadius1;
            }
 
            var g:Graphics = graphics;
            g.clear();
 
            // Draw the border and fill.
            switch (name) {
                case "upSkin":
                case "editableUpSkin": {
                       var upFillColors:Array = [ fillColors[0], fillColors[1] ];
                       var upFillAlphas:Array = [ fillAlphas[0], fillAlphas[1] ];
 
                    // border
                    drawRoundRect(0, 0, w, h, cr,
                        [ borderColor, borderColorDrk1 ], 1,
                        verticalGradientMatrix(0, 0, w, h),
                        GradientType.LINEAR, null,
                        { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
 
                    // button fill
                    drawRoundRect(1, 1, w - 2, h - 2, cr1,
                        upFillColors, upFillAlphas,
                        verticalGradientMatrix(1, 1, w - 2, h - 2));
 
                    // top highlight
                    drawRoundRect(1, 1, w - 2, (h - 2) / 2,
                        { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
                        [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
                        verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
 
                    break;
                }
 
                case "overSkin":
                case "editableOverSkin": {
                    var overFillColors:Array;
                    if (fillColors.length > 2) {
                        overFillColors = [ fillColors[2], fillColors[3] ];
                    } else {
                        overFillColors = [ fillColors[0], fillColors[1] ];
                    }
 
                    var overFillAlphas:Array;
                    if (fillAlphas.length > 2) {
                        overFillAlphas = [ fillAlphas[2], fillAlphas[3] ];
                      } else {
                        overFillAlphas = [ fillAlphas[0], fillAlphas[1] ];
                      }
 
                    // border
                    drawRoundRect(0, 0, w, h, cr,
                        [ themeColor, themeColorDrk1 ], 1,
                        verticalGradientMatrix(0, 0, w, h),
                        GradientType.LINEAR, null,
                        { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
 
                    // button fill
                    drawRoundRect(1, 1, w - 2, h - 2, cr1,
                        overFillColors, overFillAlphas,
                        verticalGradientMatrix(1, 1, w - 2, h - 2));
 
                    // top highlight
                    drawRoundRect(1, 1, w - 2, (h - 2) / 2,
                        { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
                        [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
                        verticalGradientMatrix(0, 0, w - 2, (h - 2) / 2));
 
                    break;
                }
 
                case "downSkin":
                case "editableDownSkin": {
                    // border
                    drawRoundRect(0, 0, w, h, cr,
                        [ themeColor, themeColorDrk1 ], 1,
                        verticalGradientMatrix(0, 0, w, h));
 
                    // button fill
                    drawRoundRect(1, 1, w - 2, h - 2, cr1,
                        [ derStyles.fillColorPress1, derStyles.fillColorPress2 ], 1,
                        verticalGradientMatrix(1, 1, w - 2, h - 2));
 
                    // top highlight
                    drawRoundRect(1, 1, w - 2, (h - 2) / 2,
                        { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
                        [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
                        verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2));
 
                    break;
                }
 
                case "disabledSkin":
                case "editableDisabledSkin": {
                       var disFillColors:Array = [ fillColors[0], fillColors[1] ];
                    var disFillAlphas:Array = [ Math.max(0, fillAlphas[0] - 0.15), Math.max(0, fillAlphas[1] - 0.15) ];
 
                    // border
                    drawRoundRect(0, 0, w, h, cr,
                        [ borderColor, borderColorDrk1 ], 0.5,
                        verticalGradientMatrix(0, 0, w, h ),
                        GradientType.LINEAR, null,
                        { x: 1, y: 1, w: w - 2, h: h - 2, r: cr1 });
 
                    // button fill
                    drawRoundRect(1, 1, w - 2, h - 2, cr1,
                        disFillColors, disFillAlphas,
                        verticalGradientMatrix(0, 0, w - 2, h - 2));
 
                    arrowColor = getStyle("disabledIconColor");
                    break;
                }
            }
 
            // Draw the triangle.
            g.beginFill(arrowColor);
            g.moveTo(w - 11.5, h / 2 + 3);
            g.lineTo(w - 15, h / 2 - 2);
            g.lineTo(w - 8, h / 2 - 2);
            g.lineTo(w - 11.5, h / 2 + 3);
            g.endFill();
        }
    }
}

You can also set the skin style in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">
 
    <mx:Style>
        ComboBox {
            skin: ClassReference("skins.CustomComboBoxSkin");
        }
    </mx:Style>
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
 
</mx:Application>

Or, you can set the skin style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import skins.CustomComboBoxSkin;
 
            protected function btn_click(evt:MouseEvent):void {
                comboBox.setStyle("skin", CustomComboBoxSkin);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn"
                label="Set skin"
                click="btn_click(event);" />
    </mx:ApplicationControlBar>
 
    <mx:ComboBox id="comboBox"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/feed/ 6 Setting the arrow icon color of a disabled CheckBox control in Flex http://blog.flexexamples.com/2009/01/29/setting-the-arrow-icon-color-of-a-disabled-checkbox-control-in-flex/ http://blog.flexexamples.com/2009/01/29/setting-the-arrow-icon-color-of-a-disabled-checkbox-control-in-flex/#comments Fri, 30 Jan 2009 07:56:21 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/29/setting-the-arrow-icon-color-of-a-disabled-checkbox-control-in-flex/ The following example shows how you can set the icon color of a disabled Flex CheckBox control by setting the disabledIconColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/01/29/setting-the-arrow-icon-color-of-a-disabled-checkbox-control-in-flex/ --> <mx:Application name="ComboBox_disabledIconColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="disabledIconColor:"> <mx:ColorPicker id="colorPicker" /> </mx:FormItem> <mx:FormItem [...]]]> The following example shows how you can set the icon color of a disabled Flex CheckBox control by setting the disabledIconColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/29/setting-the-arrow-icon-color-of-a-disabled-checkbox-control-in-flex/ -->
<mx:Application name="ComboBox_disabledIconColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledIconColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="[One,Two,Three,Four,Five,Six,Seven,Eight]"
            iconColor="red"
            disabledIconColor="{colorPicker.selectedColor}"
            enabled="{checkBox.selected}" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2009/01/29/setting-the-arrow-icon-color-of-a-disabled-checkbox-control-in-flex/feed/ 0 Setting the dropdown menu border color on a ComboBox control in Flex http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/#comments Mon, 22 Sep 2008 02:54:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ The following example shows how you can set the border color for a Flex ComboBox control’s dropdown menu by setting the dropdownBorderColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ --> <mx:Application name="ComboBox_dropdownBorderColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object label="Four" /> [...]]]> The following example shows how you can set the border color for a Flex ComboBox control’s dropdown menu by setting the dropdownBorderColor style.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_dropdownBorderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dropdownBorderColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            dropdownBorderColor="{colorPicker.selectedColor}" />

</mx:Application>

You can also set the dropdownBorderColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_dropdownBorderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        ComboBox {
            dropdownBorderColor: red;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />

</mx:Application>

You can also set the dropdownBorderColor style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_dropdownBorderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                comboBox.setStyle("dropdownBorderColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="dropdownBorderColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />

</mx:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/ -->
<mx:Application name="ComboBox_dropdownBorderColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ColorPicker;
            import mx.controls.ComboBox;
            import mx.events.ColorPickerEvent;

            private var arr:Array;
            private var colorPicker:ColorPicker;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});
                arr.push({label:"Ten"});

                colorPicker = new ColorPicker();
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "dropdownBorderColor:";
                formItem.addChild(colorPicker);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChildAt(appControlBar, 0);

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                addChild(comboBox);
            }

            private function colorPicker_change(evt:ColorPickerEvent):void {
                comboBox.setStyle("dropdownBorderColor", evt.color);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/09/21/setting-the-dropdown-menu-border-color-on-a-combobox-control-in-flex/feed/ 1 Displaying different fonts in a dropdown menu on a ComboBox control in Flex http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/#comments Thu, 31 Jul 2008 14:56:04 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ The following example shows how you can set different fonts for different items in a Flex ComboBox control’s dropdown menu by using a custom item renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:ArrayCollection id="arrColl" source="{Font.enumerateFonts(true)}"> <mx:sort> <mx:Sort> <mx:fields> <mx:SortField name="fontName" [...]]]> The following example shows how you can set different fonts for different items in a Flex ComboBox control’s dropdown menu by using a custom item renderer.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ArrayCollection id="arrColl"
            source="{Font.enumerateFonts(true)}">
        <mx:sort>
            <mx:Sort>
                <mx:fields>
                    <mx:SortField name="fontName" />
                </mx:fields>
            </mx:Sort>
        </mx:sort>
    </mx:ArrayCollection>

    <mx:ComboBox id="comboBox"
            dataProvider="{arrColl}"
            labelField="fontName"
            fontSize="14"
            open="comboBox.dropdown.variableRowHeight = true;">
        <mx:itemRenderer>
            <mx:Component>
                <mx:Label fontFamily="{data.fontName}"
                        toolTip="{data.fontName}" />
            </mx:Component>
        </mx:itemRenderer>
    </mx:ComboBox>

</mx:Application>

View source is enabled in the following example.

For an example of doing this in the Flex 4 SDK, see “Displaying different fonts in a Spark List control in Flex 4″.

 
]]> http://blog.flexexamples.com/2008/07/31/displaying-different-fonts-in-a-dropdown-menu-on-a-combobox-control-in-flex/feed/ 15 Setting the label color on a disabled ComboBox control in Flex http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/ http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/#comments Sun, 20 Jul 2008 06:57:51 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/ The following example shows how you can set the label color on a disabled Flex ComboBox control by setting the disabledColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Array id="arr"> <mx:Object label="One" /> <mx:Object label="Two" /> <mx:Object label="Three" /> <mx:Object [...]]]> The following example shows how you can set the label color on a disabled Flex ComboBox control by setting the disabledColor style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#999999" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            enabled="{checkBox.selected}"
            disabledColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the disabledColor in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        ComboBox {
            disabledColor: red;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            enabled="{checkBox.selected}" />

</mx:Application>

Or, you can set the disabledColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                comboBox.setStyle("disabledColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="disabledColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="#999999"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}"
            enabled="{checkBox.selected}" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/19/setting-the-label-color-on-a-disabled-combobox-control-in-flex/feed/ 3 Setting the dropdown menu border thickness and border color on a ComboBox control in Flex http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/ http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/#comments Sat, 19 Jul 2008 06:37:57 +0000 Peter deHaan http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/ The following example shows how you can set the border color and border thickness on a Flex ComboBox control’s dropdown menu by setting the borderColor, borderThickness, and dropdownStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> ComboBox { dropdownStyleName: myDropdownStyleNom; [...]]]> The following example shows how you can set the border color and border thickness on a Flex ComboBox control’s dropdown menu by setting the borderColor, borderThickness, and dropdownStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        ComboBox {
            dropdownStyleName: myDropdownStyleNom;
        }

        .myDropdownStyleNom {
            borderColor: haloBlue;
            borderThickness: 5;
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
        <mx:Object label="Five" />
        <mx:Object label="Six" />
        <mx:Object label="Seven" />
        <mx:Object label="Eight" />
        <mx:Object label="Nine" />
        <mx:Object label="Ten" />
    </mx:Array>

    <mx:ComboBox id="comboBox"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.ComboBox;

            private var arr:Array;
            private var comboBox:ComboBox;

            private function init():void {
                arr = [];
                arr.push({label:"One"});
                arr.push({label:"Two"});
                arr.push({label:"Three"});
                arr.push({label:"Four"});
                arr.push({label:"Five"});
                arr.push({label:"Six"});
                arr.push({label:"Seven"});
                arr.push({label:"Eight"});
                arr.push({label:"Nine"});
                arr.push({label:"Ten"});

                var myDropdownStyleName:CSSStyleDeclaration;
                myDropdownStyleName = new CSSStyleDeclaration(".myDropdownStyleNom");
                myDropdownStyleName.setStyle("borderColor", "haloBlue");
                myDropdownStyleName.setStyle("borderThickness", 5);
                myDropdownStyleName.setStyle("fontWeight", "normal");

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.setStyle("dropdownStyleName", "myDropdownStyleNom");
                addChild(comboBox);
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/feed/ 2