Pengaturcaraan GrafikPengaturcaraan Grafik

Pengenalan Kelas GUI Pengenalan Kelas GUI

Semua kelas Java GUI adalah berdasarkan kelas-kelas asal dalam Application Windowing Toolkit, or AWT.

Kelas-kelas AWT yang asal digunakan untuk menyambungkan komponen Swing dan set komponen yang lama

Komponen Swing telah diperkenalkan pada versi 1.1.2 dan sehingga kini.

Komponen AWT yang lama hampir sama dengan komponen Swing, tetapi Swing lebih versatile.

Komponen Grafik Komponen Grafik

Program aplikasi GUI menunjukkan kepada pengguna antaramuka bergrafik.

Antaramuka Bergrafik mengandungi komponen bergrafik seperti: TetingkapButang LabelKotak teks

Komponen Grafik Komponen Grafik

Pengguna berinteraksi dengan aplikasi dengan: Klik pada butang. Buat pilihan pada menu. Masukkan teks dalam ruang teks. Klik pada butang tutup tetingkap.

Kelakuan seperti klik pada butang dipanggil event (peristiwa).

3 Bahagian Program GUI 3 Bahagian Program GUI

Program GUI mengandungi 3 jenis aplikasi: Komponen bergrafik yang membuat

antaramuka pengguna. Metod Listener yang menerima peristiwa

dan memberi tindakbalas pada peristiwa tersebut.

Metod Aplikasi yang melakukan kerja untuk pengguna.

Hirarki Kelas Grafik (AWT)Hirarki Kelas Grafik (AWT)AWTEvent

Font

FontMetrics

Component

Graphics

Object

LayoutManager

Color

Canvas

Button

TextComponent

Label

List

CheckBoxGroup

CheckBox

Choice

Container Panel Applet

Frame

Dialog FileDialog

Window

TextField

TextArea

MenuComponent MenuItem

MenuBar

Menu

Scrollbar

Hirarki Kelas Grafik (Swing)Hirarki Kelas Grafik (Swing)

AWTEvent

Font

FontMetrics

Component

Graphics

Object

LayoutManager

Color

Container

Panel Applet

Frame

Dialog

Window

JComponent

JApplet

JFrame

JDialog

Swing Componentsin the javax.swing pacakge

Lightweight

heavyweight

Hirarki Kelas Grafik (Swing)Hirarki Kelas Grafik (Swing).

JButton

JMenuItem

JCheckBoxMenuItem

AbstractButton

JComponent

JMenu

.JRadioButtonMenuItem

.JToggleButton JCheckBox

JRadioButton

.JComboBox

.JInternalFrame .JLayeredPane

.JList .JMenuBar .JOptionPane

.JPopupMenu

.JProgressBar

.JPane

.JFileChooser.JScrollBar .JScrollPane

.JSeparator

.JSplitPane

.JSlider .JTabbedPane

.JTable

.JTableHeader

.JTextField.JTextComponent

.JEditorPane

.JTextArea

.JToolBar

.JToolTip

.JTree

.JRootPane

.JPanel

.JPasswordField

.JColorChooser

.JLabel

Bingkai(Frames)Bingkai(Frames)

Frame Frame adalah tetingkap yang adalah tetingkap yang tidak berada di dalam tidak berada di dalam tetingkap yang lain. tetingkap yang lain. FrameFrame adalah asas yang mengandungi adalah asas yang mengandungi komponen antaramuka pengguna komponen antaramuka pengguna yang lain dalam aplikasi yang lain dalam aplikasi Java bergrafik.Java bergrafik.

Kelas Kelas Frame Frame boleh digunakan boleh digunakan untuk mencipta tetingkap. untuk mencipta tetingkap.

Komponen Antaramuka Komponen Antaramuka PenggunaPengguna

Frame Pull-down Menus

User InterfaceComponents (UI)

Panel

Panel

Panel

UI

Panel

UI

Panel

UI

Applet

Panel

User InterfaceComponent

Panel

User InterfaceComponent

Panel

User InterfaceComponent

Panel

User InterfaceComponent

Panel

Pull-down Menus

FramesFrames

import javax.swing.*;import javax.swing.*;public class MyFrame public class MyFrame {{ public static void main(String[] args)public static void main(String[] args) { { JFrame f = new JFrame("Test Frame");JFrame f = new JFrame("Test Frame"); f.setSize(400,300);f.setSize(400,300); f.setVisible(true);f.setVisible(true); }}}}

