Flex 101 ep-02

FLEX 101

ตอนที่ 2

MXML

By TOSAKUN Email : tosakun.meeting@gmail.com , Web : http://www.n3amedia.biz

MXML คื ออะไร ?

MXML = M + XML

M มาจาก Macromedia ช่ือบริ ษัทที่นำาเสนอภาษานี้
XML มาจาก Extensible Markup Language


ขยายความเร่ื อง XML

(1) XML ถือวาเป็ นภาษาหนึ่ ง
่
(2) XML ถูกสร้างขึ้นมาเพื่อใชในการส่อความหมายและโครงสร้าง
้ ื
(3) XML ตองสามารถทาความเขาใจได้ทังมนุ ษยและคอมพิวเตอร์
้ ำ ้ ้ ์
(4) XML สามารถถูกตอเติมและปรับปรุ งไดอยางไมสนสุด (Extensible)
่ ้ ่ ่ ้ิ
(5) ผูใชสามารถนิ ยามและกาหนดรู ปแบบการใชงาน XML ไดเอง
้ ้ ำ ้ ้
(6) XML ถูกใชงานอยางกวางขวาง เชน HTML, AJAX ,
้ ่ ้ ่
ระบบสงตอขอมูลผูป่วย, Catalog สนคา ฯล
่ ่ ้ ้ ิ ้
ฯลฯ



สร้าง XML แบบงาย ๆ กันอยางไร ?
่ ่

ประกอบจาก เกิดจาก
tag
tag Mark up
XML tag

XML เกิดจากการรวมตัวของ Tag หลาย ๆ Tag และ แตละ Tag เกิด
่
จากการ Mark up หรื อการลอม
้



สร้าง Tag กันอยางไร ?
่
(1) กาหนดขอความที่ตองการและควรเป็ นขอความที่มีความหมายในตัว
ำ ้ ้ ้
นิ ยมใชคานาม เชน การวิง, การสร้างบาน, แสงอาทิตย ์ เป็ นตน
้ ำ ่ ่ ้ ้
(2) “ลอม” คาที่ไดดวยเครื่ องหมาย “<” และ “>” เชน <แสงอาทิตย >,
้ ำ ้ ้ ่ ์
<book>, <human>, <record>,<grid> ฯล จะได้ tag ที่เรี ยกวา ่
“open tag”
(3) สร้าง “close tag” เหมือนกัน “open tag” เพียงเติมเครื่ องหมาย
“/” ไวหน้าขอความ เชน </book>,</แสงอาทิตย >,</human>,
้ ้ ่ ์
</record>,</grid> ฯล


่
(4) กาหนดขอความหรื อประโยคที่เพื่อให้เกิดความเขาใจใน Tag มากขึ้น
ำ ้ ้
แลวนำาไปวางระหวาง “open tag” และ “close tag” เชน
้ ่ ่
<แสงอาทิตย >แสงที่สองจากดวงอาทิตยมายังโลก</แสงอาทิตย >
์ ่ ์ ์
(5) เราสามารถสร้าง Tag ให้มีความซั บซ้อนขึ้นไดโดยการสร้าง Tag
้
ซอน Tag หรื อ Nested Tag ได้ เชน
้ ่
<book>
<title>Flex 101</title>
<author>TOSAKUN</author>
<publish_year>2012</publish_year>
</book>


่
(6) เราอาจใชการขยายความหมายของ Tag ดวย attribute ซ่ึงตอง
้ ้ ้
วางไวใน open tag เทานัน เชน
้ ่ ้ ่
<book type='นวนิ ยาย' publisher='สานักพิมพแสงแดด'>
ำ ์
<title>Flex 101</title>
<author>TOSAKUN</author>
<publish_year>2012</publish_year>
</book>



ขอกาหนดที่ตองทราบใน XML
้ ำ ้
(1) XML ตองขึ้นดวย <?xml version='1.0' ?> เสมอ เราเรี ยกวา “xml
้ ้ ่
declaration”
(2) XML ตองมี root tag เพียง 1 เดียวเทานัน
้ ่ ้
(3) “root tag” คือ tag แรกของ XML ที่ลอม tag หรื อขอความอื่นในเอกสาร
้ ้
ทังหมด ตัวอยาง การสร้าง XML เพื่อใชแทนรายชื่อหนังสือ
้ ่ ้
<?xml version='1.0' ?>
Declaration
<books>
<book title='marketing engineer'></book>
Root tag
<book title='foundation of finance'></book>
</books>


อะไรคือ Namespace ?

Namespace ใชใน XML ก็เพื่อกาหนดกลุมของ Tag และความเป็ น
้ ำ ่
อัตลักษณ์ของกลุม เปรี ยบไดกับการใชั นามสกุลของมนุ ษย ์
่ ้

ในโลกของอินเตอร์เน็ ตสงหนึ่ งที่จะซา้กันไมไดคือ Universal
ิ่ ำ ่ ้
Resource Indentifier (URI)1 เชน http://www.google.com
่
ดังนันใน XML จึงนิ ยมใช้ URI มาใชเขียน namespace เชนกัน
้ ้ ่

