14 กุมภาพันธ์ 2551

ใช้งาน XML - [2] XML กับ as3

ในคราวที่แล้วได้พูดถึง XML ว่ามีลักษณะและวิธีการใช้งานอย่างไร คราวนี้ลองมาดูใน as3 ว่ามีวิธีใช้งานและจัดการกับข้อมูล XML อย่างไรบ้าง

หากเปิดคู่มือการใช้งาน Flex จะพบข้อมูลเกี่่ยวกับ Class XML ดังนี้

Package Top Level
Class public final dynamic class XML
Inheritance 
XML → Object

จากข้อมูลข้างต้นจะพบว่า XML เป็น Class ที่อยู่ใน Package: Top Level หรือ global package คือสามารถเรียกใช้งานได้จากทุกส่วนของโปรแกรมโดยไม่จำเป็นต้องใช้คำสั่ง import แต่อย่างใด สำหรับการประกาศ Class จะระบุว่าเป็น final นั้นคือ ไม่สามารถสืบทอด (inheritance) ได้ นอกจากนี้ยังสามารถเพิ่ม properties ต่าง เข้าไปใน XML Object แบบ dynamic ได้

การสร้างข้อมูล XML

ในการประกาศตัวแปรสำหรับ XML ก็ไม่ต่างจาก object อื่น ดังนี้

var yourVar:XML;

วิธีการสร้างข้อมูล XML นั้นมี 2 วิธีที่นิยมใช้ วิธีแรกคือ ถ้า XML ที่มีเป็น Text สามารถสร้างผ่าน XML () function รายละเอียดของตัวแปรและรูปแบบเป็นดังนี้

public function XML(expression:Object):XML

สำหรับ expression ใช้ String ที่เป็นข้อมูล XML ที่เราต้องการสร้่าง

var yourVar:XML = XML("<a><B>b1</B><B>b2</B></a>");

นอกจากผ่าน XML() แล้ว ยังสามารถใส่ข้อมูล XML ลงใน source code ได้โดยตรง ตัวอย่างเช่น

var youVar:XML =
    <a>
       <B>b1</B>
       <B>b2</B>
    </a>


ที่ทำเช่นนี้ได้เนื่องจาก as3 นั้นรองรับการจัดการ XML ได้ในตัวสคริปได้โดยตรง รายละเอียดระบุไว้ใน ECMAScript for XML (E4X) ดังนั้นด้วยวิธีนี้จึงเป็นการสะดวกอย่างมากในการใช้ XML ในการประมวลผลข้อมูลต่าง ในโปรแกรม ตัวอย่างเช่น สร้าง XML จากข้อมูลในตัวแปรในโปรแกรมที่มีอยู่

var yourText1:String = "b1";
var yourText2:String = "b2";
var youVar:XML =
    <a>
       <B>{yourText1}</B>
       <B>{yourText2}</B>
    </a>


ผลที่ได้ไม่ต่างจากตัวอย่างที่ผ่านมา ลองคิดดูว่าเมื่อก่อนต้องสร้าง XML ผ่าน Text เท่านั้น จะยุ่งยากขึ้นแค่ไหน

การใช้งาน XML

เมื่อสร้างข้อมูล XML เพื่อใช้งานในโปรแกรมแล้ว ขั้นตอนต่อไปคือ การอ่านและเขียนข้อมูลที่อยู่ภายในแต่ละ node ลองดูข้อมูล XML ต่อไปนี้

var order1:XML =
    <order no="35">
        <book ISBN="0942407296">
            <title>Baking Extravagant Pastries with Kumquats</title>
            <author>
                <lastName>Contino</lastName>
                <firstName>Chuck</firstName>
            </author>
            <pageCount>238</pageCount>
        </book>
        <book ISBN="0865436401">
            <title>Emu Care and Breeding</title>
            <editor>
                <lastName>Case</lastName>
                <firstName>Justin</firstName>
            </editor>
            <pageCount>115</pageCount>
        </book>
    </order>


