flex 4   sdk 4.5.1   

  <s:ComboBox width="60" height="20"/>

生成一个默认的combobox

  

然后在设计模式 --属性--样式--外观 --创建外观  为combobox设置新的皮肤：

 

自动生成如下的皮肤文件:

 

 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"   
  3.         xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5">   
  4.       
  5.     <!-- host component --> 
  6.     <fx:Metadata> 
  7.         <![CDATA[   
  8.         /**   
  9.         * @copy spark.skins.spark.ApplicationSkin#hostComponent  
  10.         */  
  11.         [HostComponent("spark.components.ComboBox")]  
  12.         ]]> 
  13.     </fx:Metadata>   
  14.       
  15.     <s:states> 
  16.         <s:State name="normal" /> 
  17.         <s:State name="open" /> 
  18.         <s:State name="disabled" /> 
  19.     </s:states> 
  20.       
  21.     <!---   
  22.         The PopUpAnchor control that opens the drop-down list.   
  23.           
  24.         <p>In a custom skin class that uses transitions, set the   
  25.         <code>itemDestructionPolicy</code> property to <code>none</code>.</p> 
  26.     --> 
  27.     <s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open" 
  28.                    left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto" 
  29.                    popUpPosition="below" popUpWidthMatchesAnchorWidth="true"> 
  30.           
  31.         <!---   
  32.             This includes borders, background colors, scrollers, and filters.   
  33.             @copy spark.components.supportClasses.DropDownListBase#dropDown  
  34.         --> 
  35.         <s:Group id="dropDown"> 
  36.               
  37.             <!-- drop shadow --> 
  38.             <!--- @private --> 
  39.             <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7"   
  40.                                      angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> 
  41.  
  42.    
  43.               
  44.             <!-- fill --> 
  45.             <!--- Defines the appearance of drop-down list's background fill. --> 
  46.             <s:Rect id="background" left="1" right="1" top="1" bottom="1" > 
  47.                 <s:fill> 
  48.                     <!---    
  49.                         @private  
  50.                         The color of the drop down's background fill.  
  51.                         The default color is 0xFFFFFF.  
  52.                     --> 
  53.                     <s:SolidColor id="bgFill" color="0xFFFFFF" /> 
  54.                 </s:fill> 
  55.             </s:Rect> 
  56.               
  57.             <!--- @private --> 
  58.             <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1"> 
  59.                 <!--- @copy spark.components.SkinnableDataContainer#dataGroup--> 
  60.                 <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer"> 
  61.                     <s:layout> 
  62.                         <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/> 
  63.                     </s:layout> 
  64.                 </s:DataGroup>   
  65.             </s:Scroller> 
  66.         </s:Group> 
  67.     </s:PopUpAnchor> 
  68.       
  69.     <!---  The default skin is ComboBoxButtonSkin.   
  70.             @copy spark.components.supportClasses.DropDownListBase#openButton  
  71.             @see spark.skins.spark.ComboBoxButtonSkin --> 
  72.     <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false" 
  73.               skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" />    
  74.     <!--- @copy spark.components.ComboBox#textInput --> 
  75.     <s:TextInput id="textInput" enabled.disabled="false" 
  76.                  left="0" right="18" top="0" bottom="0"   
  77.                  skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>   
  78.       
  79. </s:SparkSkin> 
  80.  
 
  
我删掉了生成的文件里面所有<fx:script>标签里面的东西以及<s:PopUpAnchor id="popUp" 里面border。
 
  
其中：
 
  
 <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
               skinClass="spark.skins.spark.ComboBoxButtonSkin" tabEnabled="false" /> 
 
  
控制下拉按钮的样式；
 
  
 <s:TextInput id="textInput" enabled.disabled="false"
                  left="0" right="18" top="0" bottom="0" 
                  skinClass="spark.skins.spark.ComboBoxTextInputSkin"/>
 
  
控制显示框的样式。
 
  
然后，为Button 和 textinput 的skinClass属性分别设置新的皮肤 如下：
     <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
               skinClass="skins.ComboboxButtonSkin" tabEnabled="false" />  
      <s:TextInput id="textInput" enabled.disabled="false"
                  left="0" right="18" top="0" bottom="0" 
                  skinClass="skins.ComboBoxTextInputSkin"/> 
  其中   skins.ComboboxButtonSkin为 skins包下的ComboboxButtonSkin.mxml，代码如下：
 
  
 
 
  
 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009"   
  4.                    xmlns:s="library://ns.adobe.com/flex/spark"   
  5.                    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
  6.                    minWidth="21" minHeight="21"   
  7.                    alpha.disabled="0.5"> 
  8.       
  9.     <fx:Metadata> 
  10.         <![CDATA[   
  11.         /**   
  12.         * @copy spark.skins.spark.ApplicationSkin#hostComponent  
  13.         */  
  14.         [HostComponent("spark.components.Button")]  
  15.         ]]> 
  16.     </fx:Metadata> 
  17.       
  18.       
  19.     <!-- states --> 
  20.     <s:states> 
  21.         <s:State name="up" /> 
  22.         <s:State name="over" /> 
  23.         <s:State name="down" /> 
  24.         <s:State name="disabled" /> 
  25.     </s:states> 
  26.     <s:Rect left="2" right="2" top="2" bottom="2" id="border" height="20"> 
  27.         <s:fill> 
  28.             <s:SolidColor color="#FFFFFF" alpha="1.0" /> 
  29.         </s:fill> 
  30.     </s:Rect> 
  31.     <s:Rect left="1" right="1" top="1" bottom="1" id="fill"> 
  32.         <s:fill> 
  33.             <s:LinearGradient> 
  34.                 <s:GradientEntry color="#FFFFFF" alpha="0.5"/> 
  35.             </s:LinearGradient> 
  36.         </s:fill> 
  37.     </s:Rect> 
  38.     <s:Path right="6" verticalCenter="0" id="arrow" 
  39.             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"> 
  40.          <s:fill> 
  41.             <s:RadialGradient rotation="90" focalPointRatio="1"> 
  42.                 <s:GradientEntry  color="0" alpha="0.6" /> 
  43.                 <s:GradientEntry  color="0" alpha="0.8" /> 
  44.                 </s:RadialGradient> 
  45.         </s:fill> 
  46.     </s:Path> 
  47.  
  48. </s:SparkButtonSkin> 
 
  
