หลังจากเขียน FeedReader แล้วพบความพิเศษของมันอย่างนึงใน Tree component คือจะทำให้มันยากก็ยากได้ หรือจะทำให้มันใช้ง่ายก็ง่ายสุดๆ เหมือนกัน แต่ก่อนเวลาผมจะใช้ component นี้ข้อมูลที่จะใช้ก็จะทำเป็น xml ให้มีโครงสร้างตามที่ต้องการก่อน เช่น ถ้าข้อมูลมีลักษณะเป็น root -> directory -> file ก็จะสร้าง xml เป็น
<root> <directory name="directory1"> <file name="file1" /> <file name="file2" /> </directory> <directory name="directory2"> <file name="file3" /> </directory> </root>
ซึ่งมันลำบากสิ้นดี แต่หลังจากทำ FeedReader แล้วค้นพบอะไรบางอย่างนั่นคือ มันมี TreeDataDescriptor ด้วยที่ไว้อธิบายข้อมูลว่าจะให้แสดงเป็น Tree ได้ยังไงแล้วมันก็มีค่าพื้นฐานให้อยู่แล้วด้วยคือ ถ้า object ที่ใส่เข้ามาในตัวแปร dataProvider มี property ที่ชื่อว่า name แล้ว children มันจะเอา name มาแสดงส่วนอันไหนที่มี children ก็จะทำให้มีลูกสามารถขยายออกมาได้ เช่น
class Folder { public var name:String public var children:ArrayCollection pubilc function Folder(name:String):void { this.name = name } } class File { public var name:String public function File(name:String):void { this.name = name } } private var data:ArrayCollection = new ArrayCollection() var folder1:Folder = new Folder("folder1") folder1.children = new ArrayCollection([ new File("file1"), new File("file2"), new File("file3") ]) var folder2:Folder = new Folder("folder2") folder2.children = new ArrayCollection([ new File("file4"), new File("file5") ]) data.addItem(folder1) data.addItem(folder2) <mx:Tree dataProvider="{data}" />
แค่นี้ Tree ด้านบนก็จะมีข้อมูลเหมือนกับ xml ที่ใส่มาในตอนแรกเลย แต่ จริงๆแล้วมันสามารถทำได้มากกว่านั้นอีกคือสามารถใช้ Array ในการแสดงข้อมูลออกมาเป็น Tree ได้เหมือนกันเพียงกำหนดชื่อใน object ที่อยู่ใน array ให้เป็น name กับ children เหมือนกับที่ทำ object แยก
จริงๆ ใครอยากดูตัวอย่างละเอียดๆ ก็ลองเอาโค้ด FeedReader มาดูได้แหละ มีใช้อยู่ ^^! ยังเหลืออีกเรื่องที่เจอในงานนี้เหมือนกันคือ xml แต่ไว้เขียนแยกเป็นอีกหัวข้อนึงดีกว่า
เขียนเมื่อ: August 20th, 2008 | หมวด: ภาษาเครื่องกล | แถก: actionscript3,Flex,tree | อ้างอิง |