จากส่วนของโปรแกรมประกาศตัวแปร order1 เป็น XML เพื่อเก็บข้อมูลการสั่งหนังสือ โครงสร้างของข้อมูลจะประกอบด้วย root node คือแท็ก <order> ส่วนแท็ก <book> เป็น node ที่อยู่ภายในเพื่อเก็บข้อมูลหนังสือที่สั่ง คราวนี้ลองมาดูวิธีการอ่านข้อมูลจาก XML กัน หลักการจะคล้ายกับการใช้งาน Object อื่น ทั่วไป

การอ่านและอ้างถึงข้อมูลใน XML

  • ต้องการเข้าถึง root node หรือแท็ก <order> ให้อ้างจากชื่อตัวแปร order1 เลย
  • การเข้าถึง child node ให้ใช้เครื่องหมายจุด . คั่นแต่ละ node เช่น order1.book[0] จะได้ชี้ไปที่ข้อมูลหนังสืออันแรก ในกรณีที่ <book> มีเพียง node เดียว สามารถเขียนเป็น order1.book ไ้ด้เลย
  • การเข้าถึง child node แบบไม่สนใจโครงสร้าง ให้ใช้เครื่องหมายจุด 2 จุด .. เช่น order1..title ผลที่ได้คือ <title> จำนวน 2 node ทั้งหมดที่อยู่ใน <order>
  • child nodes ทั้งหมด สามารถใช้ .* เช่น order1.* จะได้ <book> ทั้ง 2 node ( order1.* == order1.children() )
  • การอ้างถึงแอตตริบิวต์ ใช้เครื่องหมาย @ เช่น order1.book[0].@ISBN จะได้ค่า 0942407296 ถ้าต้องการค่าแอตตริบิวต์จาก root node เช่น order1.@no จะได้ค่า 35
  • การอ่านค่า Text ในแท็ก สามารถระบุแท็กที่ต้องการได้เลย เช่น order1.book[1].title[0] หรือ order1.book[1].title จะได้ค่า Emu Care and Breeding

การแก้ไขหรือกำหนดค่าใน XML

การกำหนดค่าให้กับ XML ในแต่ละ node นั้น สามารถทำได้ไม่ต่างจากข้อมูลประเภทอื่น เลย
  • ใช้เครื่องหมาย = ในการกำหนดค่าใหม่ เช่น ต้องการแก้ไข ISBN ของหนังสือเล่มแรก order1.book[0].@ISBN = "0123456789"
  • สามารถเพิ่ม node ใหม่เข้าไปในข้อมูล เช่น ต้องการใส่ราคาเพิ่มเข้าไปในหนังสือ
    order1.book[0].price = "$129.99";
    order1.book[1].price = "$89.99";

    ผลที่ได้หลังจากเพิ่ม node ข้อมูล XML จะมีข้อมูลดังนี้

        <order no="35">
            <book ISBN="0942407296">
                <title>...
                <pageCount>238</pageCount>
                <price>$129.99</price>
            </book>
            <book ISBN="0865436401">
                <title>...
                <pageCount>115</pageCount>
                <price>$89.99</price>
            </book>
        </order>

  • สามารถเพิ่มแอตตริบิวต์ใหม่ เช่น ต้องการเพิ่ม status ให้กับ <order>
    order1.@status = "pending";
    ผลที่ได้หลังจากเพิ่ม node ข้อมูล XML จะมีข้อมูลดังนี้

        <order no="35" status="pending">
            <book ISBN="0942407296">
                <title>...

  • สามารถนำเอาข้อมูล XML อื่น มาเพิ่มต่อกันได้ด้วยเครื่องหมาย += เช่น
    order1.book[0].* += <quantity unit="piece">3</quantity>
    เป็นการเพิ่มข้อมูล XML ต่อท้าย node สุดท้ายใน child node ของ book[0] ผลที่ได้หลังจากเพิ่มข้อมูลต่อใน XML

        <order no="35">
            <book ISBN="0942407296">
                <title>...
                <pageCount>238</pageCount>
                <quantity unit="piece">3</quantity>
            </book>
            <book ISBN="0865436401">

    หากต้องการเพิ่มข้อมูลหนังสือเข้าไป โดยให้ต่อท้าย book[0]
    order1.book[0] += <book ISBN="0123456789">
                <title>Flex for Dummy</title>
                <editor>
                    <lastName>Good</lastName>
                    <firstName>Guy</firstName>
                </editor>
                <pageCount>230</pageCount>
            </book>
    ผลที่ได้คือ <book
    ISBN="0123456789"> ที่เพิ่มเข้าไปต่อไปอยู่ระหว่าง <book ISBN="0942407296"> และ <book ISBN="0865436401">

