วันอาทิตย์ที่ 16 ตุลาคม พ.ศ. 2559

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

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

Java GUI Event / Dialog

การรับค่าจากผู้ใช้ผ่าน Form

Java GUI Event / Dialog

การโต้ตอบแบบง่าย ๆ


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

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

Java GUI Event / Dialog

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

Java GUI Event / Dialog

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

Java GUI Event / Dialog

ในส่วนของ TextField ให้เปลี่ยนชื่อหรือตัวแปรเป็น txtName

ขั้นตอนนี้เราจะสร้่าง Event การคลิกที่ Button (Click)

Java GUI Event / Dialog

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

Java GUI Event / Dialog

จากนั้นตัว 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.});


Java GUI Event / Dialog

จากนั้นสร้าง 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

Java GUI Event / Dialog

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

Java GUI Event / Dialog

โปรแกรมจะแสดงผลลัพธ์ดังรูป

เพิ่มเติม
จากตัวอย่างเราจะเห็นว่าเราจะอาศัยการทำงานระหว่าง 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.");

Java GUI Event / Dialog


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

Java GUI Event / Dialog


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

Java GUI Event / Dialog


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

Java GUI Event / Dialog


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

Java GUI Event / Dialog

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

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

Set MongoDB in the windows path environment

  Let’s set MongoDB in the windows environment in just a few steps. Step 1: First download a suitable MongoDB version according to your mach...