
การรับค่า Input จาก User

การสร้าง Event Action และการโต้ตอบแบบง่าย ๆ
จาก Screenshot ถ้าเราอาศัยการเขียน Code ของ Java แบบเพียว ๆ ก็เป็นเรื่องที่ค่อนข้างยากพอสมควร แต่ถ้าเราใช้ Visual ของ Netbeans มาช่วยในการออกแบบและสร้าง Event จะสามารถสร้าง ผลลัพธ์ที่ง่ายได้อย่างน่าอัศจรรย์
ในบทความนี้จะเป็นเคสตัวอย่างการสร้าง GUI เพื่อรับค่าบน Form จากผู้ใช้ และแสดงกล่องโต้ตอบแบบง่าย ๆ โดยทั้งหมดนี้ใช้การเขียนโปรแกรมแกรม Netbeans ส่วนพวก Class ที่ใช้จะเป็น Swing (javax.swing) และ AWT (java.awt) ที่เป็นทั้งแบบตัว Wizard ทำการ Generate ตัว Code ของ Java มาให้ และเราจะใช้การเขียนเพิ่มบางคำสั่งเพื่อให้ได้ผลลัพธ์ที่ต้องการ

ออกแบบ Windows Form ดังรูป

ในส่วนของ Text Fields ให้เปลี่ยนชื่อตัวแปร ด้วยการคลิกขวาเลือก Change Variable Name...

ตั้งชื่อเป็น txtName

ในส่วนของ Button ก็เช่นเดียวกัน Change Variable Name...

กำหลดชื่อเป็น btnClick
การสร้าง Event ให้กับ Button ของ btnClick

คลิกขวาที่ Button -> Events -> Action -> actionPerformed

จากนั้นตัว Pointer จะขี้มายังตำแหน่งของ Event อัตโนมัติ
1.
private
void
btnClickActionPerformed(java.awt.event.ActionEvent evt) {
2.
// TODO add your handling code here:
3.
4.
}
จากน้นเราจะสร้าง Dialog โดยจะใช้ JOptionPane ให้ทำการ import มาวะก่อน

1.
import
javax.swing.JOptionPane;

จากนั้นเขียน Code แสดง Dialog ดังนี้
1.
private
void
btnClickActionPerformed(java.awt.event.ActionEvent evt) {
2.
// TODO add your handling code here:
3.
JOptionPane.showMessageDialog(
this
,
"Sawatdee : "
+ txtName.getText());
4.
}
หลังจากนั้นทดสอบโปรแกรม โดยคลิกที่ Run
Tips ใน Netbeans จะมี Hintช่วยในการแก้ไขปัญหา เช่น

กรณีที่ไม่ได้ import ตัว Package เข้ามา สามารถใช้ hints ด้วยการคลิกที่จุดนั้น ๆ แล้วกด Alt + Enter

มีให้เลือกวิธีการแก้ไขปัญหา

ตัว Class หรือ Package ถูก import เข้ามาเรียบร้อยแล้ว
Screenshot

แสดง Form GUI และให้ Input ข้อมูลชื่อ และคลิกที่ Button ของ Click

