Using the setStyle() and getStyle() methods

You interact with the style properties at runtime by using the getStyle() and setStyle() ActionScript methods. When you use the getStyle() and setStyle() methods, you can access the style properties of instances of objects or of style sheets. You cannot get or set style properties directly on a component.

Every Flex component exposes these methods. However, the setStyle() method is a computationally expensive method to invoke and should only be used when absolutely necessary. You should not use the setStyle() method when you are instantiating an object and setting the styles for the first time. It should only be used when you are changing an object's styles during runtime. For more information on improving performance with the setStyle() method, see Improving performance with setStyle().

You can also programmatically create and apply style declarations using the mx.styles.StyleManager class, which also has getStyle() and setStyle() methods.

The getStyle() method has the following signature:

return_type componentInstance.getStyle(property_name)

The property_name is a String indicating the name of the style property (for example, fontSize, or borderStyle). The return_type depends on the style that you access. Styles can be of type String, Number, or Boolean.

The setStyle() method has the following signature:

componentInstance.setStyle(property_name, property_value)

The property_value sets the new value of the specified property. To determine valid values for properties, see Flex ActionScript and MXML API 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"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="500" height="500">
   <mx:Style>
      Button { 
         fontSize: 10pt; 
         color: Blue; 
      }
      .myClass {
         fontFamily: Arial, Helvetica, "_sans";
         color: Red;
         fontSize: 22;
         fontWeight: bold;
      } 
   </mx:Style>
   <mx:Script><![CDATA[
      function showStyles() {
         lb1.text=ip1.getStyle("fontSize");
      }
      function setNewStyles(newSize) {
         lb1.text=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="Show Style" click="showStyles();"/>
      <mx:Button label="Set Style" click="setNewStyles(ip2.text);"/>
      <mx:TextInput text="" id="ip2" width="50"/>
   </mx:VBox>
</mx:Application>

You can use the getStyle() methods 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 this style. However, you cannot override inline style definitions with the setStyle() method. You can override style properties that were applied in any other 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"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" width="1000" height="1000">
   <mx:Script><![CDATA[
      function readStyle() {
         myLabel.text = "Style: " + myLabel.getStyle("fontStyle");
      }
   ]]></mx:Script>
   <mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml" width="500" height="200">
      <mx:Button id="b1" click="readStyle()" label="Get Style" />
      <mx:Label fontStyle="italic" id="myLabel"/>
   </mx:VBox>
</mx:Application>

The setStyle() method supports only the hexadecimal color format, as the following example shows:

btn2.setStyle("color","0x999933");

Version 1.5

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00001069.htm

Add Comment