Setting styles -- Flex 2.01

The return_type depends on the style that you access. Styles can be of type String, Number, Boolean, or, in the case of skins, Class. The property_name is a String that indicates the name of the style property; for example, fontSize, or borderStyle.

componentInstance.setStyle(property_name, property_value)

The property_value sets the new value of the specified property. To determine valid values for properties, see Adobe Flex 2 Language Reference.

The following example uses the getStyle() and setStyle() methods to change the Button's fontSize style and display the new size in the TextInput:

<?xml version="1.0"?>
<!-- styles/SetSizeGetSize.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Button { 
        fontSize: 10pt; 
        color: Blue; 
     }
     .myClass {
        fontFamily: Arial, Helvetica, "_sans";
        color: Red;
        fontSize: 22;
        fontWeight: bold;
     } 
  </mx:Style>
  <mx:Script><![CDATA[
     public function showStyles():void {
        lb1.text = String(ip1.getStyle("fontSize"));
     }
     public function setNewStyles(newSize:Number):void {
        ip1.setStyle("fontSize",newSize);
     }
  ]]></mx:Script>
  <mx:VBox id="vb">
     <mx:TextInput styleName="myClass" text="My attrs" id="ip1"
        width="400"/>
     <mx:Label id="lb1" text="" width="400"/>
     <mx:Button label="Get Style" click="showStyles();"/>
     <mx:Button label="Set Style" click="setNewStyles(Number(ip2.text));"/>
     <mx:TextInput text="" id="ip2" width="50"/>
  </mx:VBox>
</mx:Application>

You can use the getStyle() method to access style properties regardless of how they were set. If you defined a style property as a tag property inline rather than in an <mx:Style> tag, you can get and set this style. You can override style properties that were applied in any way, such as in an <mx:Style> tag or in an external style sheet.

The following example sets a style property inline, and then reads that property with the getStyle() method:

<?xml version="1.0"?>
<!-- styles/GetStyleInline.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Script><![CDATA[
     private function readStyle():void {
        myLabel.text = "Style: " + myLabel.getStyle("fontStyle");
     }
  ]]></mx:Script>
  <mx:VBox width="500"
     height="200">
     <mx:Button id="b1" click="readStyle()" label="Get Style"/>
     <mx:Label fontStyle="italic" id="myLabel"/>
  </mx:VBox>
</mx:Application>

When setting color style properties with the setStyle() method, you can use the hexadecimal format or the VGA color name, as the following example shows:

<?xml version="1.0"?>
<!-- styles/ColorFormatStyleManager.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     public function initApp():void {
        StyleManager.getStyleDeclaration("Button").
            setStyle("themeColor",0x6666CC);
        StyleManager.getStyleDeclaration("Button").
            setStyle("color","Blue");
     }

     public function changeStyles(e:Event):void {
        e.currentTarget.setStyle("themeColor", 0xFF0099);
        e.currentTarget.setStyle("color", "Red");
     }
  ]]></mx:Script>
  <mx:Button id="myButton" 
        label="Click Here" 
        click="changeStyles(event)"
  />
</mx:Application>

When you get a color style property with the getStyle() method, Flex returns an integer that represents the hexadecimal value of the style property. To convert this to its hexadecimal format, you use the color variable's toString() method and pass it the value 16 for the radix (or base):

<?xml version="1.0"?>
<!-- styles/ColorFormatNumericValue.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">

  <mx:Style>
     Button {
        color: #66CCFF;
     }
  </mx:Style>

  <mx:Script><![CDATA[
     [Bindable]
     private var n:Number;

     private function initApp():void {
        n = myButton.getStyle("color");
     }

     public function changeStyles(e:Event):void {
        if (myButton.getStyle("color").toString(16) == "ff0000") {
           myButton.setStyle("color", 0x66CCFF);            
        } else {
           myButton.setStyle("color", "Red");           
        }
        
        n = myButton.getStyle("color"); //// Returns 16711680
     }
  ]]></mx:Script>
  
  <mx:Button id="myButton" label="Click Here" click="changeStyles(event)"/>

  <mx:Label id="myLabel" text="0x{n.toString(16).toUpperCase()}"/>

</mx:Application>

When you use the setStyle() method to change an existing style (for example, to set the color property of a Button control to something other than 0x000000, the default), Flex does not overwrite the original style setting. You can return to the original setting by setting the style property to null. The following example toggles the color of the Button control between blue and the default by using this technique:

<?xml version="1.0"?>
<!-- styles/ResetStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script> 
        <![CDATA[
        public function toggleStyle():void {
            if (cb1.selected == true) {
                b1.setStyle("color","blue");
                b1.setStyle("fontSize", 8);
            } else {
                b1.setStyle("color", null);
                b1.setStyle("fontSize", null);
            }                       
        }
        ]]>
    </mx:Script>   
    
    <mx:Style>
    
        Button {
            color: red;
            fontSize: 25;
        }
    
    </mx:Style>

    <mx:Button id="b1" label="Click Me"/>

    <mx:CheckBox id="cb1" 
        label="Set Style/Unset Style" 
        click="toggleStyle()" 
        selected="false"
    />
</mx:Application>