6 Replies Latest reply on Jun 15, 2010 9:17 AM by post2umesh

    Tab bar indiviual tab styling

    post2umesh

      I am using Tab Bar with 4 Tabs. I want each Tab to isplay a ifferent image but  not k ow how to acheive this with the Skin class I am using. Can anyone help?

        • 1. Re: Tab bar indiviual tab styling
          BhaskerChari Level 4

          Hi post2umesh,

          Check the below code:

           

          In the below code you can see the different styles applied to individual tabs by making use of setStyle method by applying the backgroundColors and fillcolors. For your case you try to use the backgroundImage by using skin class you created.

           

          <?xml version="1.0"?>
          <mx:Application name="TabBar_getChildAt_test"
                  xmlns:mx="http://www.adobe.com/2006/mxml"
                  layout="vertical"
                  verticalAlign="middle"
                  backgroundColor="white">

              <mx:Script>
              <![CDATA[
                  import mx.events.ItemClickEvent;
                  import mx.controls.tabBarClasses.Tab;

                  private function tabBar_creationComplete():void {
                      var colorArr:Array = ["red", "haloOrange", "yellow", "haloGreen", "haloBlue"];
                      var color:String;
                      var tab:Tab;
                      var idx:uint;
                      var len:uint = tabBar.dataProvider.length;

                      for (idx = 0; idx < len; idx++) {
                          var i:int = idx % colorArr.length;
                          color = colorArr[i];
                          tab = Tab(tabBar.getChildAt(idx));
                          tab.setStyle("fillColors", [color, "white"]);
                          tab.setStyle("fillAlphas", [1.0, 1.0]);
                          tab.setStyle("backgroundColor", color);
                      }
                  }

                  private function tabBar_itemClick(evt:ItemClickEvent):void {
                      viewStack.selectedIndex = evt.index;
                  }
              ]]>
              </mx:Script>

              <mx:Array id="arr">
                  <mx:Object label="Red" />
                  <mx:Object label="Orange" />
                  <mx:Object label="Yellow" />
                  <mx:Object label="Green" />
                  <mx:Object label="Blue" />
              </mx:Array>

              <mx:TabBar id="tabBar"
                      dataProvider="{arr}"
                      creationComplete="tabBar_creationComplete();"
                      itemClick="tabBar_itemClick(event);" />

              <mx:ViewStack id="viewStack"
                      width="{tabBar.width}"
                      styleName="plain">
                  <mx:VBox id="redVBox" width="100%" height="100">
                      <mx:Label text="Red VBox" />
                  </mx:VBox>
                  <mx:VBox id="orangeVBox" width="100%" height="100">
                      <mx:Label text="Orange VBox" />
                  </mx:VBox>
                  <mx:VBox id="yellowVBox" width="100%" height="100">
                      <mx:Label text="Yellow VBox" />
                  </mx:VBox>
                  <mx:VBox id="greenVBox" width="100%" height="100">
                      <mx:Label text="Green VBox" />
                  </mx:VBox>
                  <mx:VBox id="blueVBox" width="100%" height="100">
                      <mx:Label text="Blue VBox" />
                  </mx:VBox>
              </mx:ViewStack>

          </mx:Application>

           

          If this post answers your question or helps, please kindly mark it as such.


          Thanks,

          Bhasker Chari

          • 2. Re: Tab bar indiviual tab styling
            post2umesh Level 1

            Actually , this is how my code looks like:

             

            Main File:

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Application 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:local="*">
               
                <fx:Script>
                    <![CDATA[
                        import mx.events.ListEvent;
                       
                        [Bindable]
                        private var contact:Contact = new Contact();
                       
                        protected function submitBtn_clickHandler(event:MouseEvent):void
                        {
                            // Note: this sample uses bidirectional data binding, so we do not have to
                            // explicitly set the contact fields to save them!
                            if (!contacts.contains(contact))
                                contacts.addItem(contact);
                            contact = new Contact();
                        }

             

                        protected function dg_itemClickHandler(event:ListEvent):void
                        {
                            contact = dg.selectedItem as Contact;
                        }
                       
                       
                    ]]>
                </fx:Script>

             

                <fx:Declarations>
                    <s:ArrayCollection id="contacts"/>
                </fx:Declarations>
               
                <s:Panel width="100%" height="100%" skinClass="skins.TDFPanelSkin" title="TabBar Sample with Custom Skin and Bidirectional Binding" >
                    <s:TabBar id="tabs" left="8" y="2" dataProvider="{vs}" skinClass="skins.CustomTabBarSkin"  cornerRadius="4" />
                    <mx:ViewStack id="vs" width="95%" height="85%" left="8" y="23" >
                        <s:NavigatorContent label="Contact Info"  width="100%" height="100%" >
                            <s:BorderContainer borderColor="0xDCDCDC" width="100%" height="100%" 
                                       borderVisible="false">
                                <!-- This background fill could also be specified in a custom skin to apply to other containers as well -->
                                <s:backgroundFill>
                                    <s:LinearGradient rotation="90">
                                        <s:GradientEntry color="0xCDEFFC"/>
                                        <s:GradientEntry color="0x9BDFFA" />
                                    </s:LinearGradient>
                                </s:backgroundFill>
                                <mx:Form id="contactForm" defaultButton="{submitBtn}" width="100%" height="100%">
                                    <mx:FormItem label="Name:">
                                        <s:TextInput id="nameTxt" text="@{contact.name}"/>
                                    </mx:FormItem>
                                    <mx:FormItem label="Address:">
                                        <s:TextInput id="address" text="@{contact.address}"/>
                                    </mx:FormItem>
                                    <mx:FormItem label="City:">
                                        <s:TextInput id="city" text="@{contact.city}"/>
                                    </mx:FormItem>
                                    <mx:FormItem label="State:">
                                        <s:TextInput id="state" text="@{contact.state}"/>
                                    </mx:FormItem>
                                    <mx:FormItem label="Zip:">
                                        <s:TextInput id="zip" text="@{contact.zip}" maxChars="5"/>
                                    </mx:FormItem>
                                    <mx:FormItem>
                                        <s:Button id="submitBtn" label="Submit" click="submitBtn_clickHandler(event)"/>
                                    </mx:FormItem>
                                </mx:Form>
                            </s:BorderContainer>
                        </s:NavigatorContent>
                        <s:NavigatorContent label="Contact List" width="100%" height="100%" >
                            <s:BorderContainer borderColor="0xCDEFFC" width="100%" height="100%"
                                               borderVisible="false" >
                                <s:backgroundFill>
                                    <s:LinearGradient rotation="90">
                                        <s:GradientEntry color="0xCDEFFC"/>
                                        <s:GradientEntry color="0x9BDFFA" />
                                    </s:LinearGradient>
                                </s:backgroundFill>
                                <mx:DataGrid id="dg" dataProvider="{contacts}" x="5" y="5"  doubleClickEnabled="true"
                                             doubleClick="{tabs.selectedIndex=0}" itemClick="dg_itemClickHandler(event)">
                                    <mx:columns>
                                        <mx:DataGridColumn headerText="Name" dataField="name"/>
                                        <mx:DataGridColumn headerText="Address" dataField="address"/>
                                        <mx:DataGridColumn headerText="City" dataField="city"/>
                                        <mx:DataGridColumn headerText="State" dataField="state"/>
                                        <mx:DataGridColumn headerText="Zip" dataField="zip"/>
                                    </mx:columns>
                                </mx:DataGrid>
                            </s:BorderContainer>
                        </s:NavigatorContent>
                    </mx:ViewStack>
                </s:Panel>
            </s:Application>

            • 3. Re: Tab bar indiviual tab styling
              post2umesh Level 1

              Tab Bar Skin Class :

              <?xml version="1.0" encoding="utf-8"?>

               

              <!--

               

              ADOBE SYSTEMS INCORPORATED
              Copyright 2008 Adobe Systems Incorporated
              All Rights Reserved.

               

              NOTICE: Adobe permits you to use, modify, and distribute this file
              in accordance with the terms of the license agreement accompanying it.

               

              -->

               

              <!---

               

              The default skin class for the Spark TabBar component. The ButtonBarButtons
              created by the TabBar component use the TabBarButtonSkin class.

               

              @see spark.components.TabBar
              @see spark.components.ButtonBarButton

               

              @langversion 3.0
              @playerversion Flash 10
              @playerversion AIR 1.5
              @productversion Flex 4

               

              -->

               

              <s:Skin
                  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">
                 
                  <fx:Metadata>
                      <![CDATA[
                      /**
                      * @copy spark.skins.spark.ApplicationSkin#hostComponent
                      */
                      [HostComponent("spark.components.TabBar")]
                      ]]>
                  </fx:Metadata>
                 
                  <fx:Script  fb:purpose="styling" >
                      <![CDATA[
                         
                          import mx.core.UIComponent;
                         
                          /**
                           *  @private
                           *  Push the cornerRadius style to the item renderers.
                           */
                          override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
                          {
                              const numElements:int = dataGroup.numElements;
                              const cornerRadius:int = hostComponent.getStyle("cornerRadius");
                              for (var i:int = 0; i < numElements; i++)
                              {
                                  var elt:UIComponent = dataGroup.getElementAt(i) as UIComponent;
                                  if (elt)
                                      elt.setStyle("cornerRadius", cornerRadius);
                              }
                             
                              super.updateDisplayList(unscaledWidth, unscaledHeight);
                          }
                         
                      ]]>           
                  </fx:Script>
                 
                  <s:states>
                      <s:State name="normal" />
                      <s:State name="disabled" />
                  </s:states>
                 
                  <!---
                  @copy spark.components.SkinnableDataContainer#dataGroup
                  -->
                  <s:DataGroup id="dataGroup" width="100%" height="100%">
                      <s:layout>
                          <s:ButtonBarHorizontalLayout gap="-1"/>
                      </s:layout>       
                      <s:itemRenderer>
                          <fx:Component>
                              <s:ButtonBarButton skinClass="skins.CustomTabBarButtonSkin"/>   
                          </fx:Component>
                      </s:itemRenderer>
                  </s:DataGroup>
                 
                 
                 
                 
                 
              </s:Skin>
              • 4. Re: Tab bar indiviual tab styling
                post2umesh Level 1

                <?xml version="1.0" encoding="utf-8"?>

                 

                <!--

                 

                ADOBE SYSTEMS INCORPORATED

                 

                Copyright 2008 Adobe Systems Incorporated

                 

                All Rights Reserved.

                 

                NOTICE: Adobe permits you to use, modify, and distribute this file

                 

                in accordance with the terms of the license agreement accompanying it.

                 

                -->

                 

                <!---
                The default skin class for Spark TabBar buttons. 

                 

                @langversion 3.0
                @playerversion Flash 10
                @playerversion AIR 1.5
                @productversion Flex 4
                -->

                 

                <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"
                    minWidth="21" minHeight="21" alpha.disabledStates="0.5">
                   
                    <!-- host component -->
                    <fx:Metadata>
                        <![CDATA[
                        /**
                        * @copy spark.skins.spark.ApplicationSkin#hostComponent
                        */
                        [HostComponent("spark.components.ButtonBarButton")]
                        ]]>
                    </fx:Metadata>
                   
                    <fx:Script fb:purpose="styling" >
                       
                        import spark.components.TabBar;
                       
                        static private const exclusions:Array = ["labelDisplay"];
                       
                        /**
                         * @private
                         */    
                        override public function get colorizeExclusions():Array {return exclusions;}
                       
                        /**
                         * @private
                         */
                        override protected function initializationComplete():void
                        {
                            //useBaseColor = true;
                            super.initializationComplete();
                        }
                       
                        private var cornerRadius:Number = 4
                       
                        /**
                         *  @private
                         *  The borderTop s:Path is just a s:Rect with the bottom edge left out.
                         *  Given the rounded corners per the cornerRadius style, the result is
                         *  roughly an inverted U with the specified width, height, and cornerRadius.
                         *
                         *  Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
                         */       
                        private function updateBorderTop(width:Number, height:Number):void
                        {
                            var left:Number = -0.5;
                            var right:Number = width - 0.5;
                            var top:Number = 0.5;
                            var bottom:Number = height;
                           
                            var a:Number = cornerRadius * 0.292893218813453;
                            var s:Number = cornerRadius * 0.585786437626905;
                           
                            var path:String = "";
                            path +=  "M " + left + " " + bottom;
                            path += " L " + left + " " + (top + cornerRadius);
                            path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
                            path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
                            path += " L " + (right - cornerRadius) + " " + top;
                            path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
                            path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
                            path += " L " + right + " " + bottom;
                            borderTop.data = path;
                        }
                       
                        /**
                         *  @private
                         *  The cornerRadius style is specified by the TabBar, not the button itself.  
                         *
                         *  Rather than bind the corner radius properties of the s:Rect's in the markup
                         *  below to hostComponent.owner.getStyle("cornerRadius"), we reset them here,
                         *  each time a change in the value of the style is detected.  Note that each
                         *  corner radius property is explicitly initialized to the default value of
                         *  the style; the initial value of the private cornerRadius property.
                         */
                        private function updateCornerRadius():void
                        {
                            var cr:Number = getStyle("cornerRadius");
                            if (cornerRadius != cr)
                            {
                                cornerRadius = cr;
                                fill.topLeftRadiusX = cornerRadius;
                                fill.topRightRadiusX = cornerRadius;
                                lowlight.radiusX = cornerRadius;
                                highlight.radiusX = cornerRadius;
                               
                            }
                        }
                       
                        /**
                         *  @private
                         */
                        override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
                        {
                            updateCornerRadius();
                            updateBorderTop(unscaledWidth, unscaledHeight);
                            super.updateDisplayList(unscaledWidth, unscaledHeight);
                        }
                    </fx:Script>
                   
                    <!-- states -->
                    <s:states>
                        <s:State name="up" />
                        <s:State name="over" stateGroups="overStates" />
                        <s:State name="down" stateGroups="downStates" />
                        <s:State name="disabled" stateGroups="disabledStates" />
                        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
                        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
                        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
                        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
                    </s:states>
                   
                    <s:Group left="-1" right="0" top="-1" bottom="-1">
                       
                        <!-- layer 2: fill -->
                        <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21">
                            <s:fill>
                                <s:LinearGradient rotation="90">
                                    <s:GradientEntry color="0xDCDCDC"
                                                     color.selectedUpStates="0xCDEFFC"
                                                     color.overStates="0xFFB266"
                                                     color.downStates="0xCC0000"
                                                     alpha="0.85"
                                                     alpha.overAndSelected="1" />
                                    <s:GradientEntry color="0xB9B9B9"
                                                     color.selectedUpStates="0x9BDFFA"
                                                     color.over="0xFFB266"
                                                     color.overAndSelected="0xFFB266"
                                                     color.downStates="0xCC0000"
                                                     alpha="0.85"
                                                     alpha.overAndSelected="1" />
                                </s:LinearGradient>
                            </s:fill>
                        </s:Rect>
                       
                        <!-- layer 3: fill lowlight -->
                        <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4">
                            <s:fill>
                                <s:LinearGradient rotation="90">
                                    <s:GradientEntry color="0xDCDCDC" alpha="0.0099" />
                                    <s:GradientEntry color="0xB9B9B9" alpha="0.0627" />
                                </s:LinearGradient>
                            </s:fill>
                        </s:Rect>
                       
                        <!-- layer 4: fill highlight -->
                        <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4">
                            <s:fill>
                                <s:SolidColor color="0xDCDCDC"
                                              color.overStates="0xFFB266"
                                              color.selectedUpStates="0xCDEFFC"
                                              alpha="0.33"
                                              alpha.selectedUpStates="0.22"
                                              alpha.overStates="0.22"
                                              alpha.downStates="0.12" />
                            </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:Line id="borderBottom" left="1" right="0" bottom="1">
                            <s:stroke>
                                <s:SolidColorStroke weight="1"
                                                    color="0xDCDCDC"
                                                    color.selectedUpStates="0xCDEFFC"
                                                    alpha="0.75"
                                                    alpha.down="0.85"
                                                    alpha.selectedStates="0.5" />
                            </s:stroke>
                        </s:Line>
                        <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21">
                            <s:stroke>
                                <s:LinearGradientStroke rotation="90" weight="1">
                                    <s:GradientEntry color="0xDCDCDC"
                                                     color.selectedUpStates="0xCDEFFC"
                                                     color.overStates="0xFFB266"
                                                     alpha="0.5625"
                                                     />
                                    <s:GradientEntry color="0xB9B9B9"
                                                     color.selectedUpStates="0x9BDFFA"
                                                     color.overStates="0xFFB266"
                                                     color.downStates="0xCC0000"
                                                     alpha="0.85"
                                                     alpha.overAndSelected="1" />                   
                                </s:LinearGradientStroke>
                            </s:stroke>
                        </s:Path>
                    </s:Group>
                   
                    <!-- layer 8: text -->
                    <!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
                    <s:Group left="2" top="2">
                        <s:BitmapImage id="myimg" source="@Embed('homeIcon.png')" source.over="@Embed('homeIcon_over.png')" source.down="@Embed('homeIcon_down.png')" source.downAndSelected="@Embed('homeIcon_selected.png')" source.overAndSelected="@Embed('homeIcon_over.png')" source.upAndSelected="@Embed('homeIcon_selected.png')" width="16" height="16"/>        
                                
                        <s:Label id="labelDisplay"
                                 textAlign="right"
                                 verticalAlign="middle"
                                 maxDisplayedLines="1"
                                 horizontalCenter="7" verticalCenter="1"
                                 left="10" right="10" top="2" bottom="2" color.down="#FFFFFF">
                        </s:Label>
                       
                       
                       
                               
                       
                    </s:Group>
                       

                 

                </s:SparkSkin>
                • 5. Re: Tab bar indiviual tab styling
                  post2umesh Level 1

                  The image is being set along with the label and is no actually a background image. Can you let me know how can I change the image for individual tabs?

                  • 6. Re: Tab bar indiviual tab styling
                    post2umesh Level 1

                    Well!!!, I changed tab bar button skin class to accomplish havuing seperate icons for each tab , my other challenge is to change icons on different states. Any help will be appreciated. Following is what I did:

                     

                     

                     

                    <?xml version="1.0" encoding="utf-8"?>

                     

                    <!--

                     

                    ADOBE SYSTEMS INCORPORATED
                    Copyright 2008 Adobe Systems Incorporated
                    All Rights Reserved.

                     

                    NOTICE: Adobe permits you to use, modify, and distribute this file
                    in accordance with the terms of the license agreement accompanying it.

                     

                    -->

                     

                    <!---
                    The default skin class for Spark TabBar buttons.

                     

                    @langversion 3.0
                    @playerversion Flash 10
                    @playerversion AIR 1.5
                    @productversion Flex 4
                    -->

                     

                    <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"
                        minWidth="21" minHeight="21" alpha.disabledStates="0.5">
                       
                        <!-- host component -->
                        <fx:Metadata>
                            <![CDATA[
                            /**
                            * @copy spark.skins.spark.ApplicationSkin#hostComponent
                            */
                            [HostComponent("spark.components.ButtonBarButton")]
                            ]]>
                        </fx:Metadata>
                       
                        <fx:Script fb:purpose="styling" >
                           
                            import spark.components.TabBar;
                           
                            static private const exclusions:Array = ["labelDisplay"];
                           
                            /**
                             * @private
                             */    
                            override public function get colorizeExclusions():Array {return exclusions;}
                           
                            /**
                             * @private
                             */
                            override protected function initializationComplete():void
                            {
                                //useBaseColor = true;
                                super.initializationComplete();
                            }
                           
                            private var cornerRadius:Number = 4
                           
                            /**
                             *  @private
                             *  The borderTop s:Path is just a s:Rect with the bottom edge left out.
                             *  Given the rounded corners per the cornerRadius style, the result is
                             *  roughly an inverted U with the specified width, height, and cornerRadius.
                             *
                             *  Circular arcs are drawn with two curves per flash.display.Graphics.GraphicsUtil.
                             */       
                            private function updateBorderTop(width:Number, height:Number):void
                            {
                                var left:Number = -0.5;
                                var right:Number = width - 0.5;
                                var top:Number = 0.5;
                                var bottom:Number = height;
                               
                                var a:Number = cornerRadius * 0.292893218813453;
                                var s:Number = cornerRadius * 0.585786437626905;
                               
                                var path:String = "";
                                path +=  "M " + left + " " + bottom;
                                path += " L " + left + " " + (top + cornerRadius);
                                path += " Q " + left + " " + (top + s) + " " + (left + a) + " " + (top + a);
                                path += " Q " + (left + s) + " " + top + " " + (left + cornerRadius) + " " + top;
                                path += " L " + (right - cornerRadius) + " " + top;
                                path += " Q " + (right - s) + " " + top + " " + (right - a) + " " + (top + a);
                                path += " Q " + right + " " + (top + s) + " " + right + " " + (top + cornerRadius);
                                path += " L " + right + " " + bottom;
                                borderTop.data = path;
                            }
                           
                            /**
                             *  @private
                             *  The cornerRadius style is specified by the TabBar, not the button itself.  
                             *
                             *  Rather than bind the corner radius properties of the s:Rect's in the markup
                             *  below to hostComponent.owner.getStyle("cornerRadius"), we reset them here,
                             *  each time a change in the value of the style is detected.  Note that each
                             *  corner radius property is explicitly initialized to the default value of
                             *  the style; the initial value of the private cornerRadius property.
                             */
                            private function updateCornerRadius():void
                            {
                                var cr:Number = getStyle("cornerRadius");
                                if (cornerRadius != cr)
                                {
                                    cornerRadius = cr;
                                    fill.topLeftRadiusX = cornerRadius;
                                    fill.topRightRadiusX = cornerRadius;
                                    lowlight.radiusX = cornerRadius;
                                    highlight.radiusX = cornerRadius;
                                   
                                }
                               
                            }
                           
                            [Embed(source="homeIcon.png")]
                            [Bindable]
                            public var imgCls:Class;
                           
                            /**
                             *  @private
                             */
                            override protected function updateDisplayList(unscaledWidth:Number, unscaleHeight:Number):void
                            {
                                updateCornerRadius();
                                updateBorderTop(unscaledWidth, unscaledHeight);
                                super.updateDisplayList(unscaledWidth, unscaledHeight);
                                var image:Class = Class((this as Object).hostComponent.data.icon); 
                                // var label:String = (this as Object).hostComponent.data.label;
                                // labelElement.text = label; 
                                        myimg.source= image; 
                               
                            }
                        </fx:Script>

                     

                        <!-- states -->
                        <s:states>
                            <s:State name="up" />
                            <s:State name="over" stateGroups="overStates" />
                            <s:State name="down" stateGroups="downStates" />
                            <s:State name="disabled" stateGroups="disabledStates" />
                            <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
                            <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
                            <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
                            <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
                        </s:states>
                       
                        <s:Group left="-1" right="0" top="-1" bottom="-1">
                           
                            <!-- layer 2: fill -->
                            <s:Rect id="fill" left="2" right="1" top="2" bottom="2" topLeftRadiusX="4" topRightRadiusX="4" width="69" height="21">
                                <s:fill>
                                    <s:LinearGradient rotation="90">
                                        <s:GradientEntry color="0xDCDCDC"
                                                         color.selectedUpStates="0xCDEFFC"
                                                         color.overStates="0xFFB266"
                                                         color.downStates="0xCC0000"
                                                         alpha="0.85"
                                                         alpha.overAndSelected="1" />
                                        <s:GradientEntry color="0xB9B9B9"
                                                         color.selectedUpStates="0x9BDFFA"
                                                         color.over="0xFFB266"
                                                         color.overAndSelected="0xFFB266"
                                                         color.downStates="0xCC0000"
                                                         alpha="0.85"
                                                         alpha.overAndSelected="1" />
                                    </s:LinearGradient>
                                </s:fill>
                            </s:Rect>
                           
                            <!-- layer 3: fill lowlight -->
                            <s:Rect id="lowlight" left="2" right="1" bottom="2" height="9" radiusX="4">
                                <s:fill>
                                    <s:LinearGradient rotation="90">
                                        <s:GradientEntry color="0xDCDCDC" alpha="0.0099" />
                                        <s:GradientEntry color="0xB9B9B9" alpha="0.0627" />
                                    </s:LinearGradient>
                                </s:fill>
                            </s:Rect>
                           
                            <!-- layer 4: fill highlight -->
                            <s:Rect id="highlight" left="2" right="1" top="2" height="9" radiusX="4">
                                <s:fill>
                                    <s:SolidColor color="0xDCDCDC"
                                                  color.overStates="0xFFB266"
                                                  color.selectedUpStates="0xCDEFFC"
                                                  alpha="0.33"
                                                  alpha.selectedUpStates="0.22"
                                                  alpha.overStates="0.22"
                                                  alpha.downStates="0.12" />
                                </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:Line id="borderBottom" left="1" right="0" bottom="1">
                                <s:stroke>
                                    <s:SolidColorStroke weight="1"
                                                        color="0xDCDCDC"
                                                        color.selectedUpStates="0xCDEFFC"
                                                        alpha="0.75"
                                                        alpha.down="0.85"
                                                        alpha.selectedStates="0.5" />
                                </s:stroke>
                            </s:Line>
                            <s:Path id="borderTop" left="1" right="0" top="1" bottom="1" width="69" height="21">
                                <s:stroke>
                                    <s:LinearGradientStroke rotation="90" weight="1">
                                        <s:GradientEntry color="0xDCDCDC"
                                                         color.selectedUpStates="0xCDEFFC"
                                                         color.overStates="0xFFB266"
                                                         alpha="0.5625"
                                                         />
                                        <s:GradientEntry color="0xB9B9B9"
                                                         color.selectedUpStates="0x9BDFFA"
                                                         color.overStates="0xFFB266"
                                                         color.downStates="0xCC0000"
                                                         alpha="0.85"
                                                         alpha.overAndSelected="1" />                   
                                    </s:LinearGradientStroke>
                                </s:stroke>
                            </s:Path>
                        </s:Group>
                       
                        <!-- layer 8: text -->
                        <!--- The defines the appearance of the label for the first button in the ButtonBar component. -->
                        <s:Group left="2" top="2">
                            <s:BitmapImage id="myimg" width="16" height="16"/>        
                                    
                            <s:Label id="labelDisplay"
                                     textAlign="right"
                                     verticalAlign="middle"
                                     maxDisplayedLines="1"
                                     horizontalCenter="7" verticalCenter="1"
                                     left="10" right="10" top="2" bottom="2" color.down="#FFFFFF">
                            </s:Label>
                                   
                                   
                           
                        </s:Group>

                     

                    </s:SparkSkin>