skins.ComboBoxTextInputSkin"为skins包下的ComboBoxTextInputSkin，代码如下：
 
  
 
 
  
 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2. --> 
  3. <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
  4.              xmlns:fb="http://ns.adobe.com/flashbuilder/2009"   
  5.              alpha.disabledStates="0.5" blendMode="normal"> 
  6.       
  7.     <fx:Metadata> 
  8.         <![CDATA[   
  9.         /**   
  10.         * @copy spark.skins.spark.ApplicationSkin#hostComponent  
  11.         */  
  12.         [HostComponent("spark.components.TextInput")]  
  13.         ]]> 
  14.     </fx:Metadata>   
  15.       
  16.       
  17.     <s:states> 
  18.         <s:State name="normal"/> 
  19.         <s:State name="disabled" stateGroups="disabledStates"/> 
  20.         <s:State name="normalWithPrompt"/> 
  21.         <s:State name="disabledWithPrompt" stateGroups="disabledStates"/> 
  22.     </s:states> 
  23.       
  24.     <!-- border -->   
  25.     <!--- @private --> 
  26.     <s:Rect left="1" right="1" top="1" bottom="1" id="border"> 
  27.         <s:fill> 
  28.             <s:SolidColor color="0xFFFFFF" /> 
  29.         </s:fill> 
  30.     </s:Rect> 
  31.       
  32.     <!-- fill --> 
  33.     <!--- Defines the appearance of the TextInput component's background. --> 
  34.     <s:Rect id="background" left="1" right="1" top="1" bottom="1"> 
  35.         <s:stroke> 
  36.             <s:SolidColorStroke color="#FFFFFF" weight="2" id="bgFill"/> 
  37.         </s:stroke> 
  38.     </s:Rect> 
  39.       
  40.     <!-- shadow --> 
  41.     <!--- @private --> 
  42.     <s:Rect left="1" top="1" right="1" height="1" id="shadow"> 
  43.         <s:fill> 
  44.             <s:SolidColor color="0xFFFFFF" alpha="1.0" /> 
  45.         </s:fill> 
  46.     </s:Rect> 
  47.       
  48.     <!-- text --> 
  49.     <!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay --> 
  50.     <s:RichEditableText id="textDisplay" 
  51.                         verticalAlign="middle" 
  52.                         widthInChars="10" 
  53.                         left="1" right="1" top="1" bottom="1" /> 
  54.     <!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. --> 
  55.     <s:Label id="promptDisplay" maxDisplayedLines="1" 
  56.              verticalAlign="middle" 
  57.              mouseEnabled="false" mouseChildren="false" 
  58.              includeIn="normalWithPrompt,disabledWithPrompt"   
  59.              includeInLayout="false" 
  60.              /> 
  61.       
  62. </s:SparkSkin> 
 
  
然后修改本文开头的自动生成的combobox的皮肤文件，为它加一个边框border：
 
  
 
 
  
 
  
  1.        </s:Group> 
  2.    </s:PopUpAnchor> 
  3.  <s:Rect left="0" right="0" top="0" bottom="0" width="65" height="20"  id="border">
      <s:stroke>
       <s:LinearGradientStroke rotation="90">
        <s:GradientEntry color="#909090" 
             alpha="0.5625"/>
        <s:GradientEntry color="#909090"
             alpha="0.75" />
       </s:LinearGradientStroke>
      </s:stroke>
     </s:Rect>
  4.    <!---  The default skin is ComboBoxButtonSkin.   
  5.            @copy spark.components.supportClasses.DropDownListBase#openButton  
  6.            @see spark.skins.spark.ComboBoxButtonSkin --> 
  7.    <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false" height="20" 
  8.              skinClass="skins.ComboboxButtonSkin" tabEnabled="false" />    
  9.    <!--- @copy spark.components.ComboBox#textInput --> 
  10.    <s:TextInput id="textInput" enabled.disabled="false" 
  11.                 left="0" right="18" top="0" bottom="0"   
  12.                 skinClass="skins.ComboBoxTextInputSkin"/>  
 
  
这样就会生成如下图所示的没有竖直分隔符的combobox：
 
  
 
  
本方法的具体思想就是：利用ComboboxButtonSkin   和 ComboBoxTextInputSkin两个皮肤文件，去掉Button 和 textInput的边框，然后为Combobox整体添加一个边框。另外，我删了所有生成的文件里面的<fx:script>标签里面的内容，因为我也不知道干什么的，但是删了以后不影响实现设计- -
 
  
  学习ING。。