มาเขียนแอพ Android ด้วยภาษา Xtend กันเถอะ

อารัมภบท

Xtend เป็นภาษาเขียนโปรแกรมน้องใหม่ที่พัฒนาขึ้นโดยทีม Xtext ภายใต้มูลนิธิ Eclipse (ที่เป็นผู้สร้าง Eclipse ที่เป็น Java IDE ยอดนิยม) โดยมีจุดประสงค์เพื่อที่จะพัฒนาการเขียนโปรแกรมบน Java Virtual Machine ให้ง่ายยิ่งขึ้น สามารถอ่านรายละเอียดเพิ่มเติมได้ที่เวปไซท์ของ Xtend ครับ

ในวันนี้เราจะนำเอา Xtend มาพัฒนาโปรแกรมบน Android กัน อย่างที่น่าจะรู้กันดี โปรแกรมบน Android นั้นจะทำงานอยู่บน Dalvik VM ซึ่งตัวโปรแกรมจะถูกแปลงมาจาก Java Byte Code อีกต่อหนึ่ง ดังนั้นตามหลักแล้วถ้าเรามีโปรแกรมที่คอมไพล์เป็น byte code ได้ก็น่าจะเอามาใช้งานบน Dalvik ได้ไม่ยากนัก

Xtend มีจุดเด่นอยู่ที่ตัวโค๊ดจะถูกแปลไปเป็น Java ก่อนที่จะถูกคอมไพล์เป็น byte code อีกทีด้วย Java Compiler ดังนั้นจึงแน่ใจว่าตัวโปรแกรมจะเข้ากันกับ JVM ได้แน่นอน และสำหรับ Android แล้ว ตัวคอมไพล์เลอร์จะไปเอา byte code มาแปลให้เป็น dalvik byte code อีกต่อนึง

สิ่งที่ควรมี

เนื่องจากว่าคราวนี้จะพูดเน้นไปทางการใช้ Xtend ใน Android มากกว่าจะสอนให้เขียนโปรแกรมที่รันบน Android ดังนั้นผู้อ่านควรมีความรู้ด้านการเขียนโปรแกรมบน Android มาระดับหนึ่ง ไม่เช่นนั้นอาจจะงงได้

และควรจะเข้าไปอ่าน Document ของ Xtend มาบ้าง ไม่เช่นนั้นอาจจะงงได้อีกเช่นกัน

นอกจากนี้ ผู้อ่านควรจะมี Eclipse  อยู่ในเครื่อง และติดตั้ง Android SDK ไว้แล้วด้วยครับ

ขั้นที่ 1 ติดตั้ง Xtend

ในขั้นนี้เราจะเริ่มจากติดตั้ง plugin ของ Xtend ลงไปใน Eclipse การติดตั้งนั้นทำได้ง่ายมากโดการค้นหาคำว่า Xtend ใน Eclipse Marketplace แล้วก็กด Install เท่านั้นเอง (ในรูปมีการติดตั้งเอาไว้แล้วครับ)


เมื่อติดตั้งเสร็จก็ต้องปิดแล้วเปิด Eclipse ขึ้นมาใหม่เพื่อให้ตัว plugin ทำงานครับ

ขั้นที่ 2 สร้างโปรเจคใหม่

ที่จริงเราสามารถแปลงจากโปรเจคที่มีอยู่แล้วก็ได้ แต่เพื่อความสะดวกคราวนี้จะใช้โปรเจคใหม่นะครับ

ก็สร้างเหมือนโปรเจคสำหรับ Android ปรกตินั่นล่ะครับ

ขั้นที่ 3 เริ่มเขียนโค๊ด

ในขั้นนี้เราจะเริ่มลง Code ที่เป็น Xtend จริง ๆ เสียที ใน Demo นี้ผมจะสร้างแค่ Fragment หนึ่งตัวบน Xtend แล้วเพิ่มเข้าใน Activity นะครับ ความจริงแล้วเราสามารถเขียนทั้ง App เป็น Xtend หมดเลยก็ได้ครับ

ผมจะเริ่มจากการเพิ่มคลาสที่เขียนด้วย Xtend ลงไปก่อนนะครับ ก็เลือก New -> Xtend Class ครับ

ขั้นต่อไปก็ใส่รายละเอียดใน Wizard ให้หมดแล้วกด Finish

