Removing the vertical separator from the Spark DropDownList control in Flex 4

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/18/removing-the-vertical-separator-from-the-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:Application name="Spark_DropDownList_skinClass_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"
            prompt="Please select a thing..."
            labelField="label"
            skinClass="skins.CustomDropDownListSkin"
            horizontalCenter="0"
            top="20">
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="One" />
                <fx:Object label="Two" />
                <fx:Object label="Three" />
                <fx:Object label="Four" />
                <fx:Object label="Five" />
                <fx:Object label="Six" />
                <fx:Object label="Seven" />
                <fx:Object label="Eight" />
                <fx:Object label="Nine" />
            </s:ArrayList>
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/04/18/removing-the-vertical-separator-from-the-spark-dropdownlist-control-in-flex-gumbo/ -->
<s:SparkSkin name="CustomDropDownListButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        minWidth="21" minHeight="21">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
    <![CDATA[
        [HostComponent("spark.components.Button")]
    ]]>
    </fx:Metadata>
 
     <fx:Script>
        /* Define the skin elements that should not be colorized. 
           For dropDownList buttons, 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};
    </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 color="0x000000" 
                               alpha="0.5625"
                               alpha.down="0.6375" />
                <s:GradientEntry color="0x000000" 
                               alpha="0.75" 
                               alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 8: arrow -->
    <!--- The arrow graphic displayed in the anchor button. -->
    <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">
                <!--- The first part of the arrow's gradient fill. The default alpha is .6. The default color if 0x000000. -->
                <s:GradientEntry id="arrowFill1" color="0" alpha="0.6" />
                <!--- The second part of the arrow's gradient fill. The default alpha is .6. The default color if 0x000000. -->
                <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
            </s:RadialGradient>
        </s:fill>
    </s:Path>
 
</s:SparkSkin>