actionscript2 樹狀選單實作

treedemo範例檔案下載 首先先了解一下asdemo.events這個package裡面的as。 - IEventDispatcher.as 所有附有事件廣播機制的類別都必須實作這個介面。 - EventSource.as 實作了IEventDispatcher介面的類別。 asdemo.ui.DispatcherMC繼承了MovieClip並實作IEventDispatcher類別，讓所有繼承該類別都附有事件廣播機制功能。

接下來進行到重點階段，我們先了解asdemo.ui.tree package內兩個介面的繼承關係。一個為INode，一個為ITree。ITree繼承了INode。這代表Itree也含有節點的特性。 - asdemo.ui.tree.INode import asdemo.events.IEventDispatcher; interface asdemo.ui.tree.INode extends IEventDispatcher { public function show():Void; public function hide():Void; public function setText(str:String):Void; } - asdemo.ui.tree.ITree import asdemo.ui.tree.INode; interface asdemo.ui.tree.ITree extends INode { public function addNode():INode; public function addTree():ITree; public function open():Void; public function close():Void; public function isOpened():Boolean; public function getNodeAt(i:Number):INode; public function removeNode(n:INode):Void; } - INode的繼承關係 TextNode實作了Inode介面，並且會在onRelease發出ButtonEvent.RELEASE事件。 - ITree的繼承關係 首先AbstractTree實作了ITree介面，大部分基本方法已經在這個類別完成。 -setNodePosition方法:在節點被加入時要調整節點位置，當節點被刪除時要重新調整所有節點的位置。 -adjustPosition方法:在節點被刪除時呼叫重新調整所有節點的位置。 -childTreeCloseHandler方法:在同一節點被click時呼叫將其他節點樹關閉。 DemoTree繼承了AbstractTree，並實現兩各尚未實作的抽象方法addNode與addTree。每個被加入的節點會被加入陣列裡，而在addNode裡父節點對子節點註冊ButtonEvent.RELEASE事件，addTree方法裡父節點對子節點樹註冊TreeEvent.TREE_OPEN事件。目的在於當某個節點被click後，通知父節點樹必須將其他同一階層的節點樹關閉。 - asdemo.ui.tree.AbstractTree import asdemo.ui.tree.ITree; import asdemo.ui.tree.INode; import asdemo.events.Event; import asdemo.utils.Delegate; import asdemo.ui.DispatcherMC; import asdemo.events.TreeEvent; class asdemo.ui.tree.AbstractTree extends DispatcherMC implements ITree { private var intervalX:Number=60; private var intervalY:Number=20; private var IS_OPEN:Boolean=false; private var list:Array; public function AbstractTree() { list=new Array(); _visible=false; } public function open() : Void { if(!isOpened()) { IS_OPEN=true; var num:Number=list.length; for(var i:Number=0;i<num;i++) { var n:INode=INode(list[i]); n.show(); } } dispatchEvent(new TreeEvent(TreeEvent.TREE_OPEN,this)); } public function close() : Void { if(isOpened()) { IS_OPEN=false; var num:Number=list.length; for(var i:Number=0;i<num;i++) { var n:INode=INode(list[i]); n.hide(); } } } public function isOpened() : Boolean { return IS_OPEN; } public function addNode() : INode { throw new Error(":::Abstract Method:::"); return null; } public function addTree() : ITree { throw new Error(":::Abstract Method:::"); return null; } public function getNodeAt(i:Number):INode { return INode(list[i]); } public function show() : Void { _visible=true; } public function hide() : Void { close(); _visible=false; } public function setText(str : String) : Void { } public function removeNode(n : INode) : Void { var num:Number=list.length; for(var i:Number=0;i<num;i++) { if(n==list[i]) { list.splice(i,1); MovieClip(n).removeMovieClip(); adjustPosition(i); return; } } } private function adjustPosition(index:Number):Void { var num:Number=list.length; for(var i:Number=index;i<num;i++) { var n:MovieClip=MovieClip(list[i]); n._y=i*intervalY; } } private function setNodePosition(mc : MovieClip) : Void { var tx:Number=0; var ty:Number=0; mc._x=intervalX; mc._y=(list.length-1)*intervalY; } private function childTreeCloseHandler(e:Event) : Void { var num:Number=list.length; for(var i:Number=0;i<num;i++) { if(list[i] instanceof ITree) { if(list[i]!=e.target)ITree(list[i]).close(); } } } } - asdemo.ui.tree.DemoTree import asdemo.ui.tree.TextNode; import asdemo.ui.tree.ITree; import asdemo.ui.tree.AbstractTree; import asdemo.events.ButtonEvent; import asdemo.utils.Delegate; import asdemo.ui.tree.INode; import asdemo.events.TreeEvent; class asdemo.ui.tree.DemoTree extends AbstractTree { private var node:TextNode; public function DemoTree() { super(); node=TextNode(attachMovie("node","mainnode",getNextHighestDepth())); node.show(); node.setText("---"); node.addEventListener(ButtonEvent.RELEASE,Delegate.create(this,nodeClick)); } //@override public function addNode():INode { var d:Number=getNextHighestDepth(); var n:TextNode=TextNode(attachMovie("node","node"+d,d)); n.addEventListener(ButtonEvent.RELEASE,Delegate.create(this,childTreeCloseHandler)); list.push(n); setNodePosition(MovieClip(n)); return n; } //@override public function addTree():ITree { var d:Number=getNextHighestDepth(); var t:ITree=ITree(attachMovie("tree","tree"+d,d)); list.push(t); t.addEventListener(TreeEvent.TREE_OPEN,Delegate.create(this,childTreeCloseHandler)); setNodePosition(MovieClip(t)); return t; } //@override public function setText(str:String):Void { node.setText(str); } // private function nodeClick(e:ButtonEvent) : Void { if(isOpened()) { close(); }else { open(); } } } 想實作關於類似樹狀選單可以研究 composite pattern模式。