Graphical User Interface (GUI)

1. Graphical User Interface(GUI)

2. AWT (Abstract Windowing Toolkit) •  AWT (Abstract Windowing Toolkit) เป็นเครื่องมือสร้าง Graphic User Interface (GUI) และกำหนดส่วนประกอบ(Component) ต่างๆให้กับ GUI โดยภาษา Java ซึ่งจะประกอบไปด้วย 3 ส่วนคือ • Components เช่น ปุ่ม(button), กล่องรับข้อความ (textfield) ,ข้อความป้าย(label) เป็นต้น • Containers เป็น Component ใหญ่ที่จะจัดเก็บ Component ย่อยอื่นๆ ตัวอย่าง Containersเช่น Applet , Container, Dialog ,Frame, Panel ,Scrollaneเป็นต้น • Layout Managersเป็นการจัดเรียง Component ที่อยู่ใน Containers เช่น FlowLayout , BorderLayout , GridLayout, CardLayoutและ GridBagLayout

3. Swing Overview • แต่ Component ต่างๆ ใน AWT มีข้อจำกัดบางอย่างดังนั้นจึงมีการพัฒนา Package ใหม่ชื่อ Swing ขึ้นมาสนับสนุนของเดิมให้ดีขึ้น ซึ่งในวิชานี้เราจะใช้ Component ต่างๆใน Swing ซึ่งเป็น Class ที่ถูกจัดเก็บไว้ใน Package “javax.swing”

5. ขั้นตอนการสร้าง GUI • สร้าง Object ของ Jframe JFrameObject = new JFrame(); JFrameObject = new JFrame ( object_string_title_bar )

6. ขั้นตอนการสร้าง GUI import javax.swing.*; public class GUI { public static void main(String[] args) { JFrame f = new JFrame(); f.setDefaultCloseOperation(3); f.setSize(400,400); f.setVisible(true); } }

7. ขั้นตอนการสร้าง GUI • สร้าง Object ของ Class Component ใน Swing • เพิ่ม Component ลงใน Container โดยใช้ method add() รูปแบบ JComponentObject2 = new JComponent() ; *Componentเขียนแทน button, label ,list เป็นต้น รูปแบบ • add(Object2, LayoutManager) ;

8. ขั้นตอนการสร้าง GUI • สร้าง Object ของ ClassContainers และกำหนดพื้นที่ในการแสดงผลด้วย method getContentPane() รูปแบบ Containers Object1 = getContentPane() ; • สร้าง Object ของ Class Component ใน Swing รูปแบบ JComponentObject2 = new JComponent() ; *Componentเขียนแทน button, label ,list เป็นต้น

9. ขั้นตอนการสร้าง GUI • เพิ่ม Component ลงใน Container โดยใช้ method add() รูปแบบ Object1.add(Object2) ; • กำหนดการจัดเรียง Component ใน Container รูปแบบ Object1.setLayout (newLayoutManager) ; * LayoutManagerเป็น Object ของ Class LayoutManagerเช่น FlowLayout , BorderLayout , GridLayout, CardLayoutและ GridBagLayout

10. JAVA-SWING  ::  JPanel Class • method: new JPanel (); • return type:Jpanel • content:ใช้สร้าง Object Jpanel • example: • JPanel panel = new JPanel ();

11. JAVA-SWING  ::  JLabel Class • method:newJLabel (); • return type: Jlabel • content:ใช้สร้าง object jlabel • example: • JLabel label = new JLabel (); • JLabel label = new JLabel ( icon, SwingContants.RIGHT ); • String text_label = new String ( "Name :" ); • JLabel label = new JLabel ( text_label ); • ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); • JLabel label = new JLabel ( "Name :", icon, SwingContants.RIGHT );

12. ขั้นตอนการสร้าง GUI • String text; • Icon image; • int alignment; // JLabel.LEFT, JLabel.Center, or JLabel.RIGHT. รูปแบบ • JLabelyourLabel = new JLabel(text); • JLabelyourLabel = new JLabel(text, alignment); • JLabelyourLabel = new JLabel(image); • JLabelyourLabel = new JLabel(image, alignment); • JLabelyourLabel = new JLabel(text, image, alignment);

13. AVA-SWING  ::  JTextField Class • method:newJTextField (); • return type:JTextField • content:ใช้สร้าง object JTextField • example: • JTextFieldtext_field = new JTextField (); • JTextFieldtext_field = new JTextField ( 12 ); //มีการกำหนด ขนาดความกว้าง

14. AVA-SWING  ::  JTextArea Class • method:newJTextArea (); • return type:JTextArea • content:ใช้สร้าง object JTextArea • example: • JTextAreatext_area = new JTextArea(); • JTextAreatext_area = new JTextArea ( 12, 60 ); • extAreatext_area = new JTextArea ( "บ้านเลขที่ หมู่ที่ ตำบล อำเภอ จังหวัด ประเทศ", 12, 60 ); • JTextAreatext_area = new JTextArea (); • text_area.setText( "บ้านเลขที่ หมู่ที่ ตำบล อำเภอ จังหวัด ประเทศ" ); • JTextAreatext_area = new JTextArea ( "บ้านเลขที่ หมู่ที่ ตำบล อำเภอ จังหวัด ประเทศ", 12, 60 ); • String selected_text = text_area.getSelectedText ();

