java programming:...

92
บทท 5 การสรางสวนตอประสานกราฟกกบผใช (Build Graphical User Interface) ผศ.ธนศา เคร"อไวศยวรรณ คณะเทคโนโลย,สารสนเทศ สถาบ0นเทคโนโลย,พระจอมเกล5าเจ5าค6ณทหารลาดกระบ0ง

Upload: thanachart-numnonda

Post on 15-May-2015

23.133 views

Category:

Documents


2 download

DESCRIPTION

การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้

TRANSCRIPT

Page 1: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

บทท�� 5

การสรางส�วนต�อประสานกราฟ�กก�บผ�ใช(Build Graphical User Interface)

ผศ.ธน�ศา เคร"อไวศยวรรณคณะเทคโนโลย,สารสนเทศ

สถาบ0นเทคโนโลย,พระจอมเกล5าเจ5าค6ณทหารลาดกระบ0ง

Page 2: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ว0ตถ6ประสงค<แนะน>าส?วนประกอบท,@ส>าค0ญของ JFC (Java Foundation Class)แนะน>าคลาสและอ�นเตอร<เฟสท,@ส>าค0ญในแพคเกJจ java.awtน�ยามความหมายของต0วใส?ส?วนประกอบกราฟKก (Container) ส?วนประกอบ

กราฟKก (Graphical Component) และรMปแบบการจ0ดวางผ0ง (Layout Manager)

แนะน>าคลาสท,@เปRนต0วใส?ส?วนประกอบกราฟKก และคลาสท,@เปRนส?วนประกอบกราฟKกแบบต?างๆ

อธ�บายว�ธ,การใส?ส?วนประกอบกราฟKกลงในต0วใส?ส?วนประกอบกราฟKกแนะน>าว�ธ,การจ0ดวางผ0งแบบ FlowLayout,BorderLayout และ GridLayout

Page 3: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ว0ตถ6ประสงค<แนะน>าแพคเกJจ javax.swing และคลาสต?างๆท,@ม,อยM?ในแพคเกJจอธ�บายการสร5างเมนM อธ�บายการจ0ดการก0บรMปแบบของต0วอ0กขระ ส, และการจ0ดการก0บค6ณ

ล0กษณะอ"@นๆของส?วนประกอบกราฟKก

Page 4: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

Java Foundation Classระบบปฏ�บ0ต�การส?วนใหญ?จะม,ส?วนต�ดต?อก0บผM5ใช5เปRนแบบกราฟKก (Graphical

User Interface เร,ยกย?อว?า GUI) ท0Wงน,Wเน"@องจากใช5งานง?ายกว?า ภาษาจาวาจะสน0บสน6นการพ0ฒนาโปรแกรม GUI ท,@สามารถใช5งานได5หลาย

แพลตฟอร<ม โดยจะใช5ช6ดค>าส0@งเด,ยวก0น Java Foundation Class (JFC) ประกอบด5วยแพคเกJจต?างๆด0งน,W

• Abstract Window Toolkit (AWT)• Swing• Java 2D• Accessibility• Drag and Drop

Page 5: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

รMปแสดงส?วนประกอบท,@ส>าค0ญของ JFC

Page 6: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

AWTแพคเกJจ AWT ประกอบด5วยคลาสต?างๆท,@เปRนประเภทส?วนประกอบกราฟKก

(graphical component) เพ"@อน>าไปใช5ในการพ0ฒนาโปรแกรม GUI แพคเกJจ AWT จะช?วยในการสร5างโปรแกรม GUI ประเภท look and feel ท,@

ขcWนอยM?ก0บแพลตฟอร<มท,@ใช5งาน ภาษาจาวาได5ก>าหนดแพคเกJจ AWT ขcWนไว5ต0Wงแต?โปรแกรมจาวาเวอร<ช0@นแรก

(JDK 1.0) โดยอยM?ในแพคเกJจท,@ช"@อ java.awt แพคเกJจ AWT จะประกอบไปด5วยคลาสและอ�นเตอร<เฟสต?างๆเพ"@อใช5ในการ

พ0ฒนาโปรแกรม GUI

Page 7: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

AWTในแพจเก�จ java.awt ม,คลาสและอ�นเตอร<เฟสท,@ส!าค�ญด0งน,W

• Component• Container• LayoutManager (อ�นเตอร<เฟส)• Graphics• Color• Font• AWTEvent

Page 8: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

รMปแสดงส?วนประกอบท,@ส>าค0ญของ AWT

Page 9: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Componentการเข,ยนโปรแกรม GUI น0WนจะเปRนการสร5างออปเจJคต?างๆท,@เปRนออปเจJค

ของคลาสท,@เปRนส?วนประกอบกราฟKก คลาสท,@เปRนส?วนประกอบกราฟKกจะส"บทอดมาจากคลาสท,@ช"@อ Component คลาสท,@เปRน subclass ของคลาส Component จะแบ?งเปRนสองกล6?มค"อ

• คลาสท,@เปRนคลาสประเภท Container เปRนคลาสท,@ใช5ในการใส?ส?วนประกอบกราฟKกต?างๆ

• คลาสท,@เปRนส?วนประกอบกราฟKกอ"@นๆ อาท�เช?น Button,Choice และ List เปRนต5น

Page 10: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

รMปแสดงคลาสท��ส"บทอดมาจากคลาส Component

Page 11: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

แพคเกJจ SwingSwing เป"นแพคเก�จส!าหร�บพ�ฒนาโปรแกรม GUI ซ(�งม�ส�วนประกอบกราฟ�ก

ท��มากชน)ดกว�าท��ม�อย��ในแพคเก�จ AWT ส�วนประกอบกราฟ�กของแพคเก�จ Swing จะม�ล�กษณะท��ด�กว�าส�วนประกอบ

กราฟ�กของแพคเก�จ AWT ส�วนประกอบกราฟ�กของแพคเก�จ Swing สามารถก!าหนดร�ปแบบของ look

