Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,028

HOME > Java Programming > Java GUI สอน Java GUI เขียนโปรแกรม GUI ด้วย Java(Swing/AWT/JFC) > Netbeans : สร้าง Java GUI และการสร้าง Event Action และ Dialog โต้ตอบแบบง่าย ๆ



Clound SSD Virtual Server

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 เพื่อให้โปรแกรมแสดงการโต้ตอบ หรือทำงานต่าง ๆ ตามที่เราต้องการ

Java GUI Netbeans

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

Java GUI Netbeans

การสร้าง Event Action และการโต้ตอบแบบง่าย ๆ


จาก Screenshot ถ้าเราอาศัยการเขียน Code ของ Java แบบเพียว ๆ ก็เป็นเรื่องที่ค่อนข้างยากพอสมควร แต่ถ้าเราใช้ Visual ของ Netbeans มาช่วยในการออกแบบและสร้าง Event จะสามารถสร้าง ผลลัพธ์ที่ง่ายได้อย่างน่าอัศจรรย์

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

Java GUI Netbeans

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

Java GUI Netbeans

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

Java GUI Netbeans

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

Java GUI Netbeans

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

Java GUI Netbeans

กำหลดชื่อเป็น btnClick

การสร้าง Event ให้กับ Button ของ btnClick

Java GUI Netbeans

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

Java GUI Netbeans

จากนั้นตัว Pointer จะขี้มายังตำแหน่งของ Event อัตโนมัติ

    private void btnClickActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:

    }    


จากน้นเราจะสร้าง Dialog โดยจะใช้ JOptionPane ให้ทำการ import มาวะก่อน

Java GUI Netbeans

import javax.swing.JOptionPane;


Java GUI Netbeans

จากนั้นเขียน Code แสดง Dialog ดังนี้

    private void btnClickActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        JOptionPane.showMessageDialog(this, "Sawatdee : " + txtName.getText());
    }     

หลังจากนั้นทดสอบโปรแกรม โดยคลิกที่ Run








Tips ใน Netbeans จะมี Hintช่วยในการแก้ไขปัญหา เช่น

Java GUI Netbeans

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

Java GUI Netbeans

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

Java GUI Netbeans

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

Screenshot

Java GUI Netbeans

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

Java GUI Netbeans

แสดง Dialog แบบง่าย ๆ

เพิ่มเติม
จากตัวอย่างเราจะเห็นว่าเราจะอาศัยการทำงานระหว่างออกแบบ GUI การสร้าง Event และจะเขียน Code ก็ต่อเมื่อต้องการให้โปรแกรมทำงานอะไรเพิ่มเติม และทั้งหมดนี้เมื่อเรา View ดู Code ของ Java จะมีการ Generate ตัว Code ของ Java ให้อัตโนมัติ

MyFormApp.java
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package com.java.myapp;

import javax.swing.JOptionPane;

/**
 *
 * @author WEERACHAI
 */
public class MyFormApp extends javax.swing.JFrame {

    /**
     * Creates new form MyFormApp
     */
    public MyFormApp() {
        initComponents();
    }

    /**
     * This method is called from within the constructor to initialize the form.
     * WARNING: Do NOT modify this code. The content of this method is always
     * regenerated by the Form Editor.
     */
    @SuppressWarnings("unchecked")
    // <editor-fold defaultstate="collapsed" desc="Generated Code">                          
    private void initComponents() {

        jLabel1 = new javax.swing.JLabel();
        txtName = new javax.swing.JTextField();
        btnClick = new javax.swing.JButton();

        setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
        getContentPane().setLayout(null);

        jLabel1.setText("Welcome to ThaiCreate.Com");
        getContentPane().add(jLabel1);
        jLabel1.setBounds(120, 60, 140, 14);

        txtName.setName("txtName"); // NOI18N
        getContentPane().add(txtName);
        txtName.setBounds(70, 100, 260, 20);

        btnClick.setText("Click");
        btnClick.addActionListener(new java.awt.event.ActionListener() {
            public void actionPerformed(java.awt.event.ActionEvent evt) {
                btnClickActionPerformed(evt);
            }
        });
        getContentPane().add(btnClick);
        btnClick.setBounds(150, 140, 90, 23);

        pack();
    }// </editor-fold>                        

    private void btnClickActionPerformed(java.awt.event.ActionEvent evt) {                                         
        // TODO add your handling code here:
        JOptionPane.showMessageDialog(this, "Sawatdee : " + txtName.getText());
    }                                        

