3 Replies Latest reply on Jul 5, 2010 11:26 PM by BhaskerChari

    how to set multiple styles on a single component in flex ?

    tuliptaurus Level 1

      Hi ,

       

      I would like to know how to set multiple styles on a single component in flex.

       

      Can anyone give me an example as to how to set multiple styles for a single component ?

       

      Thanks ,

       

      Regards,

      Ajantha

        • 1. Re: how to set multiple styles on a single component in flex ?
          BhaskerChari Level 4

          Hi tuliptaurus,

           

          You can apply multiple styles to a component by using inline styles directly on the component tag, by using external css and also using setStyle() method and also by applying skins you can change the appearanace of a component..

           

          Please refer the link below:

           

          http://blogagic.com/98/styling-flex-custom-components

           


          Thanks,

          Bhasker Chari

          • 2. Re: how to set multiple styles on a single component in flex ?
            tuliptaurus Level 1

            Hi Bhasker ,

             

             

            Suppose i have got a button component like this

             

             

            <mx:Button id="stackedLayout"

             

                         width="30"

             

                        icon="@Embed('/assets/icons/stacked_col_up.png')"

             

                         disabledIcon="@Embed('/assets/icons/stacked_col_disabled.png')"

             

                        downIcon="@Embed('/assets/icons/stacked_col_dn.png')"

             

                        overIcon="@Embed('/assets/icons/stacked_col_over.png')"

             

                        styleName="blendButtonSkin"

             

                        toolTip="Stacked layout"

             

                        click="stackedLayoutDisplay();"

             

                     />

             

             

            its already using a style from an external css file

             

             

            .blendButtonSkin {

             

                fontFamily: Arial;

             

                fontSize: 11;

             

                color: #F1F1F1;

             

                textRollOverColor: #F1F1F1;

             

                textSelectedColor: #F1F1F1;

             

                horizontal-align:center;

             

                width:150;

             

                height:30;

             

                cornerRadius:5;

             

                upSkin:ClassReference('assets.skins.BlendButtonSkin');

             

                downSkin:ClassReference('assets.skins.BlendButtonSkin');

             

                overSkin:ClassReference('assets.skins.BlendButtonSkin');

             

                disabledSkin:ClassReference('assets.skins.BlendButtonSkin');

             

                selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');

             

                selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');

             

                selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');

             

            }

             

             

            My question is I need to remove those icon, disabledIcon, downIcon and overIcon  styles from the button component to another css selector so that I can use both blendButtonSkin Style(which is common to all the buttons in my application)   and also the override style tags from this particular button.

             

            Is there a way to do this other than setting them as inline styles which  i dont want to do cos my purpose is to eliminate all inline styles as  much as possible.

             

             

            Regards,

             

            Ajanta
            • 3. Re: how to set multiple styles on a single component in flex ?
              BhaskerChari Level 4

              Hi tuliptaurus,

               

              You can setStyleName property for chnaging the external css dynamically by using the setStyle() method ...

               

              btn.setStyle("styleName","blendButtonSkinOther");

               

              You can change the external css by using the styleaName property with setStyle method..the line in blue..where blendButtonSkinOther is another css class..

               

              blendButtonSkin {

               

                  fontFamily: Arial;

               

                  fontSize: 11;

               

                  color: #F1F1F1;

               

                  textRollOverColor: #F1F1F1;

               

                  textSelectedColor: #F1F1F1;

               

                  horizontal-align:center;

               

                  width:150;

               

                  height:30;

               

                  cornerRadius:5;

               

                  upSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  downSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  overSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  disabledSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');

               

                  selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');

               

                  selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');

               

              }

               

               

               

              blendButtonSkinOther {

               

                  fontFamily: Arial;

               

                  fontSize: 11;

               

                  color: #F1F1F1;

               

                  textRollOverColor: #F1F1F1;

               

                  textSelectedColor: #F1F1F1;

               

                  horizontal-align:center;

               

                  width:150;

               

                  height:30;

               

                  cornerRadius:5;

               

                  upSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  downSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  overSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  disabledSkin:ClassReference('assets.skins.BlendButtonSkin');

               

                  selected-up-skin: ClassReference('assets.skins.BlendButtonSkin');

               

                  selected-down-skin: ClassReference('assets.skins.BlendButtonSkin');

               

                  selected-over-skin: ClassReference('assets.skins.BlendButtonSkin');

               

              }

               

              Thanks,

              Bhasker Chari