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

แปะรูปใน Wikimapia

สอบเสร็จไปเมื่อวาน คะแนน workshop ถือว่าอยู่ในเกณฑ์ใช้ได้ ผ่านมาอย่างสบายใจ ไร้กังวล แต่ได้มาแค่ 87.23% (จาก 47 ข้อ) เท่านั้นเอง น้อยกว่าที่คิดไว้ตอนแรกนิดนึง ส่วนวิชาอื่นๆคะแนนยังไม่ออก และแน่นอนคงได้คะแนนน้อยกว่านี้มาก ฟันเอว!

วันนี้ตื่นแต่เช้า รู้สึกสบายใจ หาอะไรทำเล่นก็เลยค้นรูปเก่าๆที่เคยถ่ายไว้ แล้วก็เอาไปแปะใน www.wikimapia.org เป็นรูปถ่ายของสถานที่ต่างๆ ทั้งมหาลัย สะพาน และสถานที่ท่องเที่ยวที่เคยไป เช่น ที่นี่ ที่เป็นหมู่บ้านที่ผมเคยไปถ่ายรูปงาน และสถานที่ต่างๆเยอะแยะเก็บไว้ ผมก็คัดเอารูปนิดๆหน่อยๆ ที่พอจะเป็นข้อมูลให้เห็นได้บ้าง เกี่ยวกับสถานที่ต่างๆที่ทำเครื่องหมายไว้

บ้านลอ รอบๆหมู่บ้านนี้ มีโบราณสถาน (เค้าเรียกกันว่า โบราณสถานเวียงลอ) มากมาย และผมมีรูปโบราณสถานเหล่านั้นด้วย (ถ่ายเมื่อประมาณ 6-7 ปีก่อน) แต่ติดปัญหาตรงที่ว่า ผมไม่รู้ และไม่แน่ใจน่ะสิ ว่าแต่ละที่ มันอยู่ตรงไหน!! ทั้งที่จริงๆก็พอจะมองเห็น แต่ไม่รู้ว่าที่ไหน ชื่อว่าอะไร ก็เลยยังไม่ได้เอารูปไปแปะ ไว้รอมีข้อมูลก่อนค่อยกลับไปอัพเดทอีกรอบ

Related Link from Roti

10 เหตุผลที่คนในวงการไอทีลาออก (เขาว่า)

“เหตุผล” ทั้งสิบ ไม่ได้เรียงตามลำดับใดๆ ทั้งสิ้น และข้อเท็จจริงก็คือว่ามันเป็นเพียงความเห็นของคนคนหนึ่งเท่านั้น เพียงแต่ว่าผมอ่านแล้ว รู้สึกสะใจดีครับ

เป็นแนวปฏิบัติที่เลว ไม่ว่าจะทำงานไอที จะเป็นโปรแกรมเมอร์หรือไม่ หรือว่าทำงานอะไรก็ตาม เจอเข้าอย่างนี้ ก็เซ็งครับ

ไม่แปลละเอียดนะครับ อ่านภาษาอังกฤษมันกว่า

1. Code & Run Shop — ลุยถั่วอย่างเดียว เขียนเสร็จแล้วเอาไปใช้เลย ไม่ต้องทดสอบ ไ่ม่ต้องอิงกระบวนการคิด/ไตร่ตรองใดๆ
2. Absolutely NO structure — มั่ว สั่งงานมั่ว ทุกอย่างด่วนหมด ไม่มีการเตรียมการล่วงหน้า 
3. Lack of regular communication — ไม่คุย อ่านใจกันเอาเอง 
4. Micro Managers — ควบคุมละเอียดทุกอย่าง ถ้ารู้ดีนัก ทำไมไม่ทำเอง 
5. No recognition of the work you’ve done and effort you’ve put in — ทำให้ตาย ก็ไม่มีผล
6. Reviews that are mostly all negative most of the time — ติไปเสียทุกอย่าง 
7. Politics — การเมือง
8. Bad co-workers who do not get stomped out (let go) and hurt the culture — เพื่อนร่วมงานไม่ดี
   
• The arrogant bastard — พวกชอบเหยียบคนอื่น
• The Kiss Ass — พวกชอบประจบผู้มีอำนาจ เลียจนเปียก 
• The Nosey Prick — พวกยุ่งไปทุกเรื่อง
• The Lazy Snail — พวกขี้เกียจ/ทำงานช้า
• The Idiot manager — พวกผู้จัดการ/หัวหน้าปัญญาอ่อน
• The Know-it-All — พวกรู้ไปหมด/ทำมาหมดแล้ว/ขี้โอ่
9. No work-life balance — ชีวิตไม่สมดุลย์
10. No concept of “Team” — ไม่รู้จักทีม

เอ… หรือว่าความห่วยนี่ เป็นเหมือนกันหมดทั่วโลกครับ

โดย Logos เมื่อ 5 มิถุนายน 2009 เวลา 0:48 ในหมวดหมู่ การบริหารจัดการ

เจอบทความนี้ผ่าน blog ของ @fordantitrust อ่านแล้วก็โดน ยิ่งอ่านยิ่งชอบเลยเอามาแปะไว้ที่นี่ด้วยอีกที่นึงเลยแล้วกัน

Related Link from Roti

"บน บน ล่าง ล่าง ซ้าย ขวา ซ้าย ขวา บี เอ" บน Google Reader

หลังจากไปอ่านเจอที่ blog ของพี่ @somkiat แล้วก็ลองค้นหาในอินเทอร์เน็ตต่อไปดูพบว่าเราสามารถทำแบบนี้ใน google reader ก็ได้ด้วย!

เข้าไปที่หน้าแรกของ Google Reader จากนั้นก็กดเลยครับ "บน บน ล่าง ล่าง ซ้าย ขวา ซ้าย ขวา บี เอ"

จะมีนินจากระโดดออกมาจ๊ะเอ๋เรา และนอกจาก facebook กับ google reader แล้ว พบว่ายังมีคนบอกว่ามีเว็บอื่นๆอีก เช่น digg.com ที่ก็ใช้สูตร 30 ตัวของเกม Contra แล้วจะมีอะไรแปลกๆโผล่ออกมาเช่นเดียวกัน

Related Link from Roti