เขียน UI อย่างง่ายๆ ด้วย XUL
XUL คืออะไร
XUL อ่านว่า ซูล เป็น User Interface Language ที่พัฒนาโดย Mozilla หรือการพูดให้ง่ายๆ ก็คือ XUL เป็นเครื่องมือในการสร้าง UI ด้วยการใช้ XML นั่นเอง
ถ้าหากใครได้เคยลองเขียนโปรแกรมแล้วมีการสร้าง UI ด้วยละก็ จะพบว่าไม่ง่ายนักที่เราจะเขียน UI ขึ้นมาใช้ในโปรแกรมหนึ่งๆ การวางโครงสร้างของ UI มักจะซับซ้อน และยุ่งยากมากขึ้น เมื่อโปรแกรมมีคุณสมบัติเพิ่มขึ้น
ตัวอย่าง UI ที่เขียนด้วยภาษา Java
ยกตัวอย่างในภาษา Java หาเราจะสร้าง UI เล็กๆ ที่ใช้แทนเครื่องคิดเลขดังรูปข้างล่างนี้
เราจะต้องเขียน Code,
TextField n1 = new TextField();
TextField n2 = new TextField();
Lable plus = new Lable("+");
Button eq = new Button("=");
TextField result = new TextField();
//สร้าง Panel เพื่อรองรับ Component ทั้งหมด
Panel p = new Panel();
p.add(n1);
p.add(plus);
p.add(n2);
p.add(eq);
p.add(result);
จะเห็นว่ามีขั้นตอนต่างๆ มากมายในการสร้าง UI ขึ้นมาตัวหนึ่ง และถ้ามีความจำเป็นต้องแก้ไข เพิ่ม หรือลบ Component บางตัวออกจาก UI ก็ทำได้ยาก โดยเฉพาะโปรแกรมขนาดใหญ่ที่มี UI หลากหลายแบบ
สร้าง UI ด้วย Thinlet (XUL for java)
Thinlet คือ Library ของภาษา Java ที่ใช้มารตฐาน XUL จากตัวอย่างข้างต้นเราสามารถแปลง โค้ดของ Java ให้อยู่ในรูปแบบของ XUL ได้ดังนี้
< panel gap="4" top="4" left="4">
< textfield name="number1" columns="4" />
< label text="+" />
< textfield name="number2" columns="4" />
< button text="=" action="calculate(number1.text, number2.text, result)" />
< textfield name="result" editable="false" />
จะเห็นได้ว่าเมื่อเรานำ XML มากำหนดโครงสร้างของ UI ด้วย Library ของ Thinlet โค้ดเราก็สามารถอ่านได้ง่ายขึ้นด้วยมุมมองของ XML
หากใครสนใจเกี่ยวกับการใช้งาน Thinlet สามารถศึกษาเพิ่มเติมได้ที่
http://thinlet.sourceforge.net/home.html
ในเว็บไซต์จะมีการใช้งานอย่างละเอียดของแต่ละ component ต่างๆ และตัวอย่าง Application อื่นที่นำ Thinlet ไปใช้งานร่วมด้วย
Related posts
Tags: java, programing, thai, xul
November 10th, 2008 at 1:38 pm
เท่าที่เห็น รู้สึกว่าหลายๆภาษาก็เริ่มมีแนวพีฒนา UI ไปในทาง XML ซะหลายอันครับ
ก็ดีครับ ผมว่า
เพราะแนวtagมันก็ใกล้ๆกัน จะได้ไม่้ต้องศึกษาอะไรใหม่ทั้งหมดในแต่ละภาษา
November 10th, 2008 at 5:18 pm
ใช่แล้วละครับ
ใหม่ล่าสุด ก็มี Android ก็อีกตัวนึงที่ใช้ XML ในการ define ตัว UI