Flex Examples » popUpWidthMatchesAnchorWidth 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 image gallery using the Spark PopUpAnchor control in Flex 4 http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/#comments Sun, 07 Feb 2010 16:05:03 +0000 Peter deHaan http://blog.flexexamples.com/?p=2413 The following example shows how you can create a simple image gallery using the Spark PopUpAnchor control in Flex 4 using the PopUpAnchor, BitmapImage, and MX Image controls.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ --> <s:Application name="Spark_PopUpAnchor_gallery_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:HGroup horizontalCenter="0" top="20"> <!-- 1 --> <s:Group mouseDown="fullImg1.displayPopUp = true;"> <!-- embedded thumbnail [...]]]> The following example shows how you can create a simple image gallery using the Spark PopUpAnchor control in Flex 4 using the PopUpAnchor, BitmapImage, and MX Image controls.

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/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_gallery_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:HGroup horizontalCenter="0" top="20">
        <!-- 1 -->
        <s:Group mouseDown="fullImg1.displayPopUp = true;">
            <!-- embedded thumbnail image -->
            <s:BitmapImage id="thumbImg1"
                    source="@Embed('assets/fx_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg1"
                    popUpHeightMatchesAnchorHeight="false"
                    width="100%" height="100%">
                <s:popUp>
                    <!-- dynamically loaded full image -->
                    <mx:Image source="assets/fx_appicon.jpg"
                            width="300" height="300"
                            mouseUp="fullImg1.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
 
        <!-- 2 -->
        <s:Group mouseDown="fullImg2.displayPopUp = true;">
            <s:BitmapImage id="thumbImg2"
                    source="@Embed('assets/ai_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg2"
                    popUpHeightMatchesAnchorHeight="false"
                    width="100%" height="100%">
                <s:popUp>
                    <mx:Image source="assets/ai_appicon.jpg"
                            width="300" height="300"
                            mouseUp="fullImg2.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
 
        <!-- 3 -->
        <s:Group mouseDown="fullImg3.displayPopUp = true;">
            <s:BitmapImage id="thumbImg3"
                           source="@Embed('assets/fl_player_appicon-tn.gif')" />
            <s:PopUpAnchor id="fullImg3"
                           popUpHeightMatchesAnchorHeight="false"
                           width="100%" height="100%">
                <s:popUp>
                    <mx:Image source="assets/fl_player_appicon.jpg"
                              width="300" height="300"
                              mouseUp="fullImg3.displayPopUp = false;" />
                </s:popUp>
            </s:PopUpAnchor>
        </s:Group>
    </s:HGroup>
 
</s:Application>

View source is enabled in the following example.

Or you could convert the PopUpAnchor code into a custom component, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Application name="Spark_PopUpAnchor_gallery_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:comps="comps.*">
 
    <s:HGroup horizontalCenter="0" top="20">
        <!-- 1 -->
        <comps:PopUpThumb id="thumb1"
                thumbnailImgClass="@Embed('assets/fx_appicon-tn.gif')"
                fullImgSrc="assets/fx_appicon.jpg" />
 
        <!-- 2 -->
        <comps:PopUpThumb id="thumb2"
                thumbnailImgClass="@Embed('assets/ai_appicon-tn.gif')"
                fullImgSrc="assets/ai_appicon.jpg" />
 
        <!-- 3 -->
        <comps:PopUpThumb id="thumb3"
                thumbnailImgClass="@Embed('assets/fl_player_appicon-tn.gif')"
                fullImgSrc="assets/fl_player_appicon.jpg" />
    </s:HGroup>
 
</s:Application>

And the custom PopUpThumb component, comps/PopUpThumb.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/ -->
<s:Group name="PopUpThumb"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        mouseDown="fullImg.displayPopUp = true;">
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var thumbnailImgClass:Class;
 
            [Bindable]
            public var fullImgSrc:String;
        ]]>
    </fx:Script>
 
    <!-- embedded thumbnail image -->
    <s:BitmapImage id="thumbImg"
                   source="{thumbnailImgClass}" />
    <s:PopUpAnchor id="fullImg"
                   popUpHeightMatchesAnchorHeight="false"
                   width="100%" height="100%">
        <s:popUp>
            <!-- dynamically loaded full image -->
            <mx:Image source="{fullImgSrc}"
                      width="300" height="300"
                      mouseUp="fullImg.displayPopUp = false;" />
        </s:popUp>
    </s:PopUpAnchor>
 