RunRun

Komponen asas GUIKomponen asas GUI

Component Description JLabel An area where uneditable text or icons can be displayed. JTextField An area in which the user inputs data from the keyboard. The area

can also display information. JButton An area that triggers an event when clicked. JCheckBox A GUI component that is either selected or not selected. JComboBox A drop-down list of items from which the user can make a selection

by clicking an item in the list or possibly by typing into the box. JList An area where a list of items is displayed from which the user can

make a selection by clicking once on any element in the list. Double-clicking an element in the list generates an action event. Multiple elements can be selected.

JPanel A container in which components can be placed.

Fig. 12.2 Some basic GUI components.

JLabelJLabel

LabelLabelMenyediakan teks pada GUIMenyediakan teks pada GUIDidefinisikan bersama kelas Didefinisikan bersama kelas JLabelJLabelBoleh memaparkan:Boleh memaparkan:

Sebaris teks (baca sahaja)Sebaris teks (baca sahaja)ImejImejTeks dan imejTeks dan imej

JButtonJButton

ButangButang Pengguna komponen klik pada butang untuk Pengguna komponen klik pada butang untuk

tindakan tertentutindakan tertentu Beberapa jenis yang berbezaBeberapa jenis yang berbeza

Butang ArahanButang ArahanKotak SemakKotak SemakButang Butang ToggleToggleButang Butang RadioRadio

Subkelas Subkelas javax.swing.AbstractButtonjavax.swing.AbstractButtonButang arahan dibentuk dengan kelas Butang arahan dibentuk dengan kelas JButtonJButton

Menjana Menjana ActionEventActionEvents apabila pengguna klik butangs apabila pengguna klik butang

JComboBoxJComboBox

JComboBoxJComboBoxSenarai item yang mana pengguna Senarai item yang mana pengguna

boleh pilihboleh pilihJuga dipanggil senarai Juga dipanggil senarai drop-downdrop-down

Option ButtonOption Button

Penentuan butangPenentuan butangNilai Nilai On/Off On/Off atau atau truetrue//falsefalseJava menyediakan tiga jenisJava menyediakan tiga jenis

JToggleButtonJToggleButtonJCheckBoxJCheckBoxJRadioButtonJRadioButton

Container ClassesContainer Classes

A A containercontainer is an object that can hold is an object that can hold other GUI components. other GUI components.

Visually, a container is an area of the Visually, a container is an area of the screen and the objects it contains are screen and the objects it contains are shown as smaller areas within it. shown as smaller areas within it.

In Java terminology, a window is a In Java terminology, a window is a container. container.

The buttons, sliders, icons and other GUI The buttons, sliders, icons and other GUI components are contained (by the components are contained (by the container). container).

Layout ManagersLayout Managers

Layout managersLayout managersProvided for arranging GUI componentsProvided for arranging GUI componentsProvide basic layout capabilitiesProvide basic layout capabilitiesProcesses layout detailsProcesses layout detailsProgrammer can concentrate on basic Programmer can concentrate on basic

“look and feel”“look and feel”Interface Interface LayoutManagerLayoutManager

Fig. 12.23 Layout managers.Fig. 12.23 Layout managers.Layout manager Description FlowLayout Default for java.awt.Applet, java.awt.Panel and

javax.swing.JPanel. Places components sequentially (left to right) in the order they were added. It is also possible to specify the order of the components using the Container method add that takes a Component and an integer index position as arguments.

BorderLayout Default for the content panes of JFrames (and other windows) and JApplets. Arranges the components into five areas: North, South, East, West and Center.

GridLayout Arranges the components into rows and columns.

Fig. 12.23 Layout managers.

12.14.1 12.14.1 FlowLayoutFlowLayout

FlowLayoutFlowLayoutMost basic layout managerMost basic layout managerGUI components placed in container GUI components placed in container

from left to rightfrom left to right

12.14.2 12.14.2 BorderLayoutBorderLayout

BorderLayoutBorderLayoutArranges components into five regionsArranges components into five regions

NORTHNORTH (top of container)(top of container)SOUTHSOUTH (bottom of container)(bottom of container)EASTEAST (left of container)(left of container)WESTWEST (right of container)(right of container)CENTERCENTER (center of container)(center of container)

12.14.3 12.14.3 GridLayoutGridLayout

