38 Replies Latest reply on Jun 10, 2009 1:21 PM by garigantua

    Style Explorer for Spark components?

    Handycam Level 1

      Is there one, or an equivalent?  It would save me a lot of time trying to figure out how to style these components, since a lot of the css properties I'm used to from 3.0 don't seem to work (panels, for example).

       

      Thanks.

        • 1. Re: Style Explorer for Spark components?
          Peter deHaan Level 4

          Handycam,

           

          As far as I know there isn't a Style Explorer for the Spark components yet.

           

          The preferred way of styling components now is to create a custom skin.

          So for the case of the Spark Panel container, you could copy the default Spark Panel container skin from:

          <Flex SDK>\frameworks\projects\flex4\src\spark\skins\default\PanelSkin.mxml

           

          Or if you were trying to style the Halo Panel container's Spark skin, you could copy the Halo Panel container Spark skin from:

          <Flex SDK>\frameworks\projects\sparkskins\src\mx\skins\spark\PanelBorderSkin.mxml

           

          Peter deHaan

          Flex SDK Team | Adobe Systems Inc

          • 2. Re: Style Explorer for Spark components?
            Handycam Level 1

            What's the process after that?  Once the file is edited, where does the edited file go, and how can that file be applied to certain panels in my application (and, optionally, other applications)?

             

            In the past, each project had a css file which might have a base "panel" selector, and then several classes for different panels.  What's the workflow for doing this in Gumbo?

             

            Also, can panels and such be edited/created in Flash Catalyst?  It doesn't seem to recognize the mxml file.

            • 3. Re: Style Explorer for Spark components?
              Handycam Level 1

              I have the panel mxml file.  I can probably edit it in code form if there is no easier way.

               

              In the Help system, it says:

               

              To associate a skin with a component in CSS, you set the value of the skinClass property in the style sheet. The following example applies the mySkins.NewPanelSkin class with all Panel containers by using a type selector:


              Panel {
              skinClass:ClassReference("mySkins.NewPanelSkin");
              }

               

              OK, in that example, how would I make my new mxml file be "NewPanelSkin", just save it as "NewPanelSkin.mxml"?  And where is it stored so that I can access it like that (in the example, what is "mySkins")?

              • 4. Re: Style Explorer for Spark components?
                Peter deHaan Level 4

                Handycam,

                 

                Here's a fairly simple example.

                Here's a custom Spark Panel skin that I created (basically the default skin minus drop shadow, with different title bar gradient, and some additional padding). Save the file in your Flex project in a /src/skins/ subdirectory and name it "CustomPanelSkin.mxml":

                <?xml version="1.0" encoding="utf-8"?>
                <!--- The default skin class for Spark TextInput component. -->
                <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                      alpha.disabled="0.5">
                
                    <fx:Metadata>
                    <![CDATA[ 
                        [HostComponent("spark.components.TextInput")]
                    ]]>
                    </fx:Metadata>
                
                    <fx:Script>
                        /* Define the skin elements that should not be colorized. */
                        static private const exclusions:Array = ["background", "textView"];
                
                        override public function get colorizeExclusions():Array {return exclusions;}
                
                        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                        static private const contentFill:Array = ["bgFill"];
                
                        override public function get contentItems():Array {return contentFill};
                    </fx:Script>
                
                    <s:states>
                        <s:State name="normal"/>
                        <s:State name="disabled"/>
                    </s:states>
                
                    <!-- fill -->
                    <!--- Defines the appearance of the TextInput component's background. -->
                    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
                        <s:fill>
                        <!--- Defines the background fill color. -->
                            <s:SolidColor id="bgFill" color="0xFFFFFF" />
                        </s:fill>
                    </s:Rect>
                
                    <!-- text -->
                    <s:RichEditableText id="textView"
                              lineBreak="explicit"
                              left="1" right="1" top="1" bottom="1" 
                              paddingLeft="3" paddingTop="5"
                              paddingRight="3" paddingBottom="3"/>
                
                </s:SparkSkin>
                
                Next, here is my main application 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/halo">
                 
                    <fx:Style>
                        @namespace s "library://ns.adobe.com/flex/spark";
                 
                        /* Custom style which lets you style Panels by setting the styleName property. */
                        .customPanel {
                            skinClass: ClassReference("skins.CustomPanelSkin");
                        }
                 
                        /* Advanced CSS which lets you style individual objects by "id". */
                        s|Panel#panel4 {
                            skinClass: ClassReference("skins.CustomPanelSkin");
                        }
                 
                        /* Or, to style ALL Spark Panels globally... */
                        /*
                        s|Panel {
                            skinClass: ClassReference("skins.CustomPanelSkin");
                        }
                        */
                    </fx:Style>
                 
                    <s:HGroup horizontalCenter="0" verticalCenter="0">
                        <s:Panel title="Spark Panel #1"
                                width="150">
                            <s:SimpleText text="I'm a Panel with no styling."
                                    percentWidth="100" />
                        </s:Panel>
                        <s:Panel title="Spark Panel #2"
                                styleName="customPanel"
                                width="150">
                            <s:SimpleText text="I'm a Panel with styleName defined."
                                    percentWidth="100" />
                        </s:Panel>
                        <s:Panel title="Spark Panel #3"
                                skinClass="skins.CustomPanelSkin"
                                width="150">
                            <s:SimpleText text="I'm a Panel with a skinClass defined."
                                    percentWidth="100" />
                        </s:Panel>
                        <s:Panel id="panel4"
                                title="Spark Panel #4"
                                width="150">
                            <s:SimpleText text="I'm a Panel with a styling from CSS."
                                    percentWidth="100" />
                        </s:Panel>
                    </s:HGroup>
                 
                </s:Application>
                
                This application has 4 Spark Panels:
                Spark Panel #1 -- this Panel has no styling applied and uses the default frameworks\projects\flex4\src\spark\skins\default\PanelSkin.mxml Panel skin.
                Spark Panel #2 -- this panel has a styleName property defined and uses the styles from the .customPanel selector. This custom style sets the skinClass to our custom Spark Panel skin.
                Spark Panel #3 -- this panel sets its skinClass style directly in MXML to our custom skins/CustomPanelSkin.mxml skin file.
                Spark Panel #4 -- this panel sets its skinClass style from the <fx:Style/> block's "s|Panel#panel4" selector. This selector basically matches any Spark Panel container with the 'id' of panel4.
                Peter

                • 5. Re: Style Explorer for Spark components?
                  Peter deHaan Level 4

                  Handycam,

                   

                  Ah, that was the one case I didn't really mention in my example above (the code is in my <fx:Style/> block, I just left the code commented out).

                  If you want to style all Panels globally, you could just use something like the following:

                  <?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/halo">
                  
                      <fx:Style>
                          @namespace s "library://ns.adobe.com/flex/spark";
                  
                          s|Panel {
                              skinClass: ClassReference("mySkins.NewPanelSkin");
                          }
                      </fx:Style>
                  
                      <s:HGroup horizontalCenter="0" verticalCenter="0">
                          <s:Panel title="Spark Panel #1"
                                  width="150">
                              <s:SimpleText text="I'm a Panel."
                                      percentWidth="100" />
                          </s:Panel>
                          <s:Panel title="Spark Panel #2"
                                  width="150">
                              <s:SimpleText text="So am I."
                                      percentWidth="100" />
                          </s:Panel>
                      </s:HGroup>
                  
                  </s:Application>
                  
                  Then, just save your custom skin file, NewPanelSkin.mxml, in a /src/mySkins/ subdirectory.
                  Make sense?
                  Peter

                  • 6. Re: Style Explorer for Spark components?
                    Handycam Level 1

                    That's extremely helpful, thanks.

                     

                    One thing I find it difficult to understand, this concept of "colorizing" and "exclusions" from colorizing.  What is meant by colorizing, and how is that applied?

                     

                    For example, I have a reworked panel where I wan the background of the panel -- not its children -- to be light yellow, so in the code below I have modified <s:SolidColor color="0xF9EDAB" id="bgFill" /> but the panel is still white.  What am I missing here?

                     

                    <?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 a Spark Panel container. -->
                    <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">
                    
                        <fx:Metadata>
                        <![CDATA[ 
                         /** 
                          * @copy spark.skins.default.ApplicationSkin#hostComponent
                          */
                             [HostComponent("spark.components.Panel")]
                        ]]>
                        </fx:Metadata> 
                        
                        <fx:Script>
                            /* Define the skin elements that should not be colorized. 
                               For panel, border and title backround are skinned, but the content area and title text are not. */
                            static private const exclusions:Array = ["background", "titleField", "contentGroup"];
                    
                         /** 
                          * @copy spark.skins.SparkSkin#colorizeExclusions
                          */          
                            override public function get colorizeExclusions():Array {return exclusions;}
                            
                            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                            static private const contentFill:Array = ["bgFill"];
                            
                            /**
                             * @inheritDoc
                             */
                            override public function get contentItems():Array {return contentFill};
                        </fx:Script>
                        
                        <s:states>
                             <s:State name="normal" />
                             <s:State name="disabled" />
                        </s:states>
                        
                        <!-- drop shadow -->
                        <s:Rect left="0" top="0" right="0" bottom="0">
                            <s:filters>
                                <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
                            </s:filters>
                            <s:fill>
                                <s:SolidColor color="0" />
                            </s:fill>
                        </s:Rect>
                        
                         <!-- layer 1: border -->
                         <s:Rect left="0" right="0" top="0" bottom="0">
                              <s:stroke>
                                   <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
                              </s:stroke>
                         </s:Rect>
                    
                        <!-- layer 2: background fill -->
                        <!--- Defines the appearance of the PanelSkin class's background. -->
                        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
                            <s:fill>
                             <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                                <s:SolidColor color="0xF9EDAB" id="bgFill" />
                            </s:fill>
                        </s:Rect>
                        
                         <!-- layer 3: title bar fill -->
                         <s:Rect left="1" right="1" top="1" height="30">
                            <s:fill>
                                 <s:SolidColor color="0x1F264E" />
                            </s:fill>
                         </s:Rect>
                         
                         <!-- layer 4: title bar highlight -->
                        <s:Rect left="1" right="1" top="1" height="30">
                           <s:stroke>
                                <s:LinearGradientStroke rotation="90" weight="1">
                                    <s:GradientEntry color="0xEAEAEA" />
                                    <s:GradientEntry color="0xD9D9D9" />
                                </s:LinearGradientStroke>
                           </s:stroke>
                        </s:Rect>
                        <s:Rect left="1" right="1" top="31" height="1">
                             <s:fill>
                                  <s:SolidColor color="0xC0C0C0" />
                             </s:fill>
                        </s:Rect>
                         
                         <!-- layer 5: text -->
                         <!--- Defines the appearance of the PanelSkin class's title bar. -->
                         <s:SimpleText id="titleField" lineBreak="explicit"
                                    left="10" right="4" top="2" height="30"
                                    verticalAlign="middle" fontWeight="bold" color="0xffffff">
                         </s:SimpleText>
                    
                        <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
                        </s:Group>
                    
                    </s:SparkSkin>
                    
                    

                    • 7. Re: Style Explorer for Spark components?
                      Peter deHaan Level 4

                      Ah, I'd guess that your background fill is getting overwritten by the contentBackgroundColor style:

                      <?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/halo">
                      
                          <s:HGroup horizontalCenter="0" verticalCenter="0">
                              <s:Panel title="Spark Panel #1"
                                      width="150"
                                      contentBackgroundColor="#F9EDAB">
                                  <s:SimpleText text="I'm a Panel."
                                          percentWidth="100" />
                              </s:Panel>
                          </s:HGroup>
                      
                      </s:Application>
                      
                      Or, if you wanted to set it via your skin, I'd just remove the "bgFill" bit from the contentFill property in your skin:
                      static private const contentFill:Array = [];
                      Peter

                      • 8. Re: Style Explorer for Spark components?
                        garigantua

                        Hi Peter,

                         

                        With all the different combinations of skins (s and mx namespaces) , change in MXML CSS syntax, and skinning workflow working with the FB IDE, it's really becoming confusing keeping it all straight. For example, I have been able to modify the skin of  an sparks panel, as per your example, I can't seem to skin a Halo TextArea.  Is it even possible?

                         

                         

                        I found a TextAreaSkin skin component in < Flex SDK>\frameworks\projects\flex4\src\spark\skins\default\

                         

                        ( Why would there be a TextAreaSkin class under the sparks package? )  But, modifying that didn't work. I don't see a skin for TextArea in 

                         

                        <Flex SDK>\frameworks\projects\sparkskins\src\mx\skins\spark\

                         

                        Another problem I've been having is the code complete for skinning and the syntax change.  In the livedocs, styles are documented in the old way (backgroundColor) , but code complete has it the new way (background-color) . In some cases, the styles have no effect, and needs to be addressed per your posted method by copying the skins source file.  Why would they be in code complete?  Do I have this wrong?  For example, the following has no effect, right?

                         

                         

                        s|Panel{

                             background-color:#ff0000;

                        }

                         

                         

                        So why would code complete suggest that?

                         

                         

                        I like the idea that the skin source files could be used as a template and cusomized to the local project, but the support seems to be missing something.  Is this the way it's going to be?  Is there better documentation out there?

                         

                        Thank you,

                         

                        Garrick

                        • 9. Re: Style Explorer for Spark components?
                          Handycam Level 1

                          I, too, am finding the new workflow frustrating.  I still need to work with

                          a lot of halo (mx:) components, and it is annoying not to be able to just

                          quickly set up some css for the basics like background color, border color,

                          alphas, etc.

                          Also I am confused why my mx: Panel looks identical to an s: panel.

                          • 10. Re: Style Explorer for Spark components?
                            garigantua Level 1

                            Update:

                             

                            I discovered the TextAreaSkin class is applicable for s:TextArea only.  But I need mx:TextArea because it is inside a TabNavigator.  There isn't a s:TabNavigator in the works, is there?

                             

                            Thanks

                            • 11. Re: Style Explorer for Spark components?
                              garigantua Level 1

                              Handycam,

                               

                              I'm glad I'm not alone in the confusion.  s:Panel looks different from mx:Panel to me.  Maybe you have some CSS being implemented somewhere?

                               

                              Garrick

                              • 12. Re: Style Explorer for Spark components?
                                Peter deHaan Level 4

                                Whoa, OK, you guys are teaming up on me here... I'll try and do this one message/thread at a time.

                                (a) Yes, you can style a Halo TextArea control (with a Flex 4 "Spark" skin).

                                Here's my MXML:

                                <?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/halo">
                                
                                 <mx:TextArea id="hTextArea"
                                   text="The quick brown fox jumps over the lazy dog"
                                   borderSkin="CustomHaloTextAreaSkin"
                                   color="haloBlue"
                                   fontWeight="bold"
                                   horizontalCenter="0" verticalCenter="0"
                                   width="100" height="100" />
                                
                                </s:Application>
                                

                                 

                                And here's my custom skin, CustomHaloTextAreaSkin.mxml, which is in the same directory as my .MXML file above:

                                <?xml version="1.0" encoding="utf-8"?>
                                <local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                                      xmlns:local="mx.skins.spark.*"
                                      implements="mx.core.IBorder">
                                    
                                    <fx:Script>
                                        <![CDATA[
                                        import mx.core.EdgeMetrics;
                                        import mx.core.IUIComponent;
                                        
                                        /* Define the skin elements that should not be colorized. */
                                        static private const exclusions:Array = ["background"];
                                        override public function get colorizeExclusions():Array {return exclusions;}
                                        
                                        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
                                        static private const contentFill:Array = [/* "bgFill" */];
                                        override public function get contentItems():Array {return contentFill};
                                        /* Define the border items.*/
                                        static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
                                        override protected function get borderItems():Array {return borderItem;}
                                        
                                        static private const metrics:EdgeMetrics = new EdgeMetrics(2, 2, 2, 2);
                                        
                                        public function get borderMetrics():EdgeMetrics
                                        {
                                            return metrics;
                                        }
                                        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
                                        {           
                                            super.updateDisplayList(unscaledWidth, unscaledHeight);
                                            
                                            if (parent && parent is IUIComponent && !IUIComponent(parent).enabled)
                                                alpha = 0.5;
                                            else
                                                alpha = 1;
                                        }
                                        ]]>
                                    </fx:Script>
                                    
                                    <!-- border --> 
                                    <s:Rect left="0" right="0" top="0" bottom="0">
                                        <s:stroke>            
                                            <s:LinearGradientStroke rotation="90" weight="1">
                                                <s:GradientEntry id="borderEntry1" alpha="0.5525" />
                                                <s:GradientEntry id="borderEntry2" alpha="0.6375" />
                                            </s:LinearGradientStroke>
                                        </s:stroke>
                                    </s:Rect>
                                    <!-- fill -->
                                    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
                                        <s:fill>
                                            <!-- <s:SolidColor id="bgFill" color="0xFFFFFF" /> -->
                                            <s:LinearGradient>
                                             <s:GradientEntry color="red" />
                                             <s:GradientEntry color="yellow" />
                                            </s:LinearGradient>
                                        </s:fill>
                                    </s:Rect>
                                    
                                    <!-- shadow -->
                                    <s:Rect left="1" top="1" right="1" height="1">
                                        <s:fill>
                                            <s:SolidColor color="0x000000" alpha="0.12" />
                                        </s:fill>
                                    </s:Rect>
                                </local:SparkSkinForHalo>
                                

                                 

                                Note: that is pretty much just a copy/paste of the "4.0.0.7679\frameworks\projects\sparkskins\src\mx\skins\sparkTextInputBorderSkin.mxml" file, although i changed the background fill to a linear gradient so I would know my skin was workin'.

                                 

                                Feel free to file a bug at http://bugs.adobe.com/flex/ if you think these are bugs (misleading APIs, names, etc). I cant guarantee that we'll agree or be able to fix everything, but we *do* listen and try very hard.

                                 

                                (b) backgroundColor vs background-color. When setting styles via a <fx:Style/> (or <mx:Style/>) block in Flex, i believe that backgroundColor and background-color are considered the same thing. But that ISN'T true when you're setting styles via ActionScript (ie: pnl.setStyle("backgroundColor", 0xFF0000); isnt the same as pnl.setStyle("background-color", 0xFF0000). I always try and stick with the backgroundColor style, but thats more of a personal preference for me).

                                Back on that topic for a second, the backgroundColor OR background-color probably wont have any effect in Spark controls (or possibly Halo controls with Spark skins) as that has been renamed to "contentBackgroundColor" (or content-background-color, depending on where you look and who's code hinting).

                                <?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/halo">
                                 <s:layout>
                                  <s:HorizontalLayout paddingLeft="20" paddingRight="20"
                                    paddingTop="20" paddingBottom="20" />
                                 </s:layout>
                                 <s:Panel title="I'm a Spark Panel container" contentBackgroundColor="haloBlue">
                                  <s:Graphic width="240" height="320" />
                                 </s:Panel>
                                 <mx:Panel title="I'm a Halo Panel container" contentBackgroundColor="haloGreen">
                                  <s:Graphic width="240" height="320" />
                                 </mx:Panel>
                                </s:Application>
                                

                                 

                                 

                                Or, if you want to set the background colors globally via CSS, you could do something like this:

                                <?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/halo">
                                 <s:layout>
                                  <s:HorizontalLayout paddingLeft="20" paddingRight="20"
                                    paddingTop="20" paddingBottom="20" />
                                 </s:layout>
                                 <fx:Style>
                                  @namespace mx "library://ns.adobe.com/flex/halo";
                                  @namespace s "library://ns.adobe.com/flex/spark";
                                  
                                  s|Panel {
                                   contentBackgroundColor: haloOrange;
                                  }
                                  mx|Panel {
                                   content-background-color: haloSilver;
                                  }
                                 </fx:Style>
                                 <s:Panel title="I'm a Spark Panel container">
                                  <s:Graphic width="240" height="320" />
                                 </s:Panel>
                                 <mx:Panel title="I'm a Halo Panel container">
                                  <s:Graphic width="240" height="320" />
                                 </mx:Panel>
                                </s:Application>
                                

                                 

                                I'm not sure if code complete in CSS is specific to the individual selector or not. If not, you could try filing a bug at http://bugs.adobe.com/flex/ against "Flash Builder / Flex Builder".

                                 

                                As for the documentation, everything is still in beta form. I'm sure the documentation will be added/clarified before the product is released. But if you think something is missing, or something is wrong, or something should be clarified -- http://bugs.adobe.com/flex/ and you can file a bug against "Flex Documentation".

                                 

                                Oh, I think i missed a question... "Why would there be a TextAreaSkin class under the sparks package?". There are kind of two dueling styles/themes happening right now. The new theme is the Spark theme. The older theme is the Halo theme. The Halo components still support the Halo theme, so we needed to keep everything separate. Plus, I believe this would allow us to easily add new themes in the future, if we choose.  In theory we'd just need to create a new package and call it "newerSpark\skins\default\". But that's purely a guess on my part, I could be (and often am) wrong.

                                 

                                Peter

                                • 13. Re: Style Explorer for Spark components?
                                  Peter deHaan Level 4

                                  Handycam,

                                   

                                  True, for some styling situations, the new system does take some more work.

                                  But if you just want to set simple things like background colors, you should be able to just set the backgroundContentColor now.

                                   

                                  For example, here's a quick little example that sets the background color of some Halo and Spark controls (no custom skinning needed):

                                   

                                  <?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/halo">
                                   <s:layout>
                                    <s:VerticalLayout paddingLeft="20" paddingRight="20"
                                      paddingTop="20" paddingBottom="20" />
                                   </s:layout>
                                   <s:TextArea text="Spark TextArea" contentBackgroundColor="red" />
                                   <s:TextInput text="Spark TextInput" contentBackgroundColor="haloOrange" />
                                   <s:Button label="Spark Button" baseColor="yellow" />
                                   <mx:TextArea text="Halo TextArea" contentBackgroundColor="haloGreen" />
                                   <mx:Panel title="Halo Panel" contentBackgroundColor="haloBlue" width="300" height="200" />
                                   <mx:Button label="Halo Button" baseColor="purple" /> 
                                  </s:Application>
                                  


                                  In cases where you want to customize the appearance a bit more, you'll need to create a custom skin. But you still only have to write a borderless, Spark TextArea skin once, and then you can apply it globally throughout your application using a <fx:Style/> block and set the s|TextArea {skinClass: ClassReference("...");} type style.

                                   

                                  As for why the mx:Panel container and the s:Panel container look the same... The mx:* components all received a nice little face lift to match the Spark component skins. This allows you to use Halo controls (DateChooser, DataGrid, TabNavigator, etc) in a Spark application, and have everything look consistent.

                                   

                                  For an excellent article on Flex 3 vs Flex 4 differences, see the following article on the Adobe Flex Developer Center: http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

                                   

                                  Peter

                                  • 14. Re: Style Explorer for Spark components?
                                    Peter deHaan Level 4

                                    garigantua,

                                     

                                    I can't remember, but I think I mentioned it earlier, but you can style the Halo TextArea control's Spark skin by creating a custom \frameworks\projects\sparkskins\src\mx\skins\spark\TextInputBorderSkin.mxml and then setting the skinClass style on the TextArea.

                                     

                                    As for a Spark TabNavigator, there isnt one in the current beta, and I'm fairly sure there won't be one added before 4.0 ships, although I'm not aware of any plans for 4.1+ (I believe we're planning a 4.1 release by Q2 2010 -- http://opensource.adobe.com/wiki/display/flexsdk/Gumbo).

                                     

                                    Peter

                                    • 15. Re: Style Explorer for Spark components?
                                      garigantua Level 1

                                      Peter,

                                       

                                      Thank you for the explanation.  It cleared things up and them some.  I think eventually the changes will be a huge improvement for refactoring and for revising works.  Thank you all for listening and the hard work.

                                      • 16. Re: Style Explorer for Spark components?
                                        Peter deHaan Level 4

                                        I agree.

                                        True, setting certain styles is a bit more involved now and requires a custom skin, where before it was a much simpler change directly in your MXML/CSS.

                                        But the tradeoff is that some customizations that were really complex before are now rediculously easy.

                                         

                                        And of course, you could always extend the Spark TextArea or other controls, add whatever additional styles you want, and then just use a custom skin -- which would allow you have a TextArea where you could easily set the background alpha or other styles as needed.

                                         

                                        Peter

                                        • 17. Re: Style Explorer for Spark components?
                                          Peter Farland Level 3

                                          Early customer feedback implied that folks didn't really use type selectors very often. If you do need to style all instances of a component type then this won't help much, but you could avoid dealing with namespaces in CSS if you didn't use type selectors.

                                          • 18. Re: Style Explorer for Spark components?
                                            garigantua Level 1

                                            If I'm not mistaken, all teh above apply to class selectors as well.  Please correct me someone, if that's wrong.

                                            • 19. Re: Style Explorer for Spark components?
                                              Handycam Level 1

                                              I am down with creating my own skin for a Panel, but is that the same process for a mx:Panel?

                                               

                                              I discovered I need to have my panels in a ViewStack, and apparently all children of a viewstack need to be mx components. So I will need to create a style or a skin for my Panels that live here.

                                               

                                              Unless there is a new Spark-compatible paging mechanism I am unaware of?

                                              • 20. Re: Style Explorer for Spark components?
                                                garigantua Level 1

                                                Handycam,

                                                 

                                                Skinning a Halo Panel is the same as skinning the Halo TextArea, as explained by Peter a post above.  You can use the sytle property "borderSkin" to point to a customized mxml skin component.  For panel, the skin file is sdks/4.0.0/frameworks/projects/sparkskins/src/mx/skins/spark/PanelSkin.mxml .   That wouldn't be the same procedure for a Sparks Panel component, which would use the "skinClass" property instead.  Here's an example pieced together through Peter's examples above.

                                                 

                                                mainApplication.mxml:

                                                 

                                                <?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/halo">

                                                <s:layout>

                                                  <s:HorizontalLayout paddingLeft="20" paddingRight="20"

                                                    paddingTop="20" paddingBottom="20" />

                                                </s:layout>

                                                <mx:Panel title="I'm a Halo Panel container" borderSkin="skins.custPanelSkin">

                                                  <s:Graphic width="240" height="320" />

                                                </mx:Panel>

                                                </s:Application>

                                                 

                                                 

                                                skins.custPanelSkin.mxml:

                                                 

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

                                                 

                                                <!--- The default skin class for a Spark Panel container. -->

                                                <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">

                                                 

                                                    <fx:Metadata>

                                                    <![CDATA[

                                                /**

                                                * @copy spark.skins.default.ApplicationSkin#hostComponent

                                                */

                                                    [HostComponent("spark.components.Panel")]

                                                    ]]>

                                                    </fx:Metadata>

                                                 

                                                    <fx:Script>

                                                        /* Define the skin elements that should not be colorized.

                                                           For panel, border and title backround are skinned, but the content area and title text are not. */

                                                        static private const exclusions:Array = ["background", "titleField", "contentGroup"];

                                                 

                                                /**

                                                * @copy spark.skins.SparkSkin#colorizeExclusions

                                                */

                                                        override public function get colorizeExclusions():Array {return exclusions;}

                                                 

                                                        /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */

                                                        static private const contentFill:Array = [];  //"bgFill"

                                                 

                                                        /**

                                                         * @inheritDoc

                                                         */

                                                        override public function get contentItems():Array {return contentFill};

                                                    </fx:Script>

                                                 

                                                    <s:states>

                                                    <s:State name="normal" />

                                                    <s:State name="disabled" />

                                                    </s:states>

                                                 

                                                    <!-- drop shadow -->

                                                    <s:Rect left="0" top="0" right="0" bottom="0">

                                                        <s:filters>

                                                            <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />

                                                        </s:filters>

                                                        <s:fill>

                                                            <s:SolidColor color="0" />

                                                        </s:fill>

                                                    </s:Rect>

                                                 

                                                <!-- layer 1: border -->

                                                <s:Rect left="0" right="0" top="0" bottom="0">

                                                <s:stroke>

                                                <s:SolidColorStroke color="0" alpha="0.50" weight="1" />

                                                </s:stroke>

                                                </s:Rect>

                                                 

                                                    <!-- layer 2: background fill -->

                                                    <!--- Defines the appearance of the PanelSkin class's background. -->

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

                                                        <s:fill>

                                                    <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->

                                                            <!--<s:SolidColor color="0xFFFFFF" id="bgFill" />-->

                                                            <s:LinearGradient>

                                                             <s:GradientEntry color="red" />

                                                             <s:GradientEntry color="yellow" />

                                                            </s:LinearGradient>

                                                        </s:fill>

                                                    </s:Rect>

                                                 

                                                <!-- layer 3: title bar fill -->

                                                <s:Rect left="1" right="1" top="1" height="30">

                                                   <s:fill>

                                                            <s:LinearGradient rotation="90">

                                                                <s:GradientEntry color="0xE2E2E2" />

                                                                <s:GradientEntry color="0xD9D9D9" />

                                                            </s:LinearGradient>

                                                   </s:fill>

                                                </s:Rect>

                                                 

                                                <!-- layer 4: title bar highlight -->

                                                    <s:Rect left="1" right="1" top="1" height="30">

                                                       <s:stroke>

                                                            <s:LinearGradientStroke rotation="90" weight="1">

                                                                <s:GradientEntry color="0xEAEAEA" />

                                                                <s:GradientEntry color="0xD9D9D9" />

                                                            </s:LinearGradientStroke>

                                                       </s:stroke>

                                                    </s:Rect>

                                                    <s:Rect left="1" right="1" top="31" height="1">

                                                    <s:fill>

                                                    <s:SolidColor color="0xC0C0C0" />

                                                    </s:fill>

                                                    </s:Rect>

                                                 

                                                <!-- layer 5: text -->

                                                <!--- Defines the appearance of the PanelSkin class's title bar. -->

                                                <s:SimpleText id="titleField" lineBreak="explicit"

                                                left="10" right="4" top="2" height="30"

                                                verticalAlign="middle" fontWeight="bold">

                                                </s:SimpleText>

                                                 

                                                    <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">

                                                    </s:Group>

                                                 

                                                </s:SparkSkin>

                                                 

                                                 

                                                 

                                                However, the problem is that it's not so intuitive to find the source file.  I'm now having a hard time skinning the the tabs in a mx:TabNavigator.  Since tabs are typed Button, I found that I could change the fonts of the buttons through button style declarations.  I also found the Halo TabSkin class that looks to have the gradient characteristics I hope to modify.  It is in the same directory as mentioned earlier.  The problem is that I'm not able to point to it.  I've tried several ways through Tab style declarations, TabNavigator.getTabBar(), and specific class selectors or id selectors.  Non works so far.  Any help would be appreciated.

                                                • 21. Re: Style Explorer for Spark components?
                                                  Handycam Level 1

                                                  replied via email, which seems to take a while, but I was trying to do it through the css file with no success:

                                                   

                                                  mx|Panel {
                                                       skinClass:ClassReference("skins.PanelFHBBorderSkin");
                                                  }
                                                  
                                                  

                                                   

                                                   

                                                  But I tried what you suggested in you posts, and that DOES seem to work so far:

                                                   

                                                  <mx:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
                                                       xmlns:mx="library://ns.adobe.com/flex/halo" width="740" height="400" creationComplete="init()" 
                                                       title="I'm a Halo Panel container" borderSkin="skins.PanelFHBBorderSkin" contentBackgroundColor="haloGreen">
                                                  
                                                  

                                                  • 22. Re: Style Explorer for Spark components?
                                                    garigantua Level 1

                                                    Good to hear.  In addition, the following code

                                                     

                                                    mx|Panel {
                                                    
                                                         skinClass:ClassReference("skins.PanelFHBBorderSki n");
                                                    
                                                    }

                                                     

                                                    should be

                                                    s|Panel {
                                                    
                                                         skinClass:ClassReference("skins.PanelFHBBorderSki n");
                                                    
                                                    }

                                                     

                                                    and would only work for Sparks Panel containers, assuming the correct source skin was copied and modified to produce a custom panel skin.

                                                    • 23. Re: Style Explorer for Spark components?
                                                      Handycam Level 1

                                                      AH, yes it did work for s|Panel, but I was (wrongly) assuming I could do it for mx|Panel too.

                                                       

                                                      Seems I need to set the skin in the <mx:Panel> tag as above.

                                                       

                                                      Where do you set the other properties of the mx panels, such as the title color?  When I put "color: #fff" in the mx|Panel selector, it did set the title but ALSO set the button label and all the text inside my panel (e.g. Labels) to white as well.

                                                       

                                                      And is the background of the panel "contentBackground" now? Since this seems to have no effect:

                                                       

                                                      <!-- layer 2: background fill -->
                                                         <s:Rect id="background" left="1" top="1" right="1" bottom="1">
                                                             <s:fill>
                                                                 <s:SolidColor color="0xFF0000" id="bgFill" />
                                                             </s:fill>
                                                         </s:Rect>
                                                      
                                                      

                                                      I still have a white panel.

                                                       

                                                      However, these work fine:

                                                      <!-- layer 5: control bar background -->
                                                         <s:Rect id="cbbg" left="1" right="1" bottom="1" height="20">
                                                              <s:fill>
                                                                   <s:LinearGradient rotation="90">
                                                                     <s:GradientEntry color="0x3046B0" />
                                                                     <s:GradientEntry color="0x1F264E" />
                                                                 </s:LinearGradient>
                                                              </s:fill>
                                                         </s:Rect>
                                                      
                                                      <!-- layer 3: title bar fill -->
                                                       <s:Rect left="1" right="1" top="1" height="30">
                                                         <s:fill>
                                                                 <s:LinearGradient rotation="90">
                                                                     <s:GradientEntry color="0x3046B0" />
                                                                     <s:GradientEntry color="0x1F264E" />
                                                                 </s:LinearGradient>
                                                         </s:fill>
                                                      </s:Rect>
                                                      
                                                      
                                                      

                                                      • 24. Re: Style Explorer for Spark components?
                                                        Handycam Level 1

                                                        Seem like to change the background of the mx panel it still

                                                         

                                                        mx|Panel {
                                                             backgroundColor: #ff0;
                                                        }
                                                        
                                                        

                                                        • 25. Re: Style Explorer for Spark components?
                                                          Handycam Level 1

                                                          I am trying to do it via the css file, as Peter explained about the Spark

                                                          panel:

                                                           

                                                          mx|Panel

                                                           

                                                           

                                                          I am making edits to that PanelFHBBorderSkin.mxml file to try and determine

                                                          what all my mx Panels look like.

                                                           

                                                           

                                                          Is that correct?  Because so far I am not seeing any changes.

                                                           

                                                           

                                                          <!-- layer 3: title bar fill -->

                                                           

                                                          <s:Rect left="1" right="1" top="1" height="30">

                                                           

                                                             <s:fill>

                                                           

                                                                      <s:LinearGradient rotation="90">

                                                           

                                                                          <s:GradientEntry color="0xff0000" />

                                                           

                                                                          <s:GradientEntry color="0x00ff00" />

                                                           

                                                                      </s:LinearGradient>

                                                           

                                                             </s:fill>

                                                           

                                                          </s:Rect>

                                                           

                                                           

                                                           

                                                          For example, but previewing the project the panels are unchanged, when I

                                                          expected a red-to green title bar.

                                                          • 26. Re: Style Explorer for Spark components?
                                                            Handycam Level 1

                                                            OK, then where do the skins for an mx:ToggleButtonBar live?

                                                             

                                                            Because this css seems to affect the type (see attached screenshot) but not the buttons, which are still white-to-grey.

                                                             

                                                            mx|ToggleButtonBar {
                                                              buttonStyleName: "mytoggleButtonBarButtonStyle";
                                                              firstButtonStyleName: "mytoggleButtonBarFirstButtonStyle";
                                                              lastButtonStyleName: "mytoggleButtonBarLastButtonStyle";
                                                              selectedButtonTextStyleName: "mytoggleButtonBarSelectedButtonStyle";
                                                            }
                                                            .mytoggleButtonBarButtonStyle, .mytoggleButtonBarFirstButtonStyle,.mytoggleButtonBarLastButtonStyle,.mytoggleButtonBarSelectedButtonStyle   {
                                                              fontSize: 10;
                                                            /* fontWeight: normal;
                                                              textAlign: left;
                                                            */ highlightAlphas: 0, 0;
                                                              fillAlphas: 1, 1, 1, 1;
                                                              fillColors: #F9F3E5, #F9F3E5, #F9EDAB, #F9EDAB;
                                                              color: #000;
                                                              textSelectedColor: #000;
                                                              themeColor: #ff9900;
                                                              paddingLeft: 1;
                                                              paddingRight:0
                                                            }
                                                            .mytoggleButtonBarFirstButtonStyle, .mytoggleButtonBarLastButtonStyle {
                                                                cornerRadius: 0;
                                                            }
                                                            
                                                            .mytoggleButtonBarSelectedButtonStyle {
                                                              color: #fff;
                                                            }
                                                            
                                                            

                                                            • 27. Re: Style Explorer for Spark components?
                                                              Handycam Level 1

                                                              OK, I see there are files:

                                                               

                                                              ButtonBarMiddleButtonSkin.mxml
                                                              ButtonBarLastButtonSkin.mxml
                                                              /ButtonBarFirstButtonSkin.mxml
                                                              But so far I have been unable to discover where to get the ToggleButtonBar to use these (modified) skins...
                                                              <mx:ToggleButtonBar dataProvider="{kitchenAccess}"  id="tbb1" initialize="tbb1.mx_internal::navItemFactory = new ClassFactory(MultilineButton)" 
                                                                             buttonWidth="{colWidth}" buttonHeight="{rowHeight}" textAlign="left" itemClick="clickHandler(event)" buttonStyleName="myButtonStyle" />
                                                              
                                                              

                                                              As you can see, all I found was buttonStyleName, but I see no way to apply a skin.

                                                              • 28. Re: Style Explorer for Spark components?
                                                                garigantua Level 1

                                                                Okay, I'm at a total lost for what you're looking for.  But i think you have to separate the differences between a Spark component, and a Halo component for skinning.

                                                                 

                                                                Since ToggleButtonBar is only offered as a Halo (mx) component, http://livedocs.adobe.com/flex/gumbo/langref/mx/controls/ToggleButtonBar.html

                                                                 

                                                                the skin would live at <Flex SDK>\frameworks\projects\sparkskins\src\mx\skins\spark\

                                                                 

                                                                not <Flex SDK>\frameworks\projects\sparkskins\src\mx\skins\spark

                                                                 

                                                                (which contains the button skins you mention>

                                                                 

                                                                I don't see so far how you can change the skin of a ToggleButtonBar, since it seems to be made of different sub component skinning and so far only offered as a Halo (mx) component.  Ironically, there is a Sparks implementation of ToggleButton class.  Maybe you can change the skinning there.  I'm struggling a little with skinning subcomponents myself with the mx:TabNavigator class.  There is documentation at http://livedocs.adobe.com/flex/gumbo/html/WS0DD82E88-6A07-4b57-BD24-02661DBF32EA.html but not very component specific.

                                                                 

                                                                The content-background was a typo, and I think it is being overridden by implementing the skins file.

                                                                • 29. Re: Style Explorer for Spark components?
                                                                  Handycam Level 1

                                                                  I don't really care if I skin it or style it, I just need to affect the way it looks (background color, etc)  In Flex 3, I had been using the style explorer to help me quickly rough out a color scheme for controls like this, and then tweak the css until it looks right.  I never skinned anything; I used all css and properties in the mxml.

                                                                  For example, when I began this project in Flex 3, I had:
                                                                  ToggleButtonBar {
                                                                     buttonStyleName: "mytoggleButtonBarButtonStyle";
                                                                     firstButtonStyleName: "mytoggleButtonBarFirstButtonStyle";
                                                                     lastButtonStyleName: "mytoggleButtonBarLastButtonStyle";
                                                                     selectedButtonTextStyleName: "mytoggleButtonBarSelectedButtonStyle";
                                                                  }
                                                                  
                                                                  .mytoggleButtonBarButtonStyle, .mytoggleButtonBarFirstButtonStyle,.mytoggleButtonBarLastButtonStyle,.mytoggleButtonBarSelectedButtonStyle   {
                                                                     fontFamily: Arial;
                                                                     fontSize: 10;
                                                                     fontWeight: normal;
                                                                     textAlign: left;
                                                                     highlightAlphas: 0, 0;
                                                                     fillAlphas: 1, 1, 1, 1;
                                                                     fillColors: #ffffff, #ffffff, #ffffcc, #ffff99;
                                                                     color: #666666;
                                                                     textSelectedColor: #000000;
                                                                     borderColor: #666666;
                                                                     borderThickness: 3;
                                                                     themeColor: #ff9900;
                                                                     paddingTop:0;
                                                                     paddingBottom:0;
                                                                     paddingLeft: 5;
                                                                     paddingRight:0;
                                                                  }
                                                                  
                                                                  .mytoggleButtonBarFirstButtonStyle, .mytoggleButtonBarLastButtonStyle {
                                                                       cornerRadius: 0;
                                                                  }
                                                                  
                                                                  .mytoggleButtonBarSelectedButtonStyle {
                                                                     color: #cc0000;
                                                                     fontWeight: bold;
                                                                     fontStyle: normal;
                                                                  }
                                                                  

                                                                  I need to get the same level of re-styling in Flex 4.  Is this done with CSS, skinning, or a combination of both?

                                                                  • 30. Re: Style Explorer for Spark components?
                                                                    garigantua Level 1

                                                                    darn it, bad result... redo

                                                                     

                                                                    This is the solution.  The same as I used for mx:TabNavigator and styling the Tabs

                                                                     

                                                                    mainApp.mxml

                                                                     

                                                                    <?xml version="1.0"?>
                                                                    <!-- Simple example to demonstrate the Halo TabNavigator layout container. -->
                                                                    <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/halo">
                                                                         
                                                                         
                                                                         <fx:Style>
                                                                              /* dont work */
                                                                              /* Tab.tabstyles */
                                                                              
                                                                              .mytoggleButtonBarButtonStyle{
                                                                                   skin: ClassReference("skins.custButtonSkin");
                                                                              }
                                                                              
                                                                         </fx:Style>    
                                                                         
                                                                         
                                                                         <mx:ToggleButtonBar buttonStyleName="mytoggleButtonBarButtonStyle">
                                                                              <mx:dataProvider>
                                                                                   <fx:Array>
                                                                                        <fx:String>Flex</fx:String>
                                                                                        <fx:String>Flash</fx:String>
                                                                                        <fx:String>Dreamweaver</fx:String>
                                                                                        <fx:String>ColdFusion</fx:String>
                                                                                   </fx:Array>
                                                                              </mx:dataProvider>
                                                                         </mx:ToggleButtonBar>
                                                                    </s:Application>

                                                                     

                                                                     

                                                                    skins.custButtonSkin.mxml

                                                                    <?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 Spark skin class for the Halo Button component. -->
                                                                    <local:SparkSkinForHalo xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
                                                                          xmlns:local="mx.skins.spark.*"
                                                                           minWidth="21" minHeight="19" 
                                                                           alpha.disabled="0.5">
                                                                    
                                                                        <fx:Script>
                                                                            /* Define the border items.*/
                                                                            static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
                                                                            override protected function get borderItems():Array {return borderItem;}
                                                                        </fx:Script>
                                                                        
                                                                         <!-- states -->
                                                                         <local: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="selectedUp" stateGroups="selectedStates, selectedUpStates" />
                                                                            <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
                                                                            <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
                                                                            <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
                                                                         </local:states>
                                                                         
                                                                         <!-- 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.downStates="0xFF0000"
                                                                                                       alpha="0.01"
                                                                                                       alpha.downStates="0" />
                                                                                        <s:GradientEntry color="0x000000" 
                                                                                                       color.downStates="0x0000FF" 
                                                                                                       alpha="0.07"
                                                                                                       alpha.downStates="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="0xFF0000" 
                                                                                                          color.selectedUpStates="0xBB00BD"
                                                                                                          color.overStates="0x00BDBD" 
                                                                                                          color.downStates="0xAAA00A" 
                                                                                                          alpha="0.85" 
                                                                                                          alpha.selectedOver="1" />
                                                                                        <s:GradientEntry color="0xD8D8D8" 
                                                                                                          color.selectedUpStates="0x9FA0A1"
                                                                                                          color.over="0x9FA0A1" 
                                                                                                          color.selectedOver="0x8E8F90"
                                                                                                          color.downStates="0x929496" 
                                                                                                          alpha="0.85"
                                                                                                          alpha.selectedOver="1" />
                                                                                   </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="0xff0000" 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.selectedUpStates="0.22"
                                                                                                 alpha.overStates="0.22" 
                                                                                                 alpha.downStates="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="downStates">
                                                                              <s:stroke>
                                                                                   <s:LinearGradientStroke rotation="90" weight="1">
                                                                                        <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                                                                                        <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                                                                                   </s:LinearGradientStroke>
                                                                              </s:stroke>
                                                                         </s:Rect>
                                                                         
                                                                         <!-- layer 6: highlight stroke (down state only) -->
                                                                         <s:Rect left="1" top="1" bottom="1" width="1" includeIn="downStates, selectedUpStates, selectedOver">
                                                                              <s:fill>
                                                                                   <s:SolidColor color="0x000000" alpha="0.07" />
                                                                              </s:fill>
                                                                         </s:Rect>
                                                                         <s:Rect right="1" top="1" bottom="1" width="1" includeIn="downStates, selectedUpStates, selectedOver">
                                                                              <s:fill>
                                                                                   <s:SolidColor color="0x000000" alpha="0.07" />
                                                                              </s:fill>
                                                                         </s:Rect>
                                                                         <s:Rect left="2" top="1" right="2" height="1" includeIn="downStates, selectedUpStates, selectedOver">
                                                                              <s:fill>
                                                                                   <s:SolidColor color="0x000000" alpha="0.25" />
                                                                              </s:fill>
                                                                         </s:Rect>
                                                                         <s:Rect left="1" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, selectedOver">
                                                                              <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 id="borderEntry1" 
                                                                                                   alpha="0.5625"
                                                                                                   alpha.down="0.6375"
                                                                                                   alpha.selectedStates="0.6375" />
                                                                                    <s:GradientEntry id="borderEntry2" 
                                                                                                   alpha="0.75" 
                                                                                                   alpha.down="0.85"
                                                                                                   alpha.selectedStates="0.85" />
                                                                                </s:LinearGradientStroke>
                                                                            </s:stroke>
                                                                        </s:Rect>
                                                                         
                                                                    </local:SparkSkinForHalo>

                                                                     

                                                                    I changed some gradient colors for proofing.

                                                                    • 31. Re: Style Explorer for Spark components?
                                                                      Handycam Level 1

                                                                      Thanks.  But where did you actually assign skins.custButtonSkin to the tab

                                                                      navigator?

                                                                      • 32. Re: Style Explorer for Spark components?
                                                                        garigantua Level 1

                                                                        Sorry.  That part of the explanation was cut out accidentally. 

                                                                         

                                                                        Since TabNavigator is only implemented as a mx component, I went to sdks\4.0.0\frameworks\projects\sparkskins\src\mx\skins\spark and copied ButtonSkin.mxml, renamed it to custButtonSkin, pasted it the local folder src/skins, and made my customizations in that local file.

                                                                         

                                                                        Hey, what is the best way to paste code into this forum?

                                                                        • 33. Re: Style Explorer for Spark components?
                                                                          garigantua Level 1

                                                                          hmm, now that I look at your question again, I think I may have misunderstood it. 

                                                                           

                                                                          I assign it through this <mx:ToggleButtonBar buttonStyleName="mytoggleButtonBarButtonStyle">

                                                                          • 34. Re: Style Explorer for Spark components?
                                                                            Handycam Level 1

                                                                            You are referring to a style called "mytoggleButtonBarButtonStyle", but your

                                                                            skin is called "custButtonSkin".  How is the connection made?  That's what

                                                                            is still escaping me.

                                                                            Have you created a css entry ". mytoggleButtonBarButtonStyle" and if so, how

                                                                            do you pass the name of the skin?

                                                                            • 35. Re: Style Explorer for Spark components?
                                                                              garigantua Level 1

                                                                              I just looked at my code.  Sorry for the extra bad characters.  I still don't know the best way to paste code in this forum.

                                                                               

                                                                              I think you missed the style declaration.

                                                                               

                                                                              <fx:Style>
                                                                                        .mytoggleButtonBarButtonStyle{
                                                                                            skin:ClassReference("skins.custButtonSkin");
                                                                                        }
                                                                                        
                                                                                   </fx:Style>    
                                                                                   

                                                                              • 36. Re: Style Explorer for Spark components?
                                                                                Handycam Level 1

                                                                                Thanks, got it.

                                                                                BTW, I have started using the ">" on the toolbar and choosing syntax

                                                                                coloring=plain. Not sure if that's the best way but it seems to work.

                                                                                • 37. Re: Style Explorer for Spark components?
                                                                                  Peter deHaan Level 4

                                                                                  Sorry, very quick note (I'll read the other messages and reply later this evening when I get a chance)...

                                                                                  But I typically copy text from my Flash Builder into Notepad or TextPad (remove coloring and formatting), and then copy/paste into the Forums and select something like Insert > Syntax Highlighting > XML.

                                                                                   

                                                                                  Peter

                                                                                  • 38. Re: Style Explorer for Spark components?
                                                                                    garigantua Level 1

                                                                                    No worries, Peter.  I think we worked it out.  Have a nice day.