Flex Examples » DropDownList (Spark) http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Toggling the drop shadow on the Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/#comments Tue, 22 Jun 2010 00:07:18 +0000 Peter deHaan http://blog.flexexamples.com/?p=3180 The following example shows how you can toggle the drop shadow on the Spark DropDownList control in Flex 4 by setting the Boolean dropShadowVisible style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_dropShadowVisible_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:controlBarContent> <s:CheckBox id="cb" label="dropShadowVisible" selected="true" change="cb_changeHandler(event);" /> </s:controlBarContent>   <fx:Script> <![CDATA[ protected function cb_changeHandler(evt:Event):void { ddl.openDropDown(); } ]]> [...]]]> The following example shows how you can toggle the drop shadow on the Spark DropDownList control in Flex 4 by setting the Boolean dropShadowVisible style.

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/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropShadowVisible_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:controlBarContent>
        <s:CheckBox id="cb"
                label="dropShadowVisible"
                selected="true"
                change="cb_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function cb_changeHandler(evt:Event):void {
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            dropShadowVisible="{cb.selected}"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.


You can also set the dropShadowVisible 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/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropShadowVisible_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|DropDownList {
            dropShadowVisible: false;
        }
    </fx:Style>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropShadowVisible_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:controlBarContent>
        <s:CheckBox id="cb"
                label="dropShadowVisible"
                selected="true"
                change="cb_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function cb_changeHandler(evt:Event):void {
                ddl.setStyle("dropShadowVisible", cb.selected);
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:DropDownList>
 
</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/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/feed/ 0 Setting the text roll over color on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/#comments Thu, 13 May 2010 23:52:02 +0000 Peter deHaan http://blog.flexexamples.com/?p=3109 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 [...]]]> 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 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/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>

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/2010/05/13/setting-the-text-roll-over-color-on-a-spark-dropdownlist-control-in-flex-4/feed/ 0 Setting the border color on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/#comments Sat, 20 Mar 2010 17:09:04 +0000 Peter deHaan http://blog.flexexamples.com/?p=2624 In a previous example, “Setting the border alpha on a Spark DropDownList control in Flex 4″, we saw how you could set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

The following example shows how you can set the border color on a Spark [...]]]> In a previous example, “Setting the border alpha on a Spark DropDownList control in Flex 4″, we saw how you could set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

The following example shows how you can set the border color on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderColor style.

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/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="clrPckr" change="ddl.openDropDown();" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:DropDownList id="ddl"
            borderColor="{clrPckr.selectedColor}"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderColor_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|DropDownList {
            borderColor: haloOrange;
        }
    </fx:Style>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20"
            creationComplete="ddl.openDropDown();">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderColor_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:controlBarContent>
        <mx:Form>
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="clrPckr"
                        change="clrPckr_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function clrPckr_changeHandler(evt:ColorPickerEvent):void {
                ddl.setStyle("borderColor", evt.color);
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</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/2010/03/20/setting-the-border-color-on-a-spark-dropdownlist-control-in-flex-4/feed/ 1 Setting the border alpha on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/#comments Sat, 20 Mar 2010 07:26:09 +0000 Peter deHaan http://blog.flexexamples.com/?p=2621 The following example shows how you can set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_borderAlpha_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:controlBarContent> <s:Label text="borderAlpha:" /> <s:HSlider id="sl" minimum="0.0" maximum="1.0" value="1.0" snapInterval="0.1" stepSize="0.1" change="ddl.openDropDown();" /> </s:controlBarContent>   <s:DropDownList id="ddl" [...]]]> The following example shows how you can set the border alpha on a Spark DropDownList control’s popup menu in Flex 4 by setting the borderAlpha style.

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/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_borderAlpha_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:controlBarContent>
        <s:Label text="borderAlpha:" />
        <s:HSlider id="sl"
                minimum="0.0" maximum="1.0"
                value="1.0"
                snapInterval="0.1" stepSize="0.1"
                change="ddl.openDropDown();" />
    </s:controlBarContent>
 
    <s:DropDownList id="ddl"
            borderAlpha="{sl.value}"
            requireSelection="true"
            dropShadowVisible="false"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</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/2010/03/20/setting-the-border-alpha-on-a-spark-dropdownlist-control-in-flex-4/feed/ 0 Checking that an item is selected in the Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/03/12/checking-that-an-item-is-selected-in-the-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/03/12/checking-that-an-item-is-selected-in-the-spark-dropdownlist-control-in-flex-4/#comments Sat, 13 Mar 2010 00:49:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=2597 The following example shows how you can check whether the user has selected an item in the Spark DropDownList control in Flex 4 by setting the Boolean requiresSelection property to true or using a NumberValidator to check the DropDownList control’s selectedIndex property is greater than -1.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/12/checking-that-an-item-is-selected-in-the-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_requiresSelection_test" [...]]]> The following example shows how you can check whether the user has selected an item in the Spark DropDownList control in Flex 4 by setting the Boolean requiresSelection property to true or using a NumberValidator to check the DropDownList control’s selectedIndex property is greater than -1.

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/2010/03/12/checking-that-an-item-is-selected-in-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_requiresSelection_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:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <s:DropDownList id="ddl" prompt="Please select an item" requireSelection="true">
        <s:dataProvider>
            <s:ArrayList source="[one,two,three,four,five,six,seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