15. AVA-SWING  ::  JButtonClass • String text; • Icon image; => ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); รูปแบบ • JButtonbtn = new JButton(text); JButtonbtn = new JButton(text, image); JButtonbtn = new JButton(image); JButton button = new JButton (); JButton button = new JButton ( "cancel" ); --------------------------------------------------------------- ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); JButton button = new JButton ( icon ); JButton button = new JButton ( "cancel", icon );

16. ตัวอย่าง public void create(){ JPanel panel = new JPanel(); panel.add(new JButton("Button")); add(panel,BorderLayout.SOUTH); setTitle("Simple example"); setSize(400, 400); setDefaultCloseOperation(EXIT_ON_CLOSE); setVisible(true); }

17. ขั้นตอนการสร้าง GUI • JCheckBox • รูปแบบการสร้าง Object ใน class JCheckBox รูปแบบ • JCheckboxnamecheckbox= new JCheckbox("Label",Group,Checkedstatus); • JCheckBoxignoreCase = new JCheckBox("Ignore Case", true); • **Group คือการจัดกลุ่มของ checkbox ถ้าไม่มีกลุ่มให้เป็น nul • **CheckedStatusเป็นการบอกสถานะว่ามีการเช็คที่ช่องหรือป่าว ถ้าเป็น true ก็จะเช็ค ถ้าเป็น false ก็จะไม่เช็ค

18. ตัวอย่าง JPanel p1 = new JPanel(); p1.setPreferredSize(new Dimension(110, 110)); p1.setBorder(LineBorder.createGrayLineBorder()); p1.setBackground(Color.gray); p1.add(new JCheckBox("check 1")); p1.add(new JCheckBox("check 2",true)); add(p1,BorderLayout.WEST);

19. ขั้นตอนการสร้าง GUI • ButtonGroup • รูปแบบการสร้าง Object ใน class ButtonGroup • ButtonGroupnameButtonGroup= new ButtonGroup(); รูปแบบ • JRadioButton • รูปแบบการสร้าง Object ใน class JRadioButton • JRadioButtonnamebutton = new JRadioButton("Label",status); รูปแบบ

20. ตัวอย่าง JPanel p = new JPanel(); p.setLayout(new BoxLayout(p,BoxLayout.X_AXIS)); ButtonGroup g = new ButtonGroup(); JRadioButton r1= new JRadioButton("radio 1"); JRadioButton r2= new JRadioButton("radio 2"); JRadioButton r3= new JRadioButton("radio 3"); g.add(r1); g.add(r2); g.add(r3); p.add(r1); p.add(r2); p.add(r3); add(p); setSize(400, 400); setVisible(true);

21. ขั้นตอนการสร้าง GUI • JMenuBar • รูปแบบการสร้าง Object ใน class JMenuBar • JMenuBarnamemenubar = new JMenuBar(); รูปแบบ • JMenu • รูปแบบการสร้าง Object ใน class JMenu • JMenunameMenu = new JMenu (); รูปแบบ

22. ขั้นตอนการสร้าง GUI • JMenuItem • รูปแบบการสร้าง Object ใน class JMenuItem • JMenuItemnameMenuItem = new JMenuItem (); รูปแบบ

23. ขั้นตอนการสร้าง GUI • JToolBar • รูปแบบการสร้าง Object ใน class JToolBar • JToolBarnameJToolBar = new JToolBar(); รูปแบบ

24. ขั้นตอนการสร้าง GUI • JComboBox • รูปแบบการสร้าง Object ใน class JComboBox JComboBoxnameCombo = new JComboBox(ListData[]); รูปแบบ • JList • รูปแบบการสร้าง Object ใน class JList • JListnamelist = new JList(ListData[] ); รูปแบบ

25. ตัวอย่าง JPanel p3 = new JPanel(); JComboBoxcb = new JComboBox(); cb.addItem("data 1"); cb.addItem("data 2"); p3.add(cb);

26. ขั้นตอนการสร้าง GUI • JTextField • รูปแบบการสร้าง Object ใน class JTextField JTextFieldnameTextField = new JTextField(“Label”,size ); รูปแบบ • JTabbedPane • รูปแบบการสร้าง Object ใน class JTabbedPane JTabbedPanenameTabbedPane = new JTabbedPane(); รูปแบบ

27. ขั้นตอนการสร้าง GUI • JScrollBar • รูปแบบการสร้าง Object ใน class JScrollBar JScrollBarscroll_bar = new JScrollBar (); รูปแบบ ScrollBarscroll_bar = new JScrollBar ( JScrollBar.VERTICAL ); JScrollBarscroll_bar = new JScrollBar ( JScrollBar.HORIZONTAL);

