การใช้งาน Google App Engine ด้วย NetBeans IDE 6.9.1

ก่อนอื่นนะครับ Google App Engine คือ พื้นที่ให้บริการสำหรับการช่วยให้ผู้พัฒนาแอพพลิเคชั่นให้สามารถฝากแอพพลิเคชั่นที่เขียนไว้กับ Google ได้อย่างง่ายดายคล้ายๆกับการไปเช่า domain นั่นแหละครับมีจุดประสงค์หลักเพื่อ ให้ผู้พัฒนาสามารถพัฒนาและ ทดสอบแอพพลิเคชั่นของตัวเองได้อย่างง่ายนั่นเองครับ

สามารถ Download Google App Engine ได้จาก http://code.google.com/appengine/downloads.html#Google_App_Engine_SDK_for_Java

(ในที่นี้เราจะเลือกเป็น SDK For Java ครับ)

มาถึงขั้นตอนการใช้ Google App Engine ด้วย NetBeans IDE 6.9.1 กันแล้วครับ (V. ที่สามารถใช้ได้ ณ ตอนนี้ 6.7.1 , 6.8 และ 6.9.1 ครับ)

ก่อนอื่นให้เราเข้าไปสมัคร Account สำหรับ การนำแอพพลิเคชั่นของเราขึ้นไปบน Google ที่ https://appengine.google.com/start กันก่อนนะครับ โดยคลิกเข้าไปแล้วเลือก

- Create Application

- Country and Carrier:

Other (Not Listed)CanadaJapanUnited States

- Mobile Number: รหัส +66 ตามด้วยเบอร์ นะครับ

- จากนั้นใส่ Code ที่ได้มาในมือถือลงไปในช่องนี้ได้เลยครับ

Enter Account Code:

- ขั้นตอนการสร้าง Application

Application Identifier:

.appspot.com

ใส่ชื่อ domain.appspot.com ที่เราต้องการ

- Application Title:

ใส่ Tiltle ของแอพพลิเคชั่นที่ต้องการให้แสดง

เท่านี้ก็เป็นการสร้าง Account เสร็จเรียบร้อยแล้วนะครับ

ต่อไปเป็นขั้นตอนของการเพิ่ม Google App Engine เข้าไปใน Plugins ของ NetBeans ของเราครับ

- เริ่มโดยการเข้า NetBeans-> Tools -> Plugins -> Settings -> Add และใส่ดังภาพครับ

จากนั้นคลิก OK และเราจะได้ Google App Engine เข้ามาใน Available Plugins ครับ ทำการเลือก Plugins ของ Google App ทั้ง 5 อันและคลิก Install ดังภาพครับ

เมื่อทำการ Install เรียบร้อยแล้วให้เราทำการ New Project โดยเลือกดังนี้ Java Web -> Web Apllication ตั้งชื่องานให้เรียบร้อย กด Next เมื่อมาถึงขั้นตอนดังภาพในช่อง Server ให้เราเลือก Add

จากนั้นเลือก Google App Engine และใส่ Location ของ file appengine-java-sdk-1.5.3 ที่เราเก็บไว้ดังภาพครับ

จากนั้น NetBean จะให้เราใส่ Port สำหรับ Google App Engine ถ้าไม่รู้จะใส่อะไรก็กด Finish ไปเลยครับ เท่านี้ก็จะมี Google App Engine ขึ้นมาดังภาพ ให้เราเลือกและ กด Finish ครับ

เท่านี้ก็เป็นอันลง Plugins ให้กับ NetBeans ของเราเสร็จเรียบร้อยครับต่อไปจะเป็นขั้นตอนการ Deploy ไปบน Google App Engine ครับ (ในที่นี้เราจะขอใช้ตัวอย่างโปรแกรม TestSession ของ อ. ศรันย์ นะครับ ^^)

หลังจากเราทำการทำ Source code ที่ต้องการไปใส่ไว้ใน Project ที่เรา New ขึ้นมาเรียบร้อยแล้วให้คลิกที่ Configuration Files -> appengine-web.xml และเปลี่ยนตรง Application Name ให้ตรงกับ Application Identifier ตอนที่เราสมัครไว้อย่างเช่น (showsessioninfo.appspot.com) ให้ใส่ดังภาพ

จากนั้นให้ทำการคลิกขวาที่ Project เลือก Deploy to Google App Engine ดังภาพ