แสดง Dialog แบบง่าย ๆ
เพิ่มเติม
จากตัวอย่างเราจะเห็นว่าเราจะอาศัยการทำงานระหว่างออกแบบ GUI การสร้าง Event และจะเขียน Code ก็ต่อเมื่อต้องการให้โปรแกรมทำงานอะไรเพิ่มเติม และทั้งหมดนี้เมื่อเรา View ดู Code ของ Java จะมีการ Generate ตัว Code ของ Java ให้อัตโนมัติ
MyFormApp.java
001.
/*
002.
* To change this template, choose Tools | Templates
003.
* and open the template in the editor.
004.
*/
005.
package
com.java.myapp;
006.
007.
import
javax.swing.JOptionPane;
008.
009.
/**
010.
*
011.
* @author WEERACHAI
012.
*/
013.
public
class
MyFormApp
extends
javax.swing.JFrame {
014.
015.
/**
016.
* Creates new form MyFormApp
017.
*/
018.
public
MyFormApp() {
019.
initComponents();
020.
}
021.
022.
/**
023.
* This method is called from within the constructor to initialize the form.
024.
* WARNING: Do NOT modify this code. The content of this method is always
025.
* regenerated by the Form Editor.
026.
*/
027.
@SuppressWarnings
(
"unchecked"
)
028.
// <editor-fold defaultstate="collapsed" desc="Generated Code">
029.
private
void
initComponents() {
030.
031.
jLabel1 =
new
javax.swing.JLabel();
032.
txtName =
new
javax.swing.JTextField();
033.
btnClick =
new
javax.swing.JButton();
034.
035.
setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
036.
getContentPane().setLayout(
null
);
037.
038.
jLabel1.setText(
"Welcome to ThaiCreate.Com"
);
039.
getContentPane().add(jLabel1);
040.
jLabel1.setBounds(
120
,
60
,
140
,
14
);
041.
042.
txtName.setName(
"txtName"
);
// NOI18N
043.
getContentPane().add(txtName);
044.
txtName.setBounds(
70
,
100
,
260
,
20
);
045.
046.
btnClick.setText(
"Click"
);
047.
btnClick.addActionListener(
new
java.awt.event.ActionListener() {
048.
public
void
actionPerformed(java.awt.event.ActionEvent evt) {
049.
btnClickActionPerformed(evt);
050.
}
051.
});
052.
getContentPane().add(btnClick);
053.
btnClick.setBounds(
150
,
140
,
90
,
23
);
054.
055.
pack();
056.
}
// </editor-fold>
057.
058.
private
void
btnClickActionPerformed(java.awt.event.ActionEvent evt) {
059.
// TODO add your handling code here:
060.
JOptionPane.showMessageDialog(
this
,
"Sawatdee : "
+ txtName.getText());
061.
}
062.
063.
/**
064.
* @param args the command line arguments
065.
*/
066.
public
static
void
main(String args[]) {
067.
/* Set the Nimbus look and feel */
068.
//<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) ">
069.
/* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel.
070.
* For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html
071.
*/
072.
try
{
073.
for
(javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
074.
if
(
"Nimbus"
.equals(info.getName())) {
075.
javax.swing.UIManager.setLookAndFeel(info.getClassName());
076.
break
;
077.
}
078.
}
079.
}
catch
(ClassNotFoundException ex) {
080.
java.util.logging.Logger.getLogger(MyFormApp.
class
.getName()).log(java.util.logging.Level.SEVERE,
null
, ex);
081.
}
catch
(InstantiationException ex) {
082.
java.util.logging.Logger.getLogger(MyFormApp.
class
.getName()).log(java.util.logging.Level.SEVERE,
null
, ex);
083.
}
catch
(IllegalAccessException ex) {
084.
java.util.logging.Logger.getLogger(MyFormApp.
class
.getName()).log(java.util.logging.Level.SEVERE,
null
, ex);
085.
}
catch
(javax.swing.UnsupportedLookAndFeelException ex) {
086.
java.util.logging.Logger.getLogger(MyFormApp.
class
.getName()).log(java.util.logging.Level.SEVERE,
null
, ex);
087.
}
088.
//</editor-fold>
089.
090.
/* Create and display the form */
091.
java.awt.EventQueue.invokeLater(
new
Runnable() {
092.
public
void
run() {
093.
new
MyFormApp().setVisible(
true
);
094.
}
095.
});
096.
}
097.
// Variables declaration - do not modify
098.
private
javax.swing.JButton btnClick;
099.
private
javax.swing.JLabel jLabel1;
100.
private
javax.swing.JTextField txtName;
101.
// End of variables declaration
102.
}
จากตัวอย่างจะเห็นว่า 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);

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