Graphical User Interface (GUI)

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

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

Swing Component class Component javax.swing.JButton Button javax.swing.JCheckbox Checkbox javax.swing.JDialog Dialog javax.swing.JFrame Frame javax.swing.JLabel Label javax.swing.JMenu Menu javax.swing.JPanel Panel javax.swing.JScrollbar Scrollbar javax.swing.JScrollPane Scroll pane javax.swing.JTextArea Text Area javax.swing.JTextField Text Field javax.swing.JComboBox Combo Box javax.swing.JList List

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

ขั้นตอนการสร้าง 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); }

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

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

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

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

JAVA-SWING :: JLabel Class method:new JLabel (); 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 );

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

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

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

AVA-SWING :: JButtonClass String text; Icon image; => ImageIcon icon = new ImageIcon ( "C:/bamboo.gif" ); รูปแบบ JButton btn = new JButton(text);  JButton btn = new JButton(text, image);  JButton btn = 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 );

ตัวอย่าง 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); }

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

ตัวอย่าง 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);

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

ตัวอย่าง 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);

ขั้นตอนการสร้าง GUI JMenuBar รูปแบบการสร้าง Object ใน class JMenuBar JMenuBar namemenubar = new JMenuBar(); JMenu รูปแบบการสร้าง Object ใน class JMenu รูปแบบ JMenu nameMenu = new JMenu ();

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

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

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

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

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

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

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

ขั้นตอนการสร้าง 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" ); tab.addTab ( "DataEmployee", icon, new JButton ( "TestTab" ) );

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

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

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

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

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

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(int HorizontalSpacing,int VerticalSpacing);

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

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 );

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 ();