เราก็จะได้คลาสที่เป็นภาษา Xtend ขึ้นมาหนึ่งตัว ด้วยความที่ Xtend นั้นมีความใกล้เคียงกับ Java มาก ดังนั้นเราก็จะรู้สึกคุ้น ๆ กับคลาสที่มันสร้างขึ้นมาให้

แต่ว่ามันมี Error อยู่ครับ เป็น Error ที่บอกว่าเรายังไม่ได้ import library ของ Xtend เข้ามา Eclipse จะแนะนำวิธีการแก้ไขให้ เราก็แค่ไปคลิกว่าเพิ่ม Xtend library ลงไปใน classpath

แล้วคราวนี้ Error ก็จะหายไปละ

คราวนี้ก็ได้เวลาเขียนโค๊ดแล้วครับ ผมจะสร้างคลาสที่ Derived มาจาก ListFragment ขึ้นมาสักตัว (ในรูปข้างบนผมใส่ Fragment ไว้ แต่ผมเปลี่ยนใจกระทันหัน) แล้วใส่เอาไว้ใน MainActivity เลย

ผมเริ่มจากวางโครงของตัวคลาสโดย override function onActivityCreated กับ onListItemClick ขึ้นมา

บน Xtend นั้นจะใช้ keyword override เป็นตัวบอกว่าเป็นเมธอดที่ override เมธอดใน super class ครับ ข้อที่สำคัญอีกอย่างคือการประกาศเมธอดนั้นไม่จำเป็นต้องใส่ return type ข้างหน้า ตัว compiler จะหาเองว่าฟังก์ชั่นนั้นคืนค่าอะไร (ดูจาก return เป็นหลัก) แต่ถ้ากลัวว่ามันจะหามาผิดเราก็ระบุเองได้เหมือนกัน

ผมจะเริ่มจาก onActivityCreated() ก่อนนะครับ

คงมีคนสงสัยว่า เอ๊ะ ไอ้คลาสนี้มันไม่มีตัวแปรชื่อ listAdapter หรือ activity นี่นา … ครับ นี่คือฟีเจอร์หนึ่งของ Xtend ก็คือ Implicit Property ก็คือ เมธอดที่เป็น getter อย่าง getXXX สามารถถูกเรียกโดยการใช้ การอ้างอิงถึงตัวแปร XXX ได้เลย และเมธอดที่เป็น setter นั้นก็สามารถถูก assign ด้วย operator = ได้เลยเช่นกัน

ดังนั้น ตรงบรรทัดที่ว่า listAdapter = new ArrayListAdapter() เนี่ย จริง ๆ ก็คือการเรียก setListAdapter(new ArrayListAdapter()) นั่นเอง แต่เขียนแบบนี้อ่านง่ายกว่าเยอะครับ

ส่วนตรงที่อ้างอิงถึงตัว resource นั้นเราจะเห็นทั้งเครื่องหมาย :: กับ $ นั้น คือ ถ้าเป็นใน java เราจะใช้ . คั่นทั้งส่วนของ package name, inner class และ static member แต่บน Xtend นั้นจะใช้ $ คั่นเวลาอ้างถึง inner class และ :: สำหรับ package name กับ static member ตรงจุดนี้ผมว่าในอนาคตอาจจะมีการเปลี่ยนแปลงครับ

จากนั้นก็ onListItemClick()

อย่างแรกที่น่าจะเห็นคือ ไม่มี ; ในโค๊ด ครับบน Xtend นั้น ; เป็น optional ใส่ก็ได้ไม่ใส่ก็ได้ ไม่ผิดครับ

สำหรับ method นี้ จะเห็นว่า ตัวแปรค่าคงที่นั้นจะถูกประกาศด้วย keyword val (ส่วน ตัวแปรจะใช้ keyword var) ครับ

ส่วนตรงข้างหลัง val builder = new AlertDialog$Builder นั้นจะเห็นว่ามีเครื่องหมาย => อยู่ เรียกว่า with operator ครับ โดยใช้สำหรับเวลาที่เราต้องเรียกเมธอดของตัวแปรติด ๆ กันหลาย ๆ ครั้ง พอใช้ => แล้วเราสามารถละชื่อตัวแปรตัวนั้นได้ ทำให้ลดความสับสนเวลาอ่านโค๊ดได้มากทีเดียว (ลองนึกภาพเวลาที่เรียกเมธอดบนตัวแปรตัวเดียวกันติด ๆ กันหลาย ๆ ครั้ง แล้วมีบรรทัดหนึ่งที่ไปเรียกตัวอื่นดูนะครับ มันจะงงสุด ๆ เลย)

