Java Programming [5/12] : Build Graphical User Interface

บทที่ 5การสร้า งส่ว นติด ต่อ กับ ผู้ใ ช้ แบบกราฟฟิก (Build Graphical User Interface) อ.ธนิศ า เครือ ไวศยวรรณ คณะเทคโนโลยีส ารสนเทศ

วัต ถุป ระสงค์ แนะนำา ส่ว นประกอบทีส ำา คัญ ของ ่ JFC (Java Foundation Class) แนะนำา คลาสและอิน เตอร์เ ฟสทีส ำา คัญ ในแพคเก็จ ่ java.awt นิย ามความหมายของตัว ใส่ส ว นประกอบกราฟฟิก ่ (Container) ส่ว นประกอบกราฟฟิก (Graphical Component) และรูป แบบการจัด วางผัง (Layout Manager) แนะนำา คลาสทีเ ป็น ตัว ใส่ส ่ว นประกอบกราฟฟิก ่ และคลาสทีเ ป็น ส่ว นประกอบกราฟฟิก แบบต่า งๆ ่ อธิบ ายวิธ ีก ารใส่ส ว นประกอบกราฟฟิก ลงในตัว ใส่ ่

วัต ถุป ระสงค์ อธิบ ายการสร้า งเมนูโ ดยใช้ค ลาสในแพคเก็จ java.awt อธิบ ายการจัด การกับ รูป แบบของตัว อัก ขระ สี และการจัด การกับ คุณ ลัก ษณะอื่น ๆของส่ว น ประกอบกราฟฟิก อธิบ ายการจัด วางผัง GUI ทีม ค วามซับ ซ้อ น ่ ี แนะนำา แพคเก็จ javax.swing และคลาสต่า งๆทีม อ ยู่ ่ ี ในแพคเก็จ

Java Foundation Class ระบบปฏิบ ัต ิก ารส่ว นใหญ่จ ะมีส ว นติด ต่อ กับ ผู้ใ ช้ ่ เป็น แบบกราฟฟิก (Graphical User Interface เรีย กย่อ ว่า GUI) ทัง นีเ นือ งจากใช้ง านง่า ยกว่า ้ ้ ่ ภาษาจาวาจะสนับ สนุน การพัฒ นาโปรแกรม GUI ทีส ามารถใช้ง านได้ห ลายแพลตฟอร์ม โดยจะใช้ ่ ชุด คำา สัง เดีย วกัน ่ Java Foundation Class (JFC) ประกอบด้ว ยแพค เก็จ ต่า งๆดัง นี้ • Abstract Window Toolkit (AWT) • Swing • Java 2D • Accessibility • Drag and Drop

รูป แสดงส่ว นประกอบที่ส ำา คัญ ของ JFC

AWT แพคเก็จ AWT ประกอบด้ว ยคลาสต่า งๆทีเ ป็น่ ประเภทส่ว นประกอบกราฟฟิก (graphical component) เพื่อ นำา ไปใช้ใ นการพัฒ นา โปรแกรม GUI แพคเก็จ AWT จะช่ว ยในการสร้า งโปรแกรม GUI ประเภท look and feel ทีข ึ้น อยู่ก บ แพลตฟอร์ม ที่ ่ ั ใช้ง าน ภาษาจาวาได้ก ำา หนดแพคเก็จ AWT ขึ้น ไว้ต ั้ง แต่ โปรแกรมจาวาเวอร์ช ั่น แรก (JDK 1.0) โดยอยูใ น ่ แพคเก็จ ทีช ื่อ java.awt ่ แพคเก็จ AWT จะประกอบไปด้ว ยคลาสและ อิน เตอร์เ ฟสต่า งๆเพือ ใช้ใ นการพัฒ นาโปรแกรม ่

AWT ในแพจเก็จ java.awt มีค ลาสและอิน เตอร์เ ฟสที่ สำา คัญ ดัง นี้ • Component • Container • LayoutManager (อิน เตอร์เ ฟส) • Graphics • Color • Font • AWTEvent

รูป แสดงส่ว นประกอบที่ส ำา คัญ ของ AWT

คลาส Component การเขีย นโปรแกรม GUI นัน จะเป็น การสร้า งออป ้ เจ็ค ต่า งๆทีเ ป็น ออปเจ็ค ของคลาสทีเ ป็น ส่ว น ่ ่ ประกอบกราฟฟิก คลาสทีเ ป็น ส่ว นประกอบกราฟฟิก จะสืบ ทอดมา ่ จากคลาสทีช ื่อ ่ Component คลาสทีเ ป็น ่ subclass ของคลาส Component จะแบ่ง เป็น สองกลุ่ม คือ • คลาสที่เ ป็น คลาสประเภท Container เป็น คลาสที่ใ ช้ใ น การใส่ส ่ว นประกอบกราฟฟิก ต่า งๆ • คลาสที่เ ป็น ส่ว นประกอบกราฟฟิก อื่น ๆ อาทิเ ช่น Button,Choice และ List เป็น ต้น

รูป แสดงคลาสที่ส ืบ ทอดมาจาก คลาส Component

คลาสประเภท Container โปรแกรม GUI จะต้อ งมีก ารสร้า งออปเจ็ค ของ คลาสประเภท Container อย่า งน้อ ยหนึง ออปเจ็ค ่ ขึ้น มาก่อ น เพื่อ ใช้ใ นการใส่อ อปเจ็ค ของคลาสที่ เป็น ส่ว นประกอบกราฟฟิก อื่น ๆ คลาสประเภท Container ทีอ ยูใ นแพคเก็จ AWT ่ ่ มีด ง นี้ ั • Frame • Panel • Dialog • Applet คลาสประเภท Container เป็น คลาสทีส ืบ ทอดมา ่ จากคลาสทีช ื่อ ่ Component

คลาส Container คลาสทีช ื่อ Container ่ เป็น คลาสแบบ abstract ซึ่ง เราไม่ส ามารถทีจ ะสร้า งออปเจ็ค ของคลาสดัง ่ กล่า วได้ แต่จ ะต้อ งสร้า งออปเจ็ค ของคลาสอื่น ๆที่ สืบ ทอดมาจากคลาสทีช ื่อ Container แทน ่ คลาสทีช ื่อ Container ่ จะมีเ มธอดทีช ื่อ add()ทีใ ช้ใ น ่ ่ การใส่ส ่ว นประกอบกราฟฟิก อื่น ๆ เมธอดนีจ ะมีร ูป ้ แบบทีส ำา คัญ ดัง นี้ ่ • void add (Component c) • void add (Component c,int position)

คลาส Frame เป็น คลาสทีส ืบ ทอดมาจากคลาสทีช ื่อ Window ่ ่ ออปเจ็ค ของคลาส Frame จะประกอบด้ว ย title bar, resizable corner, icon และ menu bar

คลาส Frame คลาส Frame จะมีร ูป แบบของ constructor ที่ สำา คัญ ดัง นี้ • public Frame() • public Frame(String title) คลาส Frame จะมีเ มธอดทีเ กีย วข้อ งกับ การปรับ ่ ่ ขนาดของเฟรมดัง นี้ • boolean isResizable() • void setResizable(boolean canResize)

ตัว อย่า งโปรแกรม แสดง Frameimport java.awt.*; import java.awt.*;public class FrameSample { public class FrameSample { private Frame fr; private Frame fr; public void init() { public void init() { fr = new Frame("Frame Sample"); fr = new Frame("Frame Sample"); fr.setSize(200,150); fr.setSize(200,150); fr.show(); fr.show(); }} ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแ ี่ public static void main(String args[]) { public static void main(String args[]) { FrameSample obj = new FrameSample(); FrameSample obj = new FrameSample(); obj.init(); obj.init(); }}}}

อธิบ ายตัว อย่า งโปรแกรม คำา สั่ง fr = new Frame(“Frame Sample”); เป็น คำา สัง ที่ ่ ใช้ใ นการสร้า งออปเจ็ค ของคลาส Frame เมธอด setSize()เป็น เมธอดทีใ ช้ใ นการกำา หนด ่ ขนาดของ Frame เมธอด show() เป็น เมธอดทีใ ช้ใ นการแสดง ่ Frame ที่ สร้า งไว้

