Your SlideShare is downloading. ×
  • Like
  • Save
Java Programming [5/12] : Build Graphical User Interface
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 950 views
Published

เอกสารแนะนำการเขียนโปรแกรมภาษาจาวา

เอกสารแนะนำการเขียนโปรแกรมภาษาจาวา

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
950
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. บทที่ 5การสร้า งส่ว นติด ต่อ กับ ผู้ใ ช้ แบบกราฟฟิก (Build Graphical User Interface) อ.ธนิศ า เครือ ไวศยวรรณ คณะเทคโนโลยีส ารสนเทศ
  • 2. วัต ถุป ระสงค์ แนะนำา ส่ว นประกอบทีส ำา คัญ ของ ่ JFC (Java Foundation Class) แนะนำา คลาสและอิน เตอร์เ ฟสทีส ำา คัญ ในแพคเก็จ ่ java.awt นิย ามความหมายของตัว ใส่ส ว นประกอบกราฟฟิก ่ (Container) ส่ว นประกอบกราฟฟิก (Graphical Component) และรูป แบบการจัด วางผัง (Layout Manager) แนะนำา คลาสทีเ ป็น ตัว ใส่ส ่ว นประกอบกราฟฟิก ่ และคลาสทีเ ป็น ส่ว นประกอบกราฟฟิก แบบต่า งๆ ่ อธิบ ายวิธ ีก ารใส่ส ว นประกอบกราฟฟิก ลงในตัว ใส่ ่
  • 3. วัต ถุป ระสงค์ อธิบ ายการสร้า งเมนูโ ดยใช้ค ลาสในแพคเก็จ java.awt อธิบ ายการจัด การกับ รูป แบบของตัว อัก ขระ สี และการจัด การกับ คุณ ลัก ษณะอื่น ๆของส่ว น ประกอบกราฟฟิก อธิบ ายการจัด วางผัง GUI ทีม ค วามซับ ซ้อ น ่ ี แนะนำา แพคเก็จ javax.swing และคลาสต่า งๆทีม อ ยู่ ่ ี ในแพคเก็จ
  • 4. Java Foundation Class ระบบปฏิบ ัต ิก ารส่ว นใหญ่จ ะมีส ว นติด ต่อ กับ ผู้ใ ช้ ่ เป็น แบบกราฟฟิก (Graphical User Interface เรีย กย่อ ว่า GUI) ทัง นีเ นือ งจากใช้ง านง่า ยกว่า ้ ้ ่ ภาษาจาวาจะสนับ สนุน การพัฒ นาโปรแกรม GUI ทีส ามารถใช้ง านได้ห ลายแพลตฟอร์ม โดยจะใช้ ่ ชุด คำา สัง เดีย วกัน ่ Java Foundation Class (JFC) ประกอบด้ว ยแพค เก็จ ต่า งๆดัง นี้ • Abstract Window Toolkit (AWT) • Swing • Java 2D • Accessibility • Drag and Drop
  • 5. รูป แสดงส่ว นประกอบที่ส ำา คัญ ของ JFC
  • 6. AWT แพคเก็จ AWT ประกอบด้ว ยคลาสต่า งๆทีเ ป็น่ ประเภทส่ว นประกอบกราฟฟิก (graphical component) เพื่อ นำา ไปใช้ใ นการพัฒ นา โปรแกรม GUI แพคเก็จ AWT จะช่ว ยในการสร้า งโปรแกรม GUI ประเภท look and feel ทีข ึ้น อยู่ก บ แพลตฟอร์ม ที่ ่ ั ใช้ง าน ภาษาจาวาได้ก ำา หนดแพคเก็จ AWT ขึ้น ไว้ต ั้ง แต่ โปรแกรมจาวาเวอร์ช ั่น แรก (JDK 1.0) โดยอยูใ น ่ แพคเก็จ ทีช ื่อ java.awt ่ แพคเก็จ AWT จะประกอบไปด้ว ยคลาสและ อิน เตอร์เ ฟสต่า งๆเพือ ใช้ใ นการพัฒ นาโปรแกรม ่
  • 7. AWT ในแพจเก็จ java.awt มีค ลาสและอิน เตอร์เ ฟสที่ สำา คัญ ดัง นี้ • Component • Container • LayoutManager (อิน เตอร์เ ฟส) • Graphics • Color • Font • AWTEvent
  • 8. รูป แสดงส่ว นประกอบที่ส ำา คัญ ของ AWT
  • 9. คลาส Component การเขีย นโปรแกรม GUI นัน จะเป็น การสร้า งออป ้ เจ็ค ต่า งๆทีเ ป็น ออปเจ็ค ของคลาสทีเ ป็น ส่ว น ่ ่ ประกอบกราฟฟิก คลาสทีเ ป็น ส่ว นประกอบกราฟฟิก จะสืบ ทอดมา ่ จากคลาสทีช ื่อ ่ Component คลาสทีเ ป็น ่ subclass ของคลาส Component จะแบ่ง เป็น สองกลุ่ม คือ • คลาสที่เ ป็น คลาสประเภท Container เป็น คลาสที่ใ ช้ใ น การใส่ส ่ว นประกอบกราฟฟิก ต่า งๆ • คลาสที่เ ป็น ส่ว นประกอบกราฟฟิก อื่น ๆ อาทิเ ช่น Button,Choice และ List เป็น ต้น
  • 10. รูป แสดงคลาสที่ส ืบ ทอดมาจาก คลาส Component
  • 11. คลาสประเภท Container โปรแกรม GUI จะต้อ งมีก ารสร้า งออปเจ็ค ของ คลาสประเภท Container อย่า งน้อ ยหนึง ออปเจ็ค ่ ขึ้น มาก่อ น เพื่อ ใช้ใ นการใส่อ อปเจ็ค ของคลาสที่ เป็น ส่ว นประกอบกราฟฟิก อื่น ๆ คลาสประเภท Container ทีอ ยูใ นแพคเก็จ AWT ่ ่ มีด ง นี้ ั • Frame • Panel • Dialog • Applet คลาสประเภท Container เป็น คลาสทีส ืบ ทอดมา ่ จากคลาสทีช ื่อ ่ Component
  • 12. คลาส Container คลาสทีช ื่อ Container ่ เป็น คลาสแบบ abstract ซึ่ง เราไม่ส ามารถทีจ ะสร้า งออปเจ็ค ของคลาสดัง ่ กล่า วได้ แต่จ ะต้อ งสร้า งออปเจ็ค ของคลาสอื่น ๆที่ สืบ ทอดมาจากคลาสทีช ื่อ Container แทน ่ คลาสทีช ื่อ Container ่ จะมีเ มธอดทีช ื่อ add()ทีใ ช้ใ น ่ ่ การใส่ส ่ว นประกอบกราฟฟิก อื่น ๆ เมธอดนีจ ะมีร ูป ้ แบบทีส ำา คัญ ดัง นี้ ่ • void add (Component c) • void add (Component c,int position)
  • 13. คลาส Frame เป็น คลาสทีส ืบ ทอดมาจากคลาสทีช ื่อ Window ่ ่ ออปเจ็ค ของคลาส Frame จะประกอบด้ว ย title bar, resizable corner, icon และ menu bar
  • 14. คลาส Frame คลาส Frame จะมีร ูป แบบของ constructor ที่ สำา คัญ ดัง นี้ • public Frame() • public Frame(String title) คลาส Frame จะมีเ มธอดทีเ กีย วข้อ งกับ การปรับ ่ ่ ขนาดของเฟรมดัง นี้ • boolean isResizable() • void setResizable(boolean canResize)
  • 15. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 16. อธิบ ายตัว อย่า งโปรแกรม คำา สั่ง fr = new Frame(“Frame Sample”); เป็น คำา สัง ที่ ่ ใช้ใ นการสร้า งออปเจ็ค ของคลาส Frame เมธอด setSize()เป็น เมธอดทีใ ช้ใ นการกำา หนด ่ ขนาดของ Frame เมธอด show() เป็น เมธอดทีใ ช้ใ นการแสดง ่ Frame ที่ สร้า งไว้
  • 17. คลาส Button Button เป็น คลาสทีใ ช้ใ นการสร้า งออปเจ็ค ทีแ สดง ่ ่ เป็น ปุ่ม โดยจะมีข ้อ ความ (label) ปรากฎอยูบ นปุ่ม ่ Button เป็น คลาสทีส ืบ ทอดมาจากคลาสทีช ื่อ ่ ่ Component Constructor ของคลาส Button มีร ูป แบบดัง นี้ • public Button() • public Button(String label) เมธอดทีส ำา คัญ ในการจัด การกับ ข้อ ความมีด ัง นี้ ่ • public void setLabel(String label) • public String getLabel()
  • 18. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 19. การจัด วางผัง ของส่ว นประกอบ กราฟฟิก โปรแกรม GUI ของภาษาจาวาจะจัด วางส่ว น ประกอบกราฟฟิก ต่า งๆลงใน ออปเจ็ค ของคลาสประเภท Container โดย อัต โนมัต ิ LayoutManager เป็น อิน เตอร์เ ฟสทีใ ชัใ นการกำา หนด ่ วิธ ีก ารจัด วางผัง ส่ว นประกอบกราฟฟิก คลาสที่ implements อิน เตอร์เ ฟสทีช อ LayoutManager ่ ื่ เพือ ใช้เ ป็น ตัว จัด วางผัง ของส่ว นประกอบกราฟฟิก ่ มีท ง หมด 5 คลาสคือ ั้ • BorderLayout • FlowLayout • GridLayout • CardLayout • GridBagLayout
  • 20. BorderLayout Frame โดยทัว ไปจะถูก กำา หนดให้ม ีต ัว จัด วางผัง ่ เป็น แบบ BorderLayout Frame ทีม ต ัว จัด วางผัง เป็น แบบ BorderLayout จะ ่ ี ทำา ให้ส ามารถวางส่ว นประกอบกราฟฟิก ได้ม าก ทีส ด 5 ออปเจ็ค ตามตำา แหน่ง ทิศ ต่า งๆ ของ Frame ่ ุ คือ ทิศ เหนือ (NORTH) ทิศ ใต้ (SOUTH) ทิศ ตะวัน ออก (EAST) ทิศ ตะวัน ตก (WEST) และ ตรงกลาง (CENTER) ใช้ค ำา สัง new BorderLayout() ในการสร้า งตัว จัด วาง ่ ผัง แบบนี้
  • 21. BorderLayout คำา สั่ง ในการใส่ส ว นประกอบกราฟฟิก คือ เมธอด ่ add()แต่จ ะต้อ งมีก ารระบุต ำา แหน่ง ทิศ ทีต ้อ งการ ่ วางส่ว นประกอบ ตัว อย่า งเช่น fr.add(bn1,BorderLayout.NORTH) หากไม่ร ะบุต ำา แหน่ง ทิศ ส่ว นประกอบจะถูก ใส่ไ ว้ ตรงกลาง
  • 22. ตัว อย่า งโปรแกรม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);
  • 23. ตัว อย่า งโปรแกรม 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(); }}}}ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม ี่
  • 24. FlowLayout ตัว จัด วางผัง แบบ FlowLayout จะจัด วางผัง ส่ว น ประกอบกราฟฟิก จากซ้า ยไปขวา ถ้า ความกว้า งของ Contanier ไม่พ อ ตัว จัด วาง ผัง จะนำา ส่ว นประกอบกราฟฟิก ทีเ หลือ ลงไปใน ่ ตำา แหน่ง ถัด ไปด้า นล่า ง Frame สามารถใช้ต ัว จัด วางผัง แบบนี้ได้ โดย เรีย กใช้เมธอด setLayout() แล้ว สร้า งตัว จัด วางผัง โดยใช้ค ำา สัง new FlowLayout() ดัง นี้ ่ fr.setLayout(new FlowLayout());
  • 25. ตัว อย่า งโปรแกรม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);
  • 26. ตัว อย่า งโปรแกรม 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(); }} }}ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม ี่
  • 27. GridLayout จะแบ่ง Container เป็น ช่อ งย่อ ยๆขนาดเท่า กัน Frame สามารถใช้ต ัว จัด วางผัง แบบนีไ ด้ โดย ้ เรีย กใช้เ มธอด setLayoutแล้ว สร้า งตัว จัด วางผัง โดยใช้ค ำา สัง new GridLayout(row,col) ซึ่ง จะต้อ งระบุ ่ จำา นวนแถวและคอลัม น์ท ต ้อ งการแบ่ง ช่อ งย่อ ย ี่ ด้ว ย ดัง นี้ fr.setLayout(new GridLayout(3,2)); • จะแบ่ง Container เป็น 6 ช่อ งย่อ ย ที่ม ี 3 แถวๆละ 2 คอลัม น์ ใช้เ มธอด add() ในการใส่ส ว นประกอบกราฟฟิก ่ ลงในแต่ล ะช่อ งย่อ ย โดยจะใส่เ รีย งจากซ้า ยไป ขวาและบนลงล่า ง
  • 28. ตัว อย่า งโปรแกรม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");
  • 29. ตัว อย่า งโปรแกรม 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(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม
  • 30. คำา อธิบ ายโปรแกรม คำา สั่ง fr.pack(); • จะปรับ ขนาดที่เ หมาะสมให้ก ับ Frame fr.setVisible(true); • เป็น การแสดง Frame เช่น เดีย วกับ เมธอด show()
  • 31. ส่ว นประกอบกราฟฟิก ที่ส ำา คัญ ใน แพคเก็จ AWT Button Label TextField TextArea Checkbox Choice List Canvas
  • 32. คลาส Label คือ ส่ว นประกอบกราฟฟิก ทีใ ช้แ สดงข้อ ความยาว ่ หนึง บรรทัด ซึ่ง ผู้ใ ช้ไ ม่ส ามารถป้อ นข้อ ความ ่ เข้า ไปได้ Constructor ของคลาส Label ที่ส ำา คัญ มีด ัง นี้ • public Label(String text) • public Label(String text,int align) เราสามารถทีจ ะกำา หนดหรือ เปลี่ย นข้อ ความของ ่ Label ได้โ ดยเรีย กใช้ เมธอด setText(String text)
  • 33. คลาส 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
  • 34. ตัว อย่า งโปรแกรม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());
  • 35. ตัว อย่า งโปรแกรม 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(); }}}}ผลลัพ ธ์ท ไ ด้จ ากการ ี่รัน โปรแกรม
  • 36. คลาส 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)
  • 37. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 38. คลาส Checkbox และ CheckboxGroup คือ ส่ว นประกอบกราฟฟิก ทีใ ห้ผ ู้ใ ช้เ ลือ กหรือ ไม่ ่ เลือ กช่อ งต่า งๆได้ โดยสามารถเลือ กได้ห ลายช่อ ง พร้อ มๆกัน มีข ้อ ความ (Label) อยูข ้า งๆ ่ Constructor ของคลาส Checkbox ทีส ำา คัญ มีด ง นี้ ่ ั • public Checkbox(String label) • public Checkbox(String label, boolean state) ถ้า ต้อ งการให้อ ยูใ นรูป แบบของ ่ radio button ซึ่ง จะสามารถเลือ กได้เ พีย ง 1 ช่อ งเท่า นัน จะต้อ ง ้ ระบุใ ห้อ อปเจ็ค ของคลาส Checkbox อยูใ นกลุ่ม ของ ่ ออปเจ็ค ของคลาส CheckboxGroup
  • 39. ตัว อย่า งโปรแกรม แสดง 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(); ี่ }} }}
  • 40. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 41. คลาส Choice คลาส Choiceเป็น คลาสทีใ ช้ใ นการสร้า งออปเจ็ค ที่ ่ เป็น รายการให้ผ ู้ใ ช้ส ามารถเลือ กได้ คลาส Choice จะแสดงรายการปรากฏให้เ ห็น เฉพาะรายการทีเ ลือ กเพีย งรายการเดีย ว แต่จ ะ ่ แสดงรายการทัง หมดหากมีก ารคลิก เมาส์ ้ Constructor ของคลาส Choice ทีส ำา คัญ มีด ง นี้ ่ ั • public Choice() เมธอด addItem() เป็น เมธอดทีใ ช้ส ำา หรับ ใส่ ่ รายการลงในออปเจ็ค choice เมธอด select(int pos) หรือ select(String str) เป็น เมธอดทีใ ช้ใ นการ เลือ กให้แ สดงรายการที่ ่ ตำา แหน่ง หรือ ข้อ ความใดข้อ ความหนึง ได้ ่
  • 42. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 43. คลาส List List เป็น คลาสทีใ ช้ส ร้า งออปเจ็ค ที่เ ป็น ส่ว น ่ ประกอบกราฟฟิก เพือ ให้ผ ู้ใ ช้ส ามารถเลือ ก ่ รายการคล้า ยกับ Choice แต่จ ะแตกต่า งกัน ตรงที่ List จะแสดงรายการหลายรายการตามจำา นวน แถวทีร ะบุ ่ Constructor ของคลาส List ทีส ำา คัญ มีด ัง นี้ ่ • public List() • public List(int row) • public List(int row,boolean multipleMode) เมธอด add()เป็น เมธอดทีใ ช้ใ นการใส่ร ายการลง ่ ไปในออปเจ็ค ของคลาส List
  • 44. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 45. การสร้า งเมนู เมนูเ ป็น ออปเจ็ค ของคลาสที่ส บ ทอดมาจากคลาสที่ ื ชื่อ MenuComponent คลาสทีส ืบ ทอดมาจากคลาส MenuComponent ่ ทีส ำา คัญ ่ มีด ง นี้ ั • MenuBar เป็น คลาสที่ใ ช้ใ นการสร้า งออปเจ็ค ที่เ ก็บ กลุ่ม ของออปเจ็ค ของคลาส Menu ซึ่ง จะปรากฏเป็น แถบเมนู โดยออปเจ็ค ของคลาสนี้จ ะต้อ งมีอ อปเจ็ค ของคลาส Frame ที่ค ู่ก ัน • Menu เป็น คลาสที่ใ ช้ใ นการสร้า งออปเจ็ค ที่เ ก็บ กลุ่ม ขอ งออปเจ็ค ของคลาส MenuItem และตัว แยกรายการ (separator) • MenuItem เป็น คลาสที่ใ ช้ใ นการสร้้า งออปเจ็ค ที่เ ป็น รายการ • CheckboxMenuItem เป็น คลาสที่ใ ช้ใ นการสร้า งออปเจ็ค ที่
  • 46. รูป แสดงคลาสที่ส ืบ ทอดมาจากคลาส MenuComponent
  • 47. คลาส MenuBar คือ แถบของเมนูท จ ะอยูต รงส่ว นบนของคลาส ี่ ่ ประเภท Container เช่น Frame (ระบบปฏิบ ัต ิก ารบาง ประเภทอาจจะไม่แ สดงแถบของเมนู หากไม่ม ี รายการในเมนู) Constructor ของคลาส MenuBar ทีส ำา คัญ มีด ง นี้ ่ ั • public MenuBar() เราสามารถทีจ ะใส่อ อปเจ็ค ของคลาส MenuBar ่ ลง ใน Container ได้โ ดยใช้เ มธอด setMenuBar() คลาส MenuBar สืบ ทอดมาจากคลาส MenuComponent
  • 48. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 49. คลาส 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() ในการใส่อ อป เจ็ค แทน
  • 50. ตัว อย่า งโปรแกรม แสดง 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");
  • 51. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 52. คลาส MenuItem คือ รายการย่อ ยทีอ ยู่ใ นออปเจ็ค ของคลาส ่ Menu Constructor ของคลาส MenuItem ที่ส ำา คัญ มีด ัง นี้ • public MenuItem() • public MenuItem(String label) • public MenuItem(String label,MenuShortcut s) เราสามารถทีจ ะใส่อ อปเจ็ค ของคลาส ่ MenuItem ลง ไปในออปเจ็ค ของคลาส Menu ได้โดยใช้เ มธอด add() เราสามารถทีจ ะกำา หนด ่ Shortcut ของรายการที่ อยูใ นออปเจ็ค ของคลาส MenuItem ได้โ ดยใช้อ อป ่ เจ็ค ของคลาส MenuShortcut Constructor ของคลาส MenuShortcut ทีส ำา คัญ มี ่ ดัง นี้
  • 53. ขั้น ตอนการสร้า งเมนู สร้า งออปเจ็ค ของคลาส แล้ว ใส่ล งไปใน MenuBar ออปเจ็ค ของคลาส ประเภท Container เช่น Frame สร้า งออปเจ็ค ของคลาส Menuแล้ว ใส่ล งไปในออป เจ็ค ของคลาส MenuBar โดยทีส ามารถสร้า งออป ่ เจ็ค ของคลาส Menu ได้ม ากกว่า หนึง ออปเจ็ค ่ สร้า งออปเจ็ค ของคลาส แล้ว ใส่ล งไปใน MenuItem ออปเจ็ค ของคลาส Menu โดยทีส ามารถสร้า งออป ่ เจ็ค ของคลาส MenuItem ได้ม ากกว่า หนึง ออปเจ็ค ่
  • 54. ตัว อย่า งโปรแกรม แสดง 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);
  • 55. ตัว อย่า งโปรแกรม แสดง 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(); }}}}
  • 56. คลาส CheckboxMenuItem คือ รายการเมนูท ม เ ครื่อ งหมายระบุว ่า รายการนีถ ูก ี่ ี ้ เลือ ก Constructor ของคลาส CheckboxMenuItem ทีส ำา คัญ ่ มีด ง นี้ ั • public CheckboxMenuItem() • public CheckboxMenuItem(String label) • public CheckboxMenuItem(String label,boolean state) เราสามารถทีจ ะเปลี่ย นสถานะของออปเจ็ค ชนิด ่ CheckboxMenuItem ได้โดยใช้เ มธอด setState(boolean b)
  • 57. ตัว อย่า งโปรแกรม แสดง 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);
  • 58. ตัว อย่า งโปรแกรม แสดง 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(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม
  • 59. ขั้น ตอนการสร้า งเมนูย ่อ ย สร้า งออปเจ็ค ของคลาส MenuBar แล้ว ใส่ล งไปใน ออปเจ็ค ของคลาส ประเภท Container เช่น Frame สร้า งออปเจ็ค ของคลาส Menu แล้ว ใส่ล งไปในออป เจ็ค ของคลาส MenuBar สร้า งออปเจ็ค ของคลาส Menuสำา หรับ เป็น เมนูย อ ย ่ แล้ว ใส่ล งไปในออปเจ็ค ของคลาส Menu ทีเ ป็น เมนู ่ หลัก สร้า งออปเจ็ค ของคลาส MenuItem แล้ว ใส่ล งไปใน ออปเจ็ค ของคลาส Menu ทีเ ป็น เมนูย อ ย ่ ่
  • 60. ตัว อย่า งโปรแกรมแสดงเมนูย ่อ ย 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);
  • 61. ตัว อย่า งโปรแกรมแสดงเมนูย ่อ ย 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); }}
  • 62. ตัว อย่า งโปรแกรมแสดงเมนูย ่อ ย public static void main(String args[]) {{ public static void main(String args[]) SubMenuDemo obj= new SubMenuDemo(); SubMenuDemo obj= new SubMenuDemo(); obj.init(); obj.init(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม
  • 63. คุณ ลัก ษณะของคลาส Component ส่ว นประกอบกราฟฟิก ต่า งๆจะมีค ุณ ลัก ษณะอื่น อาทิเ ช่น รูป แบบของฟอนต์ สีข องพืน หลัง หรือ สี ้ ของพืน หน้า (Foreground) เราสามารถทีจ ะ ้ ่ กำา หนดคุณ ลัก ษณะของส่ว นประกอบกราฟฟิก ได้ โดยปกติส ่ว นประกอบกราฟฟิก จะใช้ค ุณ ลัก ษณะ แบบเดีย วกับ ออปเจ็ค ประเภท Container ทีบ รรจุ ่ อยูเ ว้น แต่จ ะมีก ารกำา หนดคุณ ลัก ษณะเฉพาะของ ่ ส่ว นประกอบกราฟฟิก นัน ๆ ้ เมธอดทีใ ช้ใ นการกำา หนดคุณ ลัก ษณะของส่ว น ่ ประกอบกราฟฟิก จะอยูใ นคลาส Component ่ โดยมีเ มธอดทีส ำา คัญ คือ ่ • setFont(Font f) • setForeground(Color c) •
  • 64. คลาส Font เราสามารถสร้า งออปเจ็ค ของคลาส Font เพือ ใช้ ่ ในการกำา หนดฟอนต์ไ ด้ Constructor ของคลาส Font ทีส ำา คัญ มีด ง นี้ ่ ั • public Font(String name,int style,int size) — name คือ ชื่อ ฟอนต์ — style คือ รูป แบบของฟอนต์ เช่น Font.PLAIN,Font.BOLD, Font.ITALIC — size คือ ขนาดของฟอนต์ เราสามารถกำา หนดฟอนต์ใ ห้ก ับ ออปเจ็ค ของ คลาส Component โดยใช้ เมธอด setFont()
  • 65. คลาส 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);
  • 66. ตัว อย่า งโปรแกรมแสดง คุณ ลัก ษณะ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);
  • 67. ตัว อย่า งโปรแกรมแสดง คุณ ลัก ษณะ 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(); }}}} ผลลัพ ธ์ท ไ ด้จ ากการ ี่ รัน โปรแกรม
  • 68. คลาส Canvas แพ็ค เกจ AWT มีค ลาสทีเ ป็น ส่ว นประกอบกราฟฟิก ่ ทีช ื่อ Canvas ซึ่ง เป็น เนือ ทีว ่า งเปล่า ทีส ามารถใช้ ่ ้ ่ ่ ในการวาดรูป กราฟฟิก หรือ เขีย นข้อ ความใดๆได้ คลาสนีจ ะมีเ มธอดทีช ื่อ ้ ่ paint() ซึ่ง มีร ูป แบบดัง นี้ public void paint(Graphics g) { [statements] } การสร้า งภาพกราฟฟิก ในภาษาจาวาจะทำา ได้โ ดย การสร้า งคลาสทีเ ป็น ส่ว นกราฟฟิก ซึ่ง สืบ ทอดมา ่ จากคลาสทีช ื่อ Canvas แล้ว override เมธอดทีช ื่อ ่ ่ paint()
  • 69. ตัว อย่า งโปรแกรม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); }}}}
  • 70. ตัว อย่า งโปรแกรม 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); }} }}ผลลัพ ธ์ท ไ ด้จ ากการรัน โปรแกรม ี่
  • 71. คลาส Panel เป็น คลาส ประเภท Container ทำา ให้ส ามารถใส่ ส่ว นประกอบกราฟฟิก ต่า งๆได้ แตกต่า งจาก Frame ตรงทีไ ม่ม ี title bar และ ่ ไม่ม ี resizable corner Applet เป็น คลาสทีส ืบ ทอดมาจากคลาส Panel ่ โดยทัว ไปจะมีต ัว จัด การวางผัง แบบ FlowLayout ่ สามารถทีจ ะบรรจุ ่ Panel ลงใน Frame ได้
  • 72. การสร้า งโปรแกรม GUI ที่ซ ับ ซ้อ น โดยส่ว นใหญ่ GUI จะมีส ่ว นประกอบกราฟฟิก ต่า งๆมากมาย และการวางผัง อาจจะต้อ งมีผ ัง หลายชั้น ทีซ อ นกัน ่ ้ เราสามารถทีจ ะบรรจุ ่ Panel ลงไปใน Frame หรือ Panel ตัว อื่น แล้ว ใส่ส ่ว นประกอบกราฟฟิก ลงใน Panel อีก ทีห นึ่ง เพื่อ สร้า ง GUI ทีซ ับ ซ้อ น ่ ขึ้น เราสามารถทีจ ะกำา หนดให้ ่ Panel แต่ล ะตัว มีต ัว วางผัง ต่า งชนิด กัน ได้
  • 73. ตัว อย่า ง GUI ที่ซ ับ ซ้อ น
  • 74. ตัว อย่า งโปรแกรมแสดง 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);
  • 75. ตัว อย่า งโปรแกรมแสดง 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(); }}
  • 76. ตัว อย่า งโปรแกรมแสดง 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(); }} }}
  • 77. แพคเก็จ Swing Swing เป็น แพคเก็จ สำา หรับ พัฒ นาโปรแกรม GUI ซึ่ง มีส ่ว นประกอบกราฟฟิก ทีม ากชนิด กว่า ทีม อ ยู่ ่ ่ ี ในแพคเก็จ AWT ส่ว นประกอบกราฟฟิก ของแพคเก็จ Swing จะมี ลัก ษณะทีด ีก ว่า ส่ว นประกอบกราฟฟิก ของแพคเก็จ ่ AWT ส่ว นประกอบกราฟฟิก ของแพคเก็จ Swing สามารถกำา หนดรูป แบบของ look and feel ที่ ทำา ให้ไ ด้โ ปรแกรม GUI ทีม ร ูป แบบของกราฟฟิก ่ ี เหมือ นกัน ในทุก แพลตฟอร์ม ซึ่ง จะแตกต่า งกับ แพคเก็จ AWT ทีจ ะมีร ูป แบบของกราฟฟิก ซึ่ง ขึ้น ่ อยูก ับ look and feel ของแต่ล ะแพลตฟอร์ม ่
  • 78. แพคเก็จ Swing แพคเก็จ ของ Swing อยู่ใ น แพคเก็จ ทีช อ ่ ื่ javax.swing คลาสทีเ ป็น ส่ว นประกอบกราฟฟิก ของแพคเก็จ ่ Swing ทุก คลาสจะสืบ ทอดมาจากคลาส JComponent คลาส JComponent จะสืบ ทอดมา จากคลาส Container ในแพคเก็จ AWT อีก ต่อ หนึง ่ แพคเก็จSwing จะมีค ลาสทีเ ป็น ส่ว นประกอบ ่ กราฟฟิก ทีส อดคล้อ งกับ คลาสในแพคเก็จ AWT ่ โดยคลาสเหล่า นีจ ะมีช ื่อ ขึ้น ต้น ด้ว ยตัว อัก ษร ‘J’ ้
  • 79. คลาสต่า งๆที่ส ืบ ทอดมาจากคลาส JComponent
  • 80. คลาสที่เ ป็น ส่ว นประกอบกราฟฟิก ในแพคเก็จ Swing คลาสทีเ ป็น ส่ว นประกอบกราฟฟิก ทีส ำา คัญ ในแพค ่ ่ เก็จ Swing มีด ัง นี้ • JFrame • JPanel • JButton • JLabel • JTextField • JTextArea • JScrollbar • JToolTip
  • 81. คลาส JFrame แพคเก็จ Swing มีค ลาสประเภท Container ที่ แตกต่า งจากคลาสประเภท Container ของแพค เก็จ AWT คือ JFrame,JDialog,JPanel และ JApplet โดยทัว ไปโปรแกรม GUI ทีเ ป็น โปรแกรมจาวา ่ ่ ประยุก ต์จ ะใช้ Container ทีเ ป็น ออปเจ็ค ของ ่ คลาส JFrame คลาส JFrame จะสืบ ทอดมาจากคลาส Frame โดยมี constructor ทีส ำา คัญ ดัง นี้ ่ • public JFrame() • public JFrame(String title)
  • 82. Panes ออปเจ็ค ของคลาส JFrame แตกต่า งกับ Frame ตรงที่ มีห น้า ต่า ง (pane) อยู่ 4 หน้า ต่า งดัง นี้ • root pane • layer pane • glass pane • content pane
  • 83. เมธอด getContentPane() เราไม่ส ามารถทีจ ะใส่ส ว นประกอบกราฟฟิก ลงใน ่ ่ JFrame ได้โ ดยตรง แต่จ ะต้อ งใส่ล งในหน้า ต่า งที่ เป็น content pane แทน เราสามารถทีจ ะเรีย กออปเจ็ค ของคลาสประเภท ่ Container ดัง กล่า วมาได้โ ดยใช้เ มธอดทีช ื่อ ่ getContentPane() และสามารถทีจ ะใส่ส ว นประกอบ ่ ่ กราฟฟิก ลงในออปเจ็ค ดัง กล่า วได้โ ดยใช้เ มธอด add() ตัว อย่า งเช่น Container c = fr.getContentPane(); c.setLayout(new BorderLayout()); c.add(bn1,BorderLayout.SOUTH);
  • 84. ตัว อย่า ง แสดงโปรแกรม 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");
  • 85. ตัว อย่า ง แสดงโปรแกรม 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);
  • 86. ตัว อย่า ง แสดงโปรแกรม 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(); }}}}
  • 87. ผลลัพ ธ์ท ี่ไ ด้จ ากการรัน โปรแกรม
  • 88. คลาส JComponent ส่ว นประกอบกราฟฟิก ของ Swing เพิม่ คุณ ลัก ษณะต่า งๆขึ้น มามาก เราสามารถใช้ คุณ ลัก ษณะเหล่า นีโ ดยเรีย ก ใช้เ มธอดในคลาส ้ JComponent เมธอด setBorder(Border bd) ใช้ส ำา หรับ กำา หนดขอบ ให้ก บ ส่ว นประกอบกราฟฟิก ั เมธอด setToolTipText(String text)ใช้ส ำา หรับ กำา หนดข้อ ความทีจ ะแสดงเป็น tooltip ่
  • 89. คุณ ลัก ษณะเด่น อื่น ๆ แพคเก็จ Swing ยัง มีเ มธอดอื่น ๆทีใ ช้ใ นการ ่ กำา หนดรูป ลัก ษณ์แ ละคุณ ลัก ษณะเด่น ของออปเจ็ค ทีเ ป็น ส่ว นประกอบกราฟฟิก ต่า งๆเพิม เติม อาทิ ่ ่ เช่น • void setMnemonic(char c) หรือ • void setMnemonic(int i) • void setIcon(Icon c)
  • 90. คลาส LookAndFeel แพคเก็จ Swing จะอนุญ าตให้ผ ู้ใ ช้ก ำา หนด look and feel ของโปรแกรม GUI บนแพลตฟอร์ม ต่า งๆ เองได้ โดยใช้ค ลาสทีช ื่อ LookAndFeel ่ คลาส LookAndFeel ใช้ใ นการกำา หนดรูป แบบต่า งๆ ของส่ว นประกอบกราฟฟิก เช่น ฟอนต์ ขนาด สี การจัด การกับ เหตุก ารณ์ (Event) เป็น ต้น โดยทัว ไปโปรแกรม ่ GUI ทีใ ช้แ พคเก็จ Swing จะ ่ สร้า งออปเจ็ค ของคลาส UIManager ขึ้น มาตอนรัน โปรแกรม เพือ ตรวจสอบรูป แบบ look and feel ่ ของโปรแกรม GUI และเราสามารถทีจ ะกำา หนด ่ รูป แบบ look and feel ใหม่ ได้โ ดยใช้เ มธอด UIManager setLookAndFeel(LoodAndFeel l)
  • 91. คลาส Dialog คลาส Dialog เป็น คลาสทีส ืบ ทอดมาจากคลาส ่ Window คลาส Dialog จะทำา งานอยู่ภ ายใต้อ อปเจ็ค ของคลาส Frame ทัง นีก ารสร้า งออปเจ็ค ของคลาส Dialog จะต้อ ง ้ ้ ระบุอ อปเจ็ค ของคลาส Frame ที่ค ู่ก น ซึ่ง เรีย กว่า เฟรม ั แม่ (parent frame) และอาจกำา หนดโหมดการ ทำา งานให้เ ป็น แบบ modal ซึ่ง ผู้ใ ช้ต ้อ งปิด ออปเจ็ค ของคลาส Dialog ก่อ นจึง จะกลับ มาทำา งานในออปเจ็ค ของคลาส Frame ทีค ู่ก น ได้ ่ ั คลาส Dialog มีร ูป แบบของ constructor ทีส ำา คัญ ่ ดัง นี้ • public Dialog(Frame parent) • public Dialog(Frame parent, String title)
  • 92. สรุป เนื้อ หาของบท คลาสทีอ ยู่ใ นแพคเก็จ java.awt ่ สามารถนำา มาใช้ สร้า ง GUI แบบ Look and Feel ตามแพลตฟอร์ม ทีใ ช้ง านได้ โดยมีค ลาส Component เป็น ่ Superclass ของทุก คลาสทีเ ป็น คลาสประเภทตัว ่ ใส่ส ่ว นประกอบกราฟฟิก และคลาสประเภทส่ว น ประกอบกราฟฟิก รูป แบบการจัด วางผัง ส่ว นประกอบกราฟฟิก ในตัว ใส่ส ่ว นประกอบกราฟฟิก มีท ง หมด 5 รูป แบบคือ ั้ BorderLayout, FlowLayout, GridLayout, CardLayout และ GridBagLayout การจัด วางผัง ของส่ว นประกอบกราฟฟิก แบบ BorderLayout จะเป็น การวางตามทิศ ต่า งๆได้ 5 ทิศ ส่ว น FlowLayout จะวางไว้ใ นตำา แหน่ง บนสุด โดย เรีย งจากซ้า ยไปขวา สำา หรับ GridLayout จะวาง
  • 93. สรุป เนื้อ หาของบท คลาสประเภทส่ว นประกอบกราฟฟิก ทีส ำา คัญ คือ ่ Button, Label, TextField, TextArea, Checkbox, Choice, List, Menu และ Canvas Labelจะแสดงข้อ ความ ซึง ผู้ใ ช้ไ ม่ส ามารถป้อ น ่ ข้อ ความได้ แต่ส ำา หรับ TextField ผู้ใ ช้ส ามารถป้อ น ข้อ ความได้ย าวหนึง บรรทัด ส่ว น TextArea ผู้ใ ช้ ่ สามารถป้อ นข้อ ความได้ห ลายบรรทัด Checkbox จะเป็น ช่อ งให้ผ ู้ใ ช้เ ลือ กหรือ ไม่เ ลือ กโดย สามารถเลือ กได้ห ลายช่อ งพร้อ มกัน ซึ่ง จะแตก ต่า งจาก CheckboxGroup ที่จ ะสามารถเลือ กได้เ พีย ง ช่อ งเดีย วเท่า นัน ้ Choice จะแสดงรายการทีถ ก เลือ กเพีย งรายการ ่ ู เดีย ว โดยจะแสดงหลายรายการเมือ ผู้ใ ช้ค ลิก ่
  • 94. สรุป เนื้อ หาของบท คลาสทีจ ะนำา มาใช้ใ นการแสดงแถบเมนูแ ละเมนู ่ ย่อ ยคือ MenuBar, Menu และ MenuItem คลาส Fontและ Color จะถูก นำา มาใช้ใ นกรณีท ี่ ต้อ งการระบุค ุณ ลัก ษณะ ฟอนต์แ ละสีข องตัว ใส่ ส่ว นประกอบกราฟฟิก และส่ว นประกอบกราฟฟิก การสร้า งภาพกราฟฟิก ในภาษาจาวาจะทำา ได้โ ดย การสร้า งคลาสทีเ ป็น ส่ว นกราฟฟิก ซึ่ง สืบ ทอดมา ่ จากคลาส Canvas แล้ว override เมธอด paint() คลาส Graphics จะมีเ มธอดในการวาดรูป ทรง กราฟฟิก ต่า งๆหลายเมธอด คลาสในแพคเก็จ javax.swing จะถูก นำา มาใช้ใ น
  • 95. แบบฝึก หัด ข้อ ที่ 1 • จากโปรแกรมจำา ลองระบบธนาคาร ให้ท ดลองเขีย น GUI โดยใช้แ พคเก็จ java.awt ที่ท ำา หน้า ที่เ ป็น ส่ว น ติด ต่อ กับ ผู้ใ ช้ (User Interface) ให้พ นัก งานของ ธนาคารสามารถเรีย กดูร ายชื่อ ลูก ค้า บัญ ชีย อดเงิน และ มีฟ ัง ก์ช ัน ในการฝากและถอนเงิน ได้ ข้อ ที่ 2 • ทดลองปรับ ปรุง GUI ดัง กล่า วโดยใช้แ พคเก็จ Swing