Eclipse : สร้าง Java GUI และการสร้าง Event Action และ Dialog โต้ตอบแบบง่าย ๆ |
Eclipse : สร้าง Java GUI และการสร้าง Event Action และ Dialog โต้ตอบแบบง่าย ๆ พื้นฐานการเขียนโปรแกรมแบบ GUI เพื่อติดต่อกับ User คือ การรับคำสั่งจากผู้ใช้ รวมทั้งการโต้ตอบกลับไปเพื่อให้ผู้ใช้งานทราบผลลัพธ์ของการดำเนินการนั้น ๆ และการเขียนโปรแกรม Java แบบ GUI ด้วย WindowBuilder ก็สามารถสร้าง Event หรือเหตุการณ์ต่าง ๆ ได้่อย่างง่ายดาย โดยอาศัยการออกแบบ Form ด้วย Object และ Control ต่าง ๆ จาก WindowBuilder และการเขียน Code Java เพื่อให้โปรแกรมแสดงการโต้ตอบ หรือทำงานต่าง ๆ ตามที่เราต้องการ
การรับค่าจากผู้ใช้ผ่าน Form
การโต้ตอบแบบง่าย ๆ
จาก Screenshot ถ้าเราอาศัยการเขียน Code ของ Java แบบเพียว ๆ ก็เป็นเรื่องที่ค่อนข้างยากพอสมควร แต่ถ้าเราใช้ WindowBuilder มาช่วยในการออกแบบและสร้าง Event จะสามารถสร้าง ผลลัพธ์ที่ง่ายได้อย่างน่าอัศจรรย์
ในบทความนี้จะเป็นเคสตัวอย่างการสร้าง GUI เพื่อรับค่าบน Form จากผู้ใช้ และแสดงกล่องโต้ตอบแบบง่าย ๆ โดยทั้งหมดนี้ใช้การเขียนโปรแกรมแกรม Eclipse และใช้ Plugin ของ WindowBuilder ส่วนพวก Class ที่ใช้จะเป็น Swing (javax.swing) และ AWT (java.awt) ที่เป็นทั้งแบบตัว WindowBuilder ทำการ Generate ตัว Code ของ Java มาให้ และเราจะใช้การเขียนเพิ่มบามคำสั่งเพื่อให้ได้ผลลัพธ์ที่ต้องการ
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-01.jpg?v=1001)
สร้าง Project แบบ GUI และออกแบบ Form ง่าย ๆ (ให้กลับไปอ่านบทความก่อนหน้านี้)
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-02.jpg?v=1001)
สร้าง Label , TextField และ Button ดังรูป โดยใช้ (jLabel, jTextField และ jButton)
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-03.jpg?v=1001)
ในส่วนของ TextField ให้เปลี่ยนชื่อหรือตัวแปรเป็น txtName
ขั้นตอนนี้เราจะสร้่าง Event การคลิกที่ Button (Click)
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-04.jpg?v=1001)
คลิกขวาที่ Button เลือก Add event handler ->action -> actionPerformed
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-05.jpg?v=1001)
จากนั้นตัว Pointer จะวิ่งมาที่ Code ของ Java อัตโนัมติ (คล้าย ๆ กับพวก VB6 , VB.Net) ซึ่งเราจะเขียนการทำงานเพิ่มได้ใน Method นี้
JButton btnClick = new JButton("Click");
btnClick.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
}
});
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-06.jpg?v=1001)
จากนั้นสร้าง Event เพื่อแสดง Dialog แบบง่าย ๆ
JButton btnClick = new JButton("Click");
btnClick.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
JOptionPane.showMessageDialog(frame,"Sawatdee : " + txtName.getText());
}
});
Screenshot
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-07.jpg?v=1001)
เพื่อรันโปรแกรมจะได้ผลลัพธ์ดังรูป ให้ทดสอบกรอกชื่อใน TextField และคลิกที่ Button ของ Click
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-08.jpg?v=1001)
โปรแกรมจะแสดงผลลัพธ์ดังรูป
เพิ่มเติม
จากตัวอย่างเราจะเห็นว่าเราจะอาศัยการทำงานระหว่าง WindowBuilder ในการออกแบบ GUI การสร้าง Event และจะเขียน Code ก็ต่อเมื่อต้องการให้โปรแกรมทำงานอะไรเพิ่มเติม และทั้งหมดนี้เมื่อเรา View ดู Code ของ Java จะมีการ Generate ตัว Code ของ Java ให้อัตโนมัติ
package com.java.myapp;
import java.awt.EventQueue;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JOptionPane;
import javax.swing.JTextField;
import javax.swing.JButton;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
public class MyWindowsForm {
private JFrame frame;
private JTextField txtName;
/**
* Launch the application.
*/
public static void main(String[] args) {
EventQueue.invokeLater(new Runnable() {
public void run() {
try {
MyWindowsForm window = new MyWindowsForm();
window.frame.setVisible(true);
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
/**
* Create the application.
*/
public MyWindowsForm() {
initialize();
}
/**
* Initialize the contents of the frame.
*/
private void initialize() {
frame = new JFrame();
frame.setBounds(100, 100, 450, 300);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.getContentPane().setLayout(null);
JLabel lblPleaseInputYour = new JLabel("Please input your name :");
lblPleaseInputYour.setBounds(158, 54, 130, 14);
frame.getContentPane().add(lblPleaseInputYour);
txtName = new JTextField();
txtName.setBounds(121, 79, 180, 20);
frame.getContentPane().add(txtName);
txtName.setColumns(10);
JButton btnClick = new JButton("Click");
btnClick.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
JOptionPane.showMessageDialog(frame,"Sawatdee : " + txtName.getText());
}
});
btnClick.setBounds(170, 125, 89, 23);
frame.getContentPane().add(btnClick);
}
}
จากตัวอย่างจะเห็นว่า Dialog สร้างได้แค่คำสั่งภายใน 1 บรรทัด และนอกจากนี้ยังสามารถสร้าง Dialog ในรูปแบบอื่น ๆ ได้อีกมากมาย
![](/images/adv.jpg)
Ex :1
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.");
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-09.jpg?v=1001)
Ex :2
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"Inane warning",
JOptionPane.WARNING_MESSAGE);
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-10.jpg?v=1001)
Ex :3
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"Inane error",
JOptionPane.ERROR_MESSAGE);
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-11.jpg?v=1001)
Ex :4
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"A plain message",
JOptionPane.PLAIN_MESSAGE);
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-12.jpg?v=1001)
Ex :5
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"Inane custom dialog",
JOptionPane.INFORMATION_MESSAGE,
icon);
![Java GUI Event / Dialog Java GUI Event / Dialog](https://www.thaicreate.com/upload/tutorial/java-gui-event-dialog-13.jpg?v=1001)
การใช้งานเพิ่มเติมอ่านได้ที่
|