ทำการใส่ E-mail และ Password ของ Google ที่เรามี

เท่านี้ แอพพลิเคชั่นที่เราเขียนไว้ก็จะขึ้นไปอยู่บน Google โดยมี Domain เป็น .appspot.com ตามที่เราได้ตั้งไว้เรียบร้อยแล้วครับ

Domain ตัวอย่างที่ทางเราทำนะครับ : http://showsessioninfo.appspot.com/

Special Thanks to : http://kenai.com/projects/nbappengine/pages/Home

รายละเอียดโปรแกรม mouseevent2

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

เรามาเริ่มมมมม กันเลยครับบบ

Code ของ mouseevent2 ในส่วนของการทำงานจะเหมือนกับ mouseevent ทุกอย่างนะครับ แตกต่างกันตรงที่ใน mouseevent2 จะมี File

- MouseReceiver2BeanInfo.java

- MouseSource2BeanInfo.java

เพิ่มเข้ามาและ 2 File นี้เป็นตัวที่ทำให้ Properties ของ Bean ที่เราไม่ต้องการถูกซ้อนไปได้ครับ จะเริ่มอธิบายได้จาก source code ดังนี้ครับบ

File -> MouseSource2BeanInfo.java

package mouseevents2;

import java.beans.*;

import java.awt.event.*;

import java.lang.reflect.*;

public class MouseSource2BeanInfo extends SimpleBeanInfo {

public PropertyDescriptor[] getPropertyDescriptors() {

PropertyDescriptor pds[] = { };

return pds;

}

public EventSetDescriptor[] getEventSetDescriptors() {

try {

EventSetDescriptor esd1, esd2;

String mnames[] = { "mouseClicked", "mouseEntered",

"mouseExited", "mousePressed", "mouseReleased" };

esd1 = new EventSetDescriptor(MouseSource2.class,

"mouse", MouseListener.class, mnames,

"addMouseListener", "removeMouseListener");

String mmnames[] = { "mouseDragged", "mouseMoved" };

esd2 = new EventSetDescriptor(MouseSource2.class,

"mouseMotion", MouseMotionListener.class, mmnames,

"addMouseMotionListener", "removeMouseMotionListener");

EventSetDescriptor esd[] = { esd1, esd2 };

return esd;

}

catch(Exception ex) {

ex.printStackTrace();

}

return null;

}

public MethodDescriptor[] getMethodDescriptors() {

MethodDescriptor mds[] = { };

return mds;

}

}

จาก Code จะเห็นได้ว่าเราจะทำการกำหนด Event ที่ต้องการให้ Bean แสดงโดยให้ดูในส่วนของ method public EventSetDescriptor[] getEventSetDescriptors()

จะเป็นการเขียนสร้าง array ของ String และ new Object ชื่อ EventSetDescriptor โดยตั้งชื่อว่า esd1 และ esd2 (ตัวที่ hilight สีแดง) และทำการสร้าง EventSetDescriptor esd[] = { esd1, esd2 }; (บรรทัดที่ hilight สีเขียว) และทำการ return esd ทั้งหมดที่เรารวมไว้แล้วกลับไปครับ เท่านี้ก็จะทำให้เราผลดังภาพ แล้วครับ

ต่อไปจะเป็นส่วนของ File

File -> MouseReceiver2BeanInfo.java

package mouseevents2;

import java.beans.*;

import java.awt.event.*;

import java.lang.reflect.*;

