Modify data sources and icons of the Flex tree component

Change the ico icon in the default, open, closed, and subitem statuses of the Tree component. Copy codeThe Code is as follows: <? Xml version = "1.0" encoding = "UTF-8"?>
<! -- Tree control example. -->
<Mx: Application xmlns: mx = "http://www.adobe.com/2006/mxml">
<! -- The following is a style -->
<Mx: Style>
Tree
{
VerticalScrollBarStyleName: treeVerticalScrollBar;
SelectionColor: #417597;
/* Add different ico states such as default, open, close, and subitem */
DefaultLeafIcon: Embed (source = "longstep/icon/sharp_grey/gif/base.gif ");
FolderOpenIcon: Embed (source = "longstep/icon/sharp_grey/gif/vote_yes.gif ");
FolderClosedIcon: Embed (source = "longstep/icon/sharp_grey/gif/options.gif ");
DisclosureOpenIcon: Embed (source = "longstep/icon/sharp_grey/gif/pause.gif ");
}
. TreeVerticalScrollBar
{
BorderColor: # f00;
}
</Mx: Style>
<Mx: Script>
<! [CDATA [
// Bind data and define xml variables to store selected nodes
[Bindable]
Public var selectedNode: XML;
// Event when a change event occurs in the tree
Public function treeChanged (event: Event): void {
// Convert the selected node to xml and assign the selectedNode as the conversion type.
Selectednodeinclutree(event.tar get). selectedItem as XML;
}
// Tree has three events, change, itemClick, itemOpen, and itemClose.
// Change: triggered when the selected column changes
// ItemClick: triggered when a column is clicked
// ItemOpen: triggered when the node is expanded
// ItemClose: triggered when the node is closed
]>
</Mx: Script>
<! -- XMLList is the most suitable for tree components as a data source -->
<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" height = "75%" width = "75%"
PaddingTop = "10" paddingLeft = "10" paddingRight = "10" paddingBottom = "10">
& Lt; mx: Label width = "100%" color = "blue"
Text = "Select a node in the Tree control."/>
<Mx: HDividedBox width = "100%" height = "100%">
<! -- @ Indicates the attribute of the xml intermediate vertex. For example, @ label indicates the value of the label attribute. -->
<! -- DataProvider = "{treeData}" indicates binding data. The data source can be XML or XMLList. -->
<Mx: Tree id = "myTree" width = "50%" height = "100%" labelField = "@ label"
ShowRoot = "false" dataProvider = "{treeData}" change = "treeChanged (event)"/>
<Mx: TextArea height = "100%" width = "50%"
Text = "Selected Item: {selectedNode. @ label}"/>
</Mx: HDividedBox>
</Mx: Panel>
</Mx: Application>