and feel ท��ท!าใหไดโปรแกรม GUI ท��ม�ร�ปแบบของกราฟ�กเหม1อนก�นในท2กแพลตฟอร3ม ซ(�งจะแตกต�างก�บแพคเก�จ AWT ท��จะม�ร�ปแบบของกราฟ�กซ(�งข(4นอย��ก�บ look and feel ของแต�ละแพลตฟอร3ม

การก!าหนด look and feel ไดเองท!าใหโปรแกรม GUI ท��ใชออปเจ�คของ แพคเก�จ Swing แสดงผลไดชากว�าโปรแกรม GUI ท��ใชออปเจ�คของ แพคเก�จ AWT

Page 12: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

แพคเกJจ Swing แพคเกJจของ Swing อยM?ในแพคเก�จท��ช1�อ javax.swingคลาสท,@เปRนส?วนประกอบกราฟKกของแพคเกJจ Swing ท6กคลาสจะส"บทอดมา

จากคลาส JComponentคลาส JComponent จะส1บทอดมาจากคลาส Container ในแพคเกJจAWT

อ,กต?อหนc@งแพคเกJจ Swing จะม,คลาสท,@เปRนส?วนประกอบกราฟKกท,@สอดคล5องก0บคลาส

ในแพคเกJจ AWT โดยคลาสเหล?าน,Wจะม,ช"@อขcWนต5นด5วยต0วอ0กษร ‘J’

Page 13: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาสต?างๆในแพคเกJจ Swing

Page 14: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาสประเภท Containerโปรแกรม GUI จะต5องม,การสร5างออปเจJคของคลาสประเภท Container อย?าง

น5อยหนc@งออปเจJคขcWนมาก?อน เพ"@อใช5ในการใส?ออปเจJคของคลาสท,@เปRนส?วนประกอบกราฟKกอ"@นๆ

คลาสประเภท Container ท,@อยM?ในแพคเกJจ AWT ม,ด0งน,W• Frame• Panel• Dialog • Applet

คลาสประเภท Container เปRนคลาสท,@ส"บทอดมาจากคลาสท,@ช"@อ Component

Page 15: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Containerคลาสท,@ช"@อ Container เปRนคลาสแบบ abstract ซc@งเราไม?สามารถท,@จะ

สร5างออปเจJคของคลาสด0งกล?าวได5 แต?จะต5องสร5างออปเจJคของคลาสอ"@นๆท,@ส"บทอดมาจากคลาสท,@ช"@อ Container แทน

คลาสท,@ช"@อ Container จะม,เมธอดท,@ช"@อ add()ท,@ใช5ในการใส?ส?วนประกอบกราฟKกอ"@นๆ เมธอดน,Wจะม,รMปแบบท,@ส>าค0ญด0งน,W• void add (Component c)• void add (Component c,int position)

Page 16: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Frameเป"นคลาสท��ส1บทอดมาจากคลาสท,@ช"@อ WindowออปเจJคของคลาส Frame จะประกอบด5วย title bar, resizable corner, icon

และ menu bar

Page 17: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Frameคลาส Frame จะม,รMปแบบของ constructor ท,@ส>าค0ญด0งน,W

• public Frame() • public Frame(String title)

คลาส Frame จะม,เมธอดท,@เก,@ยวข5องก0บการปร0บขนาดของเฟรมด0งน,W• boolean isResizable()• void setResizable(boolean canResize)

Page 18: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง Frameimport java.awt.*;

public class FrameSample {private Frame fr;public void init() {

fr = new Frame("Frame Sample");fr.setSize(200,150);fr.show();

}public static void main(String args[]) {

FrameSample obj = new FrameSample();obj.init();

}}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 19: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

อธ�บายต�วอย�างโปรแกรมค!าส��ง fr = new Frame(“Frame Sample”); เป"นค!าส��งท,@ใช5ในการ

สรางออปเจ�คของคลาส Frameเมธอด setSize()เป"นเมธอดท��ใชในการก!าหนดขนาดของ Frameเมธอด show() เป"นเมธอดท,@ใช5ในการแสดง Frame ท,@สร5างไว5

Page 20: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Panelเป"นคลาสประเภท Container ท>าให5สามารถใส�ส�วนประกอบกราฟ�กต�างๆไดแตกต�างจาก Frame ตรงท��ไม�ม� title bar และไม?ม, resizable corner Applet เป"นคลาสท��ส1บทอดมาจากคลาส Panelโดยท��วไปจะม�ต�วจ�ดการวางผ�งแบบ FlowLayoutสามารถท��จะบรรจ2 Panel ลงใน Frame ได

Page 21: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Dialogเป"นคลาสประเภท Container ท>าให5สามารถใส�ส�วนประกอบกราฟ�กต�างๆไดคลาส Dialog เป"นคลาสท��ส1บทอดมาจากคลาส Window เพ1�อใชเป"นอ)นพ2ต

และเอาต3พ2ตก�บผ�ใชคลาส Dialog จะท!างานอย��ภายใตอ�อบเจกต3ของคลาส Frame การสรางอ�อบเจกต3ของคลาส Dialog จะตองระบ2อ�อบเจกต3ของคลาส Frame

ท��เป"น Parent Frameคลาส Frame จะม,รMปแบบของ constructor ท,@ส>าค0ญด0งน,W

• public Dialog(Frame parent)• public Dialog(Frame parent,String title)• public Dialog(Frame parent, boolean isModal)• public Dialog(Frame parent, String title, boolean isModal)

Page 22: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาสประเภท Container ในแพคเกJจ Swing

Page 23: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JFrame แพคเกJจ Swing ม,คลาสประเภท Container ท,@แตกต?างจากคลาสประเภท

Container ของแพคเกJจ AWT ค"อ JFrame,JDialog,JPanel และ JApplet โดยท0@วไปโปรแกรม GUI ท,@เปRนโปรแกรมจาวาประย6กต<จะใช5 Container ท,@เปRนออปเจJคของคลาส JFrame

คลาส JFrame จะส"บทอดมาจากคลาส Frame โดยม, constructor ท,@ส>าค0ญด0งน,W• public JFrame()• public JFrame(String title)

Page 24: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

Panesออปเจ�คของคลาส JFrame แตกต�างก�บ Frame ตรงท��ม�หนาต�าง (pane) อย��

4 หนาต�างด�งน,W• root pane• layer pane• glass pane• content pane

Page 25: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

เมธอด getContentPane()เราไม?สามารถท,@จะใส?ส?วนประกอบกราฟKกลงใน JFrame ได5โดยตรง แต?จะ

ต5องใส?ลงในหน5าต?างท,@เปRน content pane แทน เราสามารถท,@จะเร,ยกออปเจJคของคลาสประเภท Container ด0งกล?าวมาได5

โดยใช5เมธอดท,@ช"@อ getContentPane() และสามารถท,@จะใส?ส?วนประกอบกราฟKกลงในออปเจJคด0งกล?าวได5โดยใช5เมธอด add()

ต0วอย?างเช?นJFrame fr = new JFrame();

JButton bn1 = new JButton("Submit"); Container content = fr.getContentPane(); content.add(bn1);

Page 26: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

การใส�ส�วนประกอบกราฟ�กใน JFrame โปรแกรม Java SE 5 ไดก!าหนดใหเราสามารถท��จะใส�ส�วนประกอบกราฟ�กลง

ใน JFrame ไดโดยตรง ค!าส��ง add() และ setLayout() ใน JFrame จะเป"นการส�งค!าส��งไปย�ง content

pane โดยอ�ตโนม�ต) ต0วอย?างเช?น

JFrame fr = new JFrame(); JButton bn1 = new JButton("Submit"); fr.add(bn1);

Page 27: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JFrameimport javax.swing.JFrame;public class JFrameSample { private JFrame fr; public void init() { fr = new JFrame("JFrame Sample"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fr.setSize(200, 150); fr.setVisible(true); } public static void main(String args[]) { JFrameSample obj = new JFrameSample(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 28: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

การจ0ดวางผ0งของส?วนประกอบกราฟKกโปรแกรม GUI ของภาษาจาวาจะจ0ดวางส?วนประกอบกราฟKกต?างๆลงใน

ออปเจJคของคลาสประเภท Container โดยอ0ตโนม0ต� LayoutManager เปRนอ�นเตอร<เฟสท,@ใช0ในการก>าหนดว�ธ,การจ0ดวางผ0งส?วน

ประกอบกราฟKก คลาสท,@ implements อ�นเตอร<เฟสท,@ช"@อ LayoutManager เพ"@อใช5เปRนต0ว

จ0ดวางผ0งของส?วนประกอบกราฟKกม,ท0Wงหมด 5 คลาสค"อ• BorderLayout• FlowLayout• GridLayout• CardLayout• GridBagLayout

เมธอดท,@ช"@อ setLayout() ใช5ในการก>าหนดการวางผ0ง

Page 29: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

BorderLayoutFrame โดยท��วไปจะถMกก>าหนดให5ม,ต�วจ�ดวางผ�งเป"นแบบ BorderLayoutFrame ท,@ม,ต0วจ0ดวางผ0งเปRนแบบ BorderLayout จะท>าให5สามารถวางส�วน

ประกอบกราฟ�กไดมากท��ส2ด 5 ออปเจJคตามต!าแหน�งท)ศต�างๆของ Frame ค1อ ท)ศเหน1อ (NORTH) ท)ศใต (SOUTH) ท)ศตะว�นออก (EAST) ท)ศตะว�นตก (WEST) และตรงกลาง (CENTER)

ใชค!าส��ง new BorderLayout() ในการสรางต�วจ�ดวางผ�งแบบน�4

Page 30: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

BorderLayout ค!าส��งในการใส�ส�วนประกอบกราฟ�กค1อเมธอด add() แต�จะตองม�การระบ2

ต!าแหน�งท)ศท��ตองการวางส�วนประกอบต0วอย?างเช�น