public class MouseReceiver2BeanInfo extends SimpleBeanInfo {

public EventSetDescriptor[] getEventSetDescriptors() {

PropertyDescriptor pds[] = { };

return pds;

}

public EventSetDescriptor[] getEventSetDescriptors() {

EventSetDescriptor esds[] = { };

return esds;

}

public MethodDescriptor[] getMethodDescriptors() {

try {

Class c = MouseReceiver2.class;

Class pTypes[] = new Class[1];

pTypes[0] = MouseEvent.class;

Method method1 = c.getMethod("mouseClicked", pTypes);

Method method2 = c.getMethod("mouseEntered", pTypes);

Method method3 = c.getMethod("mouseExited", pTypes);

Method method4 = c.getMethod("mousePressed", pTypes);

Method method5 = c.getMethod("mouseReleased", pTypes);

Method method6 = c.getMethod("mouseDragged", pTypes);

Method method7 = c.getMethod("mouseMoved", pTypes);

ParameterDescriptor pds[] = new ParameterDescriptor[1];

pds[0] = new ParameterDescriptor();

MethodDescriptor md1 = new MethodDescriptor(method1, pds);

MethodDescriptor md2 = new MethodDescriptor(method2, pds);

MethodDescriptor md3 = new MethodDescriptor(method3, pds);

MethodDescriptor md4 = new MethodDescriptor(method4, pds);

MethodDescriptor md5 = new MethodDescriptor(method5, pds);

MethodDescriptor md6 = new MethodDescriptor(method6, pds);

MethodDescriptor md7 = new MethodDescriptor(method7, pds);

MethodDescriptor mds[] = { md1, md2, md3, md4,

md5, md6, md7 };

return mds;

}

catch(Exception ex) {

ex.printStackTrace();

}

return null;

}

}

จาก Code ใน File นี้จะเป็นการซ้อน Event ทั้งหมดของ Bean ที่เราไม่ต้องการ โดยจะสังเกตุได้ว่า ใน method

public EventSetDescriptor[] getEventSetDescriptors() {

EventSetDescriptor esds[] = { };

return esds;

}

จะเป็นการ return esds เปล่าๆกลับไปโดยไม่มีการสร้าง EventSetDescriptor ใดๆนะครับ ทำให้ได้ผลดังภาพครับ

ที่เห็นใน Method public MethodDescriptor[] getMethodDescriptors()

นี้จะเป็นส่วนสำหรับเมื่อมี Component ใดๆมา ทำการ สร้าง Event กับตัว Receiver นี้ จะให้ตัว Receiver นี้ทำการแสดง ข้อความดังที่ตั้งไว้ในแต่ละ

pTypes[0] = MouseEvent.class;

Method method1 = c.getMethod("mouseClicked", pTypes);

ดังเช่น ตัวอย่างให้ MouseSource2 ทำการ สร้าง Event กับ MouseReceiver2 โดยเลือกเป็น mouseClicked ครับ

เมื่อทำการ set event เสร็จเรียบร้อยเมื่อเรา คลิกลงบน mouseSource2 ใน mouseReceiver2 จะแสดงผลดังภาพครับ

เท่านี้ถ้าเพื่อนๆลองทำตาม หรือ อ่านๆ Code ดูก็คงจะพอเข้าใจสำหรับคำอธิบาย mouseevent2 นะครับ ^^!

ความแตกต่างของ mouseevent และ mouseevent2

ก่อนอื่นเพื่อนๆสามารถหา mouseevent และ mouseevent2 ได้จาก

https://sites.google.com/site/kmitlcomponentthai/home/baeb-fukhad เลือก ex4 นะครับ

ทั้ง mouseevent และ mouseevent2 นั้นเป็นการทำ component ที่จะให้มีการแจ้งเตือนขึ้นที่ตัว MouseReceiver เมื่อมีการกระทำเกิดขึ้นที่ MouseSource ดังภาพนะครับ

จากภาพเมื่อเราทำการคลิกที่ช่องสี่เหลี่ยมด้านล้างจะมี คำ ที่เราเลือกตอนสร้าง event ปรากฎขึ้นภายในกรอบสี่เหลี่ยมสีขาว (MouseReceiver) ซึ่งเป็นเหมือนตัวที่รับ event ที่ส่งมาจาก MouseSource

ส่วนที่แตกต่างกันของ mouseevent และ mouseevent2 ก็คือ ใน mouseevent2 จะมีการสร้าง BeanInfo ขึ้นมาใช้เองเพื่อซ่อน Properties ที่ไม่ต้องการจาก beans โดยจะแสดงส่วนของ Edit แตกต่างกันดังภาพ

ผลลัพท์ของ MouseSource2BeanInfo

ผลลัพท์ของ MouseReceive2BeanInfo

ภาพทางด้านซ้ายจะเป็นของ mouseevent2 ซึ่งมีการเขียน BeanInfo ขึ้นมาเองครับ จะเห็นได้ว่าเราสามารถซ่อน Properties ที่เราไม่มีโอกาสได้ใช้ หรือไม่จำเป็นต้องใช้อย่างแน่นอนไปได้โดนเขียน BeanInfo แล้ว รวมเป็น file .jar ได้เลยครับ