Component องค์ประกอบของ GUI

GUI (Graphical User Interface) คือการเขียนโปรแกรมที่ใช้รูปภาพกราฟิกในการโต้ตอบกับผู้ใช้ ซึ่งในจาวาเราสามารถเลือกงานได้หลายแบบ เช่น Java Swing Java AWT Java Applet Java Script

AWT (Abstract Windowing Toolkit) คือเครื่องมือพื้นฐานในการเขียนโปรแกรมด้วย GUI ประกอบด้วย AWT component AWT Container จัดเป็น component อย่างหนึ่งที่สามารถนำเอา component อื่นๆ มาใส่ได้ Layout Manager ใช้สำหรับจัดแสดง component ออกทางจอภาพ

Swing Component เนื่องจากการที่ AWT เองมีปัญหาต่าง ๆ เกิดขึ้นในการใช้งาน เช่น เรื่องของความจำ ทำให้จาวาพัฒนา class ขึ้นมาใหม่ที่มีความสามารถในด้าน GUI แต่ปัญหาน้อยกว่า ซึ่ง Swing ไม่ได้ใช้งานแทน AWT เพราะ AWT ยังมีอยู่ ในขณะเดียวกัน Swing ก็ยังคงต้อง extends บางคลาสจาก AWT มาใช้งาน

ตารางเปรียบเทียบ component ของ AWT และ Swing AWT Comp. Swing Comp. Applet Japplet List Jlist Component Jcomponent Menu Jmenu Container - MenuBar JMenuBar Button Jbutton MenuItem JMenuItem Canvas Panel Jpanel CheckBox JCheckBox ScrollBar JScrollBar Dialog Jdialog TextArea JTextArea Frame Jframe TextComponent JTextComponent Label JLabel TextField JTextField

import javax.swing.*; class ExDialog { public static void main(String []args) { String firstNumber,seNumber; int number1,number2, sum; firstNumber = JOptionPane.showInputDialog("First num. is"); seNumber = JOptionPane.showInputDialog ("And second num."); number1 = Integer.parseInt(firstNumber); number2 = Integer.parseInt(seNumber); sum = number1+number2; JOptionPane.showMessageDialog (null," Sum of two numbers is :" +sum," Result", JOptionPane.PLAIN_MESSAGE); System.exit(0); }

Swing Component JFileChooser JScrollPane JComboBox JSlider JList JSplitPane JPasswordField JTabbedPane JProgressBar JToolTip JRadioButton

ประเภทของ Component Compound Components คือ คลาสที่ใช้ในการสร้าง GUI ที่มี Component อื่นเป็นส่วนประกอบ เช่น เมนู

Menu Menu Bar MenuItem

ประเภทของ Component Container Components คือ คลาสที่ใช้ในการสร้าง GUI ที่สามารถนำเอา Component อื่นมาเป็นส่วนประกอบได้มีสองประเภท คือ Non-top-level Container Top-level Container

การสร้าง GUI Component จะถูกสร้างขึ้นมาแล้ววางใน Container โดยที่การจัดวาง component นั้นจะอาศัย Layout Manager เป็นตัวช่วยในการจัดวาง จะต้องมีคำสั่ง setSise(int, int) จะต้องมีคำสั่ง setShow() หรือ setVisible(true)

(Swing Component : JFrame) Top Level Container (Swing Component : JFrame)

JFrame JFrame เป็น container ที่สืบทอดมาจากFrame ของAWT ซึ่งเป็น Top level container ที่สามารถอยู่เดี่ยวๆได้ ไม่ต้องอาศัย window ลักษณะที่สำคัญของ JFrame คือ การมีปุ่มปิดปุ่มคืนสภาพ และปุ่มย่อขนาดให้เล็กสุด

ความสูง : y ความยาว : x Title Bar Minimize Button Restore Button Close Button ความสูง : y ความยาว : x

การสร้าง สร้างวัตถุ JFrame ขึ้นใหม่ โดยใช้คำสั่ง JFrame ชื่อเฟรม = new JFrame(" Title bar ") การสืบทอดจากJFame โดยใช้คำสั่ง class ชื่อคลาส extends JFrame

import javax.swing.*; class JFrameDemo { public static void main(String s[]) { JFrame frame = new JFrame("JFrame Source Demo"); frame.setSize(200,150); frame.setVisible(true); }

import javax.swing.*; class JFrameDemo extends JFrame { public static void main(String s[ ]) { JFrameDemo f = new JFrameDemo(); f.setTitle("Test"); f.setSize(200,150); f.setVisible(true); }

Method การกำหนดค่า setResizable(false) กำหนดการปรับขนาด true ปรับขนาดได้false ปรับขนาดไม่ได้ setDefaultCloseOperation(0) กำหนดการออกจาก frame 0 ปิดเฟรมไม่ได้ และ 1 ปิดเฟรมได้ setTitle("Title bar") กำหนดชื่อ Title bar setSize(200,150) กำหนดขนาด(กว้าง,ยาว) setName ("Name") กำหนดชื่อเฟรม setVisible(true) กำหนดการแสดง true แสดง false ไม่แสดง

Method การรับค่า การรับค่าขนาดของเฟรม การรับค่าชื่อ title bar getSize() การรับค่าขนาดของเฟรม getTitle() การรับค่าชื่อ title bar getBackground() การรับค่าสีพื้นหลัง getName() การรับค่าชื่อของเฟรม

JPanel

JPanel เป็น container ที่ไม่สามารถอยู่อย่างอิสระต้องอยู่ภายใต้ Top Level Container Top Level Container JPanel OK Top Level Container OK OK

import java.awt.*; class TestPanel{ public static void main(String s[]){ JFrame f = new JFrame ("Test"); JPanel p = new JPanel(); JPanel p1 = new JPanel(); f.setLayout(new GridLayout()); p.setBackground(Color.blue); p1.setBackground(Color.BLACK); f.add(p); f.add(p1); f.setSize(100,100); f.show(true); }