Using Arrays for style properties -- Flex 2.01

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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
  <mx:Style>
     Tree {
        depthColors: #FFCC33, #FFCC99, #CC9900;
        alternatingItemColors: red, green;
     }
  </mx:Style>
  
  <mx: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>    
  </mx:XMLList>

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

In this example, only depthColors will be seen. The alternatingItemColors property is only visible 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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="initApp()">
  <mx:Script><![CDATA[
     public function initApp():void {
        myTree.setStyle("depthColors",[0xFFCC33, 0xFFCC99, 0xCC9900]);
        myTree.setStyle("alternatingItemColors",["red", "green"]);
     }
  ]]></mx:Script>
  <mx: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>    
  </mx:XMLList>

  <mx:Panel title="Tree Control Example" width="100%">
        <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']"
        />
  </mx:Panel>
</mx:Application>

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 -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

  <mx:Array id="myDepthColors">
     <mx:Object>0xFFCC33</mx:Object>
     <mx:Object>0xFFCC99</mx:Object>
     <mx:Object>0xCC9900</mx:Object>
  </mx:Array>
  
  <mx:Array id="myAlternatingRowColors">
     <mx:Object>red</mx:Object>
     <mx:Object>green</mx:Object>
  </mx:Array>

  <mx: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>    
  </mx:XMLList>

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