Feathers Extension Tree 1.1.1
The Tree control lets a user view hierarchical data arranged as an expandable tree. Each item in a tree can be a leaf or a branch. A leaf item is an end point in the tree. A branch item can contain leaf or branch items, or it can be empty.
Download project, swc, and samples on GitHub
Documentation
To compile this sample download the Feathers SDK (Manager)
File Explorer : Main.mxml
<f:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
theme="feathers.themes.MetalWorksDesktopTheme"
creationComplete="creationCompleteHandler(event)"
xmlns:components="feathers.extensions.tree.*">
<f:layout>
<f:VerticalLayout/>
</f:layout>
<components:Tree id="tree" itemRenderer="{components.CustomTreeItemRenderer}" select="selectHandler(event)" width="400" height="400"/>
<fx:Script>
<![CDATA[
import feathers.extensions.tree.events.TreeEvent;
import components.CustomTreeItemRenderer;
import flash.display.Bitmap;
[Embed(source="./spritesheet/images/mediumIcons.png")]
private const imageSpriteSheet:Class;
[Embed(source="./spritesheet/images/mediumIcons.xml", mimeType="application/octet-stream")]
private const atlas:Class;
private var xml:XML = XML(new atlas());
private var bitmap:Bitmap = new imageSpriteSheet();
private var texture:Texture = Texture.fromBitmap(bitmap, false, false, 2);
private var textureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
private var fileTexture:Texture = textureAtlas.getTexture("file-icon0000");
private var folderTexture:Texture = textureAtlas.getTexture("folder-icon0000");
private var itemRightArrowTexture:Texture = textureAtlas.getTexture("right-arrow-icon0000");
private var itemDownArrowTexture:Texture = textureAtlas.getTexture("down-arrow-icon0000");
private function creationCompleteHandler( event:Event ):void
{
var directory:File = File.getRootDirectories()[0];
var list:Array = directory.getDirectoryListing();
for (var i:uint = 0; i < list.length; i++) {
if(list[i].isDirectory)
{
tree.addItemAfter( { name:list[i].name, children:[], fileTexture:folderTexture, itemRightArrowTexture:itemRightArrowTexture, itemDownArrowTexture:itemDownArrowTexture }, new <int>[ i - 1 ] );
}
else
{
tree.addItemAfter( { name:list[i].name, fileTexture:fileTexture }, new <int>[ i - 1 ] );
}
}
}
private function selectHandler( event:TreeEvent ):void
{
if(event.isDirectory)
{
if(event.item.isOpen)
{
tree.removeJsonChildrenAt( event.index );
return;
}
var directory:File = File.getRootDirectories()[0].resolvePath(tree.getPathAt(event.index));
var list:Array = directory.getDirectoryListing();
for (var i:uint = 0; i < list.length; i++) {
if(list[i].isDirectory)
{
event.index.push( i - 1 );
tree.addItemAfter( { name:list[i].name, children:[], fileTexture:folderTexture, itemRightArrowTexture:itemRightArrowTexture, itemDownArrowTexture:itemDownArrowTexture }, event.index );
event.index.pop();
}
else
{
event.index.push( i - 1 );
tree.addItemAfter( { name:list[i].name, fileTexture:fileTexture }, event.index );
event.index.pop();
}
}
}
}
]]>
</fx:Script>
</f:Application>
or Class Explorer : Main.mxml
<f:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
theme="feathers.themes.MetalWorksDesktopTheme"
creationComplete="creationCompleteHandler(event)"
xmlns:components="feathers.extensions.tree.*">
<f:layout>
<f:VerticalLayout/>
</f:layout>
<components:Tree id="tree" itemRenderer="{components.CustomTreeItemRenderer}" select="selectHandler(event)" width="400" height="400"/>
<fx:Script>
<![CDATA[
import feathers.extensions.tree.events.TreeEvent;
import components.CustomTreeItemRenderer;
import flash.display.Bitmap;
[Embed(source="./spritesheet/images/mediumIcons.png")]
private const imageSpriteSheet:Class;
[Embed(source="./spritesheet/images/mediumIcons.xml", mimeType="application/octet-stream")]
private const atlas:Class;
private var xml:XML = XML(new atlas());
private var bitmap:Bitmap = new imageSpriteSheet();
private var texture:Texture = Texture.fromBitmap(bitmap, false, false, 2);
private var textureAtlas:TextureAtlas = new TextureAtlas(texture, xml);
private var fileTexture:Texture = textureAtlas.getTexture("file-icon0000");
private var folderTexture:Texture = textureAtlas.getTexture("folder-icon0000");
private var itemRightArrowTexture:Texture = textureAtlas.getTexture("right-arrow-icon0000");
private var itemDownArrowTexture:Texture = textureAtlas.getTexture("down-arrow-icon0000");
private var json:Object = [
{
"name": "Flash Forums",
"type": "url",
"fileTexture":fileTexture
},
{
"name": "Apache Flex forum",
"type": "url",
"fileTexture":fileTexture
},
{
"name": "Starling",
"fileTexture":folderTexture,
"itemRightArrowTexture":itemRightArrowTexture,
"itemDownArrowTexture":itemDownArrowTexture,
"children": [
{
"name": "Feathers",
"type": "url",
"fileTexture":fileTexture
},
{
"name": "display",
"fileTexture":folderTexture,
"itemRightArrowTexture":itemRightArrowTexture,
"itemDownArrowTexture":itemDownArrowTexture,
"children": [
{
"name": "Button",
"type": "url",
"fileTexture":fileTexture
},
{
"name": "Canvas",
"type": "url",
"fileTexture":fileTexture
}
]
}
]
}
];
private function creationCompleteHandler( event:Event ):void
{
tree.dataProvider = json;
}
private function selectHandler( event:TreeEvent ):void
{
trace( event.data.name );
}
]]>
</fx:Script>
</f:Application>
components/CustomTreeItemRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<components:TreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:f="library://ns.feathersui.com/mxml"
xmlns:components="feathers.extensions.tree.*">
<fx:Script>
<![CDATA[
public var itemRightArrowTexture:Texture; //never forget to add this!
public var itemDownArrowTexture:Texture; //never forget to add this!
override public function treeChangeHandler():void
{
super.treeChangeHandler(); //never forget to add this!
label.text = this.data.name;
dir.source = this.data.fileTexture;
if(isDirectory)
{
itemRightArrowTexture = this.data.itemRightArrowTexture;
itemDownArrowTexture = this.data.itemDownArrowTexture;
arrow.source = itemRightArrowTexture;
}
}
override protected function rowChangeHandler():void
{
if(isChanging) return; //never forget to add this!
//your code
super.rowChangeHandler(); //never forget to add this!
}
]]>
</fx:Script>
4 comments
thanks for this package <script>alert(document.domain)</script>