8 | การสร้างส่วนติดต่อกับ ผู้ใช้ (Graphic User Interface; GUI)

1. 231221: Object-Oriented Programming Language 8 | การสร้างส่วนติดต่อกับผู้ใช้(Graphic User Interface; GUI)

2. คอมโพเนนต์ที่พบมากบนวินโดว์คอมโพเนนต์ที่พบมากบนวินโดว์ • Label ใช้แสดงผลเป็นตัวอักษร • Text field ใช้เป็นช่องสำหรับให้ผู้ใช้พิมพ์ข้อมูลลงไป (ข้อมูลบรรทัดเดียว) • Text Area ใช้เป็นช่องสำหรับให้ผู้ใช้พิมพ์ข้อมูลลงไป (ข้อมูลหลายบรรทัด)

3. คอมโพเนนต์ที่พบมากบนวินโดว์คอมโพเนนต์ที่พบมากบนวินโดว์ • Check box ใช้สำหรับให้ผู้ใช้คลิกเลือกข้อมูล (เลือกได้มากกว่า 1 รายการ) • Radio button ใช้สำหรับให้ผู้ใช้คลิกเลือกข้อมูล (นิยมใช้กับข้อมูลที่ให้ผู้เลือกเลือกได้ 1 รายการเท่านั้น)

4. คอมโพเนนต์ที่พบมากบนวินโดว์คอมโพเนนต์ที่พบมากบนวินโดว์ • Combobox ใช้แสดงข้อมูลแบบ drop down list โดยผู้ใช้สามารถเลือกข้อมูลใดๆ ที่เป็นรายการอยู่ใน drop down list ได้ • List คล้ายกันกับ Combo box แต่ผู้ใช้สามารถมองเห็นข้อมูลที่มีอยู่ใน List ได้มากกว่า 1 รายการ • Button ปุ่มสำหรับให้ผู้ใช้ใช้เม้าส์คลิก วัตถุประสงค์เพื่อยืนยันการกระทำใดๆ

5. Java Foundation Classes (JFC) • คือ แพ็กเกจที่รวมชุดพัฒนาโปรแกรมในลักษณะ GUI ของภาษาจาวา ยกตัวอย่าง • Abstract Windowing Tookit (AWT) เป็นแพ็กเกจประกอบด้วยคอมโพเนนต์มากมายสำหรับใช้ในการสร้าง Java Application และ Java Applet เช่น Label, Text field, Combo box, Check box, Radio Button, Button เป็นต้น ซึ่งจะเก็บไว้ในแพ็คเกจ java.awt • Swingเป็นแพ็กเกจที่พัฒนาต่อจาก AWT มีกราฟิกที่รูปร่างที่ดีกว่า คลาสต่าง ๆ จะเก็บไว้ในแพ็คเกจ javax.swingคลาสต่าง ๆ ใน Swing จะใช้ตัวอักษร J นำหน้า

6. การสืบทอดคลาสของคอมโพเนนต์ต่างๆ ในภาษาจาวา Component (Abstract) Container JComponent Window Panel Swing Component Frame Dialog JFrame JDialog

7. Java - Swing • JFrameClass สร้าง Object Frame • JPanel Class สร้าง Object Panel • JLableClass สร้าง Object Label • JTextFieldClass สร้าง Object Text field • JTextAreaClass สร้าง Object Text area • JRadioButtonClass สร้าง Object Radio button • JCheckBoxClass สร้าง Object Check box • JComboBoxClass สร้าง Object Combo box • JbuttonClass สร้าง Object Button • JToggleButtonClass สร้าง Object Toggle button • JOptionPane Class สร้าง Object Dialog box เมธอดภายในแต่ละคลาสดูเพิ่มเติมจาก http://code.function.in.th/java-swing

8. Java - Swing • JList Class สร้าง Object List • JTabbedPane Class สร้าง Object TabbedPane • JScrollBar Class สร้าง Object ScrollBar • JScrollPane Class สร้าง Object ScrollPane • JMenuBar Class สร้าง Object JMenuBar • JPopupMenu Class สร้าง Object PopupMenu • JSlider Class สร้าง Object Slider • JFormattedTextField สร้าง Object FormattedTextField • JPasswordFieldสร้าง Object PasswordField • Jspinnerสร้าง Object Spinner เมธอดภายในแต่ละคลาสดูเพิ่มเติมจาก http://code.function.in.th/java-swing

