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

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

ผศ.ธนศา เคร"อไวศยวรรณ
คณะเทคโนโลย,สารสนเทศ
สถาบ0นเทคโนโลย,พระจอมเกล5าเจ5าค6ณทหารลาดกระบ0ง

ว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

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

 อธบายการจ0ดการก0บรMปแบบของต0วอ0กขระ ส, และการจ0ดการก0บค6ณ
ล0กษณะอ"@นๆของส?วนประกอบกราฟKก

Java Foundation Class
 ระบบปฏบ0ตการส?วนใหญ?จะม,ส?วนตดต?อก0บผM5ใช5เปRนแบบกราฟKก (Graphical
User Interface เร,ยกย?อว?า GUI) ท0งน,เน"องจากใช5งานง?ายกว?า
W W @
 ภาษาจาวาจะสน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

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

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

AWT
 ในแพจเกจ java.awt ม,คลาสและอนเตอร<เฟสท,@ส!าคญด0งน,W
• Component
• Container
• LayoutManager (อนเตอร<เฟส)
• Graphics
• Color
• Font
• AWTEvent

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

คลาส 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น

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

แพคเกJจ Swing
 Swing เป"นแพคเกจส!าหรบพฒนาโปรแกรม 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

แพคเก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 โดยคลาสเหล?าน,จะม,ช"@อขcนต5นด5วยต0วอ0กษร ‘J’
W W

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

คลาสประเภท 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
@

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

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

คลาส Frame
 คลาส Frame จะม,รปแบบของ constructor ท,ส>าค0ญด0งน,W
M @
• public Frame()
• public Frame(String title)

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

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

public class FrameSample {
private Frame fr;
public void init() {
fr = new Frame("Frame Sample");
fr.setSize(200,150);
fr.show();
} ผลล0พธ<ท,@ได5จากการร0นโปรแกรม
public static void main(String args[]) {
FrameSample obj = new FrameSample();
obj.init();
}
}

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

 เมธอด show() เป"นเมธอดท,ใช5ในการแสดง Frame ท,@สร5างไว5
@

คลาส Panel
 เป"นคลาสประเภท Container ท>าให5สามารถใสสวนประกอบกราฟกตางๆได

 แตกตางจาก Frame ตรงทไมม title bar และไม?ม, resizable corner
 Applet เป"นคลาสทส1บทอดมาจากคลาส Panel

 โดยทวไปจะมตวจดการวางผงแบบ FlowLayout

 สามารถทจะบรรจ2 Panel ลงใน Frame ได

คลาส Dialog
 เป"นคลาสประเภท Container ท>าให5สามารถใสสวนประกอบกราฟกตางๆได

 คลาส Dialog เป"นคลาสทส1บทอดมาจากคลาส Window เพ1อใชเป"นอ)นพ2ต
และเอาต3พตกบผใช
2
 คลาส Dialog จะท!างานอยภายใตออบเจกต3ของคลาส Frame
 การสรางออบเจกต3ของคลาส Dialog จะตองระบ2ออบเจกต3ของคลาส Frame
ทเป"น Parent Frame
 คลาส Frame จะม,รปแบบของ constructor ท,ส>าค0ญด0งน,W
M @
• public Dialog(Frame parent)
• public Dialog(Frame parent,String title)
• public Dialog(Frame parent, boolean isModal)
• public Dialog(Frame parent, String title, boolean
isModal)

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

คลาส 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)

Panes
 ออปเจคของคลาส JFrame แตกตางกบ Frame ตรงทมหนาตาง (pane) อย
4 หนาตางดงน,W
• root pane
• layer pane
• glass pane
• content pane

เมธอด 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);

การใสสวนประกอบกราฟกใน JFrame
 โปรแกรม Java SE 5 ไดก!าหนดใหเราสามารถทจะใสสวนประกอบกราฟกลง
ใน JFrame ไดโดยตรง
 ค!าสงadd() และ setLayout() ใน JFrame จะเป"นการสงค!าสงไปยง content
pane โดยอตโนมต)
JFrame fr = new JFrame();
JButton bn1 = new JButton("Submit");
fr.add(bn1);

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

