1 / 16

ความหมายของ GUI

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

yank
Download Presentation

ความหมายของ GUI

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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. ประเภทของเหตุการณ์ อินเตอร์เฟสและเมธอดที่ใช้ของคอมโพเนนต์

  11. import java.awt.event.*; import javax.swing.*; public class CloseButtonTest extends JFrame { private JPanel p; Icon ani ; JButton b; publicCloseButtonTest(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 = newCloseButtonTest("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) { GridBagConstraintsgc = 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

More Related