ความหมายของ GUI Graphic User Interface (GUI) คือ ส่วนของการติดต่อกับผู้ใช้ด้วยรูปภาพ ที่มีสร้างขึ้นโดยใช้โปรแกรม อยู่ในชุดแพคเกจ java.awt และ javax.swing.

งานนำเสนอเรื่อง: "ความหมายของ GUI Graphic User Interface (GUI) คือ ส่วนของการติดต่อกับผู้ใช้ด้วยรูปภาพ ที่มีสร้างขึ้นโดยใช้โปรแกรม อยู่ในชุดแพคเกจ java.awt และ javax.swing."— ใบสำเนางานนำเสนอ:

1 ความหมายของ GUI Graphic User Interface (GUI) คือ ส่วนของการติดต่อกับผู้ใช้ด้วยรูปภาพ ที่มีสร้างขึ้นโดยใช้โปรแกรม อยู่ในชุดแพคเกจ java.awt และ javax.swing โดยสามารถเรียกใช้งาน - กลุ่มคำสั่ง AWT Set (Abstract Windowing Toolkit) และ - กลุ่มคำสั่ง Swing Set ลำดับของคอมโพเนนท์ (ใช้กลุ่มคำสั่ง Swing Set) JFrame JFrame f = new JFrame("Test"); - Panel JPanel p = new JPanel(); - JButton, JLabel, JTextField, … JButton b1 = new JButton("Close"); JLabel l1 = new JLabel("Label Test",SwingConstants.CENTER); JTextField t1 = new JTextField(20); 1

