บทที่ 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{ public static void main(String[] args) { 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.Frame; import java.awt.Label; class TestDialog{ public static void main(String[] args) { 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 f.setVisible(true);//7 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.Frame; import java.awt.Button; class TestButton{ public static void main(String[] args) { 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.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” บนหนาจอ ตัวอยาง การสรางปุมหลายๆ ปุมวางไวบนเฟรม import java.awt.Frame; import java.awt.Button; class MultiButton{ public static void main(String[] args) { Frame f = new Frame("First Frame"); Button b1 = new Button("Button 1"); Button b2 = new Button("Button 2"); Button b3 = new Button("Button 3"); 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; import java.awt.Button; import java.awt.Frame; public class testFlowLayoutAwt{ public static final int WIDTH = 300; public static final int HEIGHT = 200; 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; import java.awt.Button; import java.awt.Frame; public class testBorderLayoutAwt{ public static final int WIDTH = 300; public static final int HEIGHT = 200; private Frame frm; private Button btn1 , btn2 , btn3 , btn4; public static void main(String args[]){ testBorderLayoutAwt blf = new testBorderLayoutAwt(); blf.init(); } void init(){ frm = new Frame("Border layout"); frm.setSize(WIDTH,HEIGHT); 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.setVisible(true); 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; import java.awt.Button; import java.awt.Frame; public class testGridLayoutAwt{ public static final int WIDTH = 300; public static final int HEIGHT = 200; private Frame frm; private Button btn1 , btn2 , btn3 , btn4;



285

public static void main(String args[]){ testGridLayoutAwt blf = new testGridLayoutAwt(); blf.init(); } void init(){ frm = new Frame("Border layout"); frm.setSize(WIDTH,HEIGHT); 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.setVisible(true); 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{ public static void main(String[] args) { JFrame f = new JFrame("First JFrame");// 1 f.setSize(300,200);//2 f.setVisible(true);//3 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.JFrame; import javax.swing.JButton; import java.awt.Container; public class FirstSwingDemo { public static final int WIDTH = 300; public static final int HEIGHT = 200; public static void main(String args[]){ 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 import javax.swing.JFrame; import javax.swing.JButton; import java.awt.Container; import java.awt.FlowLayout; public class testFlowLayout { public static final int WIDTH = 300; public static final int HEIGHT = 200;



289

private JFrame jfrm; private Container contentPane; private JButton btn1 , btn2 , btn3; public static void main(String args[]){ 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"); contentPane.add(btn2); btn3 = new JButton("Third Label"); contentPane.add(btn3); contentPane.setVisible(true); jfrm.show(); } }



290

ตัวอยาง การเรียกใชงาน Borderlayout, JFrame , JButton import javax.swing.JFrame; import javax.swing.JLabel; import java.awt.Container; import java.awt.BorderLayout;

public class testBorder { public static final int WIDTH = 300; public static final int HEIGHT = 200; private JFrame jfrm; private Container contentPane; private JLabel lbl1 , lbl2 , lbl3; public static void main(String args[]){ testBorder blf = new testBorder(); 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 BorderLayout()); 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); contentPane.setVisible(true); jfrm.show(); } } ผลลัพธที่ได



291

contentPane.setLayout(new GridLayout( 2,4)); contentPane.setLayout(new GridLayout( 4,4));

ตัวอยาง การเรียกใชงาน Gridlayout , JFrame , JButton import javax.swing.JFrame; import javax.swing.JButton; import java.awt.Container; import java.awt.GridLayout; public class testGirdLayout { public static final int WIDTH = 300; public static final int HEIGHT = 200; private JFrame jfrm; private Container contentPane; private JButton btn1 , btn2 , btn3; public static void main(String args[]){ testGirdLayout blf = new testGirdLayout(); blf.init(); }

void init(){ jfrm = new JFrame("test grid layout"); jfrm.setSize(WIDTH,HEIGHT); jfrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); contentPane = jfrm.getContentPane(); contentPane.setLayout(new GridLayout( 4,4)); btn1 = new JButton("First Label"); contentPane.add(btn1); btn2 = new JButton("Second Label"); contentPane.add(btn2); btn3 = new JButton("Third Label"); contentPane.add(btn3); contentPane.setVisible(true); jfrm.show(); }



292

คลาส JPanel JPanel เปน class ที่เปนเสมือน container ที่ใชในการรวมกลุมของ object เล็กๆ เปน component

ใหญ(หรือเรียกวาเปน panel) หนาทีห่ลักของ JPanel คือ ทําการแบงสวนของ JFrame หรือ container ตัวอยาง การใชงาน JPanel ในการจดัการกับ Layout import javax.swing.JFrame; import javax.swing.JButton; import javax.swing.JPanel; import java.awt.Container; import java.awt.GridLayout; import java.awt.BorderLayout; public class testPanel { public static final int WIDTH = 300; public static final int HEIGHT = 200; private JFrame jfrm; private Container contentPane; private JButton btn1 , btn2 , btn3; private JPanel pan; public static void main(String args[]){ testPanel blf = new testPanel(); blf.init(); } void init(){ jfrm = new JFrame("test grid layout"); jfrm.setSize(WIDTH,HEIGHT); jfrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); contentPane = jfrm.getContentPane(); 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); contentPane.setVisible(true); jfrm.show(); }}



293

ผลลัพธที่ไดคือ ตัวอยาง การเรียกใชงาน JLabel import javax.swing.JFrame; import javax.swing.JLabel; import java.awt.Color; import java.awt.Container; class ColoredWindow extends JFrame{

public static final int WIDTH = 300; public static final int HEIGHT = 200; 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{ public static void main(String[] args) { 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 java.awt.BorderLayout; import java.awt.GridLayout; import java.awt.FlowLayout; import java.awt.Container; import javax.swing.JFrame; import javax.swing.JTextField; import javax.swing.JTextArea; import javax.swing.JButton; import javax.swing.JLabel; import javax.swing.JPanel; public class JTextFieldandArea { public static final int WIDTH = 300; public static final int HEIGHT = 200; 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.setSize(WIDTH,HEIGHT); 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

contentPane.setVisible(true); frm.show(); } } ผลลัพธที่ไดคือ

คลาส JMenu and JMenuItem import javax.swing.JMenu; import javax.swing.JMenuItem; import javax.swing.JMenuBar; import javax.swing.JFrame; import javax.swing.JPanel; import java.awt.Container; import java.awt.GridLayout; import java.awt.BorderLayout; import java.awt.Color; public class JMenuBarItem { public static final int WIDTH = 300; public static final int HEIGHT = 200; private JFrame jfrm; private Container contentPane; private JMenu colorMenu; private JMenuItem pinkChoice , yellowChoice ,orangeChoice ; private JMenuBar bar;

เพื่อสราง menu bar ใหกับ window



297

public static void main(String args[]){ JMenuBarItem blf = new JMenuBarItem(); blf.init(); } void init(){ jfrm = new JFrame("test grid layout"); jfrm.setSize(WIDTH,HEIGHT); jfrm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); contentPane = jfrm.getContentPane(); contentPane.setLayout(new BorderLayout()); 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 ใหเขยีนโปรแกรมแสดงหนาจอดังนี ้

2 ใหเขยีนโปรแกรมแสดงหนาจอดังนี ้

JPasswordField แสดงดอกจนั (*) มื่อผูใชคียหนึ่งตัวอักษร



299



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

Documents

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