Or you can use a NumberValidator on the Spark DropDownList control to check that the selectedIndex property is greater than or equal to 0, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/12/checking-that-an-item-is-selected-in-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_selectedIndex_NumberValidator_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:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ValidationResultEvent;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                numValidator.validate();
            }
 
            protected function numValidator_validHandler(evt:ValidationResultEvent):void {
                Alert.show("DropDownList item selected: " + ddl.selectedItem.toString(), evt.type);
            }
 
            protected function numValidator_invalidHandler(evt:ValidationResultEvent):void {
                Alert.show(ddl.prompt, evt.type);
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <mx:NumberValidator id="numValidator"
                source="{ddl}"
                property="selectedIndex"
                minValue="0"
                lowerThanMinError="{ddl.prompt}"
                valid="numValidator_validHandler(event);"
                invalid="numValidator_invalidHandler(event);" />
    </fx:Declarations>
 
    <s:DropDownList id="ddl" prompt="Please select an item">
        <s:dataProvider>
            <s:ArrayList source="[one,two,three,four,five,six,seven]" />
        </s:dataProvider>
    </s:DropDownList>
 
    <s:Button label="validate" click="button1_clickHandler(event);" />
 
</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/2010/03/12/checking-that-an-item-is-selected-in-the-spark-dropdownlist-control-in-flex-4/feed/ 1 Displaying all items in a Spark DropDownList control drop down menu in Flex 4 http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/ http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/#comments Wed, 10 Feb 2010 20:20:33 +0000 Peter deHaan http://blog.flexexamples.com/?p=2471 The following example shows how you can display all items in a Spark DropDownList control’s drop down menu in Flex 4 by creating a custom DropDownList skin and removing the Scroller skin part.

Thanks to Andriy Panas for the no Scroller suggestion in http://bugs.adobe.com/jira/browse/SDK-22614.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/ --> <s:Application name="Spark_DropDownList_noScroller_test" [...]]]> The following example shows how you can display all items in a Spark DropDownList control’s drop down menu in Flex 4 by creating a custom DropDownList skin and removing the Scroller skin part.

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.

Thanks to Andriy Panas for the no Scroller suggestion in http://bugs.adobe.com/jira/browse/SDK-22614.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/ -->
<s:Application name="Spark_DropDownList_noScroller_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"
        creationComplete="numSteppr_changeHandler(event);">
    <s:layout>
        <s:VerticalLayout paddingLeft="20" paddingRight="20"
                paddingTop="20" paddingBottom="20" />
    </s:layout>
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="Number of items:">
                <s:NumericStepper id="numSteppr"
                        minimum="1" maximum="12"
                        value="2"
                        change="numSteppr_changeHandler(event);" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayList;
            import skins.CustomDropDownListSkin;
 
            [Bindable]
            protected var arrList:ArrayList = new ArrayList();
 
            protected function numSteppr_changeHandler(evt:Event):void {
                var arr:Array = [];
                var idx:uint;
                var len:uint = numSteppr.value;
                for (idx=0; idx<len; idx++) {
                    arr.push({label:"Item " + idx});
                }
                arrList.source = arr;
 
                ddl1.openDropDown();
                ddl2.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:HGroup verticalAlign="middle">
        <s:Label text="Default skin:" />
        <s:DropDownList id="ddl1"
                dataProvider="{arrList}"
                requireSelection="true" />
 
        <s:Label text="Custom skin:" />
        <s:DropDownList id="ddl2"
                dataProvider="{arrList}"
                requireSelection="true"
                skinClass="skins.CustomDropDownListSkin" />
    </s:HGroup>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/ -->
<s:SparkSkin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        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>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {
                return contentFill
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == false) {
                    if (border) {
                        border.visible = false;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 0;
                    }
                } else {
                    if (border) {
                        border.visible = true;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 1;
                    }
                }
 
                if (dropShadow) {
                    dropShadow.visible = getStyle("dropShadowVisible");
                }
                openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
 
                if (borderStroke) {
                    borderStroke.color = getStyle("borderColor");
                    borderStroke.alpha = getStyle("borderAlpha");
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!---
    The PopUpAnchor control that opens the drop-down list.
 
    <p>In a custom skin class that uses transitions, set the
    <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <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">
        <!--- This includes borders, background colors, scrollers, and filters. -->
        <s:Group id="dropDown" minHeight="22" >
            <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"
                    angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/>
 
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <!--- border stroke -->
                    <s:SolidColorStroke id="borderStroke" 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:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer" left="1" right="1" top="1" bottom="1">
                <s:layout>
                    <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                </s:layout>
            </s:DataGroup>
        </s:Group>
    </s:PopUpAnchor>
 
    <!---  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:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"
            mouseEnabled="false" mouseChildren="false"
            left="7" right="30" top="2" bottom="2" width="75" verticalCenter="1" />
 
</s:SparkSkin>

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/2010/02/10/displaying-all-items-in-a-spark-dropdownlist-control-drop-down-menu-in-flex-4/feed/ 0 Setting the horizontal scroll policy on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/#comments Sat, 06 Feb 2010 16:39:27 +0000 Peter deHaan http://blog.flexexamples.com/?p=2410 The following example shows how you can set the horizontal scroll policy on a Spark DropDownList control in Flex 4 by setting the horizontalScrollPolicy style on the drop down menu’s Scroller skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_scroller_horizontalScrollPolicy_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">   <fx:Script> <![CDATA[ import mx.core.ScrollPolicy; ]]> </fx:Script>   <s:DropDownList id="ddl" [...]]]> The following example shows how you can set the horizontal scroll policy on a Spark DropDownList control in Flex 4 by setting the horizontalScrollPolicy style on the drop down menu’s Scroller skin part.

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/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_scroller_horizontalScrollPolicy_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">
 
    <fx:Script>
        <![CDATA[
            import mx.core.ScrollPolicy;
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            width="100"
            horizontalCenter="0" top="20"
            open="ddl.scroller.setStyle('horizontalScrollPolicy', ScrollPolicy.OFF);">
        <s:dataProvider>
            <s:ArrayList source="[Accordion,ApplicationControlBar,Alert,Box,Button,ButtonBar,Canvas,ColorPicker]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.

Or you can set the horizontalScrollPolicy 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/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_scroller_horizontalScrollPolicy_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Group#dropDown #scroller {
            horizontalScrollPolicy: off;
        }
    </fx:Style>
 
    <s:DropDownList id="ddl"
            width="100"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[Accordion,ApplicationControlBar,Alert,Box,Button,ButtonBar,Canvas,ColorPicker]" />
        </s:dataProvider>
    </s:DropDownList>
 
</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/2010/02/06/setting-the-horizontal-scroll-policy-on-a-spark-dropdownlist-control-in-flex-4/feed/ 2 Setting a roll over open delay on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/02/03/setting-a-roll-over-open-delay-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/02/03/setting-a-roll-over-open-delay-on-a-spark-dropdownlist-control-in-flex-4/#comments Thu, 04 Feb 2010 02:50:15 +0000 Peter deHaan http://blog.flexexamples.com/?p=2379 The following example shows how you can set a roll over open delay on a Spark DropDownList control in Flex 4 by extending the DropDownList control, accessing the protected DropDownController object and setting the rollOverOpenDelay property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/03/setting-a-roll-over-open-delay-on-a-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_dropDownController_rollOverOpenDelay_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" xmlns:local="*"> <s:layout> <s:VerticalLayout horizontalAlign="center" paddingTop="20" /> </s:layout> [...]]]> The following example shows how you can set a roll over open delay on a Spark DropDownList control in Flex 4 by extending the DropDownList control, accessing the protected DropDownController object and setting the rollOverOpenDelay property.

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/2010/02/03/setting-a-roll-over-open-delay-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropDownController_rollOverOpenDelay_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"
        xmlns:local="*">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" paddingTop="20" />
    </s:layout>
    <s:controlBarContent>
        <mx:Form>
            <mx:FormItem label="rollOverOpenDelay:" direction="horizontal">
                <s:HSlider id="sl"
                        minimum="100" maximum="1500"
                        value="200"
                        change="init();" />
                <s:Label text="{sl.value} ms" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import spark.components.supportClasses.DropDownController;
 
            private function init():void {
                var con:DropDownController = dropper.controller;
                con.rollOverOpenDelay = sl.value;
            }
        ]]>
    </fx:Script>
 
    <local:MyDropDownList id="dropper"
            prompt="Roll over to open..."
            width="200"
            creationComplete="init();">
        <local:dataProvider>
            <s:ArrayList source="[Red,Orange,Yellow,Green,Blue,Purple]" />
        </local:dataProvider>
    </local:MyDropDownList>
 
</s:Application>

And the custom DropDownList, MyDropDownList.as, is as follows:

/** http://blog.flexexamples.com/2010/02/03/setting-a-roll-over-open-delay-on-a-spark-dropdownlist-control-in-flex-4/ */
package {
    import spark.components.DropDownList;
    import spark.components.supportClasses.DropDownController;
 
    public class MyDropDownList extends DropDownList {
        public function MyDropDownList() {
            super();
        }
 
        public function get controller():DropDownController {
            return super.dropDownController;
        }
 
        public function set controller(value:DropDownController):void {
            super.dropDownController = value;
        }
    }
}

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/2010/02/03/setting-a-roll-over-open-delay-on-a-spark-dropdownlist-control-in-flex-4/feed/ 1 Creating three related Spark DropDownList controls in Flex 4 http://blog.flexexamples.com/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/ http://blog.flexexamples.com/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/#comments Thu, 28 Jan 2010 20:58:24 +0000 Peter deHaan http://blog.flexexamples.com/?p=2348 In a previous example, “Creating two related ComboBoxes”, we saw how you could create two or three related MX ComboBox controls in Flex 3 by binding to the previous ComboBox control’s selected item.

The following example shows how you can create three related Spark DropDownList controls in Flex 4 by using databinding and XML.

[...]]]> In a previous example, “Creating two related ComboBoxes”, we saw how you could create two or three related MX ComboBox controls in Flex 3 by binding to the previous ComboBox control’s selected item.

