About style value formats

Style properties can be of types String or Number. They can also be Arrays of these types. In addition to a type, style properties also have a format (Length, Time, or Color) that describes the valid values of the property. Some properties appear to be of type Boolean (taking a value of true or false), but these are Strings that are interpreted as Boolean values. This section describes these formats.

Length format

The Length format applies to any style property that takes a size value, such as the size of a font (or fontSize). Length is of type Number.

The Length type has the following syntax:

length[length_unit]

The following example defines the fontSize property with a value of 20 pixels:

<?xml version="1.0"?>
<!-- styles/LengthFormat.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
  <fx:Style>
     .myFontStyle { 
        fontSize: 20px;
        color: #9933FF;
     }
  </fx:Style>
  <s:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
</s:Application>

The executing SWF file for the previous example is shown below:

If you do not specify a unit, the unit is assumed to be pixels. The following example defines two styles with the same font size:

<?xml version="1.0"?>
<!-- styles/LengthFormat2.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
  <fx:Style>
     .myFontStyle { 
        fontSize: 20px;
        color: #9933FF;
     }
     .myOtherFontStyle { 
        fontSize: 20;
        color: #9933FF;
     }
  </fx:Style>
  <s:Button id="myButton" styleName="myFontStyle" label="Click Here"/>
  <s:Button id="myButton2" styleName="myOtherFontStyle" label="Click Here"/>
</s:Application>

The executing SWF file for the previous example is shown below:

Note: Spaces are not allowed between the length value and the unit.

The following table describes the supported length units:

Unit

Scale

Description

px

Relative

Pixels.

in

Absolute

Inches.

cm

Absolute

Centimeters.

mm

Absolute

Millimeters.

pt

Absolute

Points.

pc

Absolute

Picas.

Note: The numeric values specified for font size in Flex are actual character sizes in the chosen units. These values are not equivalent to the relative font size specified in HTML using the <font> tag.

Flex does not support the em and ex units. You can convert these to px units by using the following scales:

1em = 10.06667px

1ex = 6px

In Flex, all lengths are converted to pixels prior to being displayed. In this conversion, Flex assumes that an inch equals 72 pixels. All other lengths are based on that assumption. For example, 1 cm is equal to 1/2.54 of an inch. To get the number of pixels in 1 cm, multiply 1 by 72, and divide by 2.54.

When you use inline styles, Flex ignores units and uses pixels as the default.

The fontSize style property allows a set of keywords in addition to numbered units. You can use the following keywords when setting the fontSize style property. The exact sizes are defined by the client browser:

  • xx-small

  • x-small

  • small

  • medium

  • large

  • x-large

  • xx-large

The following example class selector defines the fontSize as x-small:

<?xml version="1.0"?>
<!-- styles/SmallFont.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
  
  <fx:Style>    
     .smallFont {
        fontFamily: Arial, Helvetica, "_sans";
        fontSize: x-small;
     }
  </fx:Style>

  <s:Button id="myButton" styleName="smallFont" label="Click Here"/>

</s:Application>

The executing SWF file for the previous example is shown below:

Time format

You use the Time format for component properties that move or have built-in effects, such as the ComboBox component when it drops down and pops up. The Time format is of type Number and is represented in milliseconds. Do not specify the units when entering a value in the Time format.

The following example sets the openDuration style property of the myTree control to 1000 milliseconds. The default value is 0, so this example opens the tree nodes considerably more slowly than normal.

<?xml version="1.0"?>
<!-- styles/TimeFormat.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="initApp()">
    <fx:Script><![CDATA[
        public function initApp():void {
            myTree.setStyle("openDuration", 1000);
            myTree.setStyle("paddingLeft", 50);
        }
    ]]></fx:Script>

    <fx:Declarations>
        <fx:XMLList id="treeData">
            <node label="Mail Box">
                <node label="Inbox">
                    <node label="Marketing"/>
                    <node label="Product Management"/>
                    <node label="Personal"/>
                </node>
                <node label="Outbox">
                    <node label="Professional"/>
                    <node label="Personal"/>
                </node>
                <node label="Spam"/>
                <node label="Sent"/>
            </node>    
        </fx:XMLList>
    </fx:Declarations>

    <mx:Panel title="Tree Control Example" width="100%">
        <mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}"/>
    </mx:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

Color format

You define Color in several formats. You can use most of the formats only in the CSS style definitions. The following table describes the recognized Color formats for a style property:

Format

Description

hexadecimal

