Eclipse : เขียน Java GUI ด้วย WindowBuilder Designer ช่วยสร้าง GUI ได้ง่ายสุด ๆ

Eclipse : เขียน Java GUI ด้วย WindowBuilder Designer ช่วยสร้าง GUI ได้ง่ายสุด ๆ ตามทีได้เกรินไว้ในบทความก่อนหน้านี้ว่าภาษา Java โปรแกรมมิ้ง สามารถพัฒนาโปรแกรมได้หลากหลายมาก ขึ้นอยู่กับว่าวัถุประสงค์เราจะใช้ทำอะไร และถ้าพูดถึง GUI (Graphic User Interface) เราคงจะนึกถึงโปรแกรมสมัยก่อน ๆ อย่างเช่น VB6 ที่ใช้สร้าง Form บน Windows หรือในปัจจุบันก็ VB.Net แบบ Windows Application ที่รันบน Windows และหลาย ๆ คนคงจะคุ้นมันดี แล้ว Java ทำแบบนั้นได้หรือไม่ ??? คำตอบก็คือ ได้สบาย ๆ เพราะใน Java จะมี Library หรือ Class ที่ใช้สำหรับการสร้าง Interface นี้อยู่แล้ว หลัก ๆ ก็ได้แต่ Swing (javax.swing) และ AWT (java.awt) และอื่น ๆ และภายใน Class ก็จะมี GUI แยกย่อยไปอีกมากหลากหลาย ซึ่งจะยังไม่พูดถึงรายละเอียดลงลึกว่ามันใช้งานอย่างไรบ้าง แต่ให้รู้ว่าเจ้า Class ทั้ง 2 ตัวนี้ เป็น Class ไว้สำหรับการสร้าง User Interface แบบ Windows Form แต่มันไม่ได้รันได้ในเฉพาะบน Windows เท่านั้น เพราะสามารถใช้ได้ทั้งบน Windows , Mac OS และก็พวก Linux ที่เป็น Desktop ทั้งหลาย

Java GUI (ตัวอย่าง GUI Form ที่รันบน Windows Desktop)

แล้วการเขียน GUI ด้วย Java จะต้องทำอย่างไร ???
ปกติแล้วเราสามารถเรียกใช้งาน Class ของ java.awt และ javax.swing ได้ทันที และเราสามารถเขียนผ่าน Syntax ของ Java ผ่าน Eclipse หรือ Netbeans แล้วรันเพื่อแสดงผล GUI ที่ต้องการ เช่น

01.import javax.swing.*;

02. 

03.public class MyClass extends JFrame {

04. 

05.public static void main(String[] args) {

06.myClass frameTabel = new myClass();

07.}

08. 

09.JLabel welcome = new JLabel("Welcome to ThaiCreate.Com");

10.JPanel panel = new JPanel();

11. 

12.MyClass() {

13.super("ThaiCreate.Com Tutorial Java");

14.setSize(300, 200);

15.setLocation(500, 280);

16.panel.setLayout(null);

17. 

18.welcome.setBounds(70, 50, 150, 60);

19. 

20.panel.add(welcome);

21. 

22.getContentPane().add(panel);

23.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

24.setVisible(true);

25.}

26. 

27.}

Screenshot



ตัวอย่างผลลัพธ์ที่ได้จาก Code ที่เขียนด้านบน

จาก Code จะเห็นว่ากว่าที่เราจะต้องเขียน Code ต่าง ๆ มากมายกว่าที่จะได้ Form ขั้นมา 1 Form ซึ่งเป็นขั้นตอนที่ยากกว่าจะได้ Form ที่เราต้องการ แต่การเขียนจริง ๆ เราไม่จำเป็นจะต้องเขียน Code ด้วยตัวเอง เพราะจะมีเครื่องมือ Plugin ที่ช่วยออกแบบ Form ต่าง ๆ (ให้นึกถึงพวก Visual Studio ที่มี Toolbox ต่าง ๆ เช่น Textbox , Label และอื่น ๆ ) รวมทั้งยังสามารถสร้าง Event ต่างได้อย่างง่ายดาย

ทำอย่างไรถึงจะสามารถสร้าง GUI ด้วย Toolbox ??
ปกติแล้วถ้าเราเขียนด้วย Netbeans จะมีเครื่องมือสำหรับการสร้าง GUI มาเป็นค่า Default อยู่แล้ว แต่ในกรณีที่ใช้ Eclipse จะต้องใช้ WindowBuilder ซึ่งเป็น Plugin สำหรับโปรแกรม Eclipse และจะต้องทำการติดตั้งตัว WindowBuilder ลงบน Eclipse ให้เรียบร้อยซะก่อน ก่อนที่จะสามารถใช้งานได้

การสร้าง Java GUI ด้วย Netbeans สร้าง Application แบบ Graphic แบบง่าย ๆ

http://www.thaicreate.com/java/java-gui-netbeans.html

ตัวอย่างเครื่องมือของ WindowBuilder Plugin บน Eclipse



ตัวอย่าง Form และ GUI ในการออกแบบ Form



การสร้าง Event ได้แบบง่าย ๆ โดยไม่ต้องมาเขียน Code เอง



เครื่องมือ Containers , Layouts , Structs & Springs



เครื่องมือ Components , Swing Action และ Menu



เครื่องมือ AWT Components , JGoodies



มี Properties และอื่น ๆ เหมือนกับการเขียนโปรแกรมบนพวก Visual Studio


การติดตั้ง WindowBuilder Plugin บน Eclipse สำหรับตัวนี้จะเป็นการติดตั้งบน Eclipse เท่านั้น ถ้าใช้โปรแกรม Netbeans สามารถเรียกใช้งานได้ทันที ตาม Link ที่ได้แปะไว้ก่อนหน้านี้แล้ว และสำหรับโปรแกรม Eclipse แนะนำให้ใช้รุ่น Indigo , Helios และ Galileo อ่านเพิ่มเติม Version ได้ที่นี่

WindowBuilder Plugin for Eclipse

http://developers.google.com/java-dev-tools/download-wbpro

สำหรับผมเลือกใช้ Indigo



คลิกที่เมนู Help -> Install New Software



เลือก Add..



ช่อง Name ให้หรอก WindowsBuilder ส่วน URL ให้กรอกตาม Link ของรุ่นของ Eclipse (จาก Link ที่ได้แนะนำไว้)

เช่น

Eclipse 3.7 (Indigo)
http://dl.google.com/eclipse/inst/d2wbpro/latest/3.7

Eclipse 3.6 (Helios)
http://dl.google.com/eclipse/inst/d2wbpro/latest/3.6

Eclipse 3.5 (Galileo)
http://dl.google.com/eclipse/inst/d2wbpro/latest/3.5

ในปัจจุบันอาจจะมีการเปลี่ยนลิ้งค์แล้ว แนะนำให้คลิกเพื่อดู Version ล่าสุด



เลือก All



เลือก Next



เลือก I accept... และ Next ตามลำดับ



กำลังติดตั้ง



ขั้นตอนนี้ให้เลือก OK เพื่อยืรยันการทำต่อ



จากนั้นโปรแกรมจะให้ Restart ตัว Eclipse ซะ 1 ครั้ง

เพียงเท่านี้เราก็จะสามารถออกแบบ GUI บนโปรแกรม Eclipse ได้อย่างง่ายดาย ซึ่งได้เขียนตัวอย่างการสร้าง Java Project และการสร้าง GUI ไว้ในบทความถัดไป