Combobox skinning

Hello guys,
I'm trying to work on a ComboBox, that looks like one from Word or Excel 2007. Therefore I need to be able, to skin the ComboBox list, that opens, whenever I click the ComboBox. How do I do this programatically?
I just can change it, when I go to the Library, but this is something I can't do, because I need to use the standard - ComboBox also. I tried following:
this.cB.dropdown.setStyle("cellRenderer",ListRenderer); <- this works, but I can only change one item and not the whole List
this.cB.setStyle("skin",test); this.cB.dropdown.setStyle("List_Skin",test);
this.cB.dropdown.setStyle("List_skin",test); this.cB.setStyle("List_Skin",test);
this.cB.setStyle("List_skin",test);
Can anyone please help me? I really need to get this.
Greets from germany

I think you still haven't got, what I need. I already have skinned the ComboBox itself, and want to skin the List from the ComboBox. The 2 Screenshots should reveal the difference. So, how do I do it?

Similar Messages

Dispatching an event from an itemRenderer

Hello everybody,
I can't find what is the best way to do that with spark.
I have a SkinnableComponent that implements IDataRenderer (it owns a button called "addBtn"). I am using it as the itemRenderer of a dataGroup. The skin is a copy of ComboBox skin.
My custom combobox component class (which is using the copied combobox skin) is doing so:
override protected function partAdded(partName:String, instance:Object):void
     super.partAdded(partName, instance);
     if (instance == dataGroup)
          dataGroup.addEventListener("addItem", dispatchAddItemEvent);
override protected function partRemoved(partName:String, instance:Object):void
     super.partRemoved(partName, instance);
     if (instance == dataGroup)
          dataGroup.removeEventListener("addItem", dispatchAddItemEvent);
          trace("removing 'addItem' listener on", dataGroup);
public function dispatchAddItemEvent(e:DynamicEvent):void
     trace("Gotcha!")
And my ItemRenderer component class has this:
override protected function partAdded(partName:String, instance:Object):void
     super.partAdded(partName, instance);
     if (instance == addBtn)
          addBtn.addEventListener(MouseEvent.MOUSE_DOWN, dispatchAddItemEvent);
private function dispatchAddItemEvent(e:MouseEvent):void
     e.stopImmediatePropagation();
     var evt:Event = new Event("addItem", false, false);
     dispatchEvent(evt);
Result is, i never see "Gotcha!" in the console . And yet i know for sure that my IRs' parent is the same dataGroup from upthere. So i dont really understand what's happening here.
Now i know that if i do new Event("addItem", true, true) it would work, but i dont like bubbling . Do i HAVE to ???
Cheers !

Well, I dont see any other approach, unless the virtualLayout = false is set on the list. If the virtualLayout is false, then each itemrender would catch the event and set the property on itself.

Trouble skinning AS2 ComboBox component

I'm using Flash CS3 and want to create a custom ComboBox. I've followed the steps outlined in "Editing component skins in a new document" (http://livedocs.adobe.com/flash/mx2004/main_7_2/wwhelp/wwhimpl/common/html/wwhelp.htm?cont ext=Flash_MX_2004&file=00002045.html#1120753), but every time I get to the step where I drag the ComboBox Assets folder from the HaloTheme.fla library into my library, if I test movie at that point my combobox has become an unclickable white rectangle with no label, button or anything. Am I doing something wrong? Any suggestions would be welcome.
Thanks!

start with a new fla and follow the directions.

New Skinning For ComboBoxes

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">
    
    <fx:Metadata>
        [HostComponent("spark.components.ComboBox")]
    </fx:Metadata>
    
    <s:states>
        <s:State name="open" />
        <s:State name="disabled" />
        <s:State name="normal" />
    </s:states>
    
    <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" >
            
            
            <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"/>
            
            
            <s:Rect id="border" left="0" right="0" top="0" bottom="0">
                <s:fill>
                    <s:SolidColor color="0xff0000" alpha="0"/>
                </s:fill>
                <s:stroke>
                    
                    <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}"/>
            
            
            <s:Rect id="background2" left="1" right="1" top="1" bottom="1" >
                <s:fill>
                    
                    <s:SolidColor id="bgFill" color="0x000000" alpha="0"/>
                </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>
    <s:TextInput id="textInput" text="DOOOGs" skinClass="com.mindspark.SkinTest1.view.skin.TextInputSkin" />
    
    <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.

