6 Replies Latest reply on Aug 5, 2009 9:01 AM by Kenny Yates

    How to Switch Style Sheets

    Jerry62712 Level 1

      I understand that a Flex way to dynamically change styles is to build many style sheets and then switch between them.

       

      How do you do this?

       

      Alternately, how do you change a value of a style for a selector?

        • 1. Re: How to Switch Style Sheets
          Gregory Lafrance Level 6

          This shows how to create a type and class selector in Flex.

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
            <mx:Style>
             Button{
               fontSize: 20;
             }
             .myStyle{
               fontSize: 40; 
             }
            </mx:Style>
            <mx:Button label="20 pt font"/>
            <mx:Button label="40 pt font" styleName="myStyle"/>
          </mx:Application>
          

           

          Here are links on setting stylesheets:

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=Working_with_Text_15.html

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=styles_10.html

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=styles_06.html

           

          http://livedocs.adobe.com/flex/3/html/help.html?content=styles_05.html

           

          If this post answered your question or helped, please mark it as such.

          1 person found this helpful
          • 2. Re: How to Switch Style Sheets
            Jerry62712 Level 1

            Thanks for the info.  I knew how to do css, at least html versions.  Now I know how to create Flex versions and programatically switch between them.

             

            Changing the font size proved problematic.  The container doesn't change sizes dynamically.  I guess I have to either do this in ActionScript or use scroll bars which would be my very last choice.  Unless you happen to know how to trigger the containers so they automatically resize.......

             

            Jerry

            • 3. Re: How to Switch Style Sheets
              Gregory Lafrance Level 6

              I'm surprised the containers don't refresh their sizes when a style changes, but you could try to execute myContainer.validateNow() after changing the styles.

               

              If this post answered your question or helped, please mark it as such.

              • 4. Re: How to Switch Style Sheets
                Jerry62712 Level 1

                validatenow() didn't force a resize, darn it.  I guess you have to rebuild your entire form in ActionScript when you want it to change.

                • 5. Re: How to Switch Style Sheets
                  Gregory Lafrance Level 6

                  Hmmm... If you can boil down your code to a simplified yet complete example that does what you want but still exhibits the problem, we might be able to play around with it.

                  • 6. Re: How to Switch Style Sheets
                    Kenny Yates Level 2

                    Jerry,

                     

                    You can change styles programmically or dyanamically if you like.

                    there are a few steps to set this up.

                     

                    1. Create your different style sheets and place them into a folder (best practice).

                    2. In your Flex Navigator "right-click" on your style sheets and select "Compile CSS to SWF" for each of them.

                     

                    USAGE EXAMPLE:

                     

                    I created a combo box component and loaded in a static array collection for it's data provider

                     

                    [Bindable]
                    public var acStyles:ArrayCollection = new ArrayCollection([{label:"MaroonStyle", data:"maroon"}, {label:"BlueStyle", data:"blue"}]);

                     

                     

                    Then I call this function that is triggered off of the combo box's "change" event.

                     

                    private function changeStyles(event:Event):void
                            {
                                var evtCB:ComboBox = event.currentTarget as ComboBox;
                                var stylename:String = evtCB.selectedItem.data;
                               
                                if(stylename == "blue")
                                {
                                    StyleManager.loadStyleDeclarations('styles/TGStylesAlt.swf',true);
                                }
                                else
                                {
                                    StyleManager.loadStyleDeclarations('styles/TGStyles.swf',true);
                                }
                            }

                     

                    Simple as that.

                     

                    Now of course I suggest you add a bit more dynamic situation to the "if/else" statement that this hard-coded version but should work the same.

                     

                    If this helps mark it as answered.

                     

                    HTH,

                    Kenny Yates

                     

                    Message was edited by: K.Yates