บทที่ 12 กราฟฟิก

หนาจอแสดงผลแบบกราฟฟก
Graphic User Interface
วัตถุประสงค
♦ เพื่อเรียนรูถึงสรางหนาจอการใชโปรแกรมแบบ Graphic ดวยหลักการของภาษาเชิงวัตถุ
♦ เพื่อเรียนรูหลักการของ Event-Driven Programming
♦ เพื่อศึกษาการเรียกใชงานคลาสที่เปนสวนประกอบของวินโดวดวยภาษาเชิงวัตถุ
♦ เพื่อศึกษาการเรียกใชงานวัตถุจาก awt และ java.swing
♦ เพื่อศึกษาการวางวัตถุบนคอนเทนเนอร
บทที่
12

บทที่ 12 หนาจอแสดงผลแบบกราฟฟก หนาที่
เอกสารประกอบการสอน 305272 การเขียนโปรแกรมคอมพิวเตอรขั้นสูง
อ.สุรางคนา ระวังยศ
271
เนื้อหาบทเรียน
♦ Graphic user interface
♦ คลาสในแพ็คเก็จ java.awt
♦ Container
♦ Window
♦ Frame
♦ Dialog
♦ Button
♦ Color
♦ TextComponent
♦ การจัดการวางวัตถุ(Containers and Layout Managers)
♦ FlowLayout
♦ BorderLayout
♦ GridLayout
♦ คลาสในแพ็คเก็จ javax.swing
♦ JFrame
♦ JButton
♦ JPanel
♦ JText Fields
♦ JText Areas
♦ JMenu and JMenuItem

272
Graphic User Interface(GUI )
ในบทนี้จะทําการศึกษาเกี่ยวกับการสรางหนาจอที่รองรับการทํางานแบบกราฟฟก(Graphic User
Interface:GUI) โดยนําคลาสที่มีอยูแลวในจาวาแพ็คเก็จมาใชงาน ไดแก คลาสที่อยูในแพ็คเก็จ
AWT(Abstract Window Toolkit) และ คลาสที่อยูในแพ็คเก็จ Swing ซึ่งจะทําใหผูเรียนเขาใจการใชงาน
คลาสที่นํามาใชสรางหนาจอการของโปรแกรมที่สรางใหอยูในรูปแบบกราฟฟก
คลาส awt เปนแพ็คเก็จที่ใชสราง windows การที่เราจะเรียกใชงานคลาส awt ไดนั้น เราจะตอง
อิมพอรตแพ็กเกจ java.awt ไวในโปรแกรมดวย เนื่องจาก GUI component ตางๆ ที่สรางขึ้นจะเปน
คลาสที่สืบทอดคุณสมบัติจาก คลาส Component หรือคลาส MenuComponent คลาสใดคลาสหนึ่งเสมอ
ดังรูปที่นํามาจาก Help file ของภาษาจาวาดังนี้
ตัวอยาง class ใน AWT:Abstract Window Toolkit
จากภาพ คลาส Container , Checkbox และ Button เปนตัวอยางของคลาสที่เปน GUI
component ซึ่งทุกคลาสเปน sub class ของคลาส component ที่เกี่ยวของ
Sub Class ของ
คลาส Container

273
จากภาพ คลาส TextComponent , TextArea, TextField เปนอีกตัวอยางหนึ่งของซับคลาส GUI
component สวนคลาส TextArea และ คลาส TextField เปนซับคลาสของคลาส TextComponent และ
คลาส TextComponent จะเปนคลาสซับของคลาส Component
หากตองการทราบวาในการเขียนโปรแกรมภาษาจาวานั้นมี GUI component อะไรใหเรียกใชได
บาง ใหดูไดจาก Document ที่ดาวนโหลดจากเว็บไซดของ ซัน หรือดูไดจาก Java Document online ใน
เว็บไซด http://java.sun.com/j2se/1.5.0/docs/
คลาสในแพ็คเก็จ java.awt
จาวาไดเตรียมคลาสสําหรับการสรางโปรแกรมเพื่อรองรับการทํางานแบบ GUI ไวในแพ็คเก็จชื่อ
java.awt ตัวอยางเชน คลาส Frame, Button , Label หรือ TextComponet ซึ่งคลาสเหลานี้จัดไดวาเปน
GUI component พื้นฐาน และสามารถนําหลักการสราง GUI ใน java application นี้ไปใชในการสราง
GUI component ใน java appletไดเชนกัน รูปตอไปนี้เปนตัวอยางคลาสที่มีในแพ็คเก็ต java.awt จากคูมือ
โปรแกรม Java PlatformStandard Edition 6