</s:Group>

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/07/creating-a-simple-image-gallery-using-the-spark-popupanchor-control-in-flex-4/feed/ 0 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 Creating a tile layout Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/#comments Thu, 16 Apr 2009 06:59:24 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ The following example shows how you can create a Spark DropDownList with a tile layout in Flex 4 by setting the layout property to a TileList object.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_TileLayout_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <s:DropDownList id="dropDownList" labelField="label" requireSelection="true" skinClass="skins.CustomDropDownListSkin" horizontalCenter="0" width="100" top="20"> <s:dataProvider> <s:ArrayList> [...]]]> The following example shows how you can create a Spark DropDownList with a tile layout in Flex 4 by setting the layout property to a TileList object.

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/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_TileLayout_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <s:DropDownList id="dropDownList"
            labelField="label"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            horizontalCenter="0"
            width="100"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="The" />
                <fx:Object label="Quick" />
                <fx:Object label="Brown" />
                <fx:Object label="Fox" />
                <fx:Object label="Jumps" />
                <fx:Object label="Over" />
                <fx:Object label="The" />
                <fx:Object label="Lazy" />
                <fx:Object label="Dog" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

And the custom skin class, skins/CustomDropDownListSkin.mxml, is as follows

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

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/04/15/creating-a-tile-layout-spark-dropdownlist-control-in-flex-gumbo/feed/ 4 Setting the width of the pop up on a Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/#comments Tue, 14 Apr 2009 06:59:24 +0000 Peter deHaan http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ The following example shows how you can set the drop down menu width on a Spark DropDownList control by setting the width property within a custom DropDownList skin.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ --> <s:Application name="Spark_DropDownList_skinClass_width_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="dropDownList" labelField="label" requireSelection="true" skinClass="skins.CustomDropDownListSkin" horizontalCenter="0" top="20"> <s:dataProvider> <s:ArrayList> <fx:Object label="Adobe AIR" /> <fx:Object [...]]]> The following example shows how you can set the drop down menu width on a Spark DropDownList control by setting the width property within a custom DropDownList skin.

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/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_skinClass_width_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="dropDownList"
            labelField="label"
            requireSelection="true"
            skinClass="skins.CustomDropDownListSkin"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Adobe AIR" />
                <fx:Object label="ColdFusion" />
                <fx:Object label="Dreamweaver" />
                <fx:Object label="Flash" />
                <fx:Object label="Flash Player" />
                <fx:Object label="Fireworks" />
                <fx:Object label="Flex" />
                <fx:Object label="Illustrator" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<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;
                    }
                    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);
            }
        ]]>
    </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"
                minHeight="22"
                maxHeight="134"
                width="300">
            <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: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"
            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.

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_skinClass_width_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 {
            skinClass: ClassReference("skins.CustomDropDownListSkin");
        }
    </fx:Style>
 
    <s:DropDownList id="dropDownList"
            labelField="label"
            requireSelection="true"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Adobe AIR" />
                <fx:Object label="ColdFusion" />
                <fx:Object label="Dreamweaver" />
                <fx:Object label="Flash" />
                <fx:Object label="Flash Player" />
                <fx:Object label="Fireworks" />
                <fx:Object label="Flex" />
                <fx:Object label="Illustrator" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_skinClass_width_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:Button id="btn"
                label="Set DropDownList skinClass"
                click="btn_clickHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import skins.CustomDropDownListSkin;
 
            protected function btn_clickHandler(evt:MouseEvent):void {
                dropDownList.setStyle("skinClass", CustomDropDownListSkin);
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="dropDownList"
            labelField="label"
            requireSelection="true"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Adobe AIR" />
                <fx:Object label="ColdFusion" />
                <fx:Object label="Dreamweaver" />
                <fx:Object label="Flash" />
                <fx:Object label="Flash Player" />
                <fx:Object label="Fireworks" />
                <fx:Object label="Flex" />
                <fx:Object label="Illustrator" />
            </s:ArrayList>
        </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/2009/04/13/setting-the-width-of-the-pop-up-on-a-spark-dropdownlist-control-in-flex-gumbo/feed/ 0