Hello World! - Your First Application in Grails and Flex

ในบันทึกนี้จะแสดงถึงการสร้าง Flex Application โดยมี Grails ทำงานอยู่ข้างหลัง อย่างง่ายๆ และตามธรรมเนียม เราควรเริ่มจาก Hello World ก่อน

Installation
เริ่มจากติดตั้ง JDK และ Grails หลังจากติดตั้ง JDK และติดตั้งGrails เรียบร้อยแล้ว ในเบื้องต้นเราไม่จำเป็นต้องติดตั้ง database server หรือ configure Apache เพิ่มอีก เนื่องจาก Grails จะ embed HSQL (DBMS) และ Jetty (application server) มาให้เราพร้อมใช้งานได้เลยทันที จากนั้นก็เริ่มสร้าง Grails application กันได้เลย!

อย่างพึ่งแปลกใจไปว่าทำไม ถึงยังไม่ติดตั้ง Flex สักพักเราจะติดตั้งมันผ่าน plugin ของ Grails


Create Your Application
เริ่มจากสร้าง application ด้วย Grails โดยสั่งงานผ่าน terminal (หรือจะใช้ IDE อื่นๆแล้วแต่ถนัด)

$> grails create-app helloworld

หลังจากคำสั่ง create-app ไปแล้ว เราจะได้โฟลเดอร์ชื่อ helloworld และข้างในบรรจุโครงสร้างของ Grails application ไว้

หลังจากสร้าง application เรียบร้อยแล้ว ให้เข้าไปที่โฟลเดอร์ helloworld โดยใช้คำสั่ง

$> cd helloworld

จากนั้นเราจะใช้คำสั่ง grails ต่างๆในขณะที่เรายังอยู่ใน directory นี้


Install Flex
ติดตั้ง flex ง่ายๆด้วยการใช้คำสั่งสำหรับติดตั้ง plugin

$> grails install-plugin flex

รอสักพัก (ใหญ่ๆ) Grails จะติดตั้ง flex plugin จนเสร็จ


Running Your Web Application
ก่อนใช้งาน ทดลองรัน application ที่เราสร้างขึ้นมาเพื่อตรวจสอบการทำงานเบื้องต้นก่อน ว่ามันสามารถรันได้จริงๆ ไม่มีปัญหา

$> grails run-app

คำสั่งนี้จะเป็นการสั่งให้ Jetty ทำงานและใช้งาน port 8080
ในขั้นตอนนี้หากมีโปรแกรมอื่นๆในเครื่องที่กำลังใช้งาน port 8080 อยู่ จะไม่สามารถ satrt Jetty ได้สำเร็จ ให้แก้ปัญหาโดยการสั่ง grails run-app -Dserver.port=9090 เพื่อนให้ Jetty ใช้ port 9090 แทน (หมายเลข port เปลี่ยนแปลงได้ แล้วแต่เราจะใช้ port ไหน)

จากนั้นเปิด web browser แล้ว browse ไปที่ http://localhost:8080/helloworld เราควรเห็นหน้าต่างในลักษณะนี้

Just Add Flex
มาเริ่มสร้าง Hello World ด้วย Flex กันเลย โดยเปิด Text Editor ขึ้นมา และเขียน code แบบนี้ลงไป

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Label text="hello world"/>      

</mx:Application>

จากนั้นบันทึกไฟล์นี้ไว้ในโฟล์เดอร์ชื่อ web-app/ ดังนั้น path ของไฟล์นี้ควรอยู่ที่ helloworld/web-app/hello.mxml

browse ไปที่ http://localhost:8080/helloworld/hello.mxml และอาจต้องใช้เวลาสักพัก เราจะเห็นหน้าจอแบบนี้

จากนั้นลองใส่ event เล็กๆลงไป โดยการใส่ปุ่มที่สามารถถูกกดได้ และเมื่อกดแล้วจะมีข้อความ hello world ออกมาด้านล่าง โดยการเพิ่ม code ลงไปแบบนี้

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Button label="click me" click="mylabel.visible=true"/>

    <mx:Label id="mylabel" text="hello world" visible="false"/>

</mx:Application>

จาก code เป็นการเพิ่มปุ่มลงไป และกำหนดให้ label ที่เราสร้างไว้ตอนแรกไม่ให้แสดงในตอนแรกที่เปิดหน้านี้

ทดสอบโดยการ browse ไปที่ http://localhost:8080/helloworld/hello.mxml อีกครั้ง จะเห็นหน้าเว็บมีปุ่ม 1 ปุ่ม และเมื่อกดปุ่มแล้วจะมีคำว่า hello world แสดงออกมา แบบนี้

มาถึงตอนนี้จะพบว่าไฟล์เมื่อ hello.mxml ที่เราสร้างไว้ถูกเรียกใช้งานแล้ว flex จะสร้าง hello.swf ขึ้นมาทันที ซึ่งแน่นอนว่า web browser จำเป็นต้องติดตั้ง Flash Player plugin ไว้ด้วย

อ่านเจอ tweet นี้ แล้วตาม link ไปพบว่ามีคนเขียนบทความเกี่ยวกับ Flex on Grails ไว้ที่นี่ พอตามไปพบว่าน่าติดตาม พอดีกับวันนี้ผมว่าง และ License ของต้นฉบับก็เอื้ออำนวย เลยลองทำตามสักหน่อย

เป็นไปได้ว่า หากขยันเขียน จะทำตามและบันทึกไปเรื่อยตาม Table of Contents ที่ผู้เขียนเตรียมไว้

Related Link from Roti