274
คลาส Container
Container คือ สวนที่ใชสําหรับวาง GUI component ตางๆ โดยเรียกใชเมธอด add ของคลาส
Container ซึ่งหากพิจารณาจากเอกสารการเขียนโปรแกรมของภาษาจาวา(Document) ดังรูปหนากอนนี้
จะพบวาคลาส Container มีคลาสลูกมากมาย แตที่นิยมเรียกใชบอยๆ ไดแก คลาส Window และ Panel
คลาส Window
ตัวอยาง การเรียกใชงานคลาส Window
import java.awt.Window; // ทําการ import class Window
import java.awt.Frame; // ทําการ import class Frame
class TestWindow {
public static void main(String[] args) {
Window wd = new Window(new Frame());
// สราง instance ของคลาส Window โดยเรียก constructor สงผานออบเจ็คของ Frame
wd.setSize(200,100); // ทําการกําหนดขนาดของ window
wd.setVisible(true); // แสดง window ตามขนาดที่กําหนดไว
}
}
ผลลัพธที่ได
คลาส Frame
คลาส Frame เปนซับคลาสของคลาส Window
ตัวอยาง การเรียกใชงานคลาส Frame
import java.awt.Frame;
class TestFrame{
Frame f = new Frame("First Frame");//1
f.setSize(300,200);//2
f.setVisible(true);//3
}
}

275
ผลลัพธที่ไดคือ
บรรทัดที่ 1 ทําการสราง instance ของออบเจ็ค Frame ซึ่งเปนวินโดวที่มี title bar และปุมสําหรับ
ยอ/ขยาย/ปด โดยกําหนดสวนของ title วา “First Frame” ดังรูป โปรแกรมนี้จะสิ้นสุดเมื่อกด Ctrl+C
บนคําสั่ง Dos และหากใชโปรแกรม edit plus ในระบบ Window ใหกดปุม Ctrl+Alt+Del จะปรากฎ
Window Task Manager ขึ้น ใหคลิกไปที่แถบ Process แลวเลือก image name ที่ java.exe แลวคลิกปุม
End Process ดังรูปตอไปนี้ เนื่องจากหากตองคลิกปุมปด(X) บนหนาจอ Window เพื่อปดหนาจอ
จะตองศึกษาเรื่อง Event handling ในบทที่ 14 กอน
คลาส Dialog
คลาส Dialog เปนซับคลาสของคลาส Window
บริเวณนี้เรียกวา Frame

276
import java.awt.Dialog;
import java.awt.Label;
class TestDialog{
Frame f = new Frame("Second Frame");//1
Dialog d = new Dialog(f,"First Dialog");//2
Label lb = new Label("Hello java.awt.*");//3
d.add(lb);//4
d.pack();//5
f.setSize(200,100);//6
d.setVisible(true);//8
}
}
กอนทําการประกาศคลาสใหทําการ import คลาส Dialog, Frame และ Label เพื่อนํามาใชงาน
ภายในคลาส บรรทัดที่ 1 ทําการสราง Frame
บรรทัดที่ 2 ทําการสราง Dialog โดยกําหนดให Dialog นี้สงคา instance ของ f ไปและ
ทําการแสดงขอความบน Dialog วา “First Dialog”
บรรทัดที่ 3 ทําการสรางอินสแตนทของ Lable โดยกําหนดชื่อวา lb และ label นี้มี
ขอความ “Hello java.awt.*”
บรรทัดที่ 4 เรียกใช method add ของ Dialog เพื่อวาง label ลงบน Dialog Box
บรรทัดที่ 5 เรียกใช method pack ของคลาส Dialog จะทําการคํานวณและปรับขนาด
พื้นที่แสดงผลที่เหมาะสมใหกับไดอะล็อกบ็อกซโดยอัตโนมัติ โดยพิจารณาจากคอมโพเนนท
ตางๆ ที่นํามาวางบน Dialog box
บรรทัดที่ 6 การกําหนดขนาดของ Frame
บรรทัดที่ 7 กําหนดใหแสดง Frame บรรทัดที่ 8 กําหนดใหแสดง Dialog box
บริเวณนี้เรียกวา Dialog Box

