
การรับค่าจากผู้ใช้ผ่าน 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 นี้
1.
JButton btnClick =
new
JButton(
"Click"
);
2.
btnClick.addActionListener(
new
ActionListener() {
3.
public
void
actionPerformed(ActionEvent arg0) {
4.
5.
}
6.
});

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

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

โปรแกรมจะแสดงผลลัพธ์ดังรูป
เพิ่มเติม
จากตัวอย่างเราจะเห็นว่าเราจะอาศัยการทำงานระหว่าง WindowBuilder ในการออกแบบ GUI การส ร้าง Event และจะเขียน Code ก็ต่อเมื่อต้องการให้โปรแกรมทำงานอะไรเพิ่มเติม และทั้งหมดนี้เมื่อเรา View ดู Code ของ Java จะมีการ Generate ตัว Code ของ Java ให้อัตโนมัติ
01.
package
com.java.myapp;
02.
03.
import
java.awt.EventQueue;
04.
05.
import
javax.swing.JFrame;
06.
import
javax.swing.JLabel;
07.
import
javax.swing.JOptionPane;
08.
import
javax.swing.JTextField;
09.
import
javax.swing.JButton;
10.
import
java.awt.event.ActionListener;
11.
import
java.awt.event.ActionEvent;
12.
13.
public
class
MyWindowsForm {
14.
15.
private
JFrame frame;
16.
private
JTextField txtName;
17.
18.
/**
19.
* Launch the application.
20.
*/
21.
public
static
void
main(String[] args) {
22.
EventQueue.invokeLater(
new
Runnable() {
23.
public
void
run() {
24.
try
{
25.
MyWindowsForm window =
new
MyWindowsForm();
26.
window.frame.setVisible(
true
);
27.
}
catch
(Exception e) {
28.
e.printStackTrace();
29.
}
30.
}
31.
});
32.
}
33.
34.
/**
35.
* Create the application.
36.
*/
37.
public
MyWindowsForm() {
38.
initialize();
39.
}
40.
41.
/**
42.
* Initialize the contents of the frame.
43.
*/
44.
private
void
initialize() {
45.
frame =
new
JFrame();
46.
frame.setBounds(
100
,
100
,
450
,
300
);
47.
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
48.
frame.getContentPane().setLayout(
null
);
49.
50.
JLabel lblPleaseInputYour =
new
JLabel(
"Please input your name :"
);
51.
lblPleaseInputYour.setBounds(
158
,
54
,
130
,
14
);
52.
frame.getContentPane().add(lblPleaseInputYour);
53.
54.
txtName =
new
JTextField();
55.
txtName.setBounds(
121
,
79
,
180
,
20
);
56.
frame.getContentPane().add(txtName);
57.
txtName.setColumns(
10
);
58.
59.
JButton btnClick =
new
JButton(
"Click"
);
60.
btnClick.addActionListener(
new
ActionListener() {
61.
public
void
actionPerformed(ActionEvent arg0) {
62.
63.
JOptionPane.showMessageDialog(frame,
"Sawatdee : "
+ txtName.getText());
64.
65.
}
66.
});
67.
68.
69.
btnClick.setBounds(
170
,
125
,
89
,
23
);
70.
frame.getContentPane().add(btnClick);
71.
}
72.
}
จากตัวอย่างจะเห็นว่า Dialog สร้างได้แค่คำสั่งภายใน 1 บรรทัด และนอกจากนี้ยังสามารถสร้าง Dialog ในรูปแบบอื่น ๆ ได้อีกมากมายเช่น
Ex :1
1.
JOptionPane.showMessageDialog(frame,
2.
"Eggs are not supposed to be green."
);

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

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

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

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

การใช้งานเพิ่มเติมอ่านได้ที่
ไม่มีความคิดเห็น:
แสดงความคิดเห็น