การลบข้อมูลใน XML

หากต้องการลบ node หรือ แอตตริบิวต์ ใน XML สามารถใช้คำสั่ง delete เหมือนกับการลบ properties ใน Object ทั่วไป เช่น หากต้องการลบ @ISBN ในหนังสือเล่มแรกออกไป

delete order1.book[0].@ISBN;

ผลที่ได้หลังจากลบ


    <order no="35">
        <book>
            <title>...

หากต้องการลบหนังสือ <book> เล่มแรกออกไป

delete order1.book[0];

ผลที่ได้หลังจากลบ

    <order no="35">
        <book ISBN="0865436401">
            <title>Emu Care and Breeding</title>
            <editor>
                <lastName>Case</lastName>
                <firstName>Justin</firstName>
            </editor>
            <pageCount>115</pageCount>
        </book>
    </order>


การใช้ for..in และ for each..in ท่องไปใน XML (Traversing XML)

สำหรับการอ่านข้อมูลใน XML โดยค่อย ไล่ไปที่ละ child node นั้น สามารถใช้คำสั่ง for...in และ each..in

for..in

สำหรับคำสั่ง for..in จะดึงชื่อ (property name) ที่จะใช้อ้างถึง node/Object นั้น เช่น

for (var pname:String in order1.book)
{
    trace("name:", pname);
    trace("ISBN: ", order1.book[pname].@ISBN);
}


ผลที่ได้จากการทำงาน...

name: 0
ISBN: 0942407296
name: 1
ISBN: 0123456789


for..each

สำหรับคำสั่ง for..each จะใช้สำหรับดึงค่าของ node/Object นั้น เช่น

for each(var node:XML in order1.book)
{
    trace("ISBN: ", node.@ISBN);
    trace("Title: ", node.title);
}


ผลที่ได้จากการทำงาน...

ISBN: 0942407296
Title: Baking Extravagant Pastries with Kumquats
ISBN: 0865436401
Title: Emu Care and Breeding


ส่งท้าย

รูปแบบที่แสดงให้ดูในครั้งนี้ เป็นการนำเอาความสามารถของ ECMAScript for XML (E4X) มาใช้งาน ซึ่งทำให้การใช้งาน XML นั้นง่ายขึ้นมาก เพราะสามารถอ้างถึงข้อมูลในแต่ละ node ของ XML ได้โดยตรง รวมถึงแก้ไข เพิ่ม ลบ XML โดยไม่จำเป็นต้องผ่าน method เช่น appendChild(), insertBefore() หรือ removeNode() ลดขั้นตอนและทำให้เข้าใจและแก้ไขโปรแกรมได้ง่ายขึ้นมาก

จากวิธีการใช้งานที่ได้กล่าวมาทั้งหมด เป็นพวกส่วนหนึ่งเท่านั้น หากใครต้องการใช้ method หรือ properties ของ XML ใน as2 ก็ยังสามารถใช้งานได้โดยจะอยู่ใน Package flash.xml สำหรับรายละเอียดและวิธีการใช้งานเพิ่มเติม สามารถศึกษาได้จาก Flex 2 Developer's Guide ได้

สำหรับคราวหน้า จะพูดถึงการใช้งาน XML ในรูปแบบ Document fragment รวมถึงการจัดการแบบ collections ที่จะทำให้สามารถนำเอา XML มาใช้ประยุกต์งานได้ง่ายขึ้น หากมีข้อสงสัยหรืออยาก comment อย่าลืม reply แนะนำติชมมาได้ครับ

เกี่ยวกับเจ้าของบล๊อก

รูปภาพของฉัน

เป็นโปรแกรมเมอร์ที่ฝันว่าจะได้นอนเกาพุงไปวัน ๆ จนพุงลดกลายเป็นเอว ได้เป็นบุคคลที่มีความสุขที่สุดในโลกจนคนอื่น ๆ อิจฉา