277
คลาส Button
คลาส Button เปนซับคลาสของคลาส Component ใชสําหรับรองรับคําสั่งตางๆ ผานทาง
หนาจอโดยมีโครงสรางของ Constructor และ method ของคลาส ดังรูปที่นํามาจาก
http://java.sun.com/j2se/1.5.0/docs/
ตัวอยาง การสรางปุมคําสั่ง Button
import java.awt.Button;
class TestButton{
Frame f = new Frame("First Frame");
Button b = new Button("Click");//1
f.add(b);//2
f.setSize(300,200);//3
f.setVisible(true); }}

278
กอนทําการประกาศคลาสใหทําการ import คลาส Frame และ Button ในแพ็คเก็จ java.awt เพื่อ
นํามาใชงานภายในคลาส จากโปรแกรม
บรรทัดที่ 1 ทําการสรางอินสแตนทของ Button b แสดงขอความ “Click” ปรากฎบนปุม
บรรทัดที่ 2 ทําการเพิ่มปุม b ลงใน Frame
บรรทัดที่ 3 ทําการกําหนดขนาดของ Frame
คลาส Color
The Color Constants จากคลาส Color ในแพ็คเก็จ java.awt
Color.BLACK Color.MAGENTA
Color.BLUE Color.ORANGE
Color.CYAN Color.PINK
Color.DARK_GRAY Color.RED
Color.GRAY Color.WHITE
Color.GREEN Color.WHILE
Color.LIGHT_GRAY Color.YELLOW
ตัวอยาง การเรียกใชงานคลาส Color กําหนดให Frame มีพื้นหลังเปนสีเหลือง
import java.awt.Color;
import java.awt.Container;
public class ColoredWindowInitial {
public static final int WIDTH = 300;
public static final int HEIGHT = 200;
Frame colorFrame ;
public static void main(String args[]) {
ColoredWindowInit cw = new ColoredWindowInit();
cw.init();
}
void init(){
colorFrame = new Frame("Color Frame");
colorFrame.setSize(WIDTH,HEIGHT);

279
colorFrame.setBackground(Color.YELLOW);//กําหนดใหพื้นหลังเปนสีเหลือง
colorFrame.show();
}
}
คลาส TextCompoment
โครงสรางคลาส TextComponent เปนคลาสที่ทํางานเกี่ยวกับการรับขอมูลทางหนาจอ คลาส
TextComponent ไดกําหนด method ที่สามารถทําใหการแกขอความเกิดขึ้นไดหรือไม และมี method
อื่นๆ ที่สามารถใชงานกับขอความใน java application ได โดยมี 2 ซับคลาสคือ TextArea สําหรับรับ
ขอความหลายบรรทัด และ TextField สําหรับรับขอความทีละหนึ่งบรรทัด
ตัวอยาง การเรียกใชงาน TextField
TextField tf1, tf2, tf3, tf4;
tf1 = new TextField(); // สราง instance TextField ใหเปนชองวาง
tf2 = new TextField("", 20); //กําหนดใหสราง TextField โดยรับตัวอักษร 20 ตัวอักษร
tf3 = new TextField("Hello!"); // สราง TextField โดยแสดงขอความ “Hello!” ใน TextField
tf4 = new TextField("Hello", 30); // สราง TextField โดยกําหนดใหแสดงขอความ “Hello”
ใน TextField ที่มีความกวาง 30 ตัวอักษร

280
ตัวอยาง การเรียกใชงาน TextArea
TextArea txtarea = new TextArea("Hello", 5, 40);
จากโคดโปรแกรมทําการ สราง TextArea กวาง 40 ตัวอักษร 5 บรรทัด และแสดงขอความ
“Hello” บนหนาจอ
ตัวอยาง การสรางปุมหลายๆ ปุมวางไวบนเฟรม
class MultiButton{
Frame f = new Frame("First Frame");
Button b1 = new Button("Button 1");
f.add(b1);
f.add(b2);
f.add(b3);
f.setSize(300,200);
f.setVisible(true);
}
}
ผลลัพธที่ได จะแสดงเฉพาะ Button3 ดังรูป เนื่องจากโปรแกรมนี้ยังไมไดจัดการวาง layout ซึ่งจะ
ศึกษาในหัวขอถัดไป