public class JFrameSample {

private JFrame fr;

fr = new JFrame("JFrame Sample");
fr.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
fr.setSize(200, 150);

}
fr.setVisible(true);
ผลล0พธ<ท,@ได5จากการร0นโปรแกรม
JFrameSample obj = new JFrameSample();
obj.init();
}
}

การจ0ดวางผ0งของส?วนประกอบกราฟKก
 โปรแกรม GUI ของภาษาจาวาจะจ0ดวางส?วนประกอบกราฟKกต?างๆลงใน
ออปเจJคของคลาสประเภท Container โดยอ0ตโนม0ต
 LayoutManager เปRนอนเตอร<เฟสท,@ใช0ในการก>าหนดวธ,การจ0ดวางผ0งส?วน
ประกอบกราฟKก
 คลาสท,@ implements อนเตอร<เฟสท,@ช"@อ LayoutManager เพ"อใช5เปRนต0ว
@
จ0ดวางผ0งของส?วนประกอบกราฟKกม,ทงหมด 5 คลาสค"อ
0W
• BorderLayout
• FlowLayout
• GridLayout
• CardLayout
• GridBagLayout

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

BorderLayout

 Frame โดยทวไปจะถMกก>าหนดให5ม,ตวจดวางผงเป"นแบบ BorderLayout

 Frame ท,ม,ต0วจ0ดวางผ0งเปRนแบบ BorderLayout จะท>าให5สามารถวางสวน
@
ประกอบกราฟกไดมากทส2ด 5 ออปเจJคตามต!าแหนงท)ศตางๆของ Frame ค1อ
ท)ศเหน1อ (NORTH) ท)ศใต (SOUTH) ท)ศตะวนออก (EAST) ท)ศตะวนตก
(WEST) และตรงกลาง (CENTER)
 ใชค!าสง new BorderLayout() ในการสรางตวจดวางผงแบบน4

BorderLayout

 ค!าสงในการใสสวนประกอบกราฟกค1อเมธอด add() แตจะตองมการระบ2
ต!าแหนงท)ศทตองการวางสวนประกอบ
 ต0วอย?างเชน
fr.add(bn1,BorderLayout.NORTH)

 หากไมระบ2ต!าแหนงท)ศ สวนประกอบจะถMกใสไวตรงกลาง

ตวอยางโปรแกรม
import java.awt.BorderLayout;
import java.awt.Container;
import javax.swing.JButton;

public class BorderLayoutSample {
private JFrame fr;
private JButton bn1, bn2, bn3, bn4, bn5;

fr = new JFrame("Button Sample");
bn1 = new JButton("B1");
bn5 = new Jbutton("B5");
fr.add(bn1, BorderLayout.NORTH);
fr.add(bn2, BorderLayout.SOUTH);
fr.add(bn3, BorderLayout.EAST);

fr.add(bn4, BorderLayout.WEST);
fr.add(bn5);
}

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


FlowLayout

 ต0วจ0ดวางผ0งแบบ FlowLayout จะจดวางผงสวนประกอบกราฟกจากซายไป
ขวา
 ถาความกวางของ Contanier ไมพอ ต0วจ0ดวางผ0งจะน!าสวนประกอบกราฟกท
เหล1อลงไปในต!าแหนงถดไปดานลาง
 Frame สามารถใชตวจดวางผงแบบน4ได5 โดยเรยกใช5เมธอด setLayout()
แลวสรางตวจดวางผงโดยใชค!าสง new FlowLayout() ด0งน,W
fr.setLayout(new FlowLayout());

import java.awt.*;
import javax.swing.*;

public class FlowLayoutSample {

private JFrame fr;
private JButton bn1, bn2, bn3;

bn1 = new JButton("Submit");
bn2 = new JButton("Cancel");
bn3 = new JButton("Exit");

fr.add(bn1);
fr.add(bn2);
fr.add(bn3);

}

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


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() ในการใสสวนประกอบกราฟกลงในแตละชองยอย โดยจะ
ใสเรยงจากซายไปขวาและบนลงลาง

import java.awt.*;

public class GridLayoutSample {
private JFrame fr;
private JButton bn1, bn2, bn3, bn4, bn5;
fr.setLayout(new GridLayout(3, 2));

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);
}
GridLayoutSample obj = new GridLayoutSample();
obj.init();
}
}


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

