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 ที่ต้องการ เช่น
import javax.swing.*;
public class MyClass extends JFrame {
public static void main(String[] args) {
myClass frameTabel = new myClass();
}
JLabel welcome = new JLabel("Welcome to ThaiCreate.Com");
JPanel panel = new JPanel();
MyClass() {
super("ThaiCreate.Com Tutorial Java");
setSize(300, 200);
setLocation(500, 280);
panel.setLayout(null);
welcome.setBounds(70, 50, 150, 60);
panel.add(welcome);
getContentPane().add(panel);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
}
Screenshot
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-first-application-16.jpg?v=1001)
ตัวอย่างผลลัพธ์ที่ได้จาก 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 แบบง่าย ๆ
ตัวอย่างเครื่องมือของ WindowBuilder Plugin บน Eclipse
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-01.jpg?v=1001)
ตัวอย่าง Form และ GUI ในการออกแบบ Form
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-05.jpg?v=1001)
การสร้าง Event ได้แบบง่าย ๆ โดยไม่ต้องมาเขียน Code เอง
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-02.jpg?v=1001)
เครื่องมือ Containers , Layouts , Structs & Springs
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-03.jpg?v=1001)
เครื่องมือ Components , Swing Action และ Menu
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-04.jpg?v=1001)
เครื่องมือ AWT Components , JGoodies
![Java GUI WindowBuilder Java GUI WindowBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-06.jpg?v=1001)
มี Properties และอื่น ๆ เหมือนกับการเขียนโปรแกรมบนพวก Visual Studio
การติดตั้ง WindowBuilder Plugin บน Eclipse สำหรับตัวนี้จะเป็นการติดตั้งบน Eclipse เท่านั้น ถ้าใช้โปรแกรม Netbeans สามารถเรียกใช้งานได้ทันที ตาม Link ที่ได้แปะไว้ก่อนหน้านี้แล้ว และสำหรับโปรแกรม Eclipse แนะนำให้ใช้รุ่น Indigo , Helios และ Galileo อ่านเพิ่มเติม Version ได้ที่นี่
WindowBuilder Plugin for Eclipse
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-07.jpg?v=1001)
สำหรับผมเลือกใช้ Indigo
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-08.jpg?v=1001)
คลิกที่เมนู Help -> Install New Software
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-09.jpg?v=1001)
เลือก Add..
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-10.jpg?v=1001)
ช่อง 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 ล่าสุด
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-11.jpg?v=1001)
เลือก All
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-12.jpg?v=1001)
เลือก Next
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-13.jpg?v=1001)
เลือก I accept... และ Next ตามลำดับ
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-14.jpg?v=1001)
กำลังติดตั้ง
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-15.jpg?v=1001)
ขั้นตอนนี้ให้เลือก OK เพื่อยืรยันการทำต่อ
![Java GUI WindowsBuilder Java GUI WindowsBuilder](https://www.thaicreate.com/upload/tutorial/java-gui-windowsbuilder-16.jpg?v=1001)
จากนั้นโปรแกรมจะให้ Restart ตัว Eclipse ซะ 1 ครั้ง
เพียงเท่านี้เราก็จะสามารถออกแบบ GUI บนโปรแกรม Eclipse ได้อย่างง่ายดาย ซึ่งได้เขียนตัวอย่างการสร้าง Java Project และการสร้าง GUI ไว้ในบทความถัดไป
การสร้าง Java GUI Application ด้วยโปรแกรม Eclipse IDE แบบง่าย ๆ
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) ![](/images/resource/startrue.gif) |
|
|
Create/Update Date : |
2013-08-06 16:44:04 /
2017-03-27 17:20:45 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|