MXML และ mxmlc

เมื่อวานเว้นว่างหายไป แต่จริงๆ คือไม่รู้จะเขียนยังไงแหะๆ อีกอย่าง คิดออกแต่ปัญหามากมายโอ๊ย แย่จริง มาต่อกันเลยดีกว่า วันนี้เรื่อง MXML หละ แต่แบบสรุปสั้นๆ ขี้เกียจบรรยายยาวมากมาย(บอกแล้วว่าไม่เป็น ;p) ตามดูละกัน

MXML เป็นภาษาที่ adobe สร้างมาเพื่อใช้สำหรับสร้างหน้าตาของโปรแกรมที่สร้างด้วย Flex โดยมีโครงสร้างแบบเดียวกับภาษา XML (จริงๆ มันก็คือภาษา XML อะแหละ) ลองดูตัวอย่างจากด้านล่างละกัน


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

  <mx:Script source="Calculator.as" />

  <mx:Panel title="Calculator" width="100%" height="100%" >
    <mx:VBox width="100%" height="100%">
      <mx:TextInput id="calText" width="100%" editable="false"/>
      <mx:HBox width="100%" height="100%">
        <mx:Button label="Clr" width="51%" height="100%" click="clear()" />
        <mx:Button label="Bksp" width="25%" height="100%" click="bksp()"/>
        <mx:Button label="±" width="25%" height="100%" />
      </mx:HBox>
      <mx:HBox width="100%" height="100%">
        <mx:Button label="1" width="25%" height="100%" click="addValue(1)" />
        <mx:Button label="2" width="25%" height="100%" click="addValue(2)" />
        <mx:Button label="3" width="25%" height="100%" click="addValue(3)" />
        <mx:Button label="÷" width="25%" height="100%" click="addSign('÷')" />
      </mx:HBox>
      <mx:HBox width="100%" height="100%">
        <mx:Button label="4" width="25%" height="100%" click="addValue(4)" />
        <mx:Button label="5" width="25%" height="100%" click="addValue(5)" />
        <mx:Button label="6" width="25%" height="100%" click="addValue(6)" />
        <mx:Button label="×" width="25%" height="100%" click="addSign('×')" />
      </mx:HBox>
      <mx:HBox width="100%" height="100%">
        <mx:Button label="7" width="25%" height="100%" click="addValue(7)" />
        <mx:Button label="8" width="25%" height="100%" click="addValue(8)" />
        <mx:Button label="9" width="25%" height="100%" click="addValue(9)" />
        <mx:Button label="-" width="25%" height="100%" click="addSign('-')" />
      </mx:HBox>
      <mx:HBox width="100%" height="100%">
        <mx:Button label="0" width="25%" height="100%" click="addValue(0)" />
        <mx:Button label="." width="25%" height="100%" click="addDot()" />
        <mx:Button label="=" width="25%" height="100%" click="calculate()" />
        <mx:Button label="+" width="25%" height="100%" click="addSign('+')" />
      </mx:HBox>
    </mx:VBox>
  </mx:Panel>
</mx:Application>

จากด้านบนผมจะทำเครื่องคิดเลขขึ้นมา สำหรับ tag ที่อยู่นอกสุดคือ <mx:Application> จะมีได้อยู่อันเดียวเพื่อเป็นตัวบอกว่า โปรแกรมนี้เริ่มจากที่ไหน สำหรับ tag ล่างๆมาจะแบ่งเป็นสามประเภทหลักๆ คือ meta*, component และก็ data provider

meta* tag มีไว้สำหรับบอกว่า ui หน้านี้มีข้อมูลอะไรบ้าง และแต่ละส่วนจะทำงานอย่างไร tag พวกนี้ส่วนใหญ่แล้วเพื่อใช้ในการควบคุมต่างๆ หรือ ไว้เชื่อมกับหน้าอื่น เช่น
<mx:Script> ไว้สำหรับใส่สคริปส์ Actionscript เข้าไป เพื่อให้ ui ทำงานตามที่กำหนดเช่น บอกว่า ปุ่มนี้กดแล้วจะให้กล่องข้อความแสดงเป็นอะไร
<mx:Metadata> ส่วนนี้จะไว้สำหรับประกาศข้อมูลอะไรก็ตามที่อยู่เหนือ คลาส เพราะจริงๆ แล้ว mxml จะแปลงออกมาเป็น actionscript class นึงอะไรก็ตามที่อยู่ใต้ tag นี้ก็จะเหมือนอะไรก็ตามที่อยู่เหนือคลาสเหมือนกัน
*จริงๆ meta เป็นชื่อที่ผมตั้งเองนะ อย่าเอาไปอ้างอิงอะไร เพราะไม่รู้ว่าจะเรียกมันว่าอะไรดี