Hi,
If you set the constraints rather than width and height it should work
<mx:Image source="@Embed('src/com/mindspark/SkinTest1/assets/testSwf.swf#box2')" id="background"
top="1" left="1" bottom="1" right="1"/>
David.

Skinning combobox rectBorder class... only!

preface: I have experience skinning components.
Issue: trying to change the rectBorder class ONLY on the
combobox instances. no others. can anyone help me with this? I've
changed the rectBorder for entire documents before, but have never
been able to target it to one type of component.
any guidance, links or heckling is appreciated!

Setting of contentBackgroundAlpha for the combobox worked.

Skinning ComboBox

gooday all
i am try skinning the Combobox component
follows the Help file, dragged the
MMDefault>>ComboBoxAssets folder to my fla
however when i compile, it tells me below :
The class or interface 'ComboBase' could not be loaded.
any idea??
thankyou

Setting of contentBackgroundAlpha for the combobox worked.

Problems skinning/styling ComboBox component

So the first image is the design brief, and below it is my attempt so far. Some ways to go, and the limitations and scarce documentation of this process is getting to me. So i'm putting a call out to see if anyone's well across this process and could assist, or step me through it?
been a while since i skinned a component in AS2, and I remember I prefered to write my own components rather than go through this process at the time. but i am hoping to use the built-in Flash component this time.
So what I need help with is:
Adjust scrollbar scrubber and track width, hopefully add padding around scrubber, and hopefully this would resolve the issue of losing the scrubber's black border on the right.
Resolve issues with the combo-button (what's that white border doing there?)
Style font correctly in combo-button
Increase list row height
Add dotted line between list rows
(I'm ignoring the blue numbers)
If anyone can help with even just one of those issues, i'd love to hear from you.
Info about my attempt so far:
I have skinned several clips, such as scrollThumb*, scrollUpArrow*, scrollDownArrow*, comboDownArrow*, etc.
I have styled with the following:
comboBox.setStyle("backgroundColor", 0x504C4B);
comboBox.dropdown.setStyle("backgroundColor", 0x504C4B);
comboBox.setStyle("themeColor", 0x1F90AE);
comboBox.setStyle("color", 0xC4C0BF);
comboBox.setStyle("textSelectedColor", 0xC4C0BF);
comboBox.setStyle("textRollOverColor", 0xC4C0BF);
comboBox.setStyle("alternatingRowColors", [0x504C4B, 0x504C4B]);
comboBox.setStyle("borderStyle", 'none');
I have attached the fla I've worked with so far in a zip.
Thanks for your help!

Well I resolved this merely by lowering my expectations!
Leaving this unanswered because I am hoping there must be answers to these issues out there for future reference.
But for now, my comboBox looks like this:
And i achieve this by skinning some clips, and adjusting my styling code:
combo.setStyle("backgroundColor", 0x504C4B);
combo.dropdown.setStyle("backgroundColor", 0x504C4B);
combo.setStyle("themeColor", 0x1F90AE);
combo.setStyle("rollOverColor", 0x46bbda);
combo.setStyle("color", 0xC4C0BF);
combo.setStyle("textSelectedColor", 0xFFFFFF);
combo.setStyle("textRollOverColor", 0xFFFFFF);
combo.setStyle("alternatingRowColors", [0x504C4B, 0x504C4B]);
combo.setStyle("borderStyle", 'none');
combo.text_mc.setStyle("borderStyle","none");
combo.text_mc.setStyle("themeColor", 0x00FF99);
combo.text_mc.setStyle("borderColor",0xFFFFFF);
combo.text_mc.setStyle("color",0xC4C0BF);
combo.dropdown.setStyle("color",0xC4C0BF);

Skinned ComboBox has no custom skin if exported on frame other than 1

I have skinned the combo box (mainly the up/down arrows) - it
all works if I export classes on the first frame, but I need to do
it on some other frame for progressive downloading.
I have checked the linkage of everything related to this, I
think, and they all have "export in first frame" unchecked, and I
set my global settings "export frame for classes = 2", and then the
combo box component is in the third frame or later, but it doesn't
work...
Example:
ComboBox Assets MovieClip is set to "export in first frame"
Global is set to "export frame for classes = 1"
ComboBox component is in frame 3.
It works.
ComboBox Assets MovieClip is set to "export in first frame"
unchecked
Global is set to "export frame for classes = 2"
ComboBox component is in frame 3.
No skins...
Any ideas? Thanks.

Since no one was able to help with this, both here and at
some other Flash forums, I thought I would post the answer, in case
it can help someone else. After fooling around with this for
multiple hours, I found somewhat of a solution.
The assets for the custom-skinned combo box look like this in
my library:
ComboBoxAssets (folder)
....ComboBoxAssets (MovieClip)
....Elements (folder)
........ComboArrow (graphic)
........ComboShape2 (graphic)
........ComboGrad1 (graphic)
........ComboShape1 (graphic)
........ComboThemeColor (MovieClip)
........ComboThemeColor1 (MovieClip)
....States (folder)
........ComboDownArrowOver (MovieClip)
........ComboDownArrowDown (MovieClip)
........ComboDownArrowUp (MovieClip)
........ComboDownArrowDisabled (MovieClip)
The ComboBoxAssets MovieClip contains all of the other stuff,
basically - all 4 of the states from the States folder are inside
it.
I found, that in order to make this work (for exporting on
some other frame but 1), the only way I can get it to work so far,
is this:
1. ComboBox (component) -> uncheck "Export in first frame"
2. ComboBoxAssets (MovieClip)- > uncheck "Export in first
frame"
3. ComboDownArrowOver (MovieClip) ->
CHECK "Export in first frame"
4. ComboDownArrowDown (MovieClip) ->
CHECK "Export in first frame"
5. ComboDownArrowUp (MovieClip) ->
CHECK "Export in first frame"
6. ComboDownArrowDisabled (MovieClip) ->
CHECK "Export in first frame"
The 6 pieces in the Elements folder all have nothing checked.
This makes no sense to me, but as soon as you uncheck "Export
in first frame" on any one of 3,4,5,6 above (which are nested
MovieClips inside ComboBoxAsset), then that part of the custom skin
will not appear in the compiled movie. The main Assets clip must
export in some other frame, but the other nested clips of it must
be set to export in the first frame.
I don't know if this is a bug, or a feature, or what...
One of the weird things is, that even when set like the
above, there is indeed nothing in the first frame according to the
Bandwidth Profiler (like you want). Weird. Anyway, that's how I got
it to work.

Skinning Cell Renderer for ComboBox

How does one change styles for the CellRenderer of a
ComboBox?
Flash help gives a nice example on how to skin CellRenderer
styles for Datagrid and TileList components, but doesn't mention
anything on how to do the same for a ComboBox.
The code example for Datagrid and TileList doesn't work for
ComboBox.

Hi camickr - I apologize for initiating new threads. Although I am aware that I should reply to follow-up, to me these was a totally different question from the others, although the context was the same.
I'll be more careful though !
Thanks for your reply. Actually I got the two (Boolean and Object) renderers working. The problem I am having now is that before I implented the rendering piece, once I clicked on a row, it got highlighted, however now, after implementing these, that doesn't happen anymore. How can I get it to behave as before, where it highlighted a particular row ?
Here is the code. Thanks again !
    table.setDefaultRenderer(Boolean.class, new TableRenderer());
   table.setDefaultRenderer(Object.class, new TableTextRenderer());
//cell renderers
class TableRenderer extends JCheckBox implements TableCellRenderer {
    public Component getTableCellRendererComponent(JTable table,
                            Object value, boolean isSelected,
                            boolean hasFocus, int row, int column ) {
        setSelected(((Boolean)value).booleanValue());
          if( row >= 3){
            setBackground( Color.yellow );
        else setBackground(Color.white);
        return this;
class TableTextRenderer extends JTextArea implements TableCellRenderer {
      public Component getTableCellRendererComponent(JTable table,
                              Object value, boolean isSelected,
                              boolean hasFocus, int row, int column ) {
    JTextArea label = new JTextArea();
    label.setText((String)value);
    label.setBackground(Color.yellow);
            if( row >= 3 && column == 0){
              setBackground( Color.yellow );
         else label.setBackground(Color.white);
return label;
}

Graphical skin for editable ComboBox

I am using graphical skins to style a ComboBox. They work fine for a normal combobox. When I make it editable, Flex no longer uses the upSkin, overSkin and downSkin for the editable text area. It seems to use the default Flex skin instead. It is using my editableUpSkin, editableOverSkin and editableDownSkin for the arrow area, though. What do I need to change to use my graphical skins for both the editable text area and the arrow area?
Thanks!

Maybe you need to specify a custom itemRenderer you have skinned as well.
If this post answers your question or helps, please mark it as such.
Greg Lafrance - Flex 2 and 3 ACE certified
www.ChikaraDev.com
Flex / AIR Development, Training, and Support Services

ComboBox inheriting button skin - how to override

Using Flex Builder 3.
I have set up a Button style in the stylesheet so all buttons pick up the up, over, and down skins.
The problem is no matter what I do I cannot get the ComboBox to not use the skins defined for Button.
Is there a way of overriding the skins to not use a skin. I've set up a specific style for the ComboBox, but it still picks up the button skins. I've tried both using ComboBox for the style descriptor and set a specific style name like myComboBox and set the style on the combo box in the mxml.
What is strange is that from the documentation it doesn't look like ComboBox inherits any styles from Button. So this makes no sense.
Any ideas?
Thanks,
Cindy

Button in stylesheet:
Button
corner-radius: 3;
font-size: 11;
font-weight: normal;
color: #0860AB;
up-skin: Embed(source="../images/bttn-bg-off2.gif",scaleGridLeft="5",scaleGridTop="5",scaleGridRight="17",scaleGridBottom="11");
over-skin: Embed(source="../images/newBlueButtonOver2.png",scaleGridLeft="3",scaleGridTop="4",scaleGridRight="22",scaleGridBottom="13");
down-skin: Embed(source="../images/newBlueButtonDown.png",scaleGridLeft="3",scaleGridTop="4",scaleGridRight="22",scaleGridBottom="13");
padding-top: 0;
padding-bottom: 0;
padding-left: 5;
padding-right: 5;
style set up for combo box in mxml: dropdownStyleName="myDropDown"
.myDropDown {
corner-radius: 0;
fill-colors: #FFFFFF, #FFFFFF;
fill-alphas: 1.0, 1.0;
border-color: #C0C0C0;
theme-color: #C0C0C0;
roll-over-color: #d2e1ea;
selection-color: #A6CAE1;
font-size: 11;}
I even tried just setting the styleName property in the mxml, but it didn't do anything either.
-Cindy

Spark skinning - combobox transparent background issue

Hi,
I have a custom combobox component whose background is transparent when it is in a titlewindow , but looks opaque in a cell of a datagrid. The code for background for combobox is

<s:Rect id="background" left="1" right="1" top="1" bottom="1" >
<s:fill>

<s:SolidColor id="bgFill" color="0xFFFFFF"/>
</s:fill>
</s:Rect>
The code for background fill of titlewindow is


<s:Rect id="background" left="1" top="1" right="1" bottom="1">
<s:fill>

<s:SolidColor id="backgroundFill" color="#FFFFFF"/>
</s:fill>
</s:Rect>
Though setting the alpha to 1 in either code did not work. Please help.

Setting of contentBackgroundAlpha for the combobox worked.

Help skinning ComboBox and Button......

Hi
I've been skinning some components and am having trouble
changing the colours of the button in media playback component and
the white and grey border round the listbox (i've included a
closeup of this in the image to illustrate and highlighted the
problems in red).
Any help would be much appreciated as i am going mad.
Thanks
http://img.photobucket.com/albums/v337/Hampco01/player-test.gif
I've tried creating a new theme and looked at the as files in
the classes folder but nothing i change seems to work.
HELP!

Anyone with ideas?

Error while creating a custom combobox for Spark DataGrid

I am getting the following run time error:
Error: Required skin part openButton cannot be found.
    atspark.components.supportClasses::SkinnableComponent/findSkinParts() [E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\componen ts\supportClasses\SkinnableComponent.as:671]
    atspark.components.supportClasses::SkinnableComponent/attachSkin()[E: \dev\hero_private_beta\frameworks\projects\spark\src\spark\components\ supportClasses\SkinnableComponent.as:646]
    atspark.components.supportClasses::SkinnableComponent/validateSkinCha nge()[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\com ponents\supportClasses\SkinnableComponent.as:406]
    atspark.components.supportClasses::SkinnableComponent/commitPropertie s()[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\compo nents\supportClasses\SkinnableComponent.as:420]
     atspark.components.supportClasses::ListBase/commitProperties()[E:\dev \hero_private_beta\frameworks\projects\spark\src\spark\components\supp ortClasses\ListBase.as:808]
    atspark.components::List/commitProperties()[E:\dev\hero_private_beta\ frameworks\projects\spark\src\spark\components\List.as:954]
    atspark.components.supportClasses::DropDownListBase/commitProperties( )[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\compone nts\supportClasses\DropDownListBase.as:504]
    atspark.components::ComboBox/commitProperties()[E:\dev\hero_private_b eta\frameworks\projects\spark\src\spark\components\ComboBox.as:644]
    atmx.core::UIComponent/validateProperties()[E:\dev\hero_private_beta\ frameworks\projects\framework\src\mx\core\UIComponent.as:8095]
     atmx.managers::LayoutManager/validateClient()[E:\dev\hero_private_bet a\frameworks\projects\framework\src\mx\managers\LayoutManager.as:934]
    atmx.core::UIComponent/validateNow()[E:\dev\hero_private_beta\framewo rks\projects\framework\src\mx\core\UIComponent.as:7953]
    atspark.components.supportClasses::GridLayout/layoutItemRenderer()[E: \dev\hero_private_beta\frameworks\projects\spark\src\spark\components\ supportClasses\GridLayout.as:1808]
    atspark.components.supportClasses::GridLayout/createTypicalItemRender er()[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\comp onents\supportClasses\GridLayout.as:460]
    atspark.components.supportClasses::GridLayout/updateTypicalCellSizes( )[E:\dev\hero_private_beta\frameworks\projects\spark\src\spark\compone nts\supportClasses\GridLayout.as:514]
    atspark.components.supportClasses::GridLayout/layoutColumns()[E:\dev\ hero_private_beta\frameworks\projects\spark\src\spark\components\suppo rtClasses\GridLayout.as:570]
    atspark.components.supportClasses::GridLayout/measure()[E:\dev\hero_p rivate_beta\frameworks\projects\spark\src\spark\components\supportClas ses\GridLayout.as:230]
     atspark.components.supportClasses::GroupBase/measure()[E:\dev\hero_pr ivate_beta\frameworks\projects\spark\src\spark\components\supportClass es\GroupBase.as:1109]
    atmx.core::UIComponent/measureSizes()[E:\dev\hero_private_beta\framew orks\projects\framework\src\mx\core\UIComponent.as:8383]
    atmx.core::UIComponent/validateSize()[E:\dev\hero_private_beta\framew orks\projects\framework\src\mx\core\UIComponent.as:8307]
    atspark.components::Group/validateSize()[E:\dev\hero_private_beta\fra meworks\projects\spark\src\spark\components\Group.as:956]
    atmx.managers::LayoutManager/validateSize()[E:\dev\hero_private_beta\ frameworks\projects\framework\src\mx\managers\LayoutManager.as:659]
    atmx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\hero_priv ate_beta\frameworks\projects\framework\src\mx\managers\LayoutManager.a s:793]
    atmx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\h ero_private_beta\frameworks\projects\framework\src\mx\managers\LayoutM anager.as:1157]
Here is my combobox:
package
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import spark.components.ComboBox;
    public class sparkComboRendererDataGrid extends ComboBox implements IDropInListItemRenderer
        public function sparkComboRendererDataGrid()
            super();
        public function get listData():BaseListData
            return null;
        public function set listData(value:BaseListData):void
        override public function set dataProvider(value:Object):void
            super.dataProvider = value;
            // This may get called before dataProvider is set, so make sure not null and has entries
            if (value!=null && value.length)
                // Got it, set flag
                bDataProviderSet = true;
and here is the implementation:
var PersonnelPerson:ClassFactory = new ClassFactory(sparkComboRendererDataGrid);
PersonnelPerson.properties = {labelField : "person", dataProvider :
new XMLListCollection(dataList.consistcrew)};
var col:GridColumn = GridColumn(personnel.columns.getItemAt(0));
col.itemRenderer = PersonnelPerson;
Please help.
Thanks

Actually, after adding the following code it started working:
import spark.skins.spark.DropDownListSkin;
override public function stylesInitialized():void
      super.stylesInitialized();
      this.setStyle("skinClass", DropDownListSkin);

Flex 3 rowCount thing for combobox happen in flex 4

I can't find a way to have the flex 3 rowCount thing for combobox happen in flex 4. I tried this:
<s:ComboBox id="cb" width="240">
                <s:layout>
                    <s:VerticalLayout requestedRowCount="25" >
                    </s:VerticalLayout>
but no change

Heres a skin you could try for the cb lol
<?xml version="1.0" encoding="utf-8"?>


<s:SparkSkin 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=".5">
    
    <fx:Metadata>
        <![CDATA[
        * @copy spark.skins.spark.ApplicationSkin#hostComponent
        [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"];
             * @private
        //    override public function get contentItems():Array {return contentFill};
             * @private
            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>
    <s:states>
        <s:State name="normal" />
        <s:State name="open" />
        <s:State name="disabled" />
    </s:states>
    
    <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="800" 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>
                    
                    <s:SolidColorStroke id="borderStroke" weight="1"/>
                </s:stroke>
            </s:Rect>
            
            
            <s:Rect id="background" left="1" right="1" top="1" bottom="1" >
                
                <s:stroke>
                    <s:SolidColorStroke color="#555555" />
                </s:stroke>
                <s:fill >
                    <s:LinearGradient rotation="75" >
                        <s:GradientEntry color="0x0e47a5" />
                        <s:GradientEntry color="0x27c1f4" />
                        <s:GradientEntry color="0x0e47a5" />
                    </s:LinearGradient>
                </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" requestedRowCount="15"/>
                    </s:layout>
                </s:DataGroup>
            </s:Scroller>
        </s:Group>
    </s:PopUpAnchor>
    
    <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>

Combobox skinning

Similar Messages

Maybe you are looking for