9. Java - Swing • Jseparator สร้าง Object Separator • JTextPane สร้าง Object TextPane • JEditorPane สร้าง Object EditorPane • Jtree สร้าง Object Tree • JTable สร้าง Object Table • JToolBar สร้าง Object ToolBar • JInternalFrame สร้าง Object InternalFrame • JLayeredPane สร้าง Object LayeredPane เมธอดภายในแต่ละคลาสดูเพิ่มเติมจาก http://code.function.in.th/java-swing

10. Java - Swing • JDesktopPane สร้าง Object DesktopPane • JOptionPaneสร้าง Object OptionPane • Jcolorshooserสร้าง Object ColorShooser • JFileChooserสร้าง Object FileChooser เมธอดภายในแต่ละคลาสดูเพิ่มเติมจาก http://code.function.in.th/java-swing

11. Radio Button Text field Text area Combo Box Check box Button

12. การสร้างวินโดว์อย่างง่ายการสร้างวินโดว์อย่างง่าย • JFrame() • JFrame(title:String) • setSize(width: int, height: int) • setLocation(x:int, y:int) • setVisible(Visible: boolean) • setDefaultCloseOperation(mode: int) • setLocationRelativeTo(c: Component) • pack()

13. การสร้างวินโดว์อย่างง่ายการสร้างวินโดว์อย่างง่าย Import javax.swing.*; Public class MyFrame{ public static void main(String args[]) Jframeframe = new JFrame(“MyFrame”); //สร้างเฟรมพร้อมกำหนดหัวเรื่อง frame.setSize(400,300); //กำหนดขนาดเฟรม frame.setLocationRelative(null); //กำหนดให้แสดงกลางจอภาพ frame.setDefaultCloseOperation(Jframe.EXIT_ON_CLOSE); //ให้จบโปรแกรมเมื่อปิดเฟรม frame.setVisible(true); //ให้แสดงเฟรมได้ } }

14. การวางคอมโพเนนต์ในหน้าวินโดว์การวางคอมโพเนนต์ในหน้าวินโดว์ Import javax.swing.*; Public class MyFrame{ public static void main(String args[]) Jframeframe = new JFrame(“MyFrame”); JButtonjbtOK = new Jbutton()//สร้าง jbtOKเป็นออบเจ็กต์ของปุ่ม frame.add(jbtOK);//ใช้คำสั่ง add วางปุ่มบนเฟรม frame.setSize(400,300); frame.setLocationRelative(null); frame.setDefaultCloseOperation(Jframe.EXIT_ON_CLOSE); frame.setVisible(true); } }

15. แนวคิดการเขียนโปรแกรมแบบ GUI • Property • GUI • Concept การกำหนดค่า (set) • Event การอ่านค่า (get) อีเวนท์แฮนด์เลอร์ (Event Handler)

16. หาความรู้เพิ่มเติมได้จาก • http://code.function.in.th/java-swing • http://www.no-poor.com/JavaandAi/chapter10-java.htm

17. Example 1: Basic สร้าง GUI เขียนโค้ดเพิ่มในevent handler private void jButton1ActionPerformed(java.awt.event.ActionEventevt) { SOUT ("Hello"); } กด Run โปรแกรม สังเกตส่วนแสดง Output…เป็นอย่างไร *** SOUT = System.out.println()

18. Example 2: Hello Khun… พิมพ์ข้อความลงในช่อง และกดปุ่ม Say jTextField1 jButton1 เพิ่มเติมโค้ดใน event handler ของปุ่ม Say String n = jTextField1.getText(); JOptionPane.showMessageDialog(this, "Hello khun "+ n );

19. Example 3: แปลงองศา C เป็น F พิมพ์ค่าอุณหภูมิลงในช่อง และกด Enter ผลลัพธ์ ชนิดของข้อมูลที่รับเข้ามาจากคอมโพเนนต์ Text field จะมีชนิดเป็น String หากต้องการรับเข้ามาเพื่อคำนวณจะต้องทำการแปลงเป็นตัวเลขก่อน ดังนี้ • แปลง String ให้เป็น intInteger.parseInt(var); • แปลง String ให้เป็น double Double.parseDouble(var); • แปลงชนิดตัวเลขเป็น String String.valueOf(var);

20. Example 3: แปลงองศา C เป็น F jTextField1 jLabel1 เพิ่มเติมโค้ดใน event handler ของ jTextField1 String input = jTextField1.getText(); double celsius = Double.parseDouble(input); double fahreheit = ((celsius/5)*9)+32; String output = String.valueOf(fahreheit); jLabel1.setText(output);

21. Example 3: แปลงองศา C เป็น F ทำผลลัพธ์ให้มีทศนิยม 2 ตำแหน่ง ให้เรียกเมธอด format(…) แทนเมธอด valueOf(…) String output = String.format(“%.2f”,fahrehiet); พิมพ์โค้ดคำสั่งนี้แทนบรรทัดคำสั่ง String output = String.valueOf(fahreheit);

22. Example 4: ระบบคำนวณ พิมพ์ตัวเลขในช่องข้อมูลที่ 1 และ 2 กดปุ่มคำนวณ คำตอบแสดงในช่องที่ 3 กดปุ่มออกโปรแกรม “หน้าต่างปิด”

23. Example 4: TextField1 >> txt1 TextField2 >> txt2 TextField3 >> txt3 JButton1 >> cmdCal JButton2 >> cmdExit

24. Example 4: Event Handler: cmdCal String t1=txt1.getText(); //อ่านค่าจากช่องข้อมูล 1 String t2=txt2.getText(); //อ่านค่าจากช่องข้อมูล 1 inta = Integer.parseInt(t1); //แปลง Sting เป็น integer intb = Integer.parseInt(t2); //แปลง Sting เป็น integer intc = a+b; txt3.setText(String.valueOf(c));

25. Example 4: Event Handler: cmdExit System.exit(0) // คำสั่งใช้ในการปิดหน้าต่างโปรแกรม

26. Example 5: การใช้งาน Check Box TextField1 >> txt1 TextField2 >> txt2 TextField3 >> txt3 JButton1 >> cmdCal JButton2 >> cmdExit JCheckbox>>jCheckBox1 คลิกถูก checkbox Exit ปุ่ม ออกจากโปรแกรมเปลี่ยนพร็อพเพอร์ตี้เป็น enable

27. Example 5: CheckBox isSelected() // คำสั่งใช้ตรวจสอบว่า chkถูกคลิกเลือกหรือไม่ setSelected() // กำหนดให้chkถูกคลิกเลือกหรือไม่ ตัวอย่าง if(chk.isSelected()) - - > ค่าที่ได้จากการตรวจสอบ คือ True if(!chk.isSelected()) - - > ค่าที่ได้จากการตรวจสอบ คือ False chk.setSelected(); - ->กำหนดให้checkbox ชื่อ chkถูกคลิกเลือก

28. Example 5: Event Handler: jCheckBox1 if(jCheckBox1.isSelected()) cmdExit.setEnabled(true);

29. Example 6: ตัวนับ (สร้าง GUI ทำงานร่วมกับ Class) สร้างไฟล์คลาสชื่อว่า Counter ดังนี้ public class Counter { private int number; public intgetNumber() { return number; } public void countUp(){ if(number<10) number++; } public void countDown(){ if(number>0) number--; } } jLabel1 jUp Output

30. Example 6: ตัวนับ (สร้าง GUI ทำงานร่วมกับ Class) jLabel1 jUp สร้าง GUI เพิ่มเติมโค้ดใน event handler ของ jUp Counter c = new Counter(); c.countUp(); intn = c.getNumber(); jLabel1.setText(String.valueOf(n)); บรรทัดนี้เขียนไว้นอกเมธอดอีเวนต์ของปุ่ม Up (jUp) เขียนไว้ในอีเวนท์แฮนด์เลอร์ของปุ่ม Up (jUp)

31. Example 6: ตัวนับ 2 ตัว จากไฟล์ที่มีตัวนับ 1 ตัว ให้เพิ่มคอมโพเนนต์ปุ่มตัวนับตัวที่ 2 ดังภาพ และเพิ่มเติมโค้ดใน event handler ของ jUp2 ดังนี้ jLabel1 jLabel2 jUp2 jUp Counter d = new Counter(); d.countUp(); intn = d.getNumber(); jLabel2.setText(String.valueOf(n)); ประกาศไว้นอกเมธอดอีเวนท์ของปุ่ม Up2 (jUp2) เขียนไว้ในอีเวนท์แฮนด์เลอร์ของปุ่ม Up2 (jUp2)

32. Example 7: ตัวนับขึ้น – นับลง (ใช้ Button) กด Run โปรแกรม *** การสร้างปุ่มนับลงทีละหนึ่ง เขียนโค้ดเพิ่มเติมในอีเวนท์แฮนด์เลอร์ของปุ่มได้เหมือนกับปุ่มนับเพิ่มทีละหนึ่ง แต่เปลี่ยนเป็นเรียกใช้เมธอด countDown() แทน countUp()

33. Example 8: นับขึ้น – นับลง (ใช้ Checkbox) กรณี ติ๊กถูก ตรงช่อง UP แล้วกดปุ่ม Count กรณี ติ๊กถูก ตรงช่อง UP แล้วกดปุ่ม Count

34. Example 8: (cont.) สร้าง GUI เพิ่มเติมโค้ดใน event handler ของ jButton Counter c = new Counter(); if(jChk.isSelected()) c.countUp(); else c.countDown(); int n = c.getNumber(); jLabel.setText(String.valueOf(n)); jLabel jButton เขียนนอกเมธอดอีเวนท์ของปุ่ม jButton jChk isSelected() เป็นเมธอดใช้ในการตรวจสอบว่า Check box ถูกติ๊ก เลือกหรือไม่ ค่าที่ได้รับคืนจากเมธอดเป็นชนิด Boolean คือ True (ถ้าเช็คได้ว่าถูกติ๊ก)False (ถ้าเช็คได้ว่าไม่ถูกติ๊ก)

35. Example 9: ข้อสอบปรนัย (Radio Group) กด Run โปรแกรม

36. Example 9: (cont.) สร้างเฟรม และจัดวางคอมโพเนนต์ต่าง ๆ จัดรวมกลุ่มคอมโพเนนต์ RadioButton - คลิกเลือกคอมโพเนนต์ ButtonGroup - วางคอมโพเนนต์ ButtonGroupบนเฟรม (บนเฟรมจะมองไม่เห็นคอมโพเนนต์ ButtonGroupที่เราวาง) - คลิกเลือก jRadio1-4 บนเฟรม โดยกดปุ่ม Ctrl พร้อมกับคลิกเมาส์เลือกทีละคอมโพเนนต์ - รวมทั้งหมด ButtonGroupเดียวกันกำหนดที่ButtonGroupตรง Properties เป็น ButtonGroup1 jLabel1 jRadio1 jRadio2 jRadio3 jRadio4 jButton1

37. Example 9: (cont.) เพิ่มเติมโค้ดใน event handler ของ jButton1 if(jRadioButton2.isSelected()) JOptionPane.showMessageDialog(this, "ถูก"); else JOptionPane.showMessageDialog(this, "ผิด"); } ทดลอง Run ทดสอบโปรแกรม

38. JComboBox Class • setSelectedIndex() //ใช้ลือกข้อมูลที่ตำแหน่งไหนใน object JComboBox • setSelectedItem() //ใช้เลือกข้อมูลอะไรใน object JComboBox • getItemCount() // อ่านค่าจำนวนข้อมูลทั้งหมดที่อยู่ใน JComboBox • getSelectedIndex() //อ่านค่าอินเด็กช์ของข้อมูลใน JComboBoxที่ถูกเลือกอยู่ • getSelectedItem() // อ่านข้อมูลใน JComboBoxที่ถูกเลือกอยู่ • addItem() //เพิ่มข้อมูล เข้าไปใน object JComboBoxในตำแหน่งสุดท้าย • removeItem() //ลบข้อมูล เข้าไปใน object JComboBoxในตำแหน่งสุดท้าย

39. Example 10: Combo Box หรือ Drop Down List การทำงานของโปรแกรม คือ เลือกตัวเลือกจากคอมโบบ๊อกซ์ และพิมพ์ชื่อในช่องป้อนข้อมูล และคลิกปุ่ม OK ผลที่ได้คือ เกิด Dialogboxแสดงคำนำหน้าชื่อและชื่อที่ป้อนลงไปในช่อง

40. Example 10: (cont.) jComboBox1 >> comBo jTextField1 >> txtName JButton1 >> cmdOk กำหนดพร็อพเพอร์ตี้ model โดยลบ รายการตัวเลือกที่มีอยู่ใน model ของคอมโบบ๊อกซ์ออกให้หมดและพิมพ์ item ใหม่แทนลงไป คือ นาย และนางสาว เสร็จแล้วกด OK

41. Example 10:Even Handler ของ cmdOK intn =comBo.getSelectedIndex(); JOptionPane.showMessageDialog(this, String.valueOf(n));

42. Example 10 :Even Handler ของ cmdOK String item=comBo.getSelectedItem().toString(); String name= txtName.getText(); String msg=item+name; JOptionPane.showMessageDialog(this, String.valueOf(msg));

43. JList Class • setSelectionMode() //กำหนดวิธีการเลือกข้อมูลใน List • setVisibleRowCount()//กำหนดจำนวนแถวข้อมูลที่จะแสดงให้เห็นใน List • setSelectionBackground() //กำหนดสีพื้นหลัง เมื่อมีการคลิกเลือกที่รายการใน List • setSelectionForeground() //กำหนดสีตัวอักษรเมื่อมีการคลิกเลือกที่รายการใน List • setMode() //กำหนดค่าข้อมูลที่แสดงใน List • getSelectionMode() //อ่านวิธีการเลือกข้อมูลใน List • getSelectedIndex() // อ่านค่าข้อมูลใน List ที่ถูกเลือก • getSelectedValues() //อ่านค่าข้อมูลใน List ที่ถูกเลือก เมธอดอื่น ๆ ดูเพิ่มเติมจาก http://code.function.in.th/java-swing

44. Example 11: List • ลาก List (jList1) วางบนเฟรม กำหนดพร็อพเพอร์ตี้ model ลบ item ที่อยู่ใน model ออกให้หมดแล้วแทนด้วย item ที่ต้องการแสดงใน ListjList1 • ลาก Button (jButton1) วางบนเฟรม

45. Event Handler: List Object[] names=jList1.getSelectedValues(); String msg = ""; for (Object n: names){ msg += n; } JOptionPane.showMessageDialog(this, msg);

46. Example 11: List (cont.) กด Run โปรแกรม กำหนดพร็อพเพอร์ตี้ selectionModeเป็น SINGLE

47. Model กบ กบ List Model กบ ขวัญ กบ ขวัญ List Model

48. DefaultListModel • คลาสที่ทำหน้าที่เป็นโมเดลของลิสท์ (JList) มีชื่อว่า • new DefaultListModel () //สร้าง object DefaultListModel • add() //เพิ่มข้อมูล เข้าไปใน object DefaultListModelในตำแหน่งที่กำหนด • addElement() //เพิ่มข้อมูล เข้าไปใน object DefaultListModel • remove() //ลบข้อมูล เข้าไปใน object DefaultListModelในตำแหน่งที่กำหนด • removeElemetn() //ลบข้อมูล เข้าไปใน object DefaultListModel • firstElement() //อ่านค่าข้อมูลแรกของ List • lastElement() // อ่านค่าข้อมูลสุดท้ายของ List • capacity)() //อ่านค่าจำนวนข้อมูลทั้งหมดที่มีอยู่ใน List เมธอดอื่น ๆ ดูเพิ่มเติมจาก http://code.function.in.th/java-swing

49. Example 12: เพิ่ม-ลบข้อมูลใน List

50. สร้าง object โมเดลลิทส์ในเฟรม DefaultListModel model; เพิ่ม Code : ใน Constructor Frame model = new DefaultListModel(); jList1.setModel(model);