คลาสท,@เปRนสวนประกอบกราฟกในแพคเกJจ Swing
 คลาสท,เปRนสวนประกอบกราฟกทส!าคญในแพคเกJจ
@ Swing มดงน4
• JFrame
• JPanel
• JButton
• JLabel
• JTextField
• JTextArea
• JScrollbar
• JCheckBox
• JChoice

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

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

คลาส 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อความม,ดงน,W
0
• public void setText(String text)
• public String getText()
• public void setMnemonic(char c)
• public void setIcon(Icon c)
•

เมธอดของคลาส JComponent
 สวนประกอบกราฟกของSwing เพ)มค2ณลกษณะตางๆข(4นมามาก เรา
สามารถใชค2ณลกษณะเหลาน4โดยเร,ยกใชเมธอดในคลาส JComponent
 เมธอด setBorder(Border bd) ใชส!าหรบก!าหนดขอบใหกบสวน
ประกอบกราฟก
 เมธอด setToolTipText(String text)ใชส!าหรบก!าหนดขอความท
จะแสดงเป"น tooltip

คลาส JLabel
 ค1อสวนประกอบกราฟกทใชแสดงขอความยาวหน(งบรรทด ซc@งผM5ใช5ไม?สามารถ
ปwอนข5อความเข5าไปได5
 Constructor ของคลาส 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)

ตวอยางโปรแกรม JLabel
import java.awt.*;
import java.net.URL;

public class JLabelDemo {

private JFrame fr;
private JLabel label1, label2, label3;

ImageIcon icon = null;
fr = new JFrame("JLabel Sample");
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);

//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();
}

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


คลาส 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

ตวอยางโปรแกรม JTextField
import java.awt.*;

public class JTextFieldDemo {

private JFrame fr;
private JLabel l;
private JTextField tf;

fr = new JFrame("JTextField Demo");
l = new JLabel("Name: ");
tf = new JTextField("Numnonda", 15);
fr.add(l);
fr.add(tf);
fr.pack();

ตวอยางโปรแกรม JTextField
}

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


คลาส JTextArea
 ค1อสวนประกอบกราฟกเพ1อใหผใชป:อนขอความได และสามารถมจ!านวน
บรรทดไดหลายบรรทดตามทระบ2
 Constructor ของคลาส TextArea ท,ส>าค0ญม,ด0งน,W
@
•
public JtextArea()
•
public JTextArea(String Text)
• public JTextArea(String Text, int row, int col)
•
public JTextArea(int row, int col))

ตวอยางโปรแกรมแสดง JTextArea
import java.awt.*;
public class JTextAreaDemo {
private JFrame fr;
private JTextArea ta;

fr = new JFrame("JTextArea Demo");
ta = new JTextArea("Text Area", 5, 30);
JscrollPane jScrollPane = new JScrollPane(ta);
fr.add(jScrollPane);
fr.pack();
}
JTextAreaDemo obj = new JTextAreaDemo();
obj.init();
}
}

คลาส 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)

คลาส JRadioButton และ ButtonGroup

 เราสามารถทจะสรางตวเล1อกทเป"นแบบ Radio Button โดยใช
JRadioButton
 ในกรณน4จะก!าหนดใหออบเจกต3 JRadioButton หลายตวอยในกล2มของออบ
เจกต3ของคลาส ButtonGroup ซ(งจะตองใชเมธอด add() มขอความ (Label)
อยขางๆ
 คลาส ButtonGroup ไม?ใช?คลาสท,@เปRนส?วนประกอบกราฟKก แต?จะใช5ในกา
รสร5างอJอบเจกต<เพ"อก>าหนดกล6?มของ AbstractButton
@

ตวอยางโปรแกรมแสดง JCheckBox
import java.awt.FlowLayout;

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

fr = new JFrame("JCheckBox Demo");
c1 = new JCheckBox("Visual Basic");
c2 = new JCheckBox("C++", false);
c3 = new JCheckBox("Java", true);
fr.add(c1);
fr.add(c2);
fr.add(c3);

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

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


ตวอยางโปรแกรมแสดง JRadioButton
import java.awt.GridLayout;

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

fr = new JFrame("JRadioButton Demo");
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);