28. ขั้นตอนการสร้าง GUI • JScrollPane • ใช้สร้าง Object JScrollPaneโดยจะมี scrollbar ขึ้นมาทั้งแนวตั้งและแนวนอน เมื่อจำเป็น • รูปแบบการสร้าง Object ใน class JScrollBar รูปแบบ Container container = getContentPane (); JScrollPanescroll_pane = new JScrollPane (); container.add( scroll_pane );

29. ขั้นตอนการสร้าง GUI • JScrollPane • ใช้สร้าง object JTabbedPane • รูปแบบการสร้าง Object ใน class JTabbedPane รูปแบบ JTabbedPane tab = new JTabbedPane(); JTabbedPane tab = new JTabbedPane ( JTabbedPane.RIGHT); TabbedPane tab = new JTabbedPane ( JTabbedPane.RIGHT ); tab.addTab( "DataEmployee", new JButton ( "TestTab" ) ); ImageIcon icon = new ImageIcon ( "c:/bamboo.gif" ); JTabbedPanetab = new JTabbedPane ( JTabbedPane.RIGHT ); tab.addTab( "DataEmployee", icon, new JButton ( "TestTab" ) );

30. ขั้นตอนการสร้าง GUI • JScrollPane • ใช้สร้าง object JTable • รูปแบบการสร้าง Object ใน class JTable รูปแบบ JTable table = new JTable(); DefaultTableModeltable_model = new DefaultTableModel (); String [] value = { "bamboo", "lab", "code" }; table_model.addColumn( "website", value ); JTabletable = new JTable ( table_model); JTabletable = new JTable ( 5, 3 );

31. Layout Manager • FlowLayoutเป็นการเรียง Component แบบง่าย โดยจะเรียงจากซ้ายมือไปขวามือตามแนวนอน พอหมดบรรทัดก็จะขึ้นใหม่ ปกติถ้าไม่กำหนดอะไร (defaults) Layout แบบ FlowLayoutจะกำหนดระยะห่างระหว่าง Component เป็นระยะห่าง 5 พิกเซล และจะกำหนดให้ Component ทั้งหมดอยู่ตรงกลาง แต่สามารถปรับระยะห่าง หรือตำแหน่งของ Component FlowLayout(align, intHorizontalSpacing,intVerticalSpacing); *align คือตำแหน่งที่จะวาง component เช่น right ,left ,center *HorizontalSpacingคือค่าระยะห่างระหว่าง Component แนวนอน *VerticalSpacingคือค่าระยะห่างระหว่าง Component แนวตั้ง

32. Layout Manager • ตัวอย่าง FlowLayout( FlowLayout.LEFT, 5, 10 );

33. Layout Manager • GridLayoutเป็นการเรียง Component ในรูปแบบตาราง โดยจะจัดเรียง component ในลักษณะ row กับ column โดยจะแบ่งเท่าๆกันหมดทุก cell และจะเรียง component จากซ้ายมือไปขวามือตามแนวนอน พอหมดบรรทัดก็จะขึ้นใหม่ ในการจัดเรียงแบบนี้จะต้องกำหนด row และ column ก่อน(ถ้าไม่กำหนด default จะให้เป็น 1 component ต่อ 1column) อีกทั้งยังสามารถปรับระยะห่าง หรือตำแหน่งของ Component ได้ GridLayout(introw,intcolumn,intHorizontalSpacing,intVerticalSpacing);

34. Layout Manager • ตัวอย่าง GridLayout( 4,3,5,5);

35. Layout Manager • BorderLayoutเป็นการเรียง Component บน Container ที่ถูกแบ่งเป็น 5 ส่วน ตามทิศต่างๆ เช่น North , South , West , East ,Center เมื่อต้องการจะนำ Component ไปลงบน Container จะต้องกำหนด ทิศทางด้วย(จะทำต้อง Add Component นั้นเอง) • วิธีใช้container.add(Component,Borderlayout.position) • *Position คือNorth , South , West , East ,Center BorderLayout(intHorizontalSpacing,intVerticalSpacing);

36. Layout Manager ตัวอย่างcontainer.add(Northbutton,Borderlayout.North); container.add(Centerbutton,Borderlayout.Center); . .

37. JAVA-SWING  ::  JComponent Class • Method : setMaximumSize ( object_dimension ); • return type: void • content: ใช้กำหนด maximum size ให้กับ jcomponentในรูปแบบของ dimension • example: • JButton button = new JButton ( "cancel" ); • Dimension dimension = new Dimension ( 120, 30 ); • button.setMaximumSize ( dimension );

38. JAVA-SWING  ::  JComponent Class • method:getMaximumSize (); • return type:Dimension • content:ใช้คืนค่า maximum size ของ jcomponentในรูปแบบของ dimension • example: • JButton button = new JButton ( "cancel" ); • button.setBounds ( 0, 0 150, 30 ); • Dimension maximum_size = button.getMaximumSize ();