281
การจัดการวางวัตถุ(Containers and Layout Managers)
ในตอนนี้จะบรรยายเกี่ยวกับการวางวัตถุบนหนาจอของภาษาจาวา(Layout manager) ซึ่งจาวาได
เตรียมคลาสตางๆ ไวใหกับผูเขียนโปรแกรมไดเรียกใชงาน ซึ่งทําใหวินโดวที่สรางสามารถยอ ขยาย
เคลื่อนยาย เลยเอาทของวินโดวที่สรางได
จากตัวอยางการเรียกใชคลาสตางๆ java.awt เมื่อทําการสรางออบเจ็คหลายๆ ออบเจ็ค และทํา
การเพิ่มเขาไปใน เฟรม หรือ วินโดว จะเกิดการซอนทับกันไมวาจะสรางกี่ออบเจ็คก็ตาม นั่นเปน
เพราะวาวินโดว หรือเฟรมเหลานั้น ยังไมไดทําการจัดการกับเลยเอาท ดังนั้นกอนที่จะวางวัตถุตางๆ
บนเฟรมหรือวินโดวจะตองทําการจัดการกับเลยเอาทกอน
จาวาไดเตรียมคลาสสําหรับจัดการกับเลยเอาทในเวอรชัน 1.6.0 ไวหลายรูปแบบทั้งที่อยูในแพ็ค
เก็จ java.awt และอยูใน javax.swing(ซึ่งตอไปเราจะศึกษาในเรื่องของคลาสที่อยูใน แพ็คเก็จ swing กัน)
เชน BorderLayout ,BoxLayout ,CardLayout ,FlowLayout ,GridBagLayout ,GridLayout ,GroupLayout,
SpringLayout เปนตน ในที่นี้จะขอกลาวเพียงบางรูปแบบ หากนิสิตตองการศึกษาเพิ่มเติม สามารถหา
ขอมูลไดที่ http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html
1. การวางวัตถุแบบโฟลเลยเอาท(FlowLayout)
การจัดการวาง layout แบบ FlowLayout เปนการจัดการ layout อยางงาย เมื่อเรียกใชอินสแตนท
ของ Flowlayout ทําการจัดวาง components จากซายไปขวา หรือจากบนลงลางตามลําดับ
กําหนดให frame หรือ container จัดวางตัวแบบ FlowLayout โดยเรียกใชเมธอด setLayout();
เชน frm.setLayout(new FlowLayout());
contentPane.setLayout(new FlowLayout());
ตัวอยาง การเรียกใชงาน FlowLayout เพื่อกําหนดการวาง Layout ใหกับปุม Button
import java.awt.FlowLayout;
public class testFlowLayoutAwt{
private Frame frm;
private Button btn1 , btn2 , btn3;
public static void main(String args[]){
testFlowLayoutAwt blf = new testFlowLayoutAwt();

282
blf.init();
}
void init(){
frm = new Frame("test border layout");
frm.setSize(WIDTH,HEIGHT);
frm.setLayout(new FlowLayout());
btn1 = new Button("First Label");
btn2 = new Button("Second Label");
btn3 = new Button("Third Label");
frm.add(btn1);
frm.add(btn2);
frm.add(btn3);
frm.setVisible(true);
frm.show();
}
}
ผลลัพธที่ได แสดงดังรูปทางดานลาง
หากทําการยอหรือขยายขนาดของวินโดวจะแสดงดังรูปตอไป

