Specifying tree control icons
Download as PPT, PDF0 likes402 views
Specifying Tree Control icons in Flex
![Using icon fields Example: <?xml version="1.0"?> <!-- dpcontrols/TreeIconField.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ [Bindable] [Embed(source="assets/images.jpg")] public var iconSymbol1:Class; [Bindable] [Embed(source="assets/images1.jpg")] public var iconSymbol2:Class; ]]> </mx:Script>](https://image.slidesharecdn.com/specifyingtreecontrolicons-100416002831-phpapp02/85/Specifying-tree-control-icons-3-320.jpg){kind=icon}
![Cont…. } ]]> </mx:Script> <mx:Tree id="XMLTree1" width="150" height="170" labelField="@label" creationComplete="initTree();"> <mx:XMLListCollection id="MailBox"> <mx:XMLList> <node label="Mail" data="100"> <node label="Inbox" data="70"/> <node label="Personal Folder" data="10"> <node label="Business" data="2"/> <node label="Demo" data="3"/> <node label="Saved Mail" data="5" /> </node>](https://image.slidesharecdn.com/specifyingtreecontrolicons-100416002831-phpapp02/85/Specifying-tree-control-icons-7-320.jpg){kind=icon}
Specifying tree control icons
- 1. Specifying Tree control icons Hemakumar.S Open Source Developer
- 2. Specifying Tree control icons The Tree control provides four techniques for specifying node icons: The folderOpenIcon, folderClosedIcon, and defaultLeafIcon properties Data provider node icon fields The set Item Icon() method The iconFunction property Using icon properties: You can use the folderOpenIcon, folderClosedIcon, and default Leaf Icon properties to control the Tree control icons.
- 3. Using icon fields Example: <?xml version="1.0"?> <!-- dpcontrols/TreeIconField.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ [Bindable] [Embed(source="assets/images.jpg")] public var iconSymbol1:Class; [Bindable] [Embed(source="assets/images1.jpg")] public var iconSymbol2:Class; ]]> </mx:Script>
- 4. Cont…. <mx:Tree iconField="@icon" labelField="@label" showRoot="false" width="160"> <mx:XMLList> <node label="New"> <node label="HTML Document" icon="iconSymbol2"/> <node label="Text Document" icon="iconSymbol2"/> </node> <node label="Close" icon="iconSymbol1"/> </mx:XMLList> </mx:Tree> </mx:Application>
- 5. Screen Shot
- 6. Using the setItemIcon() method Example: <?xml version="1.0"?> <!-- dpcontrols/TreeOpenNode.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import flash.events.*; import mx.events.*; import mx.controls.*; private function initTree():void { XMLTree1.expandItem(MailBox.getItemAt(0), true); XMLTree1.selectedIndex = 2;
- 7. Cont…. } ]]> </mx:Script> <mx:Tree id="XMLTree1" width="150" height="170" labelField="@label" creationComplete="initTree();"> <mx:XMLListCollection id="MailBox"> <mx:XMLList> <node label="Mail" data="100"> <node label="Inbox" data="70"/> <node label="Personal Folder" data="10"> <node label="Business" data="2"/> <node label="Demo" data="3"/> <node label="Saved Mail" data="5" /> </node>
- 8. Cont…. <node label="Sent" data="15"/> <node label="Trash" data="5"/> </node> </mx:XMLList> </mx:XMLListCollection> </mx:Tree> </mx:Application>
- 9. Screen Shot
- 10. Thank you....