The following example shows how you can create three related Spark DropDownList controls in Flex 4 by using databinding and XML.

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/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/ -->
<s:Application name="Spark_DropDownList_related_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">
 
    <fx:Declarations>
        <s:XMLListCollection id="dp">
            <fx:XMLList xmlns="">
                <country label="USA">
                    <state label="Alaska" city="AK">
                        <city label="Anchorage" />
                        <city label="Fairbanks" />
                        <city label="Juneau" />
                    </state>
                    <state label="California" abbr="CA">
                        <city label="San Francisco" />
                        <city label="Oakland" />
                        <city label="Los Angeles" />
                        <city label="Palm Springs" />
                        <city label="Sacramento" />
                    </state>
                    <state label="Nevada" abbr="NV">
                        <city label="Las Vegas" />
                        <city label="Reno" />
                        <city label="Carson City" />
                    </state>
                </country>
                <country label="Canada">
                    <province label="British Columbia"  abbr="BC">
                        <city label="Vancouver" />
                        <city label="Victoria" />
                    </province>
                    <province label="Alberta" abbr="AB">
                        <city label="Calgary" />
                        <city label="Edmonton" />
                    </province>
                </country>
            </fx:XMLList>
        </s:XMLListCollection>
    </fx:Declarations>
 
    <mx:Form horizontalCenter="0" top="20">
        <mx:FormItem label="Country:">
            <s:DropDownList id="countryDDL"
                    dataProvider="{dp}"
                    labelField="@label"
                    requireSelection="true" />
        </mx:FormItem>
        <mx:FormItem label="State:" required="true">
            <s:DropDownList id="stateDDL"
                    dataProvider="{new XMLListCollection(countryDDL.selectedItem.children())}"
                    labelField="@label"
                    requireSelection="false" />
        </mx:FormItem>
        <mx:FormItem label="City:" required="true">
            <s:DropDownList id="cityDDL"
                    dataProvider="{new XMLListCollection(stateDDL.selectedItem.children())}"
                    labelField="@label"
                    requireSelection="false" />
        </mx:FormItem>
    </mx:Form>
 