ตวอยางโปรแกรมแสดง JRadioButton
fr.setLayout(new GridLayout(3,1));
fr.add(c1);
fr.add(c2);
ผลล0พธ<ทได5จากการร0นโปรแกรม
,@
fr.add(c3);

fr.pack();
}

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

คลาส JComboBox
 คลาส JComboBox เปRนคลาสท,@ใช5ในการสร5างออปเจJคท,เปRนรายการให5ผM5ใช5
@
สามารถเล"อกได5
 คลาส JComboBox จะแสดงรายการปรากฏให5เหJนเฉพาะรายการท,@เล"อก
เพ,ยงรายการเด,ยว แต?จะแสดงรายการท0งหมดหากม,การคลกเมาส<
W
 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อขอความใดขอความหน(งได

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

public class JComboBoxDemo {

private JFrame fr;
private JComboBox cb;

fr = new JFrame("JRadioButton Demo");
cb = new JComboBox();
cb.addItem("New Zealand");
cb.addItem("Thailand");
cb.addItem("USA");
cb.addItem("Japan");
cb.setSelectedItem("Thailand");

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

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

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

คลาส JList
 JList เป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)

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

public class JListDemo {

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

fr = new JFrame("JList Demo");
list = new JList(choices);
list.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);
fr.add(list);

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

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


การสร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

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

คลาส JMenuBar
 คลาส JMenuBar เปRนคลาสท,@จะแสดงเปRนแถบเมนMท,@ปรากฏอยMบน JFrame
?
(ระบบปฏ)บต)การบางประเภทอาจจะไมแสดงแถบของเมน หากไมมรายการ
ในเมน)
 Constructor ของคลาส JMenuBar ท,ส>าค0ญม,ด0งน,W
@
• public JMenuBar()
 เราสามารถทจะใสออปเจคของคลาส JMenuBar ลงใน Container ไดโดย
ใชเมธอด setJMenuBar()

คลาส JMenu
 JMenu เปRนคลาสท,ใช5ในการสร5างรายการท,@จะแสดงอยM?ขางในอJอบเจกต<ของ
@ 5
คลาส JMenuBar
 Constructor ของคลาส Menu ท,@ส>าค0ญม,ด0งน,W
• public JMenu()
• public JMenu(String label)
 เราสามารถก!าหนดหร1อเปลยนช1อรายการในออปเจคของคลาส JMenu
โดยใชเมธอด setLabel(String label)
 เมธอด add() ในคลาส JMenuBar ใชในการใสออปเจคของคลาส JMenu
ลงไปในออปเจJคของคลาส JMenuBar

ตวอยางโปรแกรมแสดง Menu

public class JMenuDemo {
private JFrame fr;
private JMenuBar mb;
private JMenu m1,m2,m3,m4;
fr = new JFrame("JMenu Demo");
mb = new JMenuBar();
m1 = new JMenu("File");
m2 = new JMenu("Edit");
m3 = new JMenu("View");
m4 = new JMenu("Help");

ตวอยางโปรแกรมแสดง Menu
fr.setJMenuBar(mb);
mb.add(m1);
mb.add(m2);
mb.add(m3); ผลล0พธ<ท,@ได5จากการร0นโปรแกรม
mb.add(m4);
}
JMenuDemo mm = new JMenuDemo();
mm.init();
}
}

คลาส 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()
@

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

ตวอยางโปรแกรมแสดง JMenuItem

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

fr = new JFrame("MenuItem Demo");
m1.setMnemonic('F');
m4 = new JMenu("Help");
fr.setJMenuBar(mb);
mb.add(m1); mb.add(m2);

ตวอยางโปรแกรมแสดง 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(); ผลล0พธ<ท,@ได5จากการร0นโปรแกรม
m1.add(mi4);
}
JMenuItemDemo mid = new JMenuItemDemo();
mid.init();
}
}

คลาส 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)

ตวอยางโปรแกรมแสดง JCheckBoxMenuItem