283
2. การวางวัตถุแบบบอรเดอรเลยเอาท(BorderLayout)
BorderLayout เปนวิธีการจัดการวาง components ตางๆ ใน content pane ของ JFrame หรือ
จัดการวางวัตถุบน Frame หรือ Window แบงเปน 5 บริเวณ โดยแบงตามทิศทาง ไดแก ทิศเหนือ ทิศใต
ทิศตะวันออก ทิศตะวันตก และตรงกลาง โดยแตละบริเวณมีชื่อเรียกดังภาพ
ตัวอยาง การวางวัตถุบน content pane ในการวางแบบ BorderLayout
contentPane.setLayout(new BorderLayout());
frm.setLayout(new BorderLayout());
ตัวอยาง การวาง button แบบ BorderLayout
import java.awt.BorderLayout;
public class testBorderLayoutAwt{
private Frame frm;
private Button btn1 , btn2 , btn3 , btn4;
testBorderLayoutAwt blf = new testBorderLayoutAwt();
blf.init();
}
void init(){
frm = new Frame("Border layout");
frm.setLayout(new BorderLayout()); // กําหนดใหเฟรมมีการจัดวางแบบ BorderLayout
btn1 = new Button("First Button");
btn2 = new Button("Second Button");
btn3 = new Button("Third Button");
btn4 = new Button("Fourth Button");
frm.add(btn1,BorderLayout.NORTH);// ปุม btn1 วางทิศเหนือ

284
frm.add(btn2,BorderLayout.SOUTH);// ปุม btn2 วาง ทิศใต
frm.add(btn3,BorderLayout.EAST);// ปุม btn3 วางทิศตะวันออก
frm.add(btn4,BorderLayout.WEST); // ปุม btn4 วางทิศตะวันตก
frm.show();
}
}
ผลลัพธที่ไดแสดงดังนี้
3. การวางวัตถุแบบกริดเลยเอาท(GridLayout)
การจัดวาง components แบบ GridLayout เปนการจัดวางวัตถุในลักษณะสองมิติ โดยระบุขนาด
ของ row และ column เชน
Container.setLayout(new GridLayout(2, 3));
- ทุกๆ entry จะไดขนาดเทากัน โดยไมแสดงเสน grid ของขอบ
- แตละ componet นํามาวางไวใน grid ตามลําดับการ add โดยวางตาม row เปนหลัก
- แตละ component จะถูกทําใหมีขนาดเทากับ grid
ตัวอยาง การวางปุม button แบบ gridLayout
import java.awt.GridLayout;
public class testGridLayoutAwt{
private Frame frm;
private Button btn1 , btn2 , btn3 , btn4;

285
testGridLayoutAwt blf = new testGridLayoutAwt();
blf.init();
}
void init(){
frm = new Frame("Border layout");
frm.setLayout(new GridLayout(2,4));
btn1 = new Button("First Button");
btn2 = new Button("Second Button");
btn3 = new Button("Third Button");
btn4 = new Button("Fourth Button");
frm.add(btn1);
frm.add(btn2);
frm.add(btn3);
frm.add(btn4);
frm.show();
}
}

286
คลาสในแพ็คเก็จ javax.swing
ใน java.swing ประกอบดวย GUI component จํานวนมากที่ใชสําหรับการสราง GUI
เชนเดียวกับคลาสตางใน java.awt คลาสใน javax.swing สืบทอดมาจากคลาส container ในแพ็คเก็ต
java.awt ดังนั้นหากตองการใชงานคลาสตางๆ ในแพ็คเก็ตนี้ตองทําการอิมพอรต javax.swing ไวใน
โปรแกรมดวย
สังเกตวาคลาสในแพ็คเก็จ javax.swing จะขึ้นตนดวยตัว J เชน JLabel, JButton ,JFrame เปน
ตน เหตุที่จาวาสรางคลาสตางๆ ใน javax.swing เนื่องจากคลาสใน java.awt เมื่อเรียกใชงานตาง plant
form แลวบาง component ไมเหมือนกับที่รันในอีก plant form หนึ่ง กลาวคือ สรางโปรแกรมบน
windows แลวนําไปรันบนระบบปฏิบัติการ linux แลวเกิดการผิดเพี้ยนในรูปแบบที่นําเสนอ ดังนั้น ทาง
ทีมพัฒนาจึงสรางคลาสใน javax.swing ขึ้นมาใชงานและเพิ่มความสามารถที่ซับซอนกวาคลาสที่มีใน
java.awt ใหกับคลาสตางๆ ใน javax.swing
หลักการทํางานของคลาสตางๆ ใน javax.swing ประกอบดวย 2 component หลักคือ top-level
container และ lightweight component
- top level container ประกอบดวยคอมโพเนนต 4 ตัวคือ JFrame , JApplet , JWindow และ
JDialog
- lightweight component เปนคอมโพเนนตอื่นๆ ของ javax.swing ที่ไมไดอยูในกลุม top
level container
โดยทั่วไป top level container สรางขึ้นเพื่อใชสําหรับวาง lightweight component ลงไปบนตัว
มัน แตอยางไรก็ตามเราไมสามารรถวาง component ลงบน top levelโดยตรง เราตองวาง component
เหลานั้นผานทาง content pane (ออบเจ็คของคลาส Container) ภายใน top level อีกทีหนึ่ง ซึ่งเรา
สามารถเขาถึง content pane ภายใน top level container หนึ่งๆ ไดโดยเรียกใชเมธอด getContentPane
ของ top level container นั้นๆ