data provider กลุ่มนี้เป็นพวก ตัวแปรที่ไว้เก็บข้อมูลเป็นกลุ่มต่างๆ แต่ว่าเอามาเขียนในรูป xml เท่านั้นเอง ที่ใช้บ่อยสุดก็น่าจะเป็น array กับ array collection มั้ง
เช่น


<mx:Array>
  <mx:String>Hello<mx:String>
  <mx:String>World<mx:String>
</mx:Array>

กลุ่มที่สามคือพวก component ต่างๆ ทั้ง component ที่สร้างเองและที่มีมาอยู่แล้ว พวกนี้มีหลากหลายมากเลยขี้เกียจ เอามาเขียนไล่ให้ดู ที่เจอประจำก็น่าจะเป็นพวก <mx:Panel> <mx:Button>

หลังจากสร้างไฟล์ mxml ด้านบนเสร็จเวลาจะคอมไพล์แบบไม่มี IDE อะไรก็คล้ายๆ จาวาหรือซี คือใช้ mxmlc แล้วตามด้วยชื่อไฟล์ได้เลย โดยหากไฟล์มีการเชื่อมไปยัง ไฟล์อื่น หรือ component อื่นมันจะตามหาไปด้วย แต่หากอยู่ใน library ต้องมีการกำหนดไว้ใน option ตอนคอมไพล์ ลองมาดู option ของ mxmlc ก่อนดีกว่า


Adobe Flex Compiler (mxmlc)
Version 3.0.0 build 477
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.

-benchmark
-compiler.accessible
-compiler.actionscript-file-encoding <string>
-compiler.context-root <context-path>
-compiler.debug
-compiler.external-library-path [path-element] [...]
-compiler.fonts.advanced-anti-aliasing
-compiler.fonts.flash-type
-compiler.fonts.max-glyphs-per-face <string>
-compiler.include-libraries [library] [...]
-compiler.incremental
-compiler.library-path [path-element] [...]
-compiler.locale [locale-element] [...]
-compiler.mxml.compatibility-version <version>
-compiler.namespaces.namespace <uri> <manifest>
-compiler.optimize
-compiler.services <filename>
-compiler.show-actionscript-warnings
-compiler.show-binding-warnings
-compiler.show-shadowed-device-font-warnings
-compiler.show-unused-type-selector-warnings
-compiler.source-path [path-element] [...]
-compiler.strict
-compiler.theme [filename] [...]
-compiler.use-resource-bundle-metadata
-help [keyword] [...]
-include-resource-bundles [bundle] [...]
-licenses.license <product> <serial-number>
-load-config <filename>
-metadata.contributor <name>
-metadata.creator <name>
-metadata.date <text>
-metadata.description <text>
-metadata.language <code>
-metadata.localized-description <text> <lang>
-metadata.localized-title <title> <lang>
-metadata.publisher <name>
-metadata.title <text>
-output <filename>
-runtime-shared-libraries [url] [...]
-runtime-shared-library-path [path-element] [rsl-url] [policy-file-url] [rsl-url] [policy-file-url]
-static-link-runtime-shared-libraries
-target-player <version>
-use-network
-version
-warnings

โอ่ยเห็นแล้วเยอะแยะมากมาย บอกตามตรง ผมไม่เคยใช้เลย เคยแต่สั่งตรงๆ ฮะๆๆ หรือไม่ก็ใช้ตามที่ IDE ให้มา โดยหลังจาก compile แล้วก็จะได้ไฟล์ swf มาอย่าง mxml ด้านบนที่ผมเขียนหลังจาก compile แล้วก็จะได้โปรแกรมเล็กๆ เหมือนด้านล่างนี้

ตัวอย่างโปรแกรมด้านบนผมยังเขียนไม่เสร็จสมบูรณ์เท่าไหร่ ด้วยความเร่งรีบแบบว่าอยากเอามาเป็นตัวอย่าง เลยเขียนลวกๆ ภายในครึ่งชม ><” แต่ก็ใช้ได้ระดับหนึ่งหละครับ

เห้อหลังจากเขียนๆ มา ความขี้เกียจเยอะเหลือเกิน ฮะๆๆ เวลาเขียนอะไรพวกนี้ก็พอรู้ว่ามันต้องหาข้อมูลกันพอสมควร แต่ขี้เกียจอะทำไงได้ แต่เรื่องถัดไปจะเป็นพวก actionscript ล้วนๆ หละ คงสบายผมหน่อย ^^! เพราะผมไม่ถนัด mxml เอาเสียเลย แต่ก็คงไม่ได้เท่าหนังสือที่เป็นเล่มๆ ในต่างประเทศหรอกนะ ยังไงก็คงได้เป็นแค่ tutorial เล็กๆ น้อยๆ ยังไงใครเขียน flex เก่งๆ ก็แนะนำมาได้นะครับ ;p