    /**
     * @param args the command line arguments
     */
    public static void main(String args[]) {
        /* Set the Nimbus look and feel */
        //<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) ">
        /* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel.
         * For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf.html 
         */
        try {
            for (javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()) {
                if ("Nimbus".equals(info.getName())) {
                    javax.swing.UIManager.setLookAndFeel(info.getClassName());
                    break;
                }
            }
        } catch (ClassNotFoundException ex) {
            java.util.logging.Logger.getLogger(MyFormApp.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (InstantiationException ex) {
            java.util.logging.Logger.getLogger(MyFormApp.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (IllegalAccessException ex) {
            java.util.logging.Logger.getLogger(MyFormApp.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        } catch (javax.swing.UnsupportedLookAndFeelException ex) {
            java.util.logging.Logger.getLogger(MyFormApp.class.getName()).log(java.util.logging.Level.SEVERE, null, ex);
        }
        //</editor-fold>

        /* Create and display the form */
        java.awt.EventQueue.invokeLater(new Runnable() {
            public void run() {
                new MyFormApp().setVisible(true);
            }
        });
    }
    // Variables declaration - do not modify                     
    private javax.swing.JButton btnClick;
    private javax.swing.JLabel jLabel1;
    private javax.swing.JTextField txtName;
    // End of variables declaration                   
}


จากตัวอย่างจะเห็นว่า Dialog สร้างได้แค่คำสั่งภายใน 1 บรรทัด








และนอกจากนี้ยังสามารถสร้าง Dialog ในรูปแบบอื่น ๆ ได้อีกมากมายเช่น

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

Java GUI Event / Dialog


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

Java GUI Event / Dialog


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

Java GUI Event / Dialog


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

Java GUI Event / Dialog


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

Java GUI Event / Dialog

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


ไปเจอคลิปใน Youtube ตัวหนึ่งเกี่ยวกับการสร้าง GUI บน Netbeans ซึ่งน่าสนในมาก ยังไงลองเข้าไปดูครับ



http://www.youtube.com/watch?v=Xt_5HZLdGog

* ต้องขออนุญาติจากเข้าของคลิปมา ณ ที่นี้ด้วยครับ



.

   
Share


ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท


ลองใช้ค้นหาข้อมูล


   


Bookmark.   
       
  By : ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ)
  Score Rating :  
  Create/Update Date : 2013-08-18 13:30:42 / 2017-03-27 17:10:39
  Download : No files
 Sponsored Links / Related

 
Eclipse : สร้าง Java GUI Application ด้วยโปรแกรม Eclipse IDE แบบง่าย ๆ
Rating :

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

 
เขียน Java GUI ใช้ Tools อะไรดีระหว่าง Eclipse IDE กับ Netbeans IDE ??
Rating :


ThaiCreate.Com Forum


Comunity Forum Free Web Script
Jobs Freelance Free Uploads
Free Web Hosting Free Tools

สอน PHP ผ่าน Youtube ฟรี
สอน Android การเขียนโปรแกรม Android
สอน Windows Phone การเขียนโปรแกรม Windows Phone 7 และ 8
สอน iOS การเขียนโปรแกรม iPhone, iPad
สอน Java การเขียนโปรแกรม ภาษา Java
สอน Java GUI การเขียนโปรแกรม ภาษา Java GUI
สอน JSP การเขียนโปรแกรม ภาษา Java
สอน jQuery การเขียนโปรแกรม ภาษา jQuery
สอน .Net การเขียนโปรแกรม ภาษา .Net
Free Tutorial
สอน Google Maps Api
สอน Windows Service
สอน Entity Framework
สอน Android
สอน Java เขียน Java
Java GUI Swing
สอน JSP (Web App)
iOS (iPhone,iPad)
Windows Phone
Windows Azure
Windows Store
Laravel Framework
Yii PHP Framework
สอน jQuery
สอน jQuery กับ Ajax
สอน PHP OOP (Vdo)
Ajax Tutorials
SQL Tutorials
สอน SQL (Part 2)
JavaScript Tutorial
Javascript Tips
VBScript Tutorial
VBScript Validation
Microsoft Access
MySQL Tutorials
-- Stored Procedure
MariaDB Database
SQL Server Tutorial
SQL Server 2005
SQL Server 2008
SQL Server 2012
-- Stored Procedure
Oracle Database
-- Stored Procedure
SVN (Subversion)
แนวทางการทำ SEO
ปรับแต่งเว็บให้โหลดเร็ว


Hit Link
   







Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่