287
คลาส JFrame
ตัวอยาง โปรแกรมการเรียกใชงาน JFrame
import javax.swing.JFrame;
class TestFrame{
JFrame f = new JFrame("First JFrame");// 1
f.setSize(300,200);//2
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//4
}
}
บรรทัดที่ 1 สรางอินสแตนทชื่อ f เปนออบเจ็คของคลาส JFrame กําหนดให title bar แสดง
ขอความ First JFrame
บรรทัดที่ 2 กําหนดขนาดของเฟรม กวาง 300 พิกเซลล สูง 200 พิกเซลล
บรรทัดที่ 3 กําหนดใหแสดงเฟรมนี้บนหนาจอ
บรรทัดที่ 4 หากทําการคลิกปุม (X) จะทําการปดหนาจอเฟรมนี้
คลาส JButton
ตัวอยาง โปรแกรมการเรียกใชงาน JButton , JFrame , Container เปนโปรแกรมที่แสดงวินโดวโดย
เรียกใชคลาส JFrame มาแสดง สวนของไตเติลของเฟรมแสดงขอความ “First Frame” และปรากฎปุม
ที่มีขอความ “Click to end program” แตไมสามารถกระทําการใดๆ กับวินโดวนี้ได ดังรูป

288
import javax.swing.JButton;
public class FirstSwingDemo {
JFrame firstWindow = new JFrame("First Frame");
Container contentPane = new Container();
// ตองทําการสราง container เพื่อเพิ่ม component ใน lightweight component บน top level component
firstWindow.setSize(WIDTH , HEIGHT);
// กําหนดขนาดของ Window
firstWindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//ทําให window นี้ปดเมื่อคลิกที่ปุม close (X) ของ window
JButton endButton = new JButton("Click to end program");
contentPane = firstWindow.getContentPane();
//กําหนดให contentPane เขาถึง content pane ภายในอินสแตนทของ firstWindow ได
contentPane.add(endButton);
//ทําการเพิ่มปุม endButton เขาไปใน contentPane
firstWindow.setVisible(true);
firstWindow.show();
}
}
ตัวอยาง การเรียกใชงาน FlowLayout , JFrame , JButton
public class testFlowLayout {

289
private JFrame jfrm;
private Container contentPane;
private JButton btn1 , btn2 , btn3;
testFlowLayout blf = new testFlowLayout();
blf.init();
}
void init(){
jfrm = new JFrame("test border layout");
jfrm.setSize(WIDTH,HEIGHT);
jfrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
contentPane = jfrm.getContentPane();
contentPane.setLayout(new FlowLayout());
btn1 = new JButton("First Label");
contentPane.add(btn1);
btn2 = new JButton("Second Label");
btn3 = new JButton("Third Label");
contentPane.setVisible(true);
jfrm.show();
}
}

290
ตัวอยาง การเรียกใชงาน Borderlayout, JFrame , JButton
import javax.swing.JLabel;
public class testBorder {
private JLabel lbl1 , lbl2 , lbl3;
testBorder blf = new testBorder();
blf.init();
}
void init(){
jfrm = new JFrame("test border layout");
lbl1 = new JLabel("First Label");
contentPane.add(lbl1 , BorderLayout.NORTH);
lbl2 = new JLabel("Second Label");
contentPane.add(lbl2, BorderLayout.SOUTH);
lbl3 = new JLabel("Third Label");
contentPane.add(lbl3, BorderLayout.CENTER);
jfrm.show();
}
}
ผลลัพธที่ได