GridLayoutGridLayoutDivides container into grid of specified Divides container into grid of specified

row an columnsrow an columnsComponents are added starting at top-Components are added starting at top-

left cellleft cellProceed left-to-fight until row is fullProceed left-to-fight until row is full

12.15 Panels12.15 Panels

PanelPanelHelps organize componentsHelps organize componentsClass Class JPanelJPanel is is JComponentJComponent subclass subclassMay have components (and other May have components (and other

panels) added to thempanels) added to them

Pengaturcaraan Berpandukan Pengaturcaraan Berpandukan PeristiwaPeristiwa

Pengaturcaraan berprosedur Pengaturcaraan berprosedur dilaksanakan dalam cara berprosedur.dilaksanakan dalam cara berprosedur.

Dalam Dalam pengaturcaraan berpandukan pengaturcaraan berpandukan peristiwaperistiwa, kod dilaksanakan apabila , kod dilaksanakan apabila peristiwa itu berlaku.peristiwa itu berlaku.

PeristiwaPeristiwaPeristiwa boleh didefinisikan sebagai Peristiwa boleh didefinisikan sebagai

sejenis isyarat kepada program tentang sejenis isyarat kepada program tentang sesuatu sudah berlaku. sesuatu sudah berlaku.

Peristiwa dijanakan oleh tindakan Peristiwa dijanakan oleh tindakan pengguna luaran seperti pergerakan pengguna luaran seperti pergerakan tetikus, apabila butang tetikus diklik dan tetikus, apabila butang tetikus diklik dan kesan papan kekunci, atau dengan sistem kesan papan kekunci, atau dengan sistem operasi seperti operasi seperti timertimer..

Maklumat PeristiwaMaklumat Peristiwa idid: A number that identifies the event. : A number that identifies the event.

targettarget: The AWT component upon which the event : The AWT component upon which the event occurred. occurred.

argarg: Additional information about the AWT components. : Additional information about the AWT components.

x, y coordinatesx, y coordinates: The mouse pointer location when a : The mouse pointer location when a mouse movement event occurred.mouse movement event occurred.

clickCountclickCount: The number of consecutive clicks for the: The number of consecutive clicks for themouse events. For other events, it is zero.mouse events. For other events, it is zero.

whenwhen: The time stamp of the event.: The time stamp of the event.

keykey: The key that was pressed or released.: The key that was pressed or released.

Kelas Kelas PeristiwaKelas Kelas Peristiwa

Tindakan pengguna yang Tindakan pengguna yang terpilihterpilih

Objek Jenis AcaraTindakan pengguna Sumber dijanakan

Klik pada butang JButton ActionEvent

Tukar teks JTextComponent TextEvent

Klik dua kali pada item senarai JList ActionEvent

Item yang dipilih atau tidak JList ItemEvent dengan sekali klik

Item yang dipilih atau tidak JComboBox ItemEvent

Pengendali terpilih PeristiwaPengendali terpilih PeristiwaEvent Class Listener Interface Listener Methods (Handlers)ActionEvent ActionListener actionPerformed(ActionEvent)ItemEvent ItemListener itemStateChanged(ItemEvent)WindowEvent WindowListener windowClosing(WindowEvent)

windowOpened(WindowEvent)windowIconified(WindowEvent)windowDeiconified(WindowEvent)windowClosed(WindowEvent)windowActivated(WindowEvent)windowDeactivated(WindowEvent)

ContainerEvent ContainerListener componentAdded(ContainerEvent)componentRemoved(ContainerEvent)

Mengendalikan acara Mengendalikan acara mudah tetikusmudah tetikus

Objektif : Mencipta Objektif : Mencipta frame frame dan dan memaparkan segiempat pada penunjuk memaparkan segiempat pada penunjuk tetikus apabila tetikus diklik.tetikus apabila tetikus diklik.

TestMouseEventTestMouseEvent

RunRun

Mengendalikan acara Mengendalikan acara mudah tindakanmudah tindakan

Objektif : Memaparkan butang tutup pada Objektif : Memaparkan butang tutup pada tetingkap; menamatkan program dengan tetingkap; menamatkan program dengan mengklik pada butang Tutup dalam tetingkap mengklik pada butang Tutup dalam tetingkap atau pada bar tajuk.atau pada bar tajuk.

TestActionEventTestActionEvent

RunRun