1: http://en.wikipedia.org/wiki/Uniform_resource_identifier


การกาหนด Namespace ?
ำ
(1) เราสามารถกาหนดช่ือ namespace อยางไรก็ได้ นิ ยมใชอักษรยอของ
ำ ่ ้ ่
สงที่ตองการกลาวถึง เชน mx มาจาก Macromedia XML, TK มาจาก
ิ่ ้ ่ ่
TOSAKUN เป็ นตน
้
(2) การกาหนด Namespace จะตัองกาหนดไวใน attribute ของ
ำ ำ ้
Root tag เทานัน โดยตองมี xmlns: นำาหน้าช่ือของ namespace เชน
่ ้ ้ ่
xmlns:tk, xmlns:mx เป็ นตน
้
(3) กาหนด URI ให้กับ namespace เชน
ำ ่
xmlns:mx=”http://www.adobe.com/2006/mx”


การกาหนด Namespace ?
ำ
(4) Tag ใดอยูในกลุมของ namespace ใดใหเขียนช่ือ namespace
่ ่ ้
ไวขางหน้าช่ือ Tag แลวคั่นดวยเครื่ องหมาย “:” เชน
้ ้ ้ ้ ่
<mx:Button>....</mx:Button>
<s:Button>...</s:Button>

ทังสอง Tag มีช่ือเหมือนกันแตมี namespace ตางกันแสดงวามาจาก
้ ่ ่ ่
กลุมที่ตางกันอาจมีการทางานที่ตางกันได้ เหมือนคนที่มีช่ือเหมือนกันแตมี
่ ่ ำ ่ ่
นามสกุลตางกัน
่


XML ใน FLEX

FLEX ใช้ XML ในสองรู ปแบบคือ
(1) Tag มาแทนชุดคาสังหรื อ Component เชน <Button>,
ำ ่ ่
<WebService>
(2) กาหนดคาตาง ๆ เพื่อการประมวลผลผาน attribute เชน
ำ ่ ่ ่ ่
<Button label='Hello world !'></Button>
(3) ตัวแปรสาหรับสงผานขอมูล ตามมาตรฐานของ ECMAScript
ำ ่ ่ ้
2

2) http://en.wikipedia.org/wiki/ECMAScript_for_XML


XML ใน FLEX

XML นอกจากการใชคาหนดความหมายแลวยังสามารถส่อถึงโครงสร้าง
้ ำ ้ ื
หรื อรู ปแบบของการแสดงผลไดดวย เชน
้ ้ ่
<Box width='100' height='200'>
<Label text=”Hello World”></Label>
<Button label=”Click Me”></Button>
</Box>

ส่อความไดวาโปรแกรมจะสร้าง Label ไวขางบน Button โดยทังคูตอง
ื ้ ่ ้ ้ ้ ่ ้
อยูภาย Box อันเดียวกัน ทาใหงายตอการจัดการ User Interface
่ ำ ้ ่ ่


XML ใน FLEX

อยางไรก็ตามในการสร้างโปรแกรมที่มีความซั บซอนลาพัง XML นัน
่ ้ ำ ้
ไมเพียงพอ ดังนันในการพัฒนางานจึงตองอาศั ย ActionScript
่ ้ ้
และกระบวนการทางานอื่นเขามาร่วมดวย เชน Object
ำ ้ ้ ่
Oriented Programing, Design Pattern เป็ นตน
้


XML ใน FLEX

<s:Application Flex root tag
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
….
</s:Application> Flex name
space

รู ปแบบของ MXML หรื อ XML ของ FLEX SDK รุ่ นปจจุบัน (4.6)
ั
ซ่ึง root tag ของโปรแกรม 1 โปรแกรมจะตองมีช่ือเป็ น Application
้


ตัวอย่าง XML ใน FLEX

<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:VBox>
<mx:Label text=”Hello World” />
<s:Button label =”Click Me” />
</mx:VBox>
</s:Application>

*** XML สาหรับ FLEX ตองบันทึกไวดวยไฟลท่ีมีนามสกุลเป็ น mxml เสมอ เชน
ำ ้ ้ ้ ์ ่
Simpleone.mxml เป็ นตน
้


ตัวอย่าง XML ใน FLEX

Compile เสร็จแลวเมื่อนำามาใชงานก็จะไดผลดังภาพ
้ ้ ้


เราได้ทราบอะไรบ้าง ?

(1) XML คืออะไร และการใชประโยชน์
้
(2) การสร้าง XML อยางงาย
่ ่
(3) การสร้าง XML สาหรับ FLEX หรื อ
ำ
MXML


แลกเปลี่ยนความคิด

http://www.facebook.com/groups/ria.group/

http://www.facebook.com/groups/ThaiADC/


Flex 101 ep-02

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Flex 101 ep-02