public class JCheckBoxMenuDemo {
private JFrame fr;
private JMenu m1,m2,m3;
private JMenuItem mi;
private JCheckBoxMenuItem cbm;
fr = new JFrame("JCheckboxMenuItem Demo");
fr.setJMenuBar(mb);
mb.add(m1);
mb.add(m2);

ตวอยางโปรแกรมแสดง CheckboxMenuItem
mb.add(m3);
mi = new JMenuItem("Toolbars");
cbm = new JCheckBoxMenuItem("Status Bar", true);
m3.add(mi);
m3.add(cbm);
}
JCheckBoxMenuDemo obj= new JCheckBoxMenuDemo();
obj.init();
}
}


ข0WนตอนการสรางเมนMย?อย
 สรางออปเจคของคลาส JMenuBar แลวใสลงไปในออปเจคของคลาส
ประเภท Container เชน JFrame
 สรางออปเจคของคลาส JMenu แลวใสลงไปในออปเจคของคลาส
JMenuBar
 สรางออปเจคของคลาส JMenu ส>าหร0บเปRนเมนMยอย แลวใสลงไปในออป
?
เจคของคลาส JMenu ท,@เปRนเมนMหล0ก
 สรางออปเจคของคลาส JMenuItem แลวใสลงไปในออปเจคของคลาส
JMenu ท,เปRนเมนMย?อย
@

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

fr = new JFrame("SubMenuItem Demo");
fr.setJMenuBar(mb);
mb.add(m1);
mb.add(m2);
mb.add(m3);

?
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);
}

?
SubmenuDemo obj = new SubmenuDemo();
obj.init();
}
}


ค2ณลกษณะของคลาส Component
 ส?วนประกอบกราฟKกต?างๆจะม,ค6ณล0กษณะอ"@นอาทเช?น รMปแบบของฟอนต< ส,
ของพ"นหล0งหร"อส,ของพ"นหน5า (Foreground) เราสามารถท,@จะก>าหนด
W W
ค6ณล0กษณะของส?วนประกอบกราฟKกได5 โดยปกตส?วนประกอบกราฟKกจะใช5
ค6ณล0กษณะแบบเด,ยวก0บออปเจJคประเภท Container ท,บรรจ6อยM?เว5นแต?จะม,
@
การก>าหนดค6ณล0กษณะเฉพาะของส?วนประกอบกราฟKกน0นๆ W
 เมธอดท,@ใช5ในการก>าหนดค6ณล0กษณะของส?วนประกอบกราฟKก จะอยMใน
?
คลาส Component โดยม,เมธอดท,@ส>าค0ญค"อ
• setFont(Font f)
• setForeground(Color c)
• setBackground(Color c)

คลาส Font
 เราสามารถสร5างออปเจJคของคลาส Font เพ"@อใช5ในการก>าหนดฟอนต<ได5
 Constructor ของคลาส 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()

คลาส Color
 เราสามารถสร5างออปเจJคของคลาส Color เพ"อใช5ในการก>าหนดส,ได5
@
 Constructor ของคลาส Color ท,@ส>าค0ญม,ด0งน,W
• public Color(int r,int g,int b)
— โดยท,@ r,g,b ค"อค?าความเข5มของแสงส,แดง เข,ยว และนW>าเงน ตามล>าด0บ
• yellow = new Color(255,255,0);
• black = new Color(0,0,0);

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

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

fr = new Jframe("ShowAttribute");
bn1 = new JButton("OK");
bn2 = new JButton("Cancel");
bn3 = new JButton("Help");
fr.add(bn1);
fr.add(bn2);
fr.add(bn3);

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

AttributeDemo ad = new AttributeDemo();
ad.init();
}
}


สร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
@

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

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

W
 คลาสท,จะน>ามาใช5ในการแสดงแถบเมนMและเมนMยอยในแพคเกJจ Swing ค"อ
@ ?
JMenuBar, JMenu และ JMenuItem
 คลาส Font และ Color จะถMกน>ามาใช5ในกรณ,ท,@ตองการระบ6ค6ณล0กษณะ
5
ฟอนต<และส,ของต0วใส?ส?วนประกอบกราฟKกและส?วนประกอบกราฟKก

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

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

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

Recommended

Recommended

More Related Content

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

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

More from Thanachart Numnonda

More from Thanachart Numnonda (20)

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