fr.add(bn1,BorderLayout.NORTH)หากไม�ระบ2ต!าแหน�งท)ศ ส�วนประกอบจะถMกใส�ไวตรงกลาง

Page 31: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมimport java.awt.BorderLayout;import java.awt.Container;import javax.swing.JButton;import javax.swing.JFrame;public class BorderLayoutSample { private JFrame fr; private JButton bn1, bn2, bn3, bn4, bn5; public void init() { fr = new JFrame("Button Sample"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); bn1 = new JButton("B1"); bn2 = new JButton("B2"); bn3 = new JButton("B3"); bn4 = new JButton("B4"); bn5 = new Jbutton("B5");

fr.add(bn1, BorderLayout.NORTH); fr.add(bn2, BorderLayout.SOUTH); fr.add(bn3, BorderLayout.EAST);

Page 32: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม fr.add(bn4, BorderLayout.WEST); fr.add(bn5);

fr.setSize(200, 150); fr.setVisible(true); } public static void main(String args[]) { BorderLayoutSample obj = new BorderLayoutSample(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 33: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

FlowLayoutต0วจ0ดวางผ0งแบบ FlowLayout จะจ�ดวางผ�งส�วนประกอบกราฟ�กจากซายไป

ขวาถาความกวางของ Contanier ไม�พอ ต0วจ0ดวางผ0งจะน!าส�วนประกอบกราฟ�กท��

เหล1อลงไปในต!าแหน�งถ�ดไปดานล�างFrame สามารถใชต�วจ�ดวางผ�งแบบน�4ได5 โดยเร�ยกใช5เมธอด setLayout()

แลวสรางต�วจ�ดวางผ�งโดยใชค!าส��ง new FlowLayout() ด0งน,W fr.setLayout(new FlowLayout());

Page 34: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมimport java.awt.*;import javax.swing.*;public class FlowLayoutSample { private JFrame fr; private JButton bn1, bn2, bn3; public void init() { fr = new JFrame("Button Sample"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); fr.setLayout(new FlowLayout()); bn1 = new JButton("Submit"); bn2 = new JButton("Cancel"); bn3 = new JButton("Exit"); fr.add(bn1); fr.add(bn2); fr.add(bn3);

Page 35: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม fr.setSize(200, 150);

fr.setVisible(true); } public static void main(String args[]) { FlowLayoutSample obj = new FlowLayoutSample(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 36: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

GridLayoutจะแบ�ง Container เป"นช�องย�อยๆขนาดเท�าก�นFrame สามารถใช5ต�วจ�ดวางผ�งแบบน�4ได โดยเร,ยกใช5เมธอด setLayoutแลวสรางต�วจ�ดวางผ�งโดยใชค!าส��ง new GridLayout(row,col) ซc@งจะตองระบ2จ!านวนแถวและคอล�มน3ท��ตองการแบ�งช�องย�อยด5วย ด0งน,W

fr.setLayout(new GridLayout(3,2));• จะแบ�ง Container เป"น 6 ช�องย�อย ท��ม� 3 แถวๆละ 2 คอล�มน3

ใชเมธอด add() ในการใส�ส�วนประกอบกราฟ�กลงในแต�ละช�องย�อย โดยจะใส�เร�ยงจากซายไปขวาและบนลงล�าง

Page 37: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมimport java.awt.*;import javax.swing.*;public class GridLayoutSample { private JFrame fr; private JButton bn1, bn2, bn3, bn4, bn5; public void init() { fr = new JFrame("Button Sample"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); bn1 = new JButton("B1"); bn2 = new JButton("B2"); bn3 = new JButton("B3"); bn4 = new JButton("B4"); bn5 = new JButton("B5"); fr.setLayout(new GridLayout(3, 2));

Page 38: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม fr.add(bn1, BorderLayout.NORTH);

fr.add(bn2, BorderLayout.SOUTH); fr.add(bn3, BorderLayout.EAST); fr.add(bn4, BorderLayout.WEST); fr.add(bn5, BorderLayout.CENTER); fr.setSize(200, 150); fr.setVisible(true); } public static void main(String args[]) { GridLayoutSample obj = new GridLayoutSample(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 39: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ส�วนประกอบกราฟ�กท��ส!าค�ญในแพคเกJจ AWT Button Label TextField TextArea Checkbox Choice List Canvas

Page 40: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาสท,@เปRนส�วนประกอบกราฟ�กในแพคเกJจ Swingคลาสท,@เปRนส�วนประกอบกราฟ�กท��ส!าค�ญในแพคเกJจ Swing ม�ด�งน�4

• JFrame• JPanel• JButton• JLabel• JTextField• JTextArea• JScrollbar• JCheckBox• JChoice

Page 41: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาสท,@เปRนส�วนประกอบกราฟ�กในแพคเกJจ Swing

Page 42: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

Look and Feel ของแพคเก�จ Swing

Page 43: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JButton JButton เปRนคลาสท,@ใช5ในการสร5างออปเจJคท,@แสดงเปRนป6tม โดยจะม,

ข5อความ (text) ปรากฎอยM?บนป6tม JButton เปRนคลาสท,@ส"บทอดมาจากคลาสท,@ช"@อ Component Constructor ของคลาส Button ม,รMปแบบด0งน,W

• public JButton()• public JButton(String text• public Jbutton(Icon icon)• public JButton(String text, Icon icon)

เมธอดท,@ส>าค0ญในการจ0ดการก0บข5อความม,ด0งน,W• public void setText(String text)• public String getText()• public void setMnemonic(char c)• public void setIcon(Icon c)•

Page 44: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

เมธอดของคลาส JComponentส�วนประกอบกราฟ�กของ Swing เพ)�มค2ณล�กษณะต�างๆข(4นมามาก เรา

สามารถใชค2ณล�กษณะเหล�าน�4โดยเร,ยกใชเมธอดในคลาส JComponentเมธอด setBorder(Border bd) ใชส!าหร�บก!าหนดขอบใหก�บส�วน

ประกอบกราฟ�กเมธอด setToolTipText(String text)ใชส!าหร�บก!าหนดขอความท��

จะแสดงเป"น tooltip

Page 45: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JLabelค1อส�วนประกอบกราฟ�กท��ใชแสดงขอความยาวหน(�งบรรท�ด ซc@งผM5ใช5ไม?สามารถ

ปwอนข5อความเข5าไปได5Constructor ของคลาส JLabel ท,@ส>าค0ญม,ด0งน,W

• public JLabel(String text)• public JLabel(String text, int align)• public Jlabel(Icon icon)• public Jlabel(Icon icon, int align)• public JLabel(String text, Icon icon)

เราสามารถท��จะก!าหนดหร1อเปล��ยนขอความของ Label ไดโดยเร�ยกใช เมธอด setText(String text)

Page 46: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม JLabelimport java.awt.*;import java.net.URL;import javax.swing.*;public class JLabelDemo {

private JFrame fr; private JLabel label1, label2, label3; public void init() { ImageIcon icon = null; fr = new JFrame("JLabel Sample"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); URL imageURL = JLabelDemo.class.getResource("images/testImg.jpg"); if (imageURL != null) { icon = new ImageIcon(imageURL); } fr.setLayout(new GridLayout(3, 1)); //Create the first label. label1 = new JLabel("Image and Text", icon, JLabel.CENTER);

Page 47: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม JLabel//Set the position of its text, relative to its icon:

label1.setVerticalTextPosition(JLabel.BOTTOM); label1.setHorizontalTextPosition(JLabel.CENTER);

//Create the other labels. label2 = new JLabel("Text-Only Label"); label3 = new JLabel(icon); //Create tool tips, for the heck of it. label1.setToolTipText("A label containing both image and text"); label2.setToolTipText("A label containing only text"); label3.setToolTipText("A label containing only an image"); //Add the labels. fr.add(label1); fr.add(label2); fr.add(label3) fr.pack(); fr.setVisible(true); }

Page 48: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม JLabel public static void main(String args[]) {

JLabelDemo obj = new JLabelDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 49: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JTextFieldค1อส�วนประกอบกราฟ�กเพ1�อใหผ�ใชป:อนขอความยาวหน(�งบรรท�ดไดConstructor ของคลาส JTextField ท,@ส>าค0ญม,ด0งน,W

• public JTextField()• public JTextField(int col)• public JTextField(String text)• public JTextField(String text, int col)

เราสามารถท��จะก!าหนดหร1อเปล��ยนขอความโดยใชเมธอดsetText(String text)

เมธอด setEditable(boolean b)เปRนเมธอดท,@ใช5เพ"@อก!าหนดให TextField สามารถอ�านไดอย�างเด�ยว โดยจะต5องม,การส?ง argument เป"น false

Page 50: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม JTextFieldimport java.awt.*;import javax.swing.*;public class JTextFieldDemo { private JFrame fr; private JLabel l; private JTextField tf; public void init() { fr = new JFrame("JTextField Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); l = new JLabel("Name: "); tf = new JTextField("Numnonda", 15); fr.setLayout(new FlowLayout());

fr.add(l); fr.add(tf); fr.pack();

Page 51: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรม JTextField fr.setVisible(true);

} public static void main(String args[]) { JTextFieldDemo obj = new JTextFieldDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 52: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JTextAreaค1อส�วนประกอบกราฟ�กเพ1�อใหผ�ใชป:อนขอความได และสามารถม�จ!านวน

บรรท�ดไดหลายบรรท�ดตามท��ระบ2Constructor ของคลาส TextArea ท,@ส>าค0ญม,ด0งน,W

• public JtextArea()• public JTextArea(String Text)• public JTextArea(String Text, int row, int col)• public JTextArea(int row, int col))

Page 53: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JTextAreaimport java.awt.*;import javax.swing.*;public class JTextAreaDemo { private JFrame fr; private JTextArea ta; public void init() { fr = new JFrame("JTextArea Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ta = new JTextArea("Text Area", 5, 30); JscrollPane jScrollPane = new JScrollPane(ta); fr.setLayout(new FlowLayout()); fr.add(jScrollPane); fr.pack(); fr.setVisible(true); } public static void main(String args[]) { JTextAreaDemo obj = new JTextAreaDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 54: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JCheckBox

ค1อส�วนประกอบกราฟ�กท��ใหผ�ใชเล1อกหร1อไม�เล1อกช�องต�างๆได โดยสามารถเล"อกได5หลายช?องพร5อมๆก0น

ม�ขอความ (Label) อย��ขางๆConstructor ของคลาส CJCheckbox ท,@ส>าค0ญม,ด0งน,W

• public JCheckBox(String label)• public JCheckBox(String label, boolean state)• public JCheckBox(Icon icon)• public JCheckBox(Icon icon, boolean state)• public JCheckBox(String label, Icon icon)• public JCheckBox(String label, Icon icon, boolean state)

Page 55: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JRadioButton และ ButtonGroup

เราสามารถท��จะสรางต�วเล1อกท��เป"นแบบ Radio Button โดยใช JRadioButton

ในกรณ�น�4จะก!าหนดใหอ�อบเจกต3 JRadioButton หลายต�วอย��ในกล2�มของอ�อบเจกต3ของคลาส ButtonGroup ซ(�งจะตองใชเมธอด add() ม�ขอความ (Label) อย��ขางๆ

คลาส ButtonGroup ไม?ใช?คลาสท,@เปRนส?วนประกอบกราฟKก แต?จะใช5ในการสร5างอJอบเจกต<เพ"@อก>าหนดกล6?มของ AbstractButton

Page 56: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JCheckBoximport java.awt.FlowLayout;import javax.swing.*;

public class JCheckBoxDemo { private JFrame fr; private JCheckBox c1, c2, c3;

public void init() { fr = new JFrame("JCheckBox Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); c1 = new JCheckBox("Visual Basic"); c2 = new JCheckBox("C++", false); c3 = new JCheckBox("Java", true); fr.setLayout(new FlowLayout()); fr.add(c1); fr.add(c2); fr.add(c3);

Page 57: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JCheckBox fr.pack(); fr.setVisible(true); }

public static void main(String args[]) { JCheckBoxDemo obj = new JCheckBoxDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 58: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JRadioButtonimport java.awt.GridLayout;import javax.swing.*;

public class JRadioButtonDemo { private JFrame fr; private JRadioButton c1, c2, c3; private ButtonGroup chg;

public void init() { fr = new JFrame("JRadioButton Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); c1 = new JRadioButton("Visual Basic"); c2 = new JRadioButton("C++", false); c3 = new JRadioButton("Java", true); chg = new ButtonGroup(); chg.add(c1); chg.add(c2); chg.add(c3);

Page 59: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JRadioButton fr.setLayout(new GridLayout(3,1)); fr.add(c1); fr.add(c2); fr.add(c3);

fr.pack(); fr.setVisible(true); }

public static void main(String args[]) { JRadioButtonDemo obj = new JRadioButtonDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 60: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JComboBoxคลาส JComboBox เปRนคลาสท,@ใช5ในการสร5างออปเจJคท,@เปRนรายการให5ผM5ใช5

สามารถเล"อกได5คลาส JComboBox จะแสดงรายการปรากฏให5เหJนเฉพาะรายการท,@เล"อก

เพ,ยงรายการเด,ยว แต?จะแสดงรายการท0Wงหมดหากม,การคล�กเมาส< Constructor ของคลาส JComboBox ท,@ส>าค0ญม,ด0งน,W

• public JComboBox()• public JcomboBox([]Object objs)

เมธอด addItem(Object item) เป"นเมธอดท��ใชส!าหร�บใส�รายการลงในออปเจ�ค choice

เมธอด setSelectedIndex(int pos) หร1อ setSelectedItem(Object item) เปRนเมธอดท,@ใช5ในการเล1อกใหแสดงรายการท��ต!าแหน�งหร1อขอความใดขอความหน(�งได

Page 61: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JComboBoximport javax.swing.JComboBox;import javax.swing.JFrame;

public class JComboBoxDemo {

private JFrame fr; private JComboBox cb;

public void init() { fr = new JFrame("JRadioButton Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); cb = new JComboBox(); cb.addItem("New Zealand"); cb.addItem("Thailand"); cb.addItem("USA"); cb.addItem("Japan"); cb.setSelectedItem("Thailand");

Page 62: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JComboBox fr.add(cb); fr.pack(); fr.setVisible(true); }

public static void main(String args[]) { JComboBoxDemo obj = new JComboBoxDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 63: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JListJList เปRนคลาสท,@ใช5สร5างอJอบเจกต<ท,@เปRนส?วนประกอบกราฟKกเพ"@อให5ผM5ใช5

สามารถเล"อกรายการคล5ายก0บ JComboBoxแตกต?างก0นตรงท,@ JList จะแสดงรายการหลายรายการConstructor ของคลาส JList ท,@ส>าค0ญม,ด0งน,W

• public JList()• public JList([]Object objs)

Page 64: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JListimport java.awt.*;import javax.swing.*;

public class JListDemo {

private JFrame fr; private JList list; private String[] choices = {"Java SE", "Java EE", "Java ME"};

public void init() { fr = new JFrame("JList Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); list = new JList(choices); list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION); fr.setLayout(new FlowLayout()); fr.add(list);

Page 65: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JList fr.pack(); fr.setVisible(true); }

public static void main(String args[]) { JListDemo obj = new JListDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 66: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

การสร5างเมนMเมนMเปRนออปเจJคของคลาสท,@ส"บทอดมาจากคลาสท,@ช"@อ JComponent คลาสท,@เก,@ยวข5องก0บเมนM ท,@ส>าค0ญม,ด0งน,W

• JMenuBar เปRนคลาสท,@ใช5ในการสร5างอJอบเจกต<ท,@เกJบกล6?มของอJอบเจกต<ของคลาส JMenu ซc@งจะปรากฏเปRนแถบเมนMโดยอJอบเจกต<ของคลาสน,Wจะต5องม,อJอบเจกต<ของคลาส JFrame ท,@คM?ก0น

• JMenu เปRนคลาสท,@ใช5ในการสร5างอJอบเจกต<ท,@เกJบกล6?มของอJอบเจกต<ของคลาส JMenuItem และต0วแยกรายการ (JSeparator)

• JMenuItem เปRนคลาสท,@ใช5ในการสร5างอJอบเจกต<ท,@เปRนรายการ• JCheckboxMenuItem เปRนคลาสท,@ใช5ในการสร5างอJอบเจกต<ท,@เปRนรายการโดยจะม,

เคร"@องหมายถMกท,@จะแสดงขcWนเม"@อรายการน,WถMกเล"อก• JRadioButtonMenuItem เปRนคลาสท,@ใช5ในการสร5างอJอบเจกต<ท,@เปRนรายการให5เล"อก

เพ,ยงต0วเด,ยวแบบ Radio Button

Page 67: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

รMปแสดงคลาสท,@เก,@ยวข5องก0บเมนM

Page 68: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JMenuBarคลาส JMenuBar เปRนคลาสท,@จะแสดงเปRนแถบเมนMท,@ปรากฏอยM?บน JFrame

(ระบบปฏ)บ�ต)การบางประเภทอาจจะไม�แสดงแถบของเมน� หากไม�ม�รายการในเมน�)

Constructor ของคลาส JMenuBar ท,@ส>าค0ญม,ด0งน,W • public JMenuBar()

เราสามารถท��จะใส�ออปเจ�คของคลาส JMenuBar ลงใน Container ไดโดยใชเมธอด setJMenuBar()

Page 69: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JMenuJMenu เปRนคลาสท,@ใช5ในการสร5างรายการท,@จะแสดงอยM?ข5างในอJอบเจกต<ของ

คลาส JMenuBar Constructor ของคลาส Menu ท,@ส>าค0ญม,ด0งน,W

• public JMenu()• public JMenu(String label)

เราสามารถก!าหนดหร1อเปล��ยนช1�อรายการในออปเจ�คของคลาส JMenu โดยใชเมธอด setLabel(String label)

เมธอด add() ในคลาส JMenuBar ใชในการใส�ออปเจ�คของคลาส JMenu ลงไปในออปเจJคของคลาส JMenuBar

Page 70: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง Menuimport javax.swing.*;

public class JMenuDemo {private JFrame fr;

private JMenuBar mb;private JMenu m1,m2,m3,m4;public void init() {

fr = new JFrame("JMenu Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

mb = new JMenuBar();m1 = new JMenu("File");m2 = new JMenu("Edit");m3 = new JMenu("View");m4 = new JMenu("Help");

Page 71: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง Menufr.setJMenuBar(mb);mb.add(m1);

mb.add(m2); mb.add(m3);

mb.add(m4);fr.setSize(200,150);fr.setVisible(true);

}public static void main(String args[]) {

JMenuDemo mm = new JMenuDemo();mm.init();

}}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 72: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JMenuItemค1อรายการย�อยท��อย��ในออปเจ�คของคลาส JMenu Constructor ของคลาส JMenuItem ท,@ส>าค0ญม,ด0งน,W

• public JMenuItem()• public JMenuItem(String label)• public JMenuItem(String label, int mnemonic)

เราสามารถท��จะใส�ออปเจ�คของคลาส JMenuItem ลงไปในออปเจ�คของคลาส JMenu ได5โดยใชเมธอด add()

เราสามารถท,@จะก>าหนดค,ย<ท,@เปRน mnemonicของรายการท,@อยM?ในอJอบเจกต<ของคลาส JMenuItem ได5โดยค>าส0@ง setMnemonic()

Page 73: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ข0WนตอนการสรางเมนMสรางออปเจ�คของคลาส JMenuBar แลวใส�ลงไปในออปเจ�คของคลาส

ประเภท Container เช�น JFrameสรางออปเจ�คของคลาส JMenu แลวใส�ลงไปในออปเจ�คของคลาส JMenuBar โดยท,@สามารถสร5างออปเจJคของคลาส JMenu ได5มากกว?าหน(�งออปเจ�ค

สรางออปเจ�คของคลาส JMenuItem แลวใส�ลงไปในออปเจ�คของคลาส JMenu โดยท,@สามารถสร5างออปเจJคของคลาส JMenuItem ได5มากกว?าหน(�งออปเจ�ค

Page 74: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JMenuItemimport javax.swing.*;

public class JMenuItemDemo { private JFrame fr; private JMenuBar mb; private JMenu m1, m2, m3, m4; private JMenuItem mi1, mi2, mi3, mi4;

public void init() { fr = new JFrame("MenuItem Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); mb = new JMenuBar(); m1 = new JMenu("File"); m1.setMnemonic('F'); m2 = new JMenu("Edit"); m3 = new JMenu("View"); m4 = new JMenu("Help"); fr.setJMenuBar(mb); mb.add(m1); mb.add(m2);

Page 75: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JMenuItem mb.add(m3); mb.add(m4);

mi1 = new JMenuItem("New"); mi2 = new JMenuItem("Open"); mi3 = new JMenuItem("Save"); mi4 = new JMenuItem("Exit"); m1.add(mi1); m1.add(mi2); m1.addSeparator(); m1.add(mi3); m1.addSeparator(); m1.add(mi4); fr.setSize(200, 200); fr.setVisible(true); } public static void main(String args[]) { JMenuItemDemo mid = new JMenuItemDemo(); mid.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 76: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส JCheckBoxMenuItemค1อรายการเมน�ท��ม�เคร1�องหมายระบ2ว�ารายการน�4ถ�กเล1อกConstructor ของคลาส JCheckBoxMenuItem ท,@ส>าค0ญม,ด0งน,W

• public JCheckBoxMenuItem()• public JCheckBoxMenuItem(String label)• public JCheckBoxMenuItem(String label, boolean state)

เราสามารถท��จะเปล��ยนสถานะของออปเจ�คชน)ด JCheckBoxMenuItem ได5โดยใชเมธอด setState(boolean b)

Page 77: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง JCheckBoxMenuItemimport javax.swing.*;

public class JCheckBoxMenuDemo {private JFrame fr;private JMenuBar mb;private JMenu m1,m2,m3;private JMenuItem mi;private JCheckBoxMenuItem cbm;public void init() {

fr = new JFrame("JCheckboxMenuItem Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

mb = new JMenuBar();m1 = new JMenu("File");m2 = new JMenu("Edit");m3 = new JMenu("View");fr.setJMenuBar(mb);mb.add(m1);mb.add(m2);

Page 78: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดง CheckboxMenuItemmb.add(m3);mi = new JMenuItem("Toolbars");cbm = new JCheckBoxMenuItem("Status Bar", true);m3.add(mi);m3.add(cbm);fr.setSize(200,200);fr.setVisible(true);

}public static void main(String args[]) {

JCheckBoxMenuDemo obj= new JCheckBoxMenuDemo();obj.init();

}}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 79: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ข0WนตอนการสรางเมนMย?อยสรางออปเจ�คของคลาส JMenuBar แลวใส�ลงไปในออปเจ�คของคลาส

ประเภท Container เช�น JFrameสรางออปเจ�คของคลาส JMenu แลวใส�ลงไปในออปเจ�คของคลาส JMenuBar

สรางออปเจ�คของคลาส JMenu ส>าหร0บเปRนเมนMย?อย แลวใส�ลงไปในออปเจ�คของคลาส JMenu ท,@เปRนเมนMหล0ก

สรางออปเจ�คของคลาส JMenuItem แลวใส�ลงไปในออปเจ�คของคลาส JMenu ท,@เปRนเมนMย?อย

Page 80: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดงเมนMย?อยimport javax.swing.*;public class SubmenuDemo { private JFrame fr; private JMenuBar mb; private JMenu m1, m2, m3, ms1; private JMenuItem mi2, mi3, mi4, msi1, msi2;

public void init() { fr = new JFrame("SubMenuItem Demo"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); mb = new JMenuBar(); m1 = new JMenu("File"); m2 = new JMenu("Edit"); m3 = new JMenu("View"); fr.setJMenuBar(mb); mb.add(m1); mb.add(m2); mb.add(m3);

Page 81: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดงเมนMย?อย ms1 = new JMenu("New"); mi2 = new JMenuItem("Open"); mi3 = new JMenuItem("Save"); mi4 = new JMenuItem("Exit"); m1.add(ms1); m1.add(mi2); m1.addSeparator(); m1.add(mi3); m1.addSeparator(); m1.add(mi4); msi1 = new JMenuItem("Window"); msi2 = new JMenuItem("Message"); ms1.add(msi1); ms1.addSeparator(); ms1.add(msi2); fr.setSize(200, 200); fr.setVisible(true); }

Page 82: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดงเมนMย?อย

public static void main(String args[]) { SubmenuDemo obj = new SubmenuDemo(); obj.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 83: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ค2ณล�กษณะของคลาส Componentส?วนประกอบกราฟKกต?างๆจะม,ค6ณล0กษณะอ"@นอาท�เช?น รMปแบบของฟอนต< ส,

ของพ"Wนหล0งหร"อส,ของพ"Wนหน5า (Foreground) เราสามารถท,@จะก>าหนดค6ณล0กษณะของส?วนประกอบกราฟKกได5 โดยปกต�ส?วนประกอบกราฟKกจะใช5ค6ณล0กษณะแบบเด,ยวก0บออปเจJคประเภท Container ท,@บรรจ6อยM?เว5นแต?จะม,การก>าหนดค6ณล0กษณะเฉพาะของส?วนประกอบกราฟKกน0Wนๆ

เมธอดท,@ใช5ในการก>าหนดค6ณล0กษณะของส?วนประกอบกราฟKก จะอยM?ในคลาส Component โดยม,เมธอดท,@ส>าค0ญค"อ• setFont(Font f)• setForeground(Color c)• setBackground(Color c)

Page 84: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Fontเราสามารถสร5างออปเจJคของคลาส Font เพ"@อใช5ในการก>าหนดฟอนต<ได5Constructor ของคลาส Font ท,@ส>าค0ญม,ด0งน,W

• public Font(String name,int style,int size)— name ค1อช1�อฟอนต3— style ค1อร�ปแบบของฟอนต3 เช�น Font.PLAIN,Font.BOLD, Font.ITALIC

— size ค1อขนาดของฟอนต3เราสามารถก!าหนดฟอนต3ใหก�บออปเจ�คของคลาส Component โดยใช

เมธอด setFont()

Page 85: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

คลาส Colorเราสามารถสร5างออปเจJคของคลาส Color เพ"@อใช5ในการก>าหนดส,ได5Constructor ของคลาส Color ท,@ส>าค0ญม,ด0งน,W

• public Color(int r,int g,int b)— โดยท,@ r,g,b ค"อค?าความเข5มของแสงส,แดง เข,ยว และนW>าเง�น ตามล>าด0บ

ต0วอย?างเช?น• yellow = new Color(255,255,0);• black = new Color(0,0,0);

Page 86: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดงค6ณล0กษณะimport java.awt.*;import javax.swing.*;

public class AttributeDemo { private JFrame fr; private JButton bn1, bn2, bn3;

public void init() { fr = new Jframe("ShowAttribute"); fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); bn1 = new JButton("OK"); bn2 = new JButton("Cancel"); bn3 = new JButton("Help"); fr.setLayout(new FlowLayout()); fr.add(bn1); fr.add(bn2); fr.add(bn3);

Page 87: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

ต�วอย�างโปรแกรมแสดงค6ณล0กษณะbn2.setFont(new Font("TimesRoman", Font.BOLD, 16));fr.getContentPane().setBackground(Color.blue);

bn2.setForeground(Color.red); fr.setSize(200, 150); fr.setVisible(true); }

public static void main(String args[]) { AttributeDemo ad = new AttributeDemo(); ad.init(); }}

ผลล0พธ<ท,@ได5จากการร0นโปรแกรม

Page 88: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

สร6ปเน"Wอหาของบทคลาสท,@อยM?ในแพคเกJจ java.awt สามารถน>ามาใช5สร5าง GUI แบบ Look

and Feel ตามแพลตฟอร<มท,@ใช5งานได5 โดยม,คลาส Component เปRน Superclass ของท6กคลาสท,@เปRนคลาสประเภทต0วใส?ส?วนประกอบกราฟKกและคลาสประเภทส?วนประกอบกราฟKก

Swing เปRนแพคเกJจท,@ม,ส?วนประกอบกราฟKกท,@ม,ค6ณล0กษณะและรMปแบบท,@ด,กว?าส?วนประกอบกราฟKกของแพคเกJจ AWT และสามารถก>าหนดรMปแบบของ look and feel ท,@ท>าให5ได5โปรแกรม GUI ท,@ม,รMปแบบของกราฟKกเหม"อนก0นในท6กแพลตฟอร<ม โดยก>าหนดในแพคเกJจช"@อ javax.swing

คลาส Component อยM?ในแพคเกJจ AWT เปRน superclass ของคลาสประเภทส?วนประกอบกราฟKกท6กคลาส

คลาส Container อยM?ในแพคเกJจ AWT เปRนคลาสประเภทต0วใส?ส?วนประกอบกราฟKก ส"บทอดมาจากคลาสท,@ช"@อComponent

Page 89: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

สร6ปเน"Wอหาของบทคลาสประเภทต0วใส?ส?วนประกอบกราฟKกท,@ส>าค0ญในแพคเกJจ AWT ค"อคลาส

Frame และ Panelคลาสประเภทส?วนประกอบกราฟKกท,@ส>าค0ญในแพคเกJจ AWT ค"อ Button,

Label, TextField, TextArea, Checkbox, Choice และ ListรMปแบบการจ0ดวางผ0งส?วนประกอบกราฟKกในต0วใส?ส?วนประกอบกราฟKกม,

ท0Wงหมด 5 รMปแบบค"อ BorderLayout, FlowLayout, GridLayout, CardLayout และ GridBagLayout

การจ0ดวางผ0งของส?วนประกอบกราฟKกแบบ BorderLayoutจะเปRนการวางตามท�ศต?างๆ ได5 5 ท�ศ ส?วน FlowLayout จะวางไว5ในต>าแหน?งบนส6ดโดยเร,ยงจากซ5ายไปขวา ส>าหร0บ GridLayoutจะวางเร,ยงจากซ5ายไปขวา และบนลงล?างในช?องย?อยท,@ม,ขนาดเท?าก0น ตามจ>านวนแถวและคอล0มน<ท,@ได5ระบ6ไว5

คลาสประเภทต0วใส?ส?วนประกอบกราฟKกท,@ส>าค0ญในแพคเกJจ Swing ค"อคลาส JFrame และ JPanel

Page 90: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

สร6ปเน"Wอหาของบทคลาสประเภทส?วนประกอบกราฟKกท,@ส>าค0ญในแพคเกJจ Swing ค"อ JButton,

JLabel, JTextField, JTextArea, JCheckBox, JRadioButton, JComboBox และJList

JLabel จะแสดงข5อความ ซc@งผM5ใช5ไม?สามารถปwอนข5อความได5 แต?ส>าหร0บ JTextField ผM5ใช5สามารถปwอนข5อความได5ยาวหนc@งบรรท0ด ส?วน JtextArea ผM5ใช5สามารถปwอนข5อความได5หลายบรรท0ด

JCheckBoxจะเปRนช?องให5ผM5ใช5เล"อกหร"อไม?เล"อกโดยสามารถเล"อกได5หลายช?องพร5อมก0น ซc@งจะแตกต?างจาก JRadioButton ท,@จะสามารถเล"อกได5เพ,ยงช?องเด,ยวเท?าน0Wน

JComboBoxจะแสดงรายการท,@ถMกเล"อกเพ,ยงรายการเด,ยว โดยจะแสดงหลายรายการเม"@อผM5ใช5คล�กเมาส<เท?าน0Wน ซc@งจะแตกต?างจากJList ท,@จะสามารถแสดงได5หลายรายการพร5อมก0น

Page 91: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

สร6ปเน"Wอหาของบทคลาสท,@จะน>ามาใช5ในการแสดงแถบเมนMและเมนMย?อยในแพคเกJจ Swing ค"อ

JMenuBar, JMenu และ JMenuItemคลาส Font และ Color จะถMกน>ามาใช5ในกรณ,ท,@ต5องการระบ6ค6ณล0กษณะ

ฟอนต<และส,ของต0วใส?ส?วนประกอบกราฟKกและส?วนประกอบกราฟKก

Page 92: Java Programming: การสร้างส่วนต่อประสานกราฟิกกับผู้ใช้ (Java GUI)

แบบฝ{กห0ดข5อท,@ 1

• จากโปรแกรมจ>าลองระบบธนาคาร ให5ทดลองเข,ยน GUI โดยใช5แพคเกJจ Swing ท,@ท>าหน5าท,@เปRนส?วนต�ดต?อก0บผM5ใช5 (User Interface) ให5พน0กงานของธนาคารสามารถเร,ยกดMรายช"@อลMกค5า บ0ญช,ยอดเง�น และม,ฟ|งก<ช0นในการฝากและถอนเง�นได5

ข5อท,@ 2• ทดลองปร0บปร6ง GUI ด0งกล?าวโดยเพ�@มเมนMต?างๆ