ส่วนตรงบรรทัดที่เรียก setPositiveButton() นั้น ถ้านึกออก ฟังก์ชั่นนี้มีพารามิเตอร์สองตัวโดยตัวที่สองเป็น interface ที่มี 1 เมธอดที่ชื่อว่า OnClickListener ในกรณีนี้เราสามารถใช้ [ ] หรือ closure แล้วเขียนโค๊ดไปตามปรกติ ตัวคอมไพลเลอร์จะไปหาเองว่า closure นั้นมี type เป็นอะไรเองครับ เรียกได้ว่าสะดวกมากทีเดียว แต่ใช้กับ interface ที่มีหลายเมธอดไม่ได้นะ อันนี้ต้องหาวิธีเลี่ยงเองครับ)

อ้อ ฟังก์ชั่นที่ไม่รับพารามิเตอร์นั้น ไม่ต้องใส่วงเล็บก็ได้ครับ

ถ้ายังงง ๆ ว่าโปรแกรมตรงสองฟังก์ชั่นนี้ทำงานยังไง … ข้างล่างผมมีโค๊ดที่แปลเป็น Java ไว้ให้ ลองอ่านดูครับ

สุดท้ายก็แค่เอา Fragment นี้ไปใส่ใน Main Activity ซะ ผมไม่บอกนะว่าทำไง หาวิธีกันเอง

ขั้นที่ 4 รันโปรแกรม

พอเขียนโค๊ดเสร็จแล้ว ก่อนที่จะรัน … อย่าเพิ่งครับ รันไปตอนนี้ก็เจอ FC แน่ๆ ให้เข้าไปที่ Properties ของโปรเจค แล้วไปที่หมวด Build Path จากนั้นให้สั่ง Export Xtend Library ก่อน

ทีนี้ก็พร้อมที่จะรันแล้ว พอรันขึ้นมาเราก็จะเจอกับหน้าจอแบบนี้ แสดงว่าใช้งานได้แล้ว

แล้วพอจิ้มที่ลิสต์ไอเทมสักอัน ก็จะมี dialog ขึ้นมาครับ แบบนี้

สรุป

สำหรับการนำ Xtend ไปใช้กับโปรเจคที่เป็น Android นั้นเป็นเรื่องง่ายมาก ๆ ครับ โดยมีขั้นตอนดังต่อไปนี้

  1. ติดตั้ง Xtend Plugin ลงไปใน Eclipse 
  2. เพิ่ม Xtend Library ลงไปในโปรเจค
  3. Export Extend Library ในโปรเจค

แค่นี้ ก็เริ่มเขียนโปรแกรม Android ด้วย Xtend ได้แล้วล่ะครับ

แถม

คิดว่าคงมีคนสงสัยว่าโค๊ดข้างบนแต่ละบรรทัดนั้นมีความหมายว่าอย่างไร ผมได้ลองแปลกลับไปเป็น Java ให้ดูเผื่อจะเข้าใจได้ง่ายยิ่งขึ้น โค๊ดนี้ไม่ใช่โค๊ดที่ได้จากการแปลของ Xtend Compiler แต่เป็นการแปลกลับด้วยมือครับผม

โค๊ดที่ได้จากการแปลจาก Xtend นั้นจะไม่สวยขนาดนี้ครับ (นี่สวยแล้วเหรอ ?) แต่ว่ามันก็ไม่ได้มีเอาไว้ให้เราอ่านอยู่แล้วดังนั้นก็คงไม่ต้องสนใจมาก เอาไว้ตอนที่โปรแกรมทำงานผิดพลาดแล้วค่อยไปอ่านดูละกันครับ

ปล. ที่ไม่ลงโค๊ดเป็นตัวหนังสือเพราะจงใจอยากให้อ่านแล้วไปเขียนเองครับ ถ้าก๊อปแปะแล้วมันจะจำไม่ได้น่ะ 😛

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.