คลาส Button Button เป็น คลาสทีใ ช้ใ นการสร้า งออปเจ็ค ทีแ สดง ่ ่ เป็น ปุ่ม โดยจะมีข ้อ ความ (label) ปรากฎอยูบ นปุ่ม ่ Button เป็น คลาสทีส ืบ ทอดมาจากคลาสทีช ื่อ ่ ่ Component Constructor ของคลาส Button มีร ูป แบบดัง นี้ • public Button() • public Button(String label) เมธอดทีส ำา คัญ ในการจัด การกับ ข้อ ความมีด ัง นี้ ่ • public void setLabel(String label) • public String getLabel()

ตัว อย่า งโปรแกรม แสดง Frame ที่ม ี Buttonimport java.awt.*; import java.awt.*;public class ButtonSample { public class ButtonSample { private Frame fr; private Frame fr; private Button bn1; private Button bn1; public void init() { public void init() { fr = new Frame("Button Sample"); fr = new Frame("Button Sample"); bn1 = new Button("Submit"); bn1 = new Button("Submit"); fr.add(bn1); fr.add(bn1); fr.setSize(200,150); fr.setSize(200,150); fr.show(); ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแ ี่ fr.show(); }} public static void main(String args[]) { public static void main(String args[]) { ButtonSample obj = new ButtonSample(); ButtonSample obj = new ButtonSample(); obj.init(); obj.init(); }}}}

การจัด วางผัง ของส่ว นประกอบ กราฟฟิก โปรแกรม GUI ของภาษาจาวาจะจัด วางส่ว น ประกอบกราฟฟิก ต่า งๆลงใน ออปเจ็ค ของคลาสประเภท Container โดย อัต โนมัต ิ LayoutManager เป็น อิน เตอร์เ ฟสทีใ ชัใ นการกำา หนด ่ วิธ ีก ารจัด วางผัง ส่ว นประกอบกราฟฟิก คลาสที่ implements อิน เตอร์เ ฟสทีช อ LayoutManager ่ ื่ เพือ ใช้เ ป็น ตัว จัด วางผัง ของส่ว นประกอบกราฟฟิก ่ มีท ง หมด 5 คลาสคือ ั้ • BorderLayout • FlowLayout • GridLayout • CardLayout • GridBagLayout

BorderLayout Frame โดยทัว ไปจะถูก กำา หนดให้ม ีต ัว จัด วางผัง ่ เป็น แบบ BorderLayout Frame ทีม ต ัว จัด วางผัง เป็น แบบ BorderLayout จะ ่ ี ทำา ให้ส ามารถวางส่ว นประกอบกราฟฟิก ได้ม าก ทีส ด 5 ออปเจ็ค ตามตำา แหน่ง ทิศ ต่า งๆ ของ Frame ่ ุ คือ ทิศ เหนือ (NORTH) ทิศ ใต้ (SOUTH) ทิศ ตะวัน ออก (EAST) ทิศ ตะวัน ตก (WEST) และ ตรงกลาง (CENTER) ใช้ค ำา สัง new BorderLayout() ในการสร้า งตัว จัด วาง ่ ผัง แบบนี้

BorderLayout คำา สั่ง ในการใส่ส ว นประกอบกราฟฟิก คือ เมธอด ่ add()แต่จ ะต้อ งมีก ารระบุต ำา แหน่ง ทิศ ทีต ้อ งการ ่ วางส่ว นประกอบ ตัว อย่า งเช่น fr.add(bn1,BorderLayout.NORTH) หากไม่ร ะบุต ำา แหน่ง ทิศ ส่ว นประกอบจะถูก ใส่ไ ว้ ตรงกลาง

ตัว อย่า งโปรแกรมimport java.awt.*; import java.awt.*;public class BorderLayoutSample { public class BorderLayoutSample { private Frame fr; private Frame fr; private Button bn1, bn2, bn3, bn4, bn5; private Button bn1, bn2, bn3, bn4, bn5; public void init() { public void init() { fr = new Frame("Button Sample"); fr = new Frame("Button Sample"); bn1 = new Button("B1"); bn1 = new Button("B1"); bn2 = new Button("B2"); bn2 = new Button("B2"); bn3 = new Button("B3"); bn3 = new Button("B3"); bn4 = new Button("B4"); bn4 = new Button("B4"); bn5 = new Button("B5"); bn5 = new Button("B5"); fr.add(bn1,BorderLayout.NORTH); fr.add(bn1,BorderLayout.NORTH); fr.add(bn2,BorderLayout.SOUTH); fr.add(bn2,BorderLayout.SOUTH); fr.add(bn3,BorderLayout.EAST); fr.add(bn3,BorderLayout.EAST);

ตัว อย่า งโปรแกรม fr.add(bn4,BorderLayout.WEST); fr.add(bn4,BorderLayout.WEST); fr.add(bn5,BorderLayout.CENTER); fr.add(bn5,BorderLayout.CENTER); fr.setSize(200,150); fr.setSize(200,150); fr.show(); fr.show(); }} public static void main(String args[]) { public static void main(String args[]) { BorderLayoutSample obj = new BorderLayoutSample(); BorderLayoutSample obj = new BorderLayoutSample(); obj.init(); obj.init(); }}}}ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม ี่

FlowLayout ตัว จัด วางผัง แบบ FlowLayout จะจัด วางผัง ส่ว น ประกอบกราฟฟิก จากซ้า ยไปขวา ถ้า ความกว้า งของ Contanier ไม่พ อ ตัว จัด วาง ผัง จะนำา ส่ว นประกอบกราฟฟิก ทีเ หลือ ลงไปใน ่ ตำา แหน่ง ถัด ไปด้า นล่า ง Frame สามารถใช้ต ัว จัด วางผัง แบบนี้ได้ โดย เรีย กใช้เมธอด setLayout() แล้ว สร้า งตัว จัด วางผัง โดยใช้ค ำา สัง new FlowLayout() ดัง นี้ ่ fr.setLayout(new FlowLayout());

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

ตัว อย่า งโปรแกรม fr.setSize(200,150); fr.setSize(200,150); fr.show(); fr.show(); }} public static void main(String args[]) { public static void main(String args[]) { FlowLayoutSample obj = new FlowLayoutSample(); FlowLayoutSample obj = new FlowLayoutSample(); obj.init(); obj.init(); }} }}ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม ี่

GridLayout จะแบ่ง Container เป็น ช่อ งย่อ ยๆขนาดเท่า กัน Frame สามารถใช้ต ัว จัด วางผัง แบบนีไ ด้ โดย ้ เรีย กใช้เ มธอด setLayoutแล้ว สร้า งตัว จัด วางผัง โดยใช้ค ำา สัง new GridLayout(row,col) ซึ่ง จะต้อ งระบุ ่ จำา นวนแถวและคอลัม น์ท ต ้อ งการแบ่ง ช่อ งย่อ ย ี่ ด้ว ย ดัง นี้ fr.setLayout(new GridLayout(3,2)); • จะแบ่ง Container เป็น 6 ช่อ งย่อ ย ที่ม ี 3 แถวๆละ 2 คอลัม น์ ใช้เ มธอด add() ในการใส่ส ว นประกอบกราฟฟิก ่ ลงในแต่ล ะช่อ งย่อ ย โดยจะใส่เ รีย งจากซ้า ยไป ขวาและบนลงล่า ง

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