</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/2010/01/28/creating-three-related-spark-dropdownlist-controls-in-flex-4/feed/ 8 Setting the width of the dropdown menu on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/#comments Thu, 28 Jan 2010 19:20:28 +0000 Peter deHaan http://blog.flexexamples.com/?p=2344 In a previous example, “Setting the width of the dropdown menu on a ComboBox control in Flex”, we saw how you could set the width of the dropdown menu on a Flex MX ComboBox control by setting the dropdownWidth property.

The following example shows how you can change the width of the Spark DropDownList [...]]]> In a previous example, “Setting the width of the dropdown menu on a ComboBox control in Flex”, we saw how you could set the width of the dropdown menu on a Flex MX ComboBox control by setting the dropdownWidth property.

The following example shows how you can change the width of the Spark DropDownList control’s pop up menu so the pop up menu width matches the contents rather than the DropDownMenu button control’s width by setting the Boolean popUpWidthMatchesAnchorWidth property.

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/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_PopUpAnchor_popUpWidthMatchesAnchorWidth_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="list"
            labelField="name"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            width="120"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object name="Adobe Illustrator CS5" />
                <fx:Object name="Adobe AIR 2.0" />
                <fx:Object name="ColdFusion 9" />
                <fx:Object name="Dreamweaver CS5" />
                <fx:Object name="Flash Professional CS5" />
                <fx:Object name="Adobe Flash Player 10.1" />
                <fx:Object name="Fireworks CS5" />
                <fx:Object name="Flex 4.0" />
                <fx:Object name="Lightroom 2.0" />
                <fx:Object name="Photoshop CS5" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

