2 Replies Latest reply on Apr 13, 2010 2:08 PM by boneitis

    New Skinning For ComboBoxes

    boneitis

      Does anyone know a good resource for Skinning Comboboxes?  I know basic skining, and have been able to skin the text fields, and the 'openButton' for comboBox, however I am looking to do more.

       

      Specifically, I want to skin the BG of the dropDown so it will look similiar to this: http://screencast.com/t/NzY5YjYx however, with the BG scaling properly.

       

      Right now the BG is a MC i made in Flash (cs4) with 9 Slice enabled, and turned on. The skin that I currently have set on the box is as follows:

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
              xmlns:s="library://ns.adobe.com/flex/spark" 
              xmlns:mx="library://ns.adobe.com/flex/mx">
          <!-- host component -->
          <fx:Metadata>
              [HostComponent("spark.components.ComboBox")]
          </fx:Metadata>
          
          <!-- states -->
          <s:states>
              <s:State name="open" />
              <s:State name="disabled" />
              <s:State name="normal" />
          </s:states>
          
          <!-- SkinParts
          name=textInput, type=spark.components.TextInput, required=false
          name=openButton, type=spark.components.supportClasses.ButtonBase, required=true
          name=dropDown, type=flash.display.DisplayObject, required=false
          name=scroller, type=spark.components.Scroller, required=false
          name=dropIndicator, type=mx.core.IFactory, required=false
          name=dataGroup, type=spark.components.DataGroup, required=false
          -->
          
          <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">
              
              <s:Group id="dropDown" maxHeight="184" minHeight="50" >
                  
                  <!-- drop shadow -->
                  <!--- @private -->
                  <s:RectangularDropShadow id="dropShadow" blurX="20" blurY="20" alpha="0.45" distance="7" 
                                           angle="90" color="#FF0000" left="0" top="0" right="0" bottom="0"/>
                  
                  <!-- border -->
                  <!--- @private -->
                  <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                      <s:fill>
                          <s:SolidColor color="0xff0000" alpha="0"/>
                      </s:fill>
                      <s:stroke>
                          <!--- @private -->
                          <s:SolidColorStroke id="borderStroke" weight="1" alpha="0" />
                      </s:stroke>
                  </s:Rect>
                  
                  <mx:Image source="@Embed('src/com/mindspark/SkinTest1/assets/testSwf.swf#box2')"  id="background"  height="{dropDown.height}" width="{dropDown.width}"/>
                  
                  <!-- fill -->
                  <!--- Defines the appearance of drop-down list's background fill. -->
                  <s:Rect id="background2" left="1" right="1" top="1" bottom="1" >
                      <s:fill>
                          <!---  
                          @private
                          The color of the drop down's background fill.
                          The default color is 0xFFFFFF.
                          -->
                          <s:SolidColor id="bgFill" color="0x000000" alpha="0"/>
                      </s:fill>
                  </s:Rect>
                  
                  <!--- @private -->
                  <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" hasFocusableChildren="false" minViewportInset="1">
                      <!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
                      <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>
          
          <s:TextInput id="textInput" text="DOOOGs" skinClass="com.mindspark.SkinTest1.view.skin.TextInputSkin" />
          
          <!---  The default skin is ComboBoxButtonSkin. 
          @copy spark.components.supportClasses.DropDownListBase#openButton
          @see spark.skins.spark.ComboBoxButtonSkin -->
          <s:Button id="openButton" width="19" right="0" top="0" bottom="0" focusEnabled="false"
                    skinClass="com.mindspark.SkinTest1.view.skin.OpenButtonSkin" />  
          
      </s:Skin>
      

       

       

       

      Any help to what i am doing wrong, or a point to a good resource would be really super.  Thanks for the help.