โดยในระหว่างการสร้างส่วนประกอบแต่ละอย่างตั้งแต่แรกจนไปถึงการ deploy ในโพสนี้ จะทำให้เราเข้าใจอะไรได้ชัดเจนมากขึ้นครับ เริ่มแรกให้สร้างโปรเจกใหม่ขึ้นมาได้เลย แต่คราวนี้เราจะเช็ก Generate Project sample code ออกไปครับ
เมื่อได้ดังนี้แล้ว คุณก็จะเห็นโปรเจกแทบจะไม่มีอะไรมาให้เราเลยดังภาพข้างล่าง
ส่วนประกอบพื่้นฐานของ GWT โปรเจกก็มี 3 อย่างด้วยกันดังที่ทราบมาแล้วจากโพสก่อน หากคุณได้อ่านก่อนจะมาถึงทีนี้ เราขอสรุปสั้นๆคือ
- Module
- Entry Point
- HTML Page
และในที่นี่เราก็จะมาสร้างทั้งสามอย่างด้วยมือของเราเอง หากคุณลองทำ โปรเจกแรก คุณจะอาจจะคุ้นเคยกับส่วนประกอบทั้งสามข้อไม่มากก็น้อย แต่วันนี้เราจะมาดูรายละเอียดกันขึ้นไปอีกนิด
1. Module
( คุณสามารถดูรายละเอียดเพิ่มเติมได้ที่นี่ ) คลิกขวาที่แพกเกจ com.javachef.empty > New > Other > Google Web Toolkit เลือก Module กด Next
ในช่อง Module name ก็ตั้งชื่อ โมดูลตามต้องการ ในที่นี่เราเลือกเป็น Hello จากนั้นก็กด Finish
มันก็จะสร้าง package ใหม่ให้เราอัตโนมัติชื่อว่า client.
ในช่อง Module name ก็ตั้งชื่อ โมดูลตามต้องการ ในที่นี่เราเลือกเป็น Hello จากนั้นก็กด Finish
มันก็จะสร้าง package ใหม่ให้เราอัตโนมัติชื่อว่า client.
2. Entry Point
พอได้โมดูลเรียบร้อยแล้ว ตอนนี้คุณอาจรันใน Dev Mode ก็ได้ แต่ก็จะได้ error ขึ้นมา. ต่อไปเราต้องมาสร้าง Entry Point ซึ่งก็คล้ายๆกับ public static void mian(String args[]){...} ในจาวาทั่วไป ที่จะต้องมีตัวเริ่มต้น คลาสในการเริ่มโปรแกรม Click ขวาที่แพกเกจ client > New > Other > เลือก Google Web Toolkit > Entry Point Class กด Next ใส่ชื่อ Hello ดังภาพ
แล้วก็ Finish เข้าให้ อิๆๆ
คราวนี้ลองเปิดไปดูที่ Hello.java ดูนะครับ โอ้มายก๊อด โค๊ดทั้งหมด สะอาดสะอ้าน ไม่เหมือนอย่างที่ Google ทำการ สร้างโปรเจกให้เรา แต่นี่ดูแล้วเหมาะสำหรับการเรียนรู้ และเริ่มต้นมากๆเลยใช่ไหมครับ ว่าแล้วเราก็ไปทำให้มันรกขึ้นมานิดๆกันเลย ทำการจัดไปเลยครับ ใส่ Label มาซักตัวหนึ่ง
บางทีคุณอาจรีบร้อนและบ่นว่า ทำไมมีแต่ Label อยู่นั่นแหละ เอาอย่างอื่นบ้างได้ไหม ? ไม่ต้องห่วงนะครับ หลังจากโพสนี้เรียบร้อยแล้ว เราจะมาทำความรู้จักกับ widget ตัวอื่น ที่จำเป็นสำหรับการสร้างเว็บแอ็ปทั่วไป แล้วก็จะมาดูวิธีการสร้าง widget ในแบบของคุณเองให้ตรงตามความต้องการ ยังไมพอ เราก็จะไปดูเรื่องการส่งผ่านเข้อมูลเข้าออกเซิฟเวอร์ , Design pattern และอีกมากมายครับ
แล้วก็ Finish เข้าให้ อิๆๆ
คราวนี้ลองเปิดไปดูที่ Hello.java ดูนะครับ โอ้มายก๊อด โค๊ดทั้งหมด สะอาดสะอ้าน ไม่เหมือนอย่างที่ Google ทำการ สร้างโปรเจกให้เรา แต่นี่ดูแล้วเหมาะสำหรับการเรียนรู้ และเริ่มต้นมากๆเลยใช่ไหมครับ ว่าแล้วเราก็ไปทำให้มันรกขึ้นมานิดๆกันเลย ทำการจัดไปเลยครับ ใส่ Label มาซักตัวหนึ่ง
บางทีคุณอาจรีบร้อนและบ่นว่า ทำไมมีแต่ Label อยู่นั่นแหละ เอาอย่างอื่นบ้างได้ไหม ? ไม่ต้องห่วงนะครับ หลังจากโพสนี้เรียบร้อยแล้ว เราจะมาทำความรู้จักกับ widget ตัวอื่น ที่จำเป็นสำหรับการสร้างเว็บแอ็ปทั่วไป แล้วก็จะมาดูวิธีการสร้าง widget ในแบบของคุณเองให้ตรงตามความต้องการ ยังไมพอ เราก็จะไปดูเรื่องการส่งผ่านเข้อมูลเข้าออกเซิฟเวอร์ , Design pattern และอีกมากมายครับ
3. HTML Page
สำหรับ HTML Page นี่จะไม่อยู่ในโฟลเดอร์ src นะครับ แต่จะไปอยู่ที่ war โฟลเดอร์แทน วิธีการสร้างคุณสามารถคลิกขวาที่ Root ได้เลยครับ คือสามารถคลิกที่ HelloWorld โฟเดอร์อันบนสุดได้เลย แล้วเลือก New > Other > Google Web Toolkit > HTML Page กด Next ตั้งชื่อเป็น Hello กด Finish
และคุณก็จะเห็นว่า มันจะไปอยู่ใต้ war โฟเดอร์ ณ เพลานี้ โครงสร้างโปรเจกของคุณจะคล้ายๆดังภาพ
ให้คุณรันโปรเจกใน Dev โหมด ครั้งหนึ่งก่อน หรือจะทำการ Build ก็ได้ จากนั้น compiler ก็จะทำการสร้าง Javascript ออกมาดังรูป
คุณจะเห็น war ไฟล์มีโฟเดอล์ให้เข้ามาคือ com.javachef.empty.client.client.Hello หากคุณรันใน Dev Mode ตอนนี้ก็จะยังไมเห็นอะไร เพราะว่าเราไม่ได้กำหนด ที่อยู่ของ Javascript ใน HTML ไฟล์ วิธีการคือ ทำการเก็บที่อยู่ของ Hello.nocache.js เอาไว้ก่อน ทำได้โดย คลิกขวาที่ com.javachef.empty.client.client.Hello.nocache.js > Properties แล้วก็ก๊อปที่อยุ่ของมันดังภาพ ( หลังจาก war/ )
เมื่อได้แล้วก็ไปที่ Hello.html แล้วเอาไปวาวแทนที่ .nocache.js ในแท็ก script ดังโค๊ดตัวอย่างข้างล่าง
จากนั้นก็ทำการ รันใน Dev Mode อีกทีครับ แค่นี่ก็เสร็จแล้วคัรบ ^___^ ลองทำการ deploy ลงใน Tomcat ดูนะครับว่าสามารถรันได้หรือไม่ ถ้าไม่ได้แสดงว่าต้องมีบักที่ไหนซักที่ สอบถามได้ตามคอมเมนต์ หรือลองทำดูใหม่อีกรอบก็ได้นะครับ
และคุณก็จะเห็นว่า มันจะไปอยู่ใต้ war โฟเดอร์ ณ เพลานี้ โครงสร้างโปรเจกของคุณจะคล้ายๆดังภาพ
ให้คุณรันโปรเจกใน Dev โหมด ครั้งหนึ่งก่อน หรือจะทำการ Build ก็ได้ จากนั้น compiler ก็จะทำการสร้าง Javascript ออกมาดังรูป
คุณจะเห็น war ไฟล์มีโฟเดอล์ให้เข้ามาคือ com.javachef.empty.client.client.Hello หากคุณรันใน Dev Mode ตอนนี้ก็จะยังไมเห็นอะไร เพราะว่าเราไม่ได้กำหนด ที่อยู่ของ Javascript ใน HTML ไฟล์ วิธีการคือ ทำการเก็บที่อยู่ของ Hello.nocache.js เอาไว้ก่อน ทำได้โดย คลิกขวาที่ com.javachef.empty.client.client.Hello.nocache.js > Properties แล้วก็ก๊อปที่อยุ่ของมันดังภาพ ( หลังจาก war/ )
เมื่อได้แล้วก็ไปที่ Hello.html แล้วเอาไปวาวแทนที่ .nocache.js ในแท็ก script ดังโค๊ดตัวอย่างข้างล่าง
จากนั้นก็ทำการ รันใน Dev Mode อีกทีครับ แค่นี่ก็เสร็จแล้วคัรบ ^___^ ลองทำการ deploy ลงใน Tomcat ดูนะครับว่าสามารถรันได้หรือไม่ ถ้าไม่ได้แสดงว่าต้องมีบักที่ไหนซักที่ สอบถามได้ตามคอมเมนต์ หรือลองทำดูใหม่อีกรอบก็ได้นะครับ
Rename
คุณจะเห็นว่าใน war โฟเดอร์นะครับ ไอ้โฟเดอร์ com.javachef.empty.client.client.Hello ไม่รู้มันจะยาวไปไหน เราสามารถทำให้มันสั้นลง และมีความหมายมากขึ้นได้ก็คือ ไปที่ Hello.gwt.xml
แล้วก็ไปแก้ที่ <module> ให้เป็น <module rename-to='emptyProject'> แล้วก็ Save จากนั้นใน war โฟลเดอร์ ให้ทำการลบ com.javachef.empty.client.client.Hello ออกไปซะโดยการกด delete ทิ้งไปเลยครับ และในส่วนของ war > WEB-INF > deploy > com.javachef.empty.client.client.Hello ก็ลบเจ้ายาวๆนี้ออกไปเหมือนกัน จากนั้นให้หยุด Dev Mode แล้วรัน Dev Mode อีกที
แล้วก็ไปแก้ที่ <module> ให้เป็น <module rename-to='emptyProject'> แล้วก็ Save จากนั้นใน war โฟลเดอร์ ให้ทำการลบ com.javachef.empty.client.client.Hello ออกไปซะโดยการกด delete ทิ้งไปเลยครับ และในส่วนของ war > WEB-INF > deploy > com.javachef.empty.client.client.Hello ก็ลบเจ้ายาวๆนี้ออกไปเหมือนกัน จากนั้นให้หยุด Dev Mode แล้วรัน Dev Mode อีกที
พอรันแล้วก็จะไม่เห็น ข้อความใช่ไหมครับ นั่นก็เป็นเพราะ src ของ Javascript ที่เราตั้งไว้ได้เปลี่ยนไปแล้ว ให้ทำการอับเดท src ให้เป็น path ตัวใหม่ (เช่น emptyProject/emptyProject.nocache.js ) และรันอีกที ก็จะดีเหมือนเดืมครับ
โพสนี้ค่อนข้างโหดไปหน่อยในภาคปฏิบัติ แต่มันเป็นเพียงการเริ่มต้นเท่านั้นนะครับ ยังมีสิ่งที่น่าท้าทายมากกว่านี้รอคุณอยู่ เจอกันในโพสถัดไปครับ
