DataProvider ใน Tree component

หลังจากเขียน FeedReader แล้วพบความพิเศษของมันอย่างนึงใน Tree component คือจะทำให้มันยากก็ยากได้ หรือจะทำให้มันใช้ง่ายก็ง่ายสุดๆ เหมือนกัน แต่ก่อนเวลาผมจะใช้ component นี้ข้อมูลที่จะใช้ก็จะทำเป็น xml ให้มีโครงสร้างตามที่ต้องการก่อน เช่น ถ้าข้อมูลมีลักษณะเป็น root -> directory -> file ก็จะสร้าง xml เป็น


  
    
    
  
  
    
  

ซึ่งมันลำบากสิ้นดี แต่หลังจากทำ 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)


แค่นี้ Tree ด้านบนก็จะมีข้อมูลเหมือนกับ xml ที่ใส่มาในตอนแรกเลย แต่ จริงๆแล้วมันสามารถทำได้มากกว่านั้นอีกคือสามารถใช้ Array ในการแสดงข้อมูลออกมาเป็น Tree ได้เหมือนกันเพียงกำหนดชื่อใน object ที่อยู่ใน array ให้เป็น name กับ children เหมือนกับที่ทำ object แยก
จริงๆ ใครอยากดูตัวอย่างละเอียดๆ ก็ลองเอาโค้ด FeedReader มาดูได้แหละ มีใช้อยู่ ^^! ยังเหลืออีกเรื่องที่เจอในงานนี้เหมือนกันคือ xml แต่ไว้เขียนแยกเป็นอีกหัวข้อนึงดีกว่า

About llun

Just a programmer

, ,