ตอนแรกกะว่าจะเขียนวันเดียวกับเรื่อง Tree แต่ด้วยความขี้เกียจบวกกับเมื่อวานกะทำงานหลายๆ อย่างให้เสร็จเลยไม่ได้เขียน ยกยอดมาเขียนวันนี้แทน เรื่องนี้เป็นเรื่องที่สองที่ได้จากการทำ FeedReader แล้วทำให้รู้ว่า Flex มันไม่สามารถหาวิธีทำได้จากคู่มือที่มีให้ในเว็บ Adobe ต้องใช้ความสามารถในการใส่ keyword ให้ google เข้าช่วยอย่างมาก

เรื่อง ของเรื่องก็คือ xml ที่ Google ส่งมาใน Google Reader มีการใช้ namespace อยู่สามตัวในการแบ่ง tag ต่างๆคราวนี้พอได้รับข้อมูลมาแล้วจะเอามาอ่านใส่ตัวแปรโดยไม่มีการกำหนด namespace ให้มันปรากฏว่า Flex มันก็จะอ่านข้อมูลตัวนั้นออกมาเป็นตัวแปรแบบปกติไม่ได้เช่น

<?xml version="1.0"?>
<feed xmlns:gr="http://www.google.com/schemas/reader/atom/" xmlns:media="http://search.yahoo.com/mrss/" xmlns="http://www.w3.org/2005/Atom">
<generator uri="http://www.google.com/reader">Google Reader</generator>
<id>tag:google.com,2005:reader/user/10757961596074723521/state/com.google/reading-list</id>
<title>แนท's reading list in Google Reader</title>
<gr:continuation>CLv69f7_nZUC</gr:continuation>
<link rel="self" href="http://www.google.com/reader/atom/"/>
  <author>
    <name>แนท</name>
  </author>
<updated>2008-08-21T08:07:03Z</updated>
<entry gr:crawl-timestamp-msec="1219306023740">
  <id gr:original-id="http://gizmodo.com/5039814/logitech-speed-force-wireless-is-first-racing-wheel-for-wii">tag:google.com,2005:reader/item/8c96bd9a8e5c1cb5</id>
  <category term="user/10757961596074723521/label/english" scheme="http://www.google.com/reader/" label="english"/>
  ....
  </id>
</entry>
</feed>

ขี้เกียจเอามาหมดยาว จะเห็นว่าแท๊กพิเศษอยู่เช่น gr:…. แต่อย่างไรก็ตามด้านบนมันก็ได้กำหนดไว้แล้วว่าอะไรคือ namespace default (xmlns ที่ไม่มี : บอกว่าใช้ namespace อะไรนำหน้านั่นแหละ) แต่ Flex มันดั้นไม่ฉลาดพอที่จะเลือกมาให้เอง สุดท้ายก็เลยต้องกำหนดให้มันหน่อยเป็น

default xml namespace = new Namespace('http://www.w3.org/2005/Atom')
//...flex code...
default xml namespace = null

โดยก่อนออกฟังก์ชั่นต้องเปลี่ยนกลับให้มันเป็น null ด้วยไม่งั้นอาจเจอ Error ที่คาดไม่ถึงได้ (จำไม่ได้แล้วว่า Error ไรขี้เกียจทำให้มันขึ้นมาซะด้วยสิ)
อืมหลังจากทำ FeedReader มาถึงตรงนี้ก็เริ่มคิดว่า ทำต่อไปเรื่อยๆ จะเจออะไรพิศดารอีกไหม(ซึ่งคาดว่าต้องเจออีกแน่นอน) อย่าง namespace ก็ไม่เคยคิดว่าจะต้องตั้งให้มันอย่างนี้ ตอนแรกนึกว่าจะใส่ให้กับตัวแปรที่เป็นตัวเก็บข้อมูล xml ธรรมดาๆ ซะอีก ไม่เป็นไร เดี๊ยวลองเล่นกับ sqlite ก็ได้รู้กัน

หลังจากเขียน 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 แต่ไว้เขียนแยกเป็นอีกหัวข้อนึงดีกว่า

ไม่ได้เขียนบล๊อกมาประมาณอาทิตย์ เพราะอาทิตย์ที่แล้วนอกจากงานประจำแล้ว ได้แอบไปเขียนอะไรเล็กๆ เล่นอีกอย่างหนึ่งด้วยเผื่อเอาไปคุยในงาน barcamp เห็นตอนนี้กำลังมีกิจกรรมให้อัดวิดีโอบอกว่าจะไปคุยอะไรใน barcamp ซะด้วย แต่ขี้เกียจอัดวิดีโออะ เอาเป็นภาพไปละกัน

ตอนนี้ก็ยังไม่ค่อยสมบูรณ์เท่าไหร่ แต่ก็พอดูได้หละนะ คาดว่าจะเข็นทันให้นิ่งพอก่อน barcamp ใครอยากลองไปเล่นดูก็ดาวโหลดตรงนี้เลย: FeedReader.air
สำหรับโค้ดทั้งหลายใครอยากเอาไปทำต่อก็เอาออกได้จากที่ http://project.llun.info/repository ใช้ svn ดึงออกมาได้เลยครับ
ปอลอ: ใครใช้ windows ทดลองให้ผมด้วยนะ ผมลองบนเครื่องที่ใช้อยู่แล้วมันไม่ได้แฮะ ลองสำรวจดูเป็นที่ AIR มันไม่แก้ cookie ให้ใหม่อ่ะ ไม่เข้าใจเหมือนกันว่าทำไม เห้อ เดี๊ยวคงได้ลง AIR บน windows ใหม่