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 มาให้ และเราจะใช้การเขียนเพิ่มบามคำสั่งเพื่อให้ได้ผลลัพธ์ที่ต้องการ

สร้าง Project แบบ GUI และออกแบบ Form ง่าย ๆ (ให้กลับไปอ่านบทความก่อนหน้านี้)

สร้าง Label , TextField และ Button ดังรูป โดยใช้ (jLabel, jTextField และ jButton)

ในส่วนของ TextField ให้เปลี่ยนชื่อหรือตัวแปรเป็น txtName
ขั้นตอนนี้เราจะสร้่าง Event การคลิกที่ Button (Click)

คลิกขวาที่ Button เลือก Add event handler ->action -> actionPerformed

จากนั้นตัว Pointer จะวิ่งมาที่ Code ของ Java อัตโนัมติ (คล้าย ๆ กับพวก VB6 , VB.Net) ซึ่งเราจะเขียนการทำงานเพิ่มได้ใน Method นี้
JButton btnClick = new JButton("Click");
btnClick.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
}
});

จากนั้นสร้าง Event เพื่อแสดง Dialog แบบง่าย ๆ
JButton btnClick = new JButton("Click");
btnClick.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent arg0) {
JOptionPane.showMessageDialog(frame,"Sawatdee : " + txtName.getText());
}
});
Screenshot

เพื่อรันโปรแกรมจะได้ผลลัพธ์ดังรูป ให้ทดสอบกรอกชื่อใน TextField และคลิกที่ Button ของ Click

โปรแกรมจะแสดงผลลัพธ์ดังรูป
เพิ่มเติม
จากตัวอย่างเราจะเห็นว่าเราจะอาศัยการทำงานระหว่าง 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 ในรูปแบบอื่น ๆ ได้อีกมากมาย

Ex :1
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.");

Ex :2
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"Inane warning",
JOptionPane.WARNING_MESSAGE);

Ex :3
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"Inane error",
JOptionPane.ERROR_MESSAGE);

Ex :4
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"A plain message",
JOptionPane.PLAIN_MESSAGE);

Ex :5
JOptionPane.showMessageDialog(frame,
"Eggs are not supposed to be green.",
"Inane custom dialog",
JOptionPane.INFORMATION_MESSAGE,
icon);

การใช้งานเพิ่มเติมอ่านได้ที่
|