ตัว อย่า งโปรแกรม fr.add(bn1); fr.add(bn1); fr.add(bn2); fr.add(bn2); fr.add(bn3); fr.add(bn3); fr.add(bn4); fr.add(bn4); fr.add(bn5); fr.add(bn5); fr.pack(); fr.pack(); fr.setVisible(true); fr.setVisible(true); }} public static void main(String args[]) { public static void main(String args[]) { GridLayoutSample obj = new GridLayoutSample(); GridLayoutSample obj = new GridLayoutSample(); obj.init(); obj.init(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม

คำา อธิบ ายโปรแกรม คำา สั่ง fr.pack(); • จะปรับ ขนาดที่เ หมาะสมให้ก ับ Frame fr.setVisible(true); • เป็น การแสดง Frame เช่น เดีย วกับ เมธอด show()

ส่ว นประกอบกราฟฟิก ที่ส ำา คัญ ใน แพคเก็จ AWT Button Label TextField TextArea Checkbox Choice List Canvas

คลาส Label คือ ส่ว นประกอบกราฟฟิก ทีใ ช้แ สดงข้อ ความยาว ่ หนึง บรรทัด ซึ่ง ผู้ใ ช้ไ ม่ส ามารถป้อ นข้อ ความ ่ เข้า ไปได้ Constructor ของคลาส Label ที่ส ำา คัญ มีด ัง นี้ • public Label(String text) • public Label(String text,int align) เราสามารถทีจ ะกำา หนดหรือ เปลี่ย นข้อ ความของ ่ Label ได้โ ดยเรีย กใช้ เมธอด setText(String text)

คลาส TextField คือ ส่ว นประกอบกราฟฟิก เพือ ให้ผ ู้ใ ช้ป ้อ นข้อ ความ ่ ยาวหนึง บรรทัด ได้ ่ Constructor ของคลาส TextField ทีส ำา คัญ มีด ัง นี้ ่ • public TextField() • public TextField(int col) • public TextField(String text) • public TextField(String text, int col) เราสามารถทีจ ะกำา หนดหรือ เปลี่ย นข้อ ความโดย ่ ใช้เ มธอด setText(String text) เมธอด setEditable(boolean b)เป็น เมธอดทีใ ช้เ พื่อ ่ กำา หนดให้ TextField สามารถอ่า นได้อ ย่า งเดีย ว โดยจะต้อ งมีก ารส่ง argument เป็น false

ตัว อย่า งโปรแกรมimport java.awt.*; import java.awt.*;public class TextFieldDemo { public class TextFieldDemo { private Frame fr; private Frame fr; private Label l; private Label l; private TextField tf; private TextField tf; public void init() { public void init() { fr = new Frame("TextField Demo"); fr = new Frame("TextField Demo"); l = new Label("Name: "); l = new Label("Name: "); tf = new TextField("Thanisa", 15); tf = new TextField("Thanisa", 15); fr.setLayout(new FlowLayout()); fr.setLayout(new FlowLayout());

ตัว อย่า งโปรแกรม fr.add(l); fr.add(l); fr.add(tf); fr.add(tf); fr.pack(); fr.pack(); fr.show(); fr.show(); }} public static void main(String args[]) { public static void main(String args[]) { TextFieldDemo obj = new TextFieldDemo(); TextFieldDemo obj = new TextFieldDemo(); obj.init(); obj.init(); }}}}ผลลัพ ธ์ท ไ ด้จ ากการ ี่รัน โปรแกรม

คลาส TextArea คือ ส่ว นประกอบกราฟฟิก เพือ ให้ผ ู้ใ ช้ป ้อ นข้อ ความ ่ ได้ และสามารถมีจ ำา นวนบรรทัด ได้ห ลายบรรทัด ตามทีร ะบุ ่ Constructor ของคลาส TextArea ทีส ำา คัญ มีด ง นี้ ่ ั • public TextArea() • public TextArea(String str) • public TextArea(int row,int col) • public TextArea(String str,int row,int col) • public TextArea(String str,int row,int col,int scrollbar)

ตัว อย่า งโปรแกรม แสดง TextAreaimport java.awt.*; import java.awt.*;public class TextAreaDemo {{ public class TextAreaDemo private Frame fr; private Frame fr; private TextArea ta; private TextArea ta; public void init() {{ public void init() fr == new Frame("TextArea Demo"); fr new Frame("TextArea Demo"); ta == new TextArea("Text Area",5,10); ta new TextArea("Text Area",5,10); fr.setLayout(new FlowLayout()); fr.setLayout(new FlowLayout()); fr.add(ta); fr.add(ta); fr.setSize(200,150); fr.setSize(200,150); fr.setVisible(true); ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแ ี่ fr.setVisible(true); }} public static void main(String args[]) {{ public static void main(String args[]) TextAreaDemo obj == new TextAreaDemo(); TextAreaDemo obj new TextAreaDemo(); obj.init(); obj.init(); }}}}

คลาส Checkbox และ CheckboxGroup คือ ส่ว นประกอบกราฟฟิก ทีใ ห้ผ ู้ใ ช้เ ลือ กหรือ ไม่ ่ เลือ กช่อ งต่า งๆได้ โดยสามารถเลือ กได้ห ลายช่อ ง พร้อ มๆกัน มีข ้อ ความ (Label) อยูข ้า งๆ ่ Constructor ของคลาส Checkbox ทีส ำา คัญ มีด ง นี้ ่ ั • public Checkbox(String label) • public Checkbox(String label, boolean state) ถ้า ต้อ งการให้อ ยูใ นรูป แบบของ ่ radio button ซึ่ง จะสามารถเลือ กได้เ พีย ง 1 ช่อ งเท่า นัน จะต้อ ง ้ ระบุใ ห้อ อปเจ็ค ของคลาส Checkbox อยูใ นกลุ่ม ของ ่ ออปเจ็ค ของคลาส CheckboxGroup

ตัว อย่า งโปรแกรม แสดง Checkbox import java.awt.*; import java.awt.*; public class CheckboxDemo { public class CheckboxDemo { public static void main(String args[]) { public static void main(String args[]) { Frame fr = new Frame("Checkbox Demo"); Frame fr = new Frame("Checkbox Demo"); Checkbox c1 = new Checkbox("Visual Basic"); Checkbox c1 = new Checkbox("Visual Basic"); Checkbox c2 = new Checkbox("C++",false); Checkbox c2 = new Checkbox("C++",false); Checkbox c3 = new Checkbox("Java",true); Checkbox c3 = new Checkbox("Java",true); fr.setLayout(new FlowLayout()); fr.setLayout(new FlowLayout()); fr.add(c1); fr.add(c1); fr.add(c2); fr.add(c2); fr.add(c3); fr.add(c3); fr.pack(); ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม fr.pack(); fr.show(); fr.show(); ี่ }} }}

ตัว อย่า งโปรแกรม แสดง CheckboxGroupimport java.awt.*; import java.awt.*;public class CheckboxGroupDemo { public class CheckboxGroupDemo { public static void main(String args[]) { public static void main(String args[]) { Frame fr = new Frame("CheckboxGroup Demo"); Frame fr = new Frame("CheckboxGroup Demo"); CheckboxGroup cg = new CheckboxGroup(); CheckboxGroup cg = new CheckboxGroup(); Checkbox c1 = new Checkbox("One", true,cg); Checkbox c1 = new Checkbox("One", true,cg); Checkbox c2 = new Checkbox("Two", false,cg); Checkbox c2 = new Checkbox("Two", false,cg); Checkbox c3 = new Checkbox("Three", cg, true); Checkbox c3 = new Checkbox("Three", cg, true); fr.setLayout(new GridLayout(3,1)); fr.setLayout(new GridLayout(3,1)); fr.add(c1); fr.add(c1); ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม fr.add(c2); fr.add(c2); ี่ fr.add(c3); fr.add(c3); fr.pack(); fr.pack(); fr.show(); fr.show(); }}}}

คลาส Choice คลาส Choiceเป็น คลาสทีใ ช้ใ นการสร้า งออปเจ็ค ที่ ่ เป็น รายการให้ผ ู้ใ ช้ส ามารถเลือ กได้ คลาส Choice จะแสดงรายการปรากฏให้เ ห็น เฉพาะรายการทีเ ลือ กเพีย งรายการเดีย ว แต่จ ะ ่ แสดงรายการทัง หมดหากมีก ารคลิก เมาส์ ้ Constructor ของคลาส Choice ทีส ำา คัญ มีด ง นี้ ่ ั • public Choice() เมธอด addItem() เป็น เมธอดทีใ ช้ส ำา หรับ ใส่ ่ รายการลงในออปเจ็ค choice เมธอด select(int pos) หรือ select(String str) เป็น เมธอดทีใ ช้ใ นการ เลือ กให้แ สดงรายการที่ ่ ตำา แหน่ง หรือ ข้อ ความใดข้อ ความหนึง ได้ ่

ตัว อย่า งโปรแกรม แสดง Choiceimport java.awt.*; import java.awt.*;public class ChoiceDemo { public class ChoiceDemo { public static void main(String args[]) { public static void main(String args[]) { Frame fr = new Frame("Choice Demo"); Frame fr = new Frame("Choice Demo"); Choice c = new Choice(); Choice c = new Choice(); c.addItem("New Zealand"); c.addItem("New Zealand"); c.addItem("Thailand"); c.addItem("Thailand"); c.addItem("USA"); ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม c.addItem("USA"); ี่ c.add("Japan"); c.add("Japan"); c.select("Thailand"); c.select("Thailand"); fr.add(c); fr.add(c); fr.pack(); fr.pack(); fr.show(); fr.show(); }}}}

คลาส List List เป็น คลาสทีใ ช้ส ร้า งออปเจ็ค ที่เ ป็น ส่ว น ่ ประกอบกราฟฟิก เพือ ให้ผ ู้ใ ช้ส ามารถเลือ ก ่ รายการคล้า ยกับ Choice แต่จ ะแตกต่า งกัน ตรงที่ List จะแสดงรายการหลายรายการตามจำา นวน แถวทีร ะบุ ่ Constructor ของคลาส List ทีส ำา คัญ มีด ัง นี้ ่ • public List() • public List(int row) • public List(int row,boolean multipleMode) เมธอด add()เป็น เมธอดทีใ ช้ใ นการใส่ร ายการลง ่ ไปในออปเจ็ค ของคลาส List

ตัว อย่า งโปรแกรม แสดง Listimport java.awt.*; import java.awt.*;public class ListDemo {{ public class ListDemo private Frame fr; private Frame fr; private List l; private List l; public void init() {{ public void init() fr == new Frame("List Demo"); fr new Frame("List Demo"); ll == new List(3,true); ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกร ี่ new List(3,true); l.add("One"); l.add("One"); l.add("Two"); l.add("Two"); l.add("Three"); l.add("Three"); fr.add(l); fr.add(l); fr.pack(); fr.pack(); fr.setVisible(true); fr.setVisible(true); }} public static void main(String args[]) {{ public static void main(String args[]) ListDemo obj == new ListDemo(); ListDemo obj new ListDemo(); obj.init(); obj.init(); }}}}

การสร้า งเมนู เมนูเ ป็น ออปเจ็ค ของคลาสที่ส บ ทอดมาจากคลาสที่ ื ชื่อ MenuComponent คลาสทีส ืบ ทอดมาจากคลาส MenuComponent ่ ทีส ำา คัญ ่ มีด ง นี้ ั • MenuBar เป็น คลาสที่ใ ช้ใ นการสร้า งออปเจ็ค ที่เ ก็บ กลุ่ม ของออปเจ็ค ของคลาส Menu ซึ่ง จะปรากฏเป็น แถบเมนู โดยออปเจ็ค ของคลาสนี้จ ะต้อ งมีอ อปเจ็ค ของคลาส Frame ที่ค ู่ก ัน • Menu เป็น คลาสที่ใ ช้ใ นการสร้า งออปเจ็ค ที่เ ก็บ กลุ่ม ขอ งออปเจ็ค ของคลาส MenuItem และตัว แยกรายการ (separator) • MenuItem เป็น คลาสที่ใ ช้ใ นการสร้้า งออปเจ็ค ที่เ ป็น รายการ • CheckboxMenuItem เป็น คลาสที่ใ ช้ใ นการสร้า งออปเจ็ค ที่

รูป แสดงคลาสที่ส ืบ ทอดมาจากคลาส MenuComponent

คลาส MenuBar คือ แถบของเมนูท จ ะอยูต รงส่ว นบนของคลาส ี่ ่ ประเภท Container เช่น Frame (ระบบปฏิบ ัต ิก ารบาง ประเภทอาจจะไม่แ สดงแถบของเมนู หากไม่ม ี รายการในเมนู) Constructor ของคลาส MenuBar ทีส ำา คัญ มีด ง นี้ ่ ั • public MenuBar() เราสามารถทีจ ะใส่อ อปเจ็ค ของคลาส MenuBar ่ ลง ใน Container ได้โ ดยใช้เ มธอด setMenuBar() คลาส MenuBar สืบ ทอดมาจากคลาส MenuComponent

ตัว อย่า งโปรแกรม แสดง MenuBarimport java.awt.*; import java.awt.*;public class MenuBarDemo {{ public class MenuBarDemo private Frame fr; private Frame fr; private MenuBar mb; private MenuBar mb; public void init() {{ public void init() fr == new Frame("MenuBar Demo"); fr new Frame("MenuBar Demo"); mb == new MenuBar(); mb new MenuBar(); fr.setMenuBar(mb); fr.setMenuBar(mb); fr.setSize(200,150); ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม fr.setSize(200,150); fr.setVisible(true); fr.setVisible(true); }} public static void main(String args[]) {{ public static void main(String args[]) MenuBarDemo md == new MenuBarDemo(); MenuBarDemo md new MenuBarDemo(); md.init(); md.init(); }}}}

คลาส Menu คือ รายการทีแ สดงบนแถบของเมนู ่ Constructor ของคลาส Menu ทีส ำา คัญ มีด ัง นี้ ่ • public Menu() • public Menu(String label) • public Menu(String label,boolean tearOff) เราสามารถกำา หนดหรือ เปลี่ย นชื่อ รายการในออป เจ็ค ของคลาส Menu โดยใช้เ มธอด setLabel(String label) เมธอด add() ในคลาส MenuBar ใช้ใ นการใส่อ อป เจ็ค ของคลาส Menu ลงไปในออปเจ็ค ของคลาส MenuBar แต่ถ ้า ออปเจ็ค ของคลาส Menu เป็น รายการ Help เราจะใช้เ มธอด setHelpMenu() ในการใส่อ อป เจ็ค แทน

ตัว อย่า งโปรแกรม แสดง Menuimport java.awt.*; import java.awt.*;public class MenuDemo {{ public class MenuDemo private Frame fr; private Frame fr; private MenuBar mb; private MenuBar mb; private Menu m1,m2,m3,m4; private Menu m1,m2,m3,m4; public void init() {{ public void init() fr == new Frame("Menu Demo"); fr new Frame("Menu Demo"); mb == new MenuBar(); mb new MenuBar(); m1 == new Menu("File"); m1 new Menu("File"); m2 == new Menu("Edit"); m2 new Menu("Edit"); m3 == new Menu("View"); m3 new Menu("View"); m4 == new Menu("Help"); m4 new Menu("Help");

ตัว อย่า งโปรแกรม แสดง Menu fr.setMenuBar(mb); fr.setMenuBar(mb); mb.add(m1); mb.add(m1); mb.add(m2); mb.add(m2); mb.add(m3); mb.add(m3); ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม mb.setHelpMenu(m4); mb.setHelpMenu(m4); fr.setSize(200,150); fr.setSize(200,150); fr.setVisible(true); fr.setVisible(true); }} public static void main(String args[]) {{ public static void main(String args[]) MenuDemo mm == new MenuDemo(); MenuDemo mm new MenuDemo(); mm.init(); mm.init(); }}}}

คลาส MenuItem คือ รายการย่อ ยทีอ ยู่ใ นออปเจ็ค ของคลาส ่ Menu Constructor ของคลาส MenuItem ที่ส ำา คัญ มีด ัง นี้ • public MenuItem() • public MenuItem(String label) • public MenuItem(String label,MenuShortcut s) เราสามารถทีจ ะใส่อ อปเจ็ค ของคลาส ่ MenuItem ลง ไปในออปเจ็ค ของคลาส Menu ได้โดยใช้เ มธอด add() เราสามารถทีจ ะกำา หนด ่ Shortcut ของรายการที่ อยูใ นออปเจ็ค ของคลาส MenuItem ได้โ ดยใช้อ อป ่ เจ็ค ของคลาส MenuShortcut Constructor ของคลาส MenuShortcut ทีส ำา คัญ มี ่ ดัง นี้

ขั้น ตอนการสร้า งเมนู สร้า งออปเจ็ค ของคลาส แล้ว ใส่ล งไปใน MenuBar ออปเจ็ค ของคลาส ประเภท Container เช่น Frame สร้า งออปเจ็ค ของคลาส Menuแล้ว ใส่ล งไปในออป เจ็ค ของคลาส MenuBar โดยทีส ามารถสร้า งออป ่ เจ็ค ของคลาส Menu ได้ม ากกว่า หนึง ออปเจ็ค ่ สร้า งออปเจ็ค ของคลาส แล้ว ใส่ล งไปใน MenuItem ออปเจ็ค ของคลาส Menu โดยทีส ามารถสร้า งออป ่ เจ็ค ของคลาส MenuItem ได้ม ากกว่า หนึง ออปเจ็ค ่

ตัว อย่า งโปรแกรม แสดง MenuItem import java.awt.*; import java.awt.*; public class MenuItemDemo {{ public class MenuItemDemo private Frame fr; private Frame fr; private MenuBar mb; private MenuBar mb; private Menu m1,m2,m3,m4; private Menu m1,m2,m3,m4; private MenuItem mi1,mi2,mi3,mi4; private MenuItem mi1,mi2,mi3,mi4; private MenuShortcut ms1; private MenuShortcut ms1; public void init() {{ public void init() fr == new Frame("MenuItem Demo"); fr new Frame("MenuItem Demo"); mb == new MenuBar(); mb new MenuBar(); m1 == new Menu("File"); m1 new Menu("File"); m2 == new Menu("Edit"); m2 new Menu("Edit"); m3 == new Menu("View"); m3 new Menu("View"); m4 == new Menu("Help"); m4 new Menu("Help"); fr.setMenuBar(mb); fr.setMenuBar(mb); mb.add(m1); mb.add(m1); mb.add(m2); mb.add(m2); mb.add(m3); mb.add(m3); mb.setHelpMenu(m4); mb.setHelpMenu(m4);

ตัว อย่า งโปรแกรม แสดง MenuItem char key == N; char key N; ms1 == new MenuShortcut(key); ms1 new MenuShortcut(key); mi1 == new MenuItem("New",ms1); mi1 new MenuItem("New",ms1); mi2 == new MenuItem("Open"); mi2 new MenuItem("Open"); mi3 == new MenuItem("Save"); mi3 new MenuItem("Save"); mi4 == new MenuItem("Exit"); mi4 new MenuItem("Exit"); m1.add(mi1); m1.add(mi2); m1.add(mi1); m1.add(mi2); m1.addSeparator(); m1.addSeparator(); m1.add(mi3); ผลลัพ ธ์ท ไ ด้จ ากการ ี่ m1.add(mi3); m1.addSeparator(); m1.addSeparator(); m1.add(mi4); m1.add(mi4); fr.setSize(200,200); รัน โปรแกรม fr.setSize(200,200); fr.setVisible(true); fr.setVisible(true); }} public static void main(String args[]) {{ public static void main(String args[]) MenuItemDemo mid= new MenuItemDemo(); MenuItemDemo mid= new MenuItemDemo(); mid.init(); mid.init(); }}}}

คลาส CheckboxMenuItem คือ รายการเมนูท ม เ ครื่อ งหมายระบุว ่า รายการนีถ ูก ี่ ี ้ เลือ ก Constructor ของคลาส CheckboxMenuItem ทีส ำา คัญ ่ มีด ง นี้ ั • public CheckboxMenuItem() • public CheckboxMenuItem(String label) • public CheckboxMenuItem(String label,boolean state) เราสามารถทีจ ะเปลี่ย นสถานะของออปเจ็ค ชนิด ่ CheckboxMenuItem ได้โดยใช้เ มธอด setState(boolean b)

ตัว อย่า งโปรแกรม แสดง CheckboxMenuItemimport java.awt.*; import java.awt.*;public class CheckboxMenuDemo {{ public class CheckboxMenuDemo private Frame fr; private Frame fr; private MenuBar mb; private MenuBar mb; private Menu m1,m2,m3; private Menu m1,m2,m3; private MenuItem mi; private MenuItem mi; private CheckboxMenuItem cbm; private CheckboxMenuItem cbm; public void init() {{ public void init() fr == new Frame("CheckboxMenuItem Demo"); fr new Frame("CheckboxMenuItem Demo"); mb == new MenuBar(); mb new MenuBar(); m1 == new Menu("File"); m1 new Menu("File"); m2 == new Menu("Edit"); m2 new Menu("Edit"); m3 == new Menu("View"); m3 new Menu("View"); fr.setMenuBar(mb); fr.setMenuBar(mb); mb.add(m1); mb.add(m1); mb.add(m2); mb.add(m2); mb.add(m3); mb.add(m3);

ตัว อย่า งโปรแกรม แสดง CheckboxMenuItem mi == new MenuItem("Toolbars"); mi new MenuItem("Toolbars"); cbm == new CheckboxMenuItem("Status Bar", true); cbm new CheckboxMenuItem("Status Bar", true); m3.add(mi); m3.add(mi); m3.add(cbm); m3.add(cbm); fr.setSize(200,200); fr.setSize(200,200); fr.setVisible(true); fr.setVisible(true); }} public static void main(String args[]) {{ public static void main(String args[]) CheckboxMenuDemo obj= new CheckboxMenuDemo(); CheckboxMenuDemo obj= new CheckboxMenuDemo(); obj.init(); obj.init(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม

ขั้น ตอนการสร้า งเมนูย ่อ ย สร้า งออปเจ็ค ของคลาส MenuBar แล้ว ใส่ล งไปใน ออปเจ็ค ของคลาส ประเภท Container เช่น Frame สร้า งออปเจ็ค ของคลาส Menu แล้ว ใส่ล งไปในออป เจ็ค ของคลาส MenuBar สร้า งออปเจ็ค ของคลาส Menuสำา หรับ เป็น เมนูย อ ย ่ แล้ว ใส่ล งไปในออปเจ็ค ของคลาส Menu ทีเ ป็น เมนู ่ หลัก สร้า งออปเจ็ค ของคลาส MenuItem แล้ว ใส่ล งไปใน ออปเจ็ค ของคลาส Menu ทีเ ป็น เมนูย อ ย ่ ่

ตัว อย่า งโปรแกรมแสดงเมนูย ่อ ย import java.awt.*; import java.awt.*; public class SubMenuDemo {{ public class SubMenuDemo private Frame fr; private Frame fr; private MenuBar mb; private MenuBar mb; private Menu m1,m2,m3, ms1; private Menu m1,m2,m3, ms1; private MenuItem mi2,mi3,mi4, msi1, msi2; private MenuItem mi2,mi3,mi4, msi1, msi2; public void init() {{ public void init() fr == new Frame("SubMenuItem Demo"); fr new Frame("SubMenuItem Demo"); mb == new MenuBar(); mb new MenuBar(); m1 == new Menu("File"); m1 new Menu("File"); m2 == new Menu("Edit"); m2 new Menu("Edit"); m3 == new Menu("View"); m3 new Menu("View"); fr.setMenuBar(mb); fr.setMenuBar(mb); mb.add(m1); mb.add(m1); mb.add(m2); mb.add(m2); mb.add(m3); mb.add(m3);

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

ตัว อย่า งโปรแกรมแสดงเมนูย ่อ ย public static void main(String args[]) {{ public static void main(String args[]) SubMenuDemo obj= new SubMenuDemo(); SubMenuDemo obj= new SubMenuDemo(); obj.init(); obj.init(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม

คุณ ลัก ษณะของคลาส Component ส่ว นประกอบกราฟฟิก ต่า งๆจะมีค ุณ ลัก ษณะอื่น อาทิเ ช่น รูป แบบของฟอนต์ สีข องพืน หลัง หรือ สี ้ ของพืน หน้า (Foreground) เราสามารถทีจ ะ ้ ่ กำา หนดคุณ ลัก ษณะของส่ว นประกอบกราฟฟิก ได้ โดยปกติส ่ว นประกอบกราฟฟิก จะใช้ค ุณ ลัก ษณะ แบบเดีย วกับ ออปเจ็ค ประเภท Container ทีบ รรจุ ่ อยูเ ว้น แต่จ ะมีก ารกำา หนดคุณ ลัก ษณะเฉพาะของ ่ ส่ว นประกอบกราฟฟิก นัน ๆ ้ เมธอดทีใ ช้ใ นการกำา หนดคุณ ลัก ษณะของส่ว น ่ ประกอบกราฟฟิก จะอยูใ นคลาส Component ่ โดยมีเ มธอดทีส ำา คัญ คือ ่ • setFont(Font f) • setForeground(Color c) •

คลาส Font เราสามารถสร้า งออปเจ็ค ของคลาส Font เพือ ใช้ ่ ในการกำา หนดฟอนต์ไ ด้ Constructor ของคลาส Font ทีส ำา คัญ มีด ง นี้ ่ ั • public Font(String name,int style,int size) — name คือ ชื่อ ฟอนต์ — style คือ รูป แบบของฟอนต์ เช่น Font.PLAIN,Font.BOLD, Font.ITALIC — size คือ ขนาดของฟอนต์ เราสามารถกำา หนดฟอนต์ใ ห้ก ับ ออปเจ็ค ของ คลาส Component โดยใช้ เมธอด setFont()

คลาส Color เราสามารถสร้า งออปเจ็ค ของคลาส Color เพือ ใช้ ่ ในการกำา หนดสีไ ด้ Constructor ของคลาส Color ที่ส ำา คัญ มีด ัง นี้ • public Color(int r,int g,int b) —โดยที่ r,g,b คือ ค่า ความเข้ม ของแสงสีแ ดง เขีย ว และนำ้า เงิน ตามลำา ดับ ตัว อย่า งเช่น • yellow = new Color(255,255,0); • black = new Color(0,0,0);

ตัว อย่า งโปรแกรมแสดง คุณ ลัก ษณะimport java.awt.*; import java.awt.*;public class AttributeDemo {{ public class AttributeDemo private Frame fr; private Frame fr; private Button bn1,bn2,bn3; private Button bn1,bn2,bn3; public void init() {{ public void init() fr == new Frame("ShowAttribute"); fr new Frame("ShowAttribute"); bn1 == new Button("OK"); bn1 new Button("OK"); bn2 == new Button("Cancel"); bn2 new Button("Cancel"); bn3 == new Button("Help"); bn3 new Button("Help"); fr.setLayout(new FlowLayout()); fr.setLayout(new FlowLayout()); fr.add(bn1); fr.add(bn1); fr.add(bn2); fr.add(bn2); fr.add(bn3); fr.add(bn3);

ตัว อย่า งโปรแกรมแสดง คุณ ลัก ษณะ fr.setFont(new Font("TimesRoman",Font.BOLD,16)); fr.setFont(new Font("TimesRoman",Font.BOLD,16)); fr.setForeground(Color.blue); fr.setForeground(Color.blue); fr.setBackground(Color.green); fr.setBackground(Color.green); bn2.setForeground(Color.red); bn2.setForeground(Color.red); fr.setSize(200,200); fr.setSize(200,200); fr.show(); fr.show(); }} public static void main(String args[]) {{ public static void main(String args[]) AttributeDemo ad == new AttributeDemo(); AttributeDemo ad new AttributeDemo(); ad.init(); ad.init(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม

คลาส Canvas แพ็ค เกจ AWT มีค ลาสทีเ ป็น ส่ว นประกอบกราฟฟิก ่ ทีช ื่อ Canvas ซึ่ง เป็น เนือ ทีว ่า งเปล่า ทีส ามารถใช้ ่ ้ ่ ่ ในการวาดรูป กราฟฟิก หรือ เขีย นข้อ ความใดๆได้ คลาสนีจ ะมีเ มธอดทีช ื่อ ้ ่ paint() ซึ่ง มีร ูป แบบดัง นี้ public void paint(Graphics g) { [statements] } การสร้า งภาพกราฟฟิก ในภาษาจาวาจะทำา ได้โ ดย การสร้า งคลาสทีเ ป็น ส่ว นกราฟฟิก ซึ่ง สืบ ทอดมา ่ จากคลาสทีช ื่อ Canvas แล้ว override เมธอดทีช ื่อ ่ ่ paint()

ตัว อย่า งโปรแกรมimport java.awt.*; import java.awt.*;public class MyCanvas extends Canvas { public class MyCanvas extends Canvas { public void paint(Graphics g) { public void paint(Graphics g) { g.drawLine(10,10,100,100); g.drawLine(10,10,100,100); }}}}

ตัว อย่า งโปรแกรม import java.awt.*; import java.awt.*; public class GUIDemo { public class GUIDemo { public static void main(String args[]) { public static void main(String args[]) { Frame fr = new Frame("Draw line"); Frame fr = new Frame("Draw line"); MyCanvas mc = new MyCanvas(); MyCanvas mc = new MyCanvas(); fr.add(mc); fr.add(mc); fr.setSize(150,150); fr.setSize(150,150); fr.setVisible(true); fr.setVisible(true); }} }}ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม ี่

คลาส Panel เป็น คลาส ประเภท Container ทำา ให้ส ามารถใส่ ส่ว นประกอบกราฟฟิก ต่า งๆได้ แตกต่า งจาก Frame ตรงทีไ ม่ม ี title bar และ ่ ไม่ม ี resizable corner Applet เป็น คลาสทีส ืบ ทอดมาจากคลาส Panel ่ โดยทัว ไปจะมีต ัว จัด การวางผัง แบบ FlowLayout ่ สามารถทีจ ะบรรจุ ่ Panel ลงใน Frame ได้

การสร้า งโปรแกรม GUI ที่ซ ับ ซ้อ น โดยส่ว นใหญ่ GUI จะมีส ่ว นประกอบกราฟฟิก ต่า งๆมากมาย และการวางผัง อาจจะต้อ งมีผ ัง หลายชั้น ทีซ อ นกัน ่ ้ เราสามารถทีจ ะบรรจุ ่ Panel ลงไปใน Frame หรือ Panel ตัว อื่น แล้ว ใส่ส ่ว นประกอบกราฟฟิก ลงใน Panel อีก ทีห นึ่ง เพื่อ สร้า ง GUI ทีซ ับ ซ้อ น ่ ขึ้น เราสามารถทีจ ะกำา หนดให้ ่ Panel แต่ล ะตัว มีต ัว วางผัง ต่า งชนิด กัน ได้

ตัว อย่า ง GUI ที่ซ ับ ซ้อ น

ตัว อย่า งโปรแกรมแสดง GUI ที่ซ ับ ซ้อ น import java.awt.*; import java.awt.*; public class StickyPad { public class StickyPad { private Frame fr; private Frame fr; private Panel p1, p2; private Panel p1, p2; private TextArea ta1, ta2; private TextArea ta1, ta2; private Button bn1, bn2, bn3; private Button bn1, bn2, bn3; public void init() { public void init() { fr = new Frame("Sticky Pad"); fr = new Frame("Sticky Pad"); p1 = new Panel(); p1 = new Panel(); p2 = new Panel(); p2 = new Panel(); bn1 = new Button("Submit"); bn1 = new Button("Submit"); bn2 = new Button("Leave"); bn2 = new Button("Leave"); bn3 = new Button("Return"); bn3 = new Button("Return"); ta1 = new TextArea(4,40); ta1 = new TextArea(4,40); ta2 = new TextArea(4,40); ta2 = new TextArea(4,40);

ตัว อย่า งโปรแกรมแสดง GUI ที่ซ ับ ซ้อ น ta1.setBackground(Color.pink); ta1.setBackground(Color.pink); ta1.setFont(new Font("Dialog",Font.PLAIN,20)); ta1.setFont(new Font("Dialog",Font.PLAIN,20)); ta2.setBackground(Color.lightGray); ta2.setBackground(Color.lightGray); ta2.setFont(new Font("Dialog",Font.PLAIN,20)); ta2.setFont(new Font("Dialog",Font.PLAIN,20)); p1.setLayout(new GridLayout(2,1)); p1.setLayout(new GridLayout(2,1)); p1.add(ta1); p1.add(ta1); p1.add(ta2); p1.add(ta2); p2.setLayout(new FlowLayout()); p2.setLayout(new FlowLayout()); p2.add(bn1); p2.add(bn1); p2.add(bn2); p2.add(bn2); p2.add(bn3); p2.add(bn3); fr.add(p1); fr.add(p1); fr.add(p2,BorderLayout.SOUTH); fr.add(p2,BorderLayout.SOUTH); fr.setSize(400,300); fr.setSize(400,300); fr.show(); fr.show(); }}

ตัว อย่า งโปรแกรมแสดง GUI ที่ซ ับ ซ้อ น public static void main(String args[]) { public static void main(String args[]) { StickyPad obj = new StickyPad(); StickyPad obj = new StickyPad(); obj.init(); obj.init(); }} }}

แพคเก็จ Swing Swing เป็น แพคเก็จ สำา หรับ พัฒ นาโปรแกรม GUI ซึ่ง มีส ่ว นประกอบกราฟฟิก ทีม ากชนิด กว่า ทีม อ ยู่ ่ ่ ี ในแพคเก็จ AWT ส่ว นประกอบกราฟฟิก ของแพคเก็จ Swing จะมี ลัก ษณะทีด ีก ว่า ส่ว นประกอบกราฟฟิก ของแพคเก็จ ่ AWT ส่ว นประกอบกราฟฟิก ของแพคเก็จ Swing สามารถกำา หนดรูป แบบของ look and feel ที่ ทำา ให้ไ ด้โ ปรแกรม GUI ทีม ร ูป แบบของกราฟฟิก ่ ี เหมือ นกัน ในทุก แพลตฟอร์ม ซึ่ง จะแตกต่า งกับ แพคเก็จ AWT ทีจ ะมีร ูป แบบของกราฟฟิก ซึ่ง ขึ้น ่ อยูก ับ look and feel ของแต่ล ะแพลตฟอร์ม ่

แพคเก็จ Swing แพคเก็จ ของ Swing อยู่ใ น แพคเก็จ ทีช อ ่ ื่ javax.swing คลาสทีเ ป็น ส่ว นประกอบกราฟฟิก ของแพคเก็จ ่ Swing ทุก คลาสจะสืบ ทอดมาจากคลาส JComponent คลาส JComponent จะสืบ ทอดมา จากคลาส Container ในแพคเก็จ AWT อีก ต่อ หนึง ่ แพคเก็จSwing จะมีค ลาสทีเ ป็น ส่ว นประกอบ ่ กราฟฟิก ทีส อดคล้อ งกับ คลาสในแพคเก็จ AWT ่ โดยคลาสเหล่า นีจ ะมีช ื่อ ขึ้น ต้น ด้ว ยตัว อัก ษร ‘J’ ้

คลาสต่า งๆที่ส ืบ ทอดมาจากคลาส JComponent

คลาสที่เ ป็น ส่ว นประกอบกราฟฟิก ในแพคเก็จ Swing คลาสทีเ ป็น ส่ว นประกอบกราฟฟิก ทีส ำา คัญ ในแพค ่ ่ เก็จ Swing มีด ัง นี้ • JFrame • JPanel • JButton • JLabel • JTextField • JTextArea • JScrollbar • JToolTip

คลาส JFrame แพคเก็จ Swing มีค ลาสประเภท Container ที่ แตกต่า งจากคลาสประเภท Container ของแพค เก็จ AWT คือ JFrame,JDialog,JPanel และ JApplet โดยทัว ไปโปรแกรม GUI ทีเ ป็น โปรแกรมจาวา ่ ่ ประยุก ต์จ ะใช้ Container ทีเ ป็น ออปเจ็ค ของ ่ คลาส JFrame คลาส JFrame จะสืบ ทอดมาจากคลาส Frame โดยมี constructor ทีส ำา คัญ ดัง นี้ ่ • public JFrame() • public JFrame(String title)

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

เมธอด getContentPane() เราไม่ส ามารถทีจ ะใส่ส ว นประกอบกราฟฟิก ลงใน ่ ่ JFrame ได้โ ดยตรง แต่จ ะต้อ งใส่ล งในหน้า ต่า งที่ เป็น content pane แทน เราสามารถทีจ ะเรีย กออปเจ็ค ของคลาสประเภท ่ Container ดัง กล่า วมาได้โ ดยใช้เ มธอดทีช ื่อ ่ getContentPane() และสามารถทีจ ะใส่ส ว นประกอบ ่ ่ กราฟฟิก ลงในออปเจ็ค ดัง กล่า วได้โ ดยใช้เ มธอด add() ตัว อย่า งเช่น Container c = fr.getContentPane(); c.setLayout(new BorderLayout()); c.add(bn1,BorderLayout.SOUTH);

ตัว อย่า ง แสดงโปรแกรม GUI ที่ใ ช้ คลาสในแพคเก็จ Swingimport java.awt.*; import java.awt.*;import javax.swing.*; import javax.swing.*;public class StickyPadSwing {{ public class StickyPadSwing private JFrame fr; private JFrame fr; private JPanel p1, p2; private JPanel p1, p2; private JTextArea ta1, ta2; private JTextArea ta1, ta2; private JButton bn1, bn2, bn3; private JButton bn1, bn2, bn3; public void init() {{ public void init() fr == new JFrame("Sticky Pad"); fr new JFrame("Sticky Pad"); p1 == new JPanel(); p1 new JPanel(); p2 == new JPanel(); p2 new JPanel(); bn1 == new JButton("Submit"); bn1 new JButton("Submit"); bn2 == new JButton("Leave"); bn2 new JButton("Leave"); bn3 == new JButton("Return"); bn3 new JButton("Return");

ตัว อย่า ง แสดงโปรแกรม GUI ที่ใ ช้ คลาสในแพคเก็จ Swing ta1 = new JTextArea(4,40); ta1 = new JTextArea(4,40); ta2 = new JTextArea(4,40); ta2 = new JTextArea(4,40); ta1.setBackground(Color.pink); ta1.setBackground(Color.pink); ta1.setFont(new Font("Dialog",Font.PLAIN,20)); ta1.setFont(new Font("Dialog",Font.PLAIN,20)); ta2.setBackground(Color.lightGray); ta2.setBackground(Color.lightGray); ta2.setFont(new Font("Dialog",Font.PLAIN,20)); ta2.setFont(new Font("Dialog",Font.PLAIN,20)); p1.setLayout(new GridLayout(2,1)); p1.setLayout(new GridLayout(2,1)); p1.add(ta1); p1.add(ta1); p1.add(ta2); p1.add(ta2); p2.setLayout(new FlowLayout()); p2.setLayout(new FlowLayout()); p2.add(bn1); p2.add(bn1); p2.add(bn2); p2.add(bn2); p2.add(bn3); p2.add(bn3); Container c = fr.getContentPane(); Container c = fr.getContentPane(); c.add(p1); c.add(p1);

ตัว อย่า ง แสดงโปรแกรม GUI ที่ใ ช้ คลาสในแพคเก็จ Swing c.add(p2,BorderLayout.SOUTH); c.add(p2,BorderLayout.SOUTH); fr.setSize(400,300); fr.setSize(400,300); fr.show(); fr.show(); }} public static void main(String args[]) { public static void main(String args[]) { StickyPadSwing obj = new StickyPadSwing(); StickyPadSwing obj = new StickyPadSwing(); obj.init(); obj.init(); }}}}

ผลลัพ ธ์ท ี่ไ ด้จ ากการรัน โปรแกรม

คลาส JComponent ส่ว นประกอบกราฟฟิก ของ Swing เพิม่ คุณ ลัก ษณะต่า งๆขึ้น มามาก เราสามารถใช้ คุณ ลัก ษณะเหล่า นีโ ดยเรีย ก ใช้เ มธอดในคลาส ้ JComponent เมธอด setBorder(Border bd) ใช้ส ำา หรับ กำา หนดขอบ ให้ก บ ส่ว นประกอบกราฟฟิก ั เมธอด setToolTipText(String text)ใช้ส ำา หรับ กำา หนดข้อ ความทีจ ะแสดงเป็น tooltip ่

คุณ ลัก ษณะเด่น อื่น ๆ แพคเก็จ Swing ยัง มีเ มธอดอื่น ๆทีใ ช้ใ นการ ่ กำา หนดรูป ลัก ษณ์แ ละคุณ ลัก ษณะเด่น ของออปเจ็ค ทีเ ป็น ส่ว นประกอบกราฟฟิก ต่า งๆเพิม เติม อาทิ ่ ่ เช่น • void setMnemonic(char c) หรือ • void setMnemonic(int i) • void setIcon(Icon c)

คลาส LookAndFeel แพคเก็จ Swing จะอนุญ าตให้ผ ู้ใ ช้ก ำา หนด look and feel ของโปรแกรม GUI บนแพลตฟอร์ม ต่า งๆ เองได้ โดยใช้ค ลาสทีช ื่อ LookAndFeel ่ คลาส LookAndFeel ใช้ใ นการกำา หนดรูป แบบต่า งๆ ของส่ว นประกอบกราฟฟิก เช่น ฟอนต์ ขนาด สี การจัด การกับ เหตุก ารณ์ (Event) เป็น ต้น โดยทัว ไปโปรแกรม ่ GUI ทีใ ช้แ พคเก็จ Swing จะ ่ สร้า งออปเจ็ค ของคลาส UIManager ขึ้น มาตอนรัน โปรแกรม เพือ ตรวจสอบรูป แบบ look and feel ่ ของโปรแกรม GUI และเราสามารถทีจ ะกำา หนด ่ รูป แบบ look and feel ใหม่ ได้โ ดยใช้เ มธอด UIManager setLookAndFeel(LoodAndFeel l)

คลาส Dialog คลาส Dialog เป็น คลาสทีส ืบ ทอดมาจากคลาส ่ Window คลาส Dialog จะทำา งานอยู่ภ ายใต้อ อปเจ็ค ของคลาส Frame ทัง นีก ารสร้า งออปเจ็ค ของคลาส Dialog จะต้อ ง ้ ้ ระบุอ อปเจ็ค ของคลาส Frame ที่ค ู่ก น ซึ่ง เรีย กว่า เฟรม ั แม่ (parent frame) และอาจกำา หนดโหมดการ ทำา งานให้เ ป็น แบบ modal ซึ่ง ผู้ใ ช้ต ้อ งปิด ออปเจ็ค ของคลาส Dialog ก่อ นจึง จะกลับ มาทำา งานในออปเจ็ค ของคลาส Frame ทีค ู่ก น ได้ ่ ั คลาส Dialog มีร ูป แบบของ constructor ทีส ำา คัญ ่ ดัง นี้ • public Dialog(Frame parent) • public Dialog(Frame parent, String title)

สรุป เนื้อ หาของบท คลาสทีอ ยู่ใ นแพคเก็จ java.awt ่ สามารถนำา มาใช้ สร้า ง GUI แบบ Look and Feel ตามแพลตฟอร์ม ทีใ ช้ง านได้ โดยมีค ลาส Component เป็น ่ Superclass ของทุก คลาสทีเ ป็น คลาสประเภทตัว ่ ใส่ส ่ว นประกอบกราฟฟิก และคลาสประเภทส่ว น ประกอบกราฟฟิก รูป แบบการจัด วางผัง ส่ว นประกอบกราฟฟิก ในตัว ใส่ส ่ว นประกอบกราฟฟิก มีท ง หมด 5 รูป แบบคือ ั้ BorderLayout, FlowLayout, GridLayout, CardLayout และ GridBagLayout การจัด วางผัง ของส่ว นประกอบกราฟฟิก แบบ BorderLayout จะเป็น การวางตามทิศ ต่า งๆได้ 5 ทิศ ส่ว น FlowLayout จะวางไว้ใ นตำา แหน่ง บนสุด โดย เรีย งจากซ้า ยไปขวา สำา หรับ GridLayout จะวาง

สรุป เนื้อ หาของบท คลาสประเภทส่ว นประกอบกราฟฟิก ทีส ำา คัญ คือ ่ Button, Label, TextField, TextArea, Checkbox, Choice, List, Menu และ Canvas Labelจะแสดงข้อ ความ ซึง ผู้ใ ช้ไ ม่ส ามารถป้อ น ่ ข้อ ความได้ แต่ส ำา หรับ TextField ผู้ใ ช้ส ามารถป้อ น ข้อ ความได้ย าวหนึง บรรทัด ส่ว น TextArea ผู้ใ ช้ ่ สามารถป้อ นข้อ ความได้ห ลายบรรทัด Checkbox จะเป็น ช่อ งให้ผ ู้ใ ช้เ ลือ กหรือ ไม่เ ลือ กโดย สามารถเลือ กได้ห ลายช่อ งพร้อ มกัน ซึ่ง จะแตก ต่า งจาก CheckboxGroup ที่จ ะสามารถเลือ กได้เ พีย ง ช่อ งเดีย วเท่า นัน ้ Choice จะแสดงรายการทีถ ก เลือ กเพีย งรายการ ่ ู เดีย ว โดยจะแสดงหลายรายการเมือ ผู้ใ ช้ค ลิก ่

สรุป เนื้อ หาของบท คลาสทีจ ะนำา มาใช้ใ นการแสดงแถบเมนูแ ละเมนู ่ ย่อ ยคือ MenuBar, Menu และ MenuItem คลาส Fontและ Color จะถูก นำา มาใช้ใ นกรณีท ี่ ต้อ งการระบุค ุณ ลัก ษณะ ฟอนต์แ ละสีข องตัว ใส่ ส่ว นประกอบกราฟฟิก และส่ว นประกอบกราฟฟิก การสร้า งภาพกราฟฟิก ในภาษาจาวาจะทำา ได้โ ดย การสร้า งคลาสทีเ ป็น ส่ว นกราฟฟิก ซึ่ง สืบ ทอดมา ่ จากคลาส Canvas แล้ว override เมธอด paint() คลาส Graphics จะมีเ มธอดในการวาดรูป ทรง กราฟฟิก ต่า งๆหลายเมธอด คลาสในแพคเก็จ javax.swing จะถูก นำา มาใช้ใ น

แบบฝึก หัด ข้อ ที่ 1 • จากโปรแกรมจำา ลองระบบธนาคาร ให้ท ดลองเขีย น GUI โดยใช้แ พคเก็จ java.awt ที่ท ำา หน้า ที่เ ป็น ส่ว น ติด ต่อ กับ ผู้ใ ช้ (User Interface) ให้พ นัก งานของ ธนาคารสามารถเรีย กดูร ายชื่อ ลูก ค้า บัญ ชีย อดเงิน และ มีฟ ัง ก์ช ัน ในการฝากและถอนเงิน ได้ ข้อ ที่ 2 • ทดลองปรับ ปรุง GUI ดัง กล่า วโดยใช้แ พคเก็จ Swing

Java Programming [5/12] : Build Graphical User Interface

by IMC Institute on Jan 03, 2013

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Java Programming [5/12] : Build Graphical User Interface Presentation Transcript