Netbeans : สร้าง Java GUI และการสร้าง Event Action และ Dialog โต้ตอบแบบง่าย ๆ

Netbeans : สร้าง Java GUI และการสร้าง Event Action และ Dialog โต้ตอบแบบง่าย ๆ หัวข้อนี้ต่อจาก Netbeans และ GUI จากบทความที่แล้ว จะขอธิบายต่อเกี่ยวกับ พื้นฐานการเขียนโปรแกรมแบบ GUI เพื่อติดต่อกับ User คือ การรับคำสั่งจากผู้ใช้ รวมทั้งการโต้ตอบกลับไปเพื่อให้ผู้ใช้งานทราบผลลัพธ์ของการดำเนินการนั้น ๆ และการเขียนโปรแกรม Java แบบ GUI ด้วย Netbeans ก็สามารถสร้าง Event หรือเหตุการณ์ต่าง ๆ ได้่อย่างง่ายดาย โดยอาศัยการออกแบบ Form ด้วย Object และ Control ต่าง ๆ จาก Netbeans และการเขียน Code Java เพื่อให้โปรแกรมแสดงการโต้ตอบ หรือทำงานต่าง ๆ ตามที่เราต้องการ

การรับค่า 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);

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

http://docs.oracle.com/javase/tutorial/uiswing/components/dialog.html
http://docs.oracle.com/javase/tutorial/uiswing/