Specifying tree control icons

993 views
928 views

Published on

Specifying Tree Control icons in Flex

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
993
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Specifying tree control icons

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

×