Then in the custom DropDownList skin you need to set the popUpWidthMatchesAnchorWidth property to false, as seen in the following snippet:

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

View source is enabled in the following example.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/ -->
<s:SparkSkin name="CustomDropDownListSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        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>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            import mx.events.FlexEvent;
            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
 
            override public function get contentItems():Array {return contentFill};
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == false) {
                    if (border) {
                        border.visible = false;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 0;
                    }
                    if (scroller) {
                        scroller.minViewportInset = 0;
                    }
                } else {
                    if (border) {
                        border.visible = true;
                    }
                    if (background) {
                        background.left = background.top = background.right = background.bottom = 1;
                    }
                    if (scroller) {
                        scroller.minViewportInset = 1;
                    }
                }
 
                if (dropShadow) {
                    dropShadow.visible = getStyle("dropShadowVisible");
                }
 
                openButton.setStyle("cornerRadius", getStyle("cornerRadius"));
 
                if (borderStroke) {
                    borderStroke.color = getStyle("borderColor");
                    borderStroke.alpha = getStyle("borderAlpha");
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            protected function labelDisplay_updateCompleteHandler(evt:FlexEvent):void {
                hostComponent.toolTip = labelDisplay.toolTip;
            }
        ]]>
    </fx:Script>
 
    <!---
    The PopUpAnchor control that opens the drop-down list.
 
    <p>In a custom skin class that uses transitions, set the
    <code>itemDestructionPolicy</code> property to <code>none</code>.</p>
    -->
    <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="false">
 
        <!---
        This includes borders, background colors, scrollers, and filters.
        -->
        <s:Group id="dropDown" maxHeight="134" minHeight="22">
            <s:RectangularDropShadow id="dropShadow"
                    blurX="20" blurY="20"
                    alpha="0.45"
                    distance="7"
                    angle="90"
                    color="#000000"
                    left="0" right="0" top="0" bottom="0" />
 
            <s:Rect id="border"
                    left="0" right="0" top="0" bottom="0">
                <s:stroke>
                    <s:SolidColorStroke id="borderStroke" 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 id="scroller"
                    left="0" top="0" right="0" bottom="0"
                    hasFocusableChildren="false"
                    minViewportInset="1">
                <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 default skin is DropDownListButtonSkin. -->
    <s:Button id="openButton"
            skinClass="spark.skins.spark.DropDownListButtonSkin"
            focusEnabled="false"
            left="0" right="0" top="0" bottom="0" />
 
    <s:Label id="labelDisplay"
            maxDisplayedLines="1"
            mouseEnabled="false" mouseChildren="false"
            left="7" right="30" top="2" bottom="2"
            width="75"
            verticalAlign="middle"
            verticalCenter="1"
            showTruncationTip="true"
            updateComplete="labelDisplay_updateCompleteHandler(event);" />
 
</s:SparkSkin>

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/2010/01/28/setting-the-width-of-the-dropdown-menu-on-a-spark-dropdownlist-control-in-flex-4/feed/ 10