Hexadecimal colors are represented by a six-digit code preceded by either a zero and small x (0x) or a pound sign (#). The range of valid values is 0x000000 to 0xFFFFFF (or #000000 to #FFFFFF).

You use the 0x prefix when defining colors in calls to the setStyle() method and in MXML tags. You use the # prefix in CSS style sheets and in <fx:Style> tag blocks.

RGB

RGB colors are a mixture of the colors red, green, and blue, and are represented in percentages of the color’s saturation. The format for setting RGB colors is color:rgb(x%, y%, z%), where the first value is the percentage of red saturation, the second value is the percentage of green saturation, and the third value is the percentage of blue saturation.

You can use the RGB format only in style sheet definitions.

8-bit octet RGB

The 8-bit octet RGB colors are red, green, and blue values from 1 to 255. The format of 8-bit octet colors is [0-255],[0-255],[0-255].

You can use the 8-bit octet RGB format only in style sheet definitions.

VGA color names

VGA color names are a set of 16 basic colors supported by all browsers that support CSS. The available color names are Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White, Yellow.

You can use the VGA color names format in style sheet definitions and inline style declarations.

VGA color names are not case-sensitive.

Color formats are of type Number. When you specify a format such as a VGA color name, Flex converts that String to a Number.

CSS style definitions and the <fx:Style> tag support the following color value formats:

<?xml version="1.0"?>
<!-- styles/ColorFormatCSS.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">
  
  <fx:Style>
     .myStyle { 
        themeColor: #6666CC;    /* CSS hexadecimal format */
        color: Blue;        /* VGA color name */
     }  
  </fx:Style>
  
  <s:Button id="myButton" styleName="myStyle" label="Click Here"/>
  
</s:Application>

The executing SWF file for the previous example is shown below:

You can use the following color value formats when setting the styles inline or using the setStyle() method:

<?xml version="1.0"?>
<!-- styles/ColorFormatStyleManager.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="initApp()">

  <fx:Script><![CDATA[
     public function initApp():void {
        styleManager.getStyleDeclaration("spark.components.Button").setStyle("color","Blue");
     }

     public function changeStyles(e:Event):void {
        // Check against "255" here, because that is the numeric value of "Blue".
        if (e.currentTarget.getStyle("color") == 255) {
            e.currentTarget.setStyle("color", "Red");
        } else {
            e.currentTarget.setStyle("color", "Blue");
        }
     }
  ]]></fx:Script>

  <s:Button id="myButton" label="Click Here" 
        click="changeStyles(event)"/>
</s:Application>

The executing SWF file for the previous example is shown below:

Using Arrays for style properties

Some controls accept arrays of colors. For example, the Tree control’s depthColors style property can use a different background color for each level in the tree. To assign colors to a property in an Array, add the items in a comma-separated list to the property’s definition. The index is assigned to each entry in the order that it appears in the list.

The following example defines Arrays of colors for properties of the Tree type selector:

<?xml version="1.0"?>
<!-- styles/ArraysOfColors.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

  <fx:Style>
     @namespace mx "library://ns.adobe.com/flex/mx";

     mx|Tree {
        depthColors: #FFCC33, #FFCC99, #CC9900;
        alternatingItemColors: red, green;
     }
  </fx:Style>

    <fx:Declarations>

      <fx:XMLList id="treeData">
         <node label="Mail Box">
            <node label="Inbox">
               <node label="Marketing"/>
               <node label="Product Management"/>
               <node label="Personal"/>
            </node>
            <node label="Outbox">
               <node label="Professional"/>
               <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
         </node>    
      </fx:XMLList>
    </fx:Declarations>

  <s:Panel title="Tree Control Example" width="100%">
        <mx:Tree id="myTree" width="100%" labelField="@label" dataProvider="{treeData}"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

In this example, only depthColors will be seen. The alternatingItemColors property is visible only if depthColors is not set. Both are presented here for illustrative purposes only.

You can define the Array in ActionScript by using a comma-separated list of values surrounded by braces, as the following example shows:

<?xml version="1.0"?>
<!-- styles/SetStyleArray.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="initApp()"
    height="500">
    
  <fx:Script>
    <![CDATA[     
     public function initApp():void {
        myTree.setStyle("depthColors",[0xFFCC33, 0xFFCC99, 0xCC9900]);
        myTree.setStyle("alternatingItemColors",["red", "green"]);
     }     
    ]]>
  </fx:Script>

  <fx:Declarations>
      <fx:XMLList id="treeData">
         <node label="Mail Box">
            <node label="Inbox">
               <node label="Marketing"/>
               <node label="Product Management"/>
               <node label="Personal"/>
            </node>
            <node label="Outbox">
               <node label="Professional"/>
               <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
         </node>    
      </fx:XMLList>
  </fx:Declarations>

  <s:Panel title="Tree Control Example" width="100%">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <mx:Tree id="myTree" 
           width="100%" 
           labelField="@label" 
           dataProvider="{treeData}"/>

        <mx:Tree id="myOtherTree" 
           width="100%" 
           labelField="@label" 
           dataProvider="{treeData}" 
           depthColors="[0xFFCC33, 0xFFCC99, 0xCC9900]" 
           alternatingItemColors="['red', 'green']"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below:

This example also shows that you can set the properties that use Arrays inline.

Finally, you can set the values of the Array in MXML syntax and apply those values inline, as the following example shows:

<?xml version="1.0"?>
<!-- styles/ArrayOfColorsMXML.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark">

    <fx:Declarations>
      <fx:Array id="myDepthColors">
         <fx:Object>0xFFCC33</fx:Object>
         <fx:Object>0xFFCC99</fx:Object>
         <fx:Object>0xCC9900</fx:Object>
      </fx:Array>

      <fx:Array id="myAlternatingRowColors">
         <fx:Object>red</fx:Object>
         <fx:Object>green</fx:Object>
      </fx:Array>

      <fx:XMLList id="treeData">
         <node label="Mail Box">
            <node label="Inbox">
               <node label="Marketing"/>
               <node label="Product Management"/>
               <node label="Personal"/>
            </node>
            <node label="Outbox">
               <node label="Professional"/>
               <node label="Personal"/>
            </node>
            <node label="Spam"/>
            <node label="Sent"/>
         </node>    
      </fx:XMLList>
    </fx:Declarations>

  <s:Panel title="Tree Control Example" width="50%">
        <mx:Tree id="myTree" 
           width="100%" 
           labelField="@label" 
           dataProvider="{treeData}"
           depthColors="{myDepthColors}" 
           alternatingItemColors="{myAlternatingRowColors}"/>
  </s:Panel>
</s:Application>

The executing SWF file for the previous example is shown below: