Flex Programming & Design

( Matched skill : Beginner )

 

 [ Hi, I have moved to http://flexblog.teerasej.com ]

 

สวัสดีครับ ไม่ได้ทักทายกันมานาน กระผมก็เพิ่งได้ลดภาระงานหลักลงมาบ้าง เลยทำให้มีเวลาศึกษา และเรียนรู้ Flex เพิ่มเติม จนตอนนี้ผมกำลังทำ ส่วน User Interface ให้กับกลุ่มโปรเจคจบผมอยู่ ซึ่งทำให้เริ่มเข้าใจลึกซึ้งทีเดียว

 

What is MXML?

 

มันก็คือ mark up langauge ที่ใช้ในการสร้าง และวาง layout ของ user interface ครับ mark up นี้ถูกเปิดเผยครั้งแรกโดย macromedia ก่อนที่จะถูก Adobe เข้าควบรวมกิจการในสิ้นปี 2005 ครับ

 

MXML มีหน้าที่ในการควบรวม ActionScript 3.0 ตัวใหม่ ในการพัฒนา Rich Internet Application และรวมเข้ากับ Flex ในการพัฒนาเต็มรูปแบบนี่เอง

โดยหน้าที่หลักของมันคือการ ใช้วาง และกำหนด properties ของ Flex component นั่นเอง

 

MXML or XML

 

สองตัวนี้ต่างกันยังไง? หากจะให้ตอบก็จะไม่ต่างกันมากนัก คนที่คุ้นเคยกับ XML มาแล้ว จะเรียนรู้ MXML ได้อย่างง่ายดาย

 

What should I know before start?

 

ก่อนที่จะเริ่มศึกษาบทเรียนนี้นะครับ ผมจะสรุปว่าคุณพอมีความรู้เรื่อง concept ของ XML มาแล้วระดับหนึ่ง หากคุณไม่ค่อยชัวร์ ผมจะแนะนำ


 

Begin, Basic MXML

 

 

 

 

 

 

 

 

 

จากโค้ดด้านบนนะครับ เราจะสังเกตเห็น xml declaration tag และ application tag เป็น tag ที่อยู่นอกสุด

 

1. Xml declaration tag

เป็นส่วนที่เราสามารถระบุว่า mxml ของเราจะ encode ในรหัสอะไรครับ สามารถกำหนดได้โดยกำหนด รหัสการ encode ให้กับ attribute "encoding" ครับ

 

2. Application tag

   1. xmls:mx เป็นการเรียกใช้ core library ของ flex ครับ โดยเราจะใช้ Alias ว่า "mx" ในการเรียกใช้ component ต่างๆ มาแสดงบน application ของเรา
   2. layout เป็น attribute ที่ใช้กำหนด layout ให้กับ application ครับ จาก code จะเป็น "absolute" คือวาง fixed ตำแหน่งครับ ไม่ว่าจะขยาย browser หรือหด มันจะอยู่ที่เดิมไม่ยืดหยุ่น

เป็น tag ที่ทำหน้าที่แทน application flex ตัวที่เราสร้างเลยทีเดียว โดยถือว่าเป็น tag นอกสุด (root node) ที่แทนขอบเขตการทำงานของ ทุก component ใน application เลยก็ว่าได้ โดยหน้าที่หลักของมันคือ เป็น container ให้กับ child component ที่อยู่ในตัว container เอง เพื่อให้การ

อ้างอิงตำแหน่ง component จะอ้างอิงจาก application tag นี่แหละครับ

( ดูมากกว่าใน Custom Component:Basic )

 

เรามาดูกันดีกว่าครับว่า attribute 2 ตัวของ application tag ที่เราเห็นอยู่นี้มีอะไรกันบ้าง

 

 

จากนั้น เราจะเห็น component สองตัว คือ Button กับ TextInput วางหรา อยู่ใน Application Tag ( สังเกต ) โดยมีการกำหนด attribute ตำแหน่งของ component ( x และ y ) และ id เพื่อใช้ในการอ้างถึงตัวมันเองต่อไป ( ในขั้น Advanced ) สุดท้ายคือ การ set attribute "label" ให้กับปุ่มครับ

 

หลังจากนั้น พอเรา compile แล้ว เรียกดู ไฟล์ flash ที่เรียบร้อยแล้ว เราจะเห็นดังภาพด้านล่างนี้ แหละครับ

 



 

เห็นไหมครับ ไม่ยากเลยถ้าเราใช้เวลาทำความเข้าใจเล็กน้อย หากเข้าใจ concept แล้ว ครั้งต่อไปเราจะมา binding data กัน ...ดีไหมเอ่ย?

edit @ 16 Oct 2008 10:46:00 by หมาเขียว