2 FrameTest.java import javax.swing.*; public class FrameTest { public static void main(String args[]) { JFrame f = new JFrame("Frame Test"); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setSize(200, 150); f.setVisible(true); } 2

3 PanelTest.java import java.awt.*; import javax.swing.*; public class PanelTest { public static void main(String args[]) { JFrame f = new JFrame("Panel Test"); JPanel p = new JPanel(); p.setBackground(Color.CYAN); f.add(p); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setSize(200, 150); f.setVisible(true); } 3

4 ButtonTest.java import javax.swing.*; public class ButtonTest { public static void main(String args[]) { JFrame f = new JFrame("Button Test"); JPanel p = new JPanel(); Icon ani = new ImageIcon("Course.gif"); JButton b1 = new JButton("Detail",ani); JButton b2 = new JButton("Close"); p.add(b1); p.add(b2); f.add(p); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setSize(200, 150); f.setVisible(true); } 4

5 LabelTest.java import java.awt.*; import javax.swing.*; public class LabelTest { public static void main(String args[]) { JFrame f = new JFrame("Label Test"); JPanel p = new JPanel(); Icon ani = new ImageIcon("Course.gif"); JLabel l1 = new JLabel("Label Test",SwingConstants.CENTER); JLabel l2 = new JLabel(ani,SwingConstants.CENTER); JLabel l3 = new JLabel("I am JAVA",SwingConstants.CENTER); JLabel l4 = new JLabel("I am JAVA",ani,SwingConstants.LEFT); p.add(l1); p.add(l2); p.add(l3); p.add(l4); f.add(p); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setSize(200, 200); f.setVisible(true); } 5

6 TextTest.java import javax.swing.*; public class TextTest {
public static void main(String args[]) { JFrame f = new JFrame("Text and PassWord Test"); JPanel p = new JPanel(); JTextField t1 = new JTextField("Text and PassWord Test",22); JTextField t2 = new JTextField("admin",15); JPasswordField pw = new JPasswordField("123",15); p.add(t1); p.add(t2); p.add(pw); f.add(p); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); f.setSize(320, 150); f.setVisible(true); } 6

7 Event Handling (1) ใช้ ออบเจ็กต์ที่เป็น Event Listener ตรวจจับเหตุการณ์ก่อนว่าผู้ใช้มีการกระทำกับคอมโพเนนต์ที่เหตุการณ์ใดบ้าง นำ Event Listener ไป ผูกติดกับคอมโพเนนต์ เช่น ต้องการตรวจจับเหตุการณ์ที่ปุ่ม CloseButton - สร้างออบเจ็กต์จากคลาส Button Listener - นำไปผูกติดกับปุ่ม CloseButton โดยมีรูปแบบดังนี้ CloseButton.addActionListener(new ButtonListener()); เมื่อตรวจพบว่ามีเหตุการณ์การโต้ตอบเกิดขึ้น จะส่งให้เมธอดทำงาน เลือกการทำงานให้ถูกต้องตามประเภทของเหตุการณ์ อินเตอร์เฟส และเมธอดที่ใช้ 7

8 Event Handling (2) private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { if(e.getSource() == CloseButton) { … } if(e.getSource() == OKButton) { 8

9 Event Handling on Button
สร้างออบเจ็กต์จากคลาส Button Listener และนำไปผูกติดกับปุ่ม CloseButton โดยมีรูปแบบดังนี้ CloseButton.addActionListener(new ButtonListener()); เลือกการทำงานให้ถูกต้องตามประเภทของเหตุการณ์ อินเตอร์เฟสและเมธอดที่ใช้ private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { if(e.getSource() == CloseButton) { … } if(e.getSource() == OKButton) { 9

10 ประเภทของเหตุการณ์ อินเตอร์เฟสและเมธอดที่ใช้ของคอมโพเนนต์
ประเภทเหตุการณ์ อินเตอร์เฟส เมธอด ActionEvent (button, Radiobutton) ActionListener actionPerformed(ActionEvent) ItemEvent (Combobox) ItemListener itemStateChanged(ItemEvent) TextEvent (TextField) TextListener textValueChanged(TextEvent) ListSelectionEvent (List) ListListener ListSelectionListener(ListSelectionEvent)

11 11 import java.awt.event.*; import javax.swing.*;
public class CloseButtonTest extends JFrame { private JPanel p; Icon ani ; JButton b; public CloseButtonTest(String title) { super(title); p = new JPanel(); ani = new ImageIcon("Course.gif"); b = new JButton("Close",ani); b.addActionListener(new ButtonListener()); p.add(b); add(p); } private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { if(e.getSource() == b) { JOptionPane.showMessageDialog(null, "See You Again !!!"); System.exit(0); public static void main(String args[ ]) { CloseButtonTest b = new CloseButtonTest("Button Test"); b.setSize(170, 90); b.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); b.setVisible(true); 11

12 Layout Manager กับการจัดวางคอมโพเนนต์ (1)
FlowLayout Manager เป็นการจัดเรียงคอมโพเนนต์ตามลำดับตำแหน่งของคอมโพเนนต์จากซ้ายไปขวาและบนลงล่าง JPanel p = new JPanel(); p.setLayout (new FlowLayout ()); p.add(a); p.add(b); p.add(c); p.add(d); p.add(e); p.add(g); p.add(h); p.add(i); p.add(j); 12

13 Layout Manager กับการจัดวางคอมโพเนนต์ (2)
BorderLayout Manager เป็นการจัดเรียงคอมโพเนนต์ โดยมีการแบ่งพื้นที่เป็น 5 ส่วนคือ North, South, East, West และ Center โดยในแต่ละส่วนจะวางได้ 1 คอมโพเนนต์ เท่านั้น กรณีที่ต้องการจัดวางวางมากกว่า 1 คอมโพเนนต์ สามารถแบ่งพื้นที่ในส่วนใด ๆ ออกเป็น 5 ส่วนไปเรื่อย ๆ ได้ JPanel p = new JPanel(); p.setLayout(new BorderLayout()); JPanel p1 = new JPanel(); p1.setLayout(new BorderLayout()); p.add(p1, BorderLayout.NORTH); p1.add(a, BorderLayout.WEST); p1.add(b, BorderLayout.CENTER); p1.add(c, BorderLayout.EAST); p.add(d, BorderLayout.WEST); JPanel p2 = new JPanel(); p2.setLayout(new BorderLayout()); p.add(p2, BorderLayout.CENTER); p2.add(e, BorderLayout.NORTH); p2.add(g, BorderLayout.CENTER); p2.add(h, BorderLayout.SOUTH); p.add(i, BorderLayout.EAST); p.add(j, BorderLayout.SOUTH); 13

14 Layout Manager กับการจัดวางคอมโพเนนต์ (3)
GridLayout Manager เป็นการจัดเรียงคอมโพเนนต์ โดยการแบ่งพื้นที่เป็น Grid ตามจำนวนแถวและคอลัมน์ที่ต้องการ ในแต่ละ Grid จะวางได้ 1 คอมโพเนนต์ โดยจัดเรียงไปตามลำดับซ้ายไปขวา บนลงล่าง JPanel p = new JPanel(); p.setLayout(new GridLayout(5,2)); p.add(a); p.add(b); p.add(c); p.add(d); p.add(e); p.add(g); p.add(h); p.add(i); p.add(j); 14

15 Layout Manager กับการจัดวางคอมโพเนนต์ (4)
GridBagLayout Manager เป็นการจัดเรียงคอมโพเนนต์ โดยการแบ่งพื้นที่เป็นส่วนตามจำนวนแถวและคอลัมน์ คล้าย GridLayout Manager แต่มีข้อที่ยืดหยุ่นกว่าคือ ในการจัดวาง 1 คอมโพเนนต์ สามารถใช้พื้นที่มากว่า 1 แถว 1 คอลัมน์ ได้ public static void addItem(JPanel p, JComponent c, intd x, int y, int width, int height, int align) { GridBagConstraints gc = new GridBagConstraints(); gc.gridx = x; gc.gridy = y; gc.gridwidth = width; gc.gridheight = height; gc.insets = new Insets(5,5,5,5); gc.anchor = align; gc.fill = GridBagConstraints.NONE; p.add(c,gc); } // addItem JPanel p = new JPanel(); p.setLayout (new GridBagLayout ()); addItem(p,a,0,0,1,1,GridBagConstraints.WEST); addItem(p,b,1,0,1,1,GridBagConstraints.WEST); addItem(p,c,2,0,1,1,GridBagConstraints.WEST); addItem(p,d,0,1,1,1,GridBagConstraints.WEST); addItem(p,e,1,1,1,2,GridBagConstraints.WEST); addItem(p,g,2,1,1,1,GridBagConstraints.WEST); addItem(p,h,0,2,1,1,GridBagConstraints.WEST); addItem(p,i,2,2,1,1,GridBagConstraints.WEST); addItem(p,j,0,3,3,1,GridBagConstraints.WEST); 15

16 คลาส AddPanel import javax.swing.*; import java.awt.*;
public class AddPanel { void addItem(JPanel p, JComponent c, int x, int y, int width, int height, int align) { GridBagConstraints gc = new GridBagConstraints(); gc.gridx = x; gc.gridy = y; gc.gridwidth = width; gc.gridheight = height; gc.insets = new Insets(5,5,5,5); gc.anchor = align; gc.fill = GridBagConstraints.NONE; p.add(c,gc); } p = new JPanel(); p.setLayout (new GridBagLayout ()); AddPanel x = new AddPanel(); x.addItem(p,ulbl,0,0,1,1,GridBagConstraints.WEST); x.addItem(p,utxt,1,0,2,1,GridBagConstraints.EAST); x.addItem(p,plbl,0,1,1,1,GridBagConstraints.WEST); x.addItem(p,ptxt,1,1,2,1,GridBagConstraints.EAST); x.addItem(p,okbtn,0,2,1,1,GridBagConstraints.WEST); x.addItem(p,resetbtn,1,2,1,1,GridBagConstraints.WEST); x.addItem(p,closebtn,2,2,1,1,GridBagConstraints.WEST); 16