291
contentPane.setLayout(new GridLayout( 2,4)); contentPane.setLayout(new GridLayout( 4,4));
ตัวอยาง การเรียกใชงาน Gridlayout , JFrame , JButton
public class testGirdLayout {
testGirdLayout blf = new testGirdLayout();
blf.init();
}
void init(){
jfrm = new JFrame("test grid layout");
contentPane.setLayout(new GridLayout( 4,4));
btn1 = new JButton("First Label");
btn2 = new JButton("Second Label");
btn3 = new JButton("Third Label");
jfrm.show();
}

292
คลาส JPanel
JPanel เปน class ที่เปนเสมือน container ที่ใชในการรวมกลุมของ object เล็กๆ เปน component
ใหญ(หรือเรียกวาเปน panel) หนาที่หลักของ JPanel คือ ทําการแบงสวนของ JFrame หรือ container
ตัวอยาง การใชงาน JPanel ในการจัดการกับ Layout
import javax.swing.JPanel;
public class testPanel {
private JPanel pan;
testPanel blf = new testPanel();
blf.init();
}
void init(){
contentPane.setLayout(new BorderLayout( ));
pan = new JPanel();
pan.setLayout(new GridLayout(1,3));
btn1 = new JButton("Magenta");
pan.add(btn1);
btn2 = new JButton("Cyan");
pan.add(btn2);
btn3 = new JButton("Orange");
pan.add(btn3);
contentPane.add( pan , BorderLayout.SOUTH);
jfrm.show(); }}

293
ตัวอยาง การเรียกใชงาน JLabel
class ColoredWindow extends JFrame{
public ColoredWindow(Color theColor){
super("No Charge for Color");
setSize(WIDTH , HEIGHT);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// โปรแกรมจะสิ้นสุดเมื่อ user คลิกปุม close
Container contentPane = getContentPane();
// The content pane is of type Container
contentPane.setBackground(theColor);
JLabel aLabel = new JLabel("Close-window button ");
contentPane.add(aLabel);
}
public ColoredWindow(){
this(Color.PINK);
//This is an invocation of the other constructor
}
}
public class DemoColoredWindow{
ColoredWindow w1 = new ColoredWindow();
w1.setVisible(true);
ColoredWindow w2 = new ColoredWindow(Color.YELLOW);
w2.setVisible(true);
}};

294
ผลลัพธที่ไดคือ จะปรากฎ 2 Frame ซอนกัน ตองนําเมาสลากแยกจากกัน window หนึ่งสีเหลือ อีกอันสี
ชมพู และเมื่อทําการคลิกปุมปด window จะปดพรอมกันทั้งคู ดังรูป
คลาส JText Field , JText Area
JTextField สําหรับรับขอความทีละ 1 บรรทัด
JTextArea สําหรับรับขอความทีละหลายบรรทัด
ตัวอยาง การใชงาน JTextField, JTextArea
import javax.swing.JTextField;
import javax.swing.JTextArea;
public class JTextFieldandArea {
JFrame frm;
Container contentPane;
JTextField txtFirst , txtSecond;
JTextArea txtAns;
JLabel lblFirst,lblSecond, lblAns;
Container con;
JPanel pn1 , pn2, pn3;
JButton bn1,bn2,bn3;
public static void main(String args[]) {
JTextFieldandArea frmTxt = new JTextFieldandArea();
สามารถเขียนเปน
import javax.swing.*

295
frmTxt.init();
}
void init(){
frm = new JFrame("Input Text");
frm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
lblFirst = new JLabel("Text 1 :"); // กําหนด label มีขอความ Text 1:
lblSecond = new JLabel("Text 2 :"); // กําหนด label มีขอความ Text 2
lblAns = new JLabel("Total");// กําหนด label มีขอความ Total
txtFirst = new JTextField(20); // กําหนดให textfield มีขนาด 20 ตัวอักษร
txtSecond = new JTextField(20); // กําหนดให textfield มีขนาด 20 ตัวอักษร
txtAns = new JTextArea( 5, 20); // กําหนดให textArea มีขนาด 20 ตัวอักษร 5 บรรทัด
bn1 = new JButton("Total");// สรางปุมคําสั่ง แสดงขอความ Total
bn2 = new JButton("Clear");// สรางปุมคําสั่ง แสดงขอความ Clear
bn3 = new JButton("Exit");// สรางปุมคําสั่ง แสดงขอความ Exit
contentPane = frm.getContentPane();
// รับคา ContentPane ของ เฟรมหลักไวที่ Container
contentPane.setLayout(new BorderLayout( ));
// กําหนด Container วาง layout แบบ BorderLayout
pn1 = new JPanel();
pn1.setLayout(new GridLayout(2,2));
//สราง JPanel และกําหนดใหวางวัตถุแบบ GridLayout ขนาด 2x2
pn1.add(lblFirst);
pn1.add(txtFirst);
pn1.add(lblSecond);
pn1.add(txtSecond);
pn2 = new JPanel();
pn2.setLayout(new BorderLayout());
// สราง JPanel และกําหนดใหวางวัตถุแบบ BorderLayout
pn2.add(lblAns,BorderLayout.WEST);
pn2.add(txtAns,BorderLayout.CENTER);
pn3 = new JPanel();
pn3.setLayout(new FlowLayout());
//สราง JPanel และกําหนดใหวางวัตถุบน Panel นี้แบบ FlowLayout
pn3.add(bn1);
pn3.add(bn2);
pn3.add(bn3);
contentPane.add( pn1 , BorderLayout.NORTH);
//ทําการเพิ่ม JPanel ตัวแรกไวบน Container

296
contentPane.add(pn2,BorderLayout.CENTER);
//ทําการเพิ่ม JPanel ตัวที่สองไวบน Container
contentPane.add(pn3,BorderLayout.SOUTH);
//ทําการเพิ่ม JPanel ตัวที่สามไวบน Container
frm.show();
}
}
คลาส JMenu and JMenuItem
import javax.swing.JMenu;
import javax.swing.JMenuItem;
import javax.swing.JMenuBar;
public class JMenuBarItem {
private JMenu colorMenu;
private JMenuItem pinkChoice , yellowChoice ,orangeChoice ;
private JMenuBar bar;
เพื่อสราง menu bar ใหกับ window

297
JMenuBarItem blf = new JMenuBarItem();
blf.init();
}
void init(){
colorMenu = new JMenu("Add color"); // สรางเมนูหลัก
pinkChoice = new JMenuItem("Pink"); // สรางเมนูยอยที่ 1
colorMenu.add(pinkChoice);// เพิ่มเมนูยอยที่ 1 เขาไปในเมนูหลัก
yellowChoice = new JMenuItem("Cyan");//สรางเมนูยอยที่ 2
colorMenu.add(yellowChoice); // เพิ่มเมนูยอยที่ 2 เขาไปในเมนูหลัก
colorMenu.addSeparator();// ใสเสนเพื่อแบงกลุมเมนู
orangeChoice = new JMenuItem("Orange");//สรางเมนูยอยที่ 3
colorMenu.add(orangeChoice); // เพิ่มเมนูยอยที่ 3 เขาไปในเมนูหลัก
bar = new JMenuBar();
bar.add(colorMenu); // เพิ่มเมนูหลักเขาไปใน JMenuBar ที่ชื่อ bar
jfrm.setJMenuBar(bar);// ทําการกําหนดให bar อยูใน frame ที่สรางไว
contentPane.setVisible(true); // แสดง container
jfrm.show();// แสดง frame
}
}
ผลลัพธที่ไดแสดงดังรูปซาย เมื่อคลิกที่เมนู Add Color จะปรากฎเมนูยอย Pink , Yellow และ Orange
ดังรูป

298
แบบฝกหัด
1 ใหเขียนโปรแกรมแสดงหนาจอดังนี้
JPasswordField แสดงดอกจัน (*)
มื่อผูใชคียหนึ่งตัวอักษร

299

บทที่ 12 กราฟฟิก

Recommended

Recommended

More Related Content

Similar to บทที่ 12 กราฟฟิก

Similar to บทที่ 12 กราฟฟิก (17)

More from Theeravaj Tum

More from Theeravaj Tum (20)

บทที่ 12 กราฟฟิก