11 komponen gui
TRANSCRIPT
1
Antara Muka Antara Muka BergrafikBergrafik
(Graphical User (Graphical User Interface – GUI)Interface – GUI)
Antara Muka Antara Muka BergrafikBergrafik
(Graphical User (Graphical User Interface – GUI)Interface – GUI)
Marini Abu Bakar, Sufian IdrisMarini Abu Bakar, Sufian Idris
Jabatan Sains KomputerJabatan Sains Komputer
2
Abstract Window Toolkit (AWT)
AWT adalah toolkit awal yang disediakan dalam JDK 1.0 dan JDK 1.1
AWT menyediakan:• komponen grafik asas
• seperti label, butang, palang skrol dsb
• infrastruktur untuk komponen grafik • seperti model deligasi peristiwa, pengurusan bentangan
dan sokongan bagi pertukaran data serta komponen ringan
3
Java Foundation Classes (JFC)
JFC mula diperkenalkan dalam JDK 1.2 JFC terdiri daripada pelbagai API (Antara
muka Pengaturcara Aplikasi), antaranya:• AWT• Swing GUI toolkit• Java 2D graphics & imaging• Java Image I/O• Java Print Service
Tajuk ini hanya akan membincangkan mengenai API Swing & AWT
4
Komponen Antara Muka
Setiap komponen GUI mempunyai :• atribut
• cth: status (ditekan atau tidak) bagi butang • cth: kandungan teks pada medan teks
• rupa / visual• spt: warna, saiz
• perlakuan • iaitu tindakbalasnya pada suatu peristiwa
5
Setiap komponen GUI Java merupakan suatu objek Component
Objek Component lazimnya dimasukkan ke dalam suatu bekas (objek Container)
6
Objek Container juga adalah suatu objek Component. Implikasinya, suatu bekas boleh mempunyai bekas lain
butang
medan teks
bekas frame
bekas panel2
bekas panel1
7
Setiap bekas (objek Container) disekutukan dengan suatu pengurus bentangan (objek LayoutManager). Tugas objek LayoutManager ini adalah untuk menyusun objek-objek Component dalam objek Container
butang
medan teks
bekas frame
bekas panel2
bekas panel1
BorderLayout
BorderLayout
GridLayout
8
Hirarki Swing
Dimension
Font
FontMetrics
Component
Graphics
Object Color
Container
Panel Applet
Frame
Dialog
Window
JComponent
JApplet
JFrame
JDialog
Komponen Swing dalam pakej javax.swing
Kelas dalam pakej java.awt
1
LayoutManager
*
Komponen Swing berada dalam pakej javax.swing Kelas Swing mewarisi kelas dalam pakej java.awt
komponen GUI asas Swing mewaris kelas JComponent
9
JComponent
.
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
kita hanya akan bincangkan mengenai beberapa komponen asas GUI Swing dalam tajuk ini
10
AWTAWTEvent
Font
FontMetrics
Component
Graphics
Object Color
Canvas
Button
TextComponent
Label
List
CheckBoxGroup
CheckBox
Choice
Container Panel Applet
Frame
Dialog FileDialog
Window
TextField
TextArea
MenuComponent MenuItem
MenuBar
Menu
Scrollbar
LayoutManager
Tidak digalakkan untuk menggabungkan komponen asas AWT dengan Swing dalam satu bekas
kita akan menggunakan kelas LayoutManager dan AWTEvent dari pakej AWT
11
Langkah membina antara muka GUI Tentukan komponen GUI
• JButton, JLabel, JTextField, JCheckbox dll
Tentukan bekas• JApplet, JPanel, JFrame
Tentukan pengurus bentangan komponen (Layout Manager)• FlowLayout, GridLayout, BorderLayout
Tentukan bagaimana peristiwa harus dikendalikan (Event-Driven Programming)• Event Source, Listener, Listener Interface
Peristiwa akan dibincangkan dalam tajuk berikut.
12
Beberapa komponen kawalan GUI Swing akan dibincangkan (tanpa mengambilkira pengendalian peristiwa), antaranya:• butang JButton• label JLabel• medan teks JTextField• medan katakunci JPasswordField• kotak pilihan JCheckBox• butang radio JRadioButton• senarai JList• kotak kombo JCombobox• kawasan teks JTextArea• penggelungsur JSlider
Komponen Kawalan Swing
13
Butang JButton
Pembina:
JButton(String s)
label pada butang
• cth:JButton butangMerah;
butangMerah = new JButton(“Merah”);
14
import javax.swing.*;import java.awt.*;public class ApletButang extends JApplet {
public void init() {Container pane = getContentPane();pane.setBackground(Color.white);pane.setLayout(new FlowLayout());
pane.add(new JButton(“Merah”));pane.add(new JButton(“Biru”));pane.add(new JButton(“Hijau”));pane.add(new JButton(“Putih”));
}}
run ApletButangrun ApletButang
Capai bekas pane
Set warna latar bekasSet pengurus bentangan bagi bekas
Muatkan komponen JButton dalam bekas
Cipta objek JButton berlabel “Merah”
15
Label JLabelPembina:
JLabel()
JLabel(String s)
JLabel(String s, int j)
Metod ahli:setText(String s)
jajaran:SwingConstants.LEFTSwingConstants.CENTERSwingConstants.RIGHT
teks pada label
setkan teks label kepada s
16
Medan Teks JTextField
Pembina: JTextField(int lj)
saiz lajur medan teks
JTextField(String s, int lj)
teks awal pada medan teks
bina objek medan teks 30 lajur dengan teks awalnya rentetan nol
new JTextField(30);
17
Metod Ahli:
setText(String s) • untuk mensetkan teks kepada s.
getText() • mengembalikan teks objek penerima.
setColumns(int lj) • untuk mensetkan saiz kepada lj.
setEditable(boolean editable)• Setkan sama ada medan teks boleh diedit atau
tidak. Secara lalainya, editable bernilai true.
18
Medan Kata Laluan JPasswordField
Pembina:
JPasswordField(int lj) saiz lajur medan kata laluanbina objek medan kata laluan 15 lajur dengan teks awalnya rentetan nol
new JTextPasswordField(15);
Medan katalaluan akan memaparkan jujukan ‘*’ apabila input dimasukkan
19
20
import java.awt.*;
import javax.swing.*;
public class ApletInputTeks extends JApplet {
private JLabel nama, matrik;
private JTextField teksNama;
private JPasswordField teksMatrik;
public void init() {
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new FlowLayout());
nama = new JLabel("Nama");
teksNama = new JTextField(30);
matrik = new JLabel("Nombor Matrik");
teksMatrik = new JPasswordField(10);
pane.add(nama);
pane.add(teksNama);
pane.add(matrik);
pane.add(teksMatrik);
}
} run ApletInputTeksrun ApletInputTeks
objek label
objek medan teks 30 lajurobjek medan teks kata laluan
muatkan objek pada bekas aplet satu demi satu
21
Kotak Pilihan JCheckBox
Pembina: JCheckBox(String s)
label pada kotak pilihan
bina kotak pilihan berlabel “Java” dengan status awalnya false
new JCheckBox(“Java”);
JCheckbox(String s, boolean status) status awal bagi kotak pilihan
Metod Ahli: isSelected()
• mengembalikan status objek penerima iaitu true (jika dipilih) atau false (jika sebaliknya)
new JCheckBox(“Java”, true);
22
import java.awt.*;
import javax.swing.*;
public class ApletKotakPilihan extends JApplet {
public void init() {
Container pane = getContentPane();
pane.setBackground(Color.white);
pane.setLayout(new FlowLayout());
pane.add(new JCheckBox("Java", true));
pane.add(new JCheckBox("C"));
pane.add(new JCheckBox("Cobol"));
pane.add(new JCheckBox("VBscript"));
pane.add(new JCheckBox("ASP", true));
}
}
run ApletKotakPilihanrun ApletKotakPilihan
mencipta dan muatkan objek kotak pilihan ke dalam bekas
23
Butang radio JRadioButton
Pembina:
JRadioButton(String s)
run ApletButangRadiorun ApletButangRadio
label pada butang radio
bina butang radio berlabel “Java” dengan status awalnya false
new JRadioButton(“Java”);
JRadioButton(String s, boolean status)status awal bagi kotak pilihan
new JCheckBox(“Java”, true);
Metod Ahli: isSelected()
• kembalikan status objek penerima iaitu true (jika dipilih) atau false (jika tidak dipilih).
24
25
Senarai JList
Pembina:
JList(Object[ ] sen) tatasusunan yang mengandungi senarai item objek JList
Metod Ahli: setVisibleCount(int c)
• set bilangan baris pada senarai yang boleh dipaparkan tanpa palang skrol
26
private String[] item = {"Garis", "Segiempat", "Bulatan", "Segitiga", “Segienam", "Segilapan” };
public void init() {:
JList sen = new JList(item);sen.setVisibleRowCount(4);sen.setSelectionMode(ListSelectionModel.SINGLE_SELECTION);pane.add(new JScrollPane(sen));
}
run ApletSenaraiPilihanrun ApletSenaraiPilihan
menakrifkan tatasusunan senarai item
mencipta objek senarai dgn:• 4 baris item yang nampak• mod pilihan : tunggal
memuatkan senarai dalam tetingkap skrol dan paparkan
27
Metod Ahli: setSelectionMode
• setkan mod pilihanListSelectionModel.SINGLE_SELECTIONListSelectionModel.SINGLE_INTERVAL_SELECTIONListSelectionModel.MULTIPLE_INTERVAL_SELECTION
28
Kotak kombo JComboBox
Pembina:
JComboBox(Object[ ] sen) • membina objek JComboBox yang mewakilkan
suatu komponen kotak kombo yang itemnya terdiri daripada objek dalam tatasusunan sen.
run ApletKotakKomborun ApletKotakKombo
29
Ruang teks JTextArea
Pembina:
JTextArea(int br, int lj)
run ApletRuangTeksrun ApletRuangTeks
bina objek medan teks 5 baris dan 20 lajur dengan teks awalnya rentetan nol
new JTextArea(5, 20);
JTextArea(String tks, int br, int lj)
bil baris dan lajur ruang teks
teks awal pada ruang teks
30
Penggelungsur JSlider
Pembina:
JSlider() membina objek JSlider lalai : mendatarjulat 0..100 nilai awal 50.
JSlider(int arah)
new JSlider();
JSlider.HORIZONTAL - mendatar JSlider.VERTICAL - membujur
31
run ApletSliderrun ApletSlider
JSlider(int arah, int min, int maks, int n) • membina objek JSlider dengan julat min..maks
dan nilai awalnya n.
new JSlider(JSlider.HORIZONTAL, -100, 100, 0);
32
Metod ahli:void setMajorTickSpacing(int)
• setkan tokokan penanda utama
void setMinorTickSpacing(int) • setkan tokokan penanda minor
void setPaintTicks(boolean)• true – untuk memaparkan penanda
tokokan utama dan minor
void setPaintLabels(boolean)• true – untuk memaparkan label bagi
nilai tokokan utama dan r
33
Bahagian ini akan membincangkan• bekas paras tertinggi JApplet dan JFrame • bekas kegunaan umum JPanel
Komponen Bekas
34
JApplet Kita boleh menghasilkan aplet dengan
menulis kelas yang mewarisi JApplet Aplet yang mewarisi JApplet boleh
memuatkan komponen GUI Swing Setiap bekas paras tertinggi spt JApplet
mempunyai bekas contentPane sebagai bekas utama pada tetingkap aplet
Semua komponen Swing dimuatkan dalam bekas contentPane ini.
Ingat kembali ApletButang...
35
import javax.swing.*;import java.awt.*;public class ApletButang extends JApplet {
public void init() {Container pane = getContentPane();pane.setBackground(Color.white);pane.setLayout(new FlowLayout());
pane.add(new JButton(“Merah”));pane.add(new JButton(“Biru”));pane.add(new JButton(“Hijau”));pane.add(new JButton(“Putih”));
}}
run ApletButangrun ApletButang
Capai bekas paneSet warna latar bekasSet pengurus bentangan bagi bekas
Muatkan komponen JButton dalam bekas pane
36
JFrame JFrame adalah sejenis bekas
(objek Container) yang mempunyai tetingkap dan framenya sendiri
JFrame boleh menjadi bekas asas untuk aplikasi
:class FrameLalai {
public static void main(String [] args) {JFrame frame = new JFrame();frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setTitle("Aplikasi Frame Lalai");frame.setSize(300, 200);frame.setVisible(true);
}}
cipta objek JFrame
setkan tajuk framesetkan saiz frametampakkan frame
operasi bila frame di”tutup”
37
JFrame juga mempunyai bekas ContentPane yang menjadi bekas utama pada tetingkap frame
Semua komponen Swing dimuatkan dalam bekas ContentPane ini.
38
import javax.swing.*;class FrameButang extends JFrame {
public FrameButang() {Container pane = getContentPane();pane.setBackground(Color.white);pane.setLayout(new FlowLayout());pane.add(new JButton(“Merah”));pane.add(new JButton(“Biru”));pane.add(new JButton(“Hijau”));pane.add(new JButton(“Putih”));
}public static void main(String [] args) {
FrameButang frame = new FrameButang();frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setTitle(“Aplikasi Frame Butang”);frame.setSize(300, 200);frame. setVisible(true);
}}
Kelas FrameButang mewarisi JFrame
Capai bekas paneSet warna latar bekasSet pengurus bentangan bagi bekas
Muatkan komponen JButton dalam bekas pane
run FrameButangrun FrameButang
Cipta objek FrameButang, setkan tajuk dan saiz, kemudian “tunjukkannya”
39
JPanel Kelas JPanel merupakan suatu bekas kegunaan
umum
Kita boleh menyusun komponen Swing dalam panel dan memuatkan panel dalam bekas paras tertinggi seperti JApplet dan JFrame.
Kita juga boleh memuatkan panel dalam panel.
butang
medan teks
12
butang
bekas frame
bekas panel2
bekas panel1
40
Pengurus Bentangan
Setiap bekas (objek Container) disekutukan
dengan satu pengurus bentangan (objek
LayoutManager) .
Pengurus bentangan menentukan saiz dan
penyusunan komponen dalam bekas tersebut
• jika tetingkap aplet diubah saiz, komponen di
dalamnya mungkin perlu disusun semula dengan
saiz yang bersesuaian
41
Beberapa pengurus bentangan yang disediakan dalam pakej java.awt• BorderLayout• FlowLayout• GridLayout• CardLayout • GridBagLayout• BoxLayout
Kursus ini hanya akan membincangkan pengurus bentangan FlowLayout, BorderLayout dan GridLayout sahaja
42
FlowLayout Bentangan yang paling ringkas tetapi agak
sukar dikawal kedudukan komponennya. Komponen disusun dalam bekas daripada
kiri ke kanan, baris demi baris berdasarkan urutan komponen ditambah dalam bekas tersebut.
43
Merupakan pengurus bentangan lalai bagi objek JPanel
Komponen boleh disusun secara jajar (align)• kiri • kanan• tengah
PembinaFlowLayout()
jajar lalai : jajar tengah
pane.setLayout(new FlowLayout()); run
44
ShowFlowLayout.javaShowFlowLayout.java RunRun
pane.setLayout(new FlowLayout(FlowLayout.LEFT));
FlowLayout(int align)
run LEFT
run RIGHT
FlowLayout(int align , int hgap, int vgap)
pane.setLayout(new FlowLayout(FlowLayout.RIGHT));
pane.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 20));
FlowLayout.LEFT, FlowLayout.CENTER, FlowLayout.RIGHT
jarak mendatar & menegak antara dua komponen bersebelahan
45
BorderLayout Membahagikan bekas kepada lima bahagian:
North, South, East, West, Center Setiap kawasan boleh menampung satu
komponen sahaja. Komponen dalam suatu kawasan akan
disesuaikan saiznya supaya meliputi keseluruhan kawasan
North
South
East West Center
46
Merupakan pengurus bentangan lalai bagi bekas JApplet
Untuk menambah komponen dalam bekas, kita gunakan metod ahli Container berikut:add(Component component, Object constraint)
RunRun
pane.setLayout(new BorderLayout());
pane.add(new JButton(“North”), “North”);
pane.add(new JButton(“Center”), “Center”);
:
objek Component yang ingin dimuatkan dalam bekas
mewakili kekangan yang perlu dipatuhi dalam meletakkan komponen tersebut
47
Sekiranya terdapat kawasan yang tidak mengandungi komponen, pengurus bentangan akan menyesuaikan saiz komponen yang bersebelahan
48
Bagaimana jika kita ingin memasukkan lebih dari satu komponen dalam suatu kawasan?Guna komponen JPanel sebagai bekas untuk menampung komponen tersebut dan masukkan bekas tersebut dalam kawasan itu.
JTextArea
JButton
JScrollPane
run ApletBekasPanel.javaApletBekasPanel.java
49
GridLayout
Ruang paparan objek bekas dibahagikan kepada sel-sel yang sama saiznya. Komponen ditambah dengan memuatkannya dalam sel daripada baris teratas ke baris terbawah, daripada kiri ke kanan
50
RunRun
run aplet Kalkulatorrun aplet Kalkulator
pane.setLayout(new GridLayout(4, 3, 5, 5));
for (int i = 1; i <= 10; i++)
pane.add(new JButton("Component " + i));
Pembina
GridLayout(int brs, int ljr)
GridLayout(int brs, int ljr, int hgap, int vgap)
51
Tuliskan aplet untuk memaparkan susun atur komponen bagi antaramuka ketuhar gelombang mikro berikut:
RunRun
A button
A textfield
12
buttons
frame
p2
p1
Latihan
52
Aplet <--> Aplikasi Bagaimana cara yang mudah untuk menulis
aturcara java supaya boleh diubah perlaksanaannya daripada aplet kepada aplikasi, dan juga sebaliknya??
Kita gunakan contoh aplet Kalkulatoraplet mengunakan bentangan BorderLayout
ruang north : medan teks dengan nilai awal o
ruang center : dimuatkan dengan panel yang mengandungi 16 butangbutang disusun secara GridLayout
53
Muatkan semua komponen ini dalam panel. • Lihat kelas PanelKalkulator.java
Untuk menghasilkan aplet, cipta kelas ApletKalkulator yang memuatkan objek PanelKalkulator dalam bekas ContentPane nya.
import java.applet.*;import javax.swing.*;import java.awt.*;
public class ApletKalkulator extends JApplet {public void init() {
Container pane = getContentPane();pane.setBackground(Color.white);pane.setLayout(new BorderLayout());
PanelKalkulator panelKalk = new PanelKalkulator();pane.add(panelKalk);
}}
54
Dengan cara yang sama, untuk menghasilkan aplikasi, cipta kelas AplikasiKalkulator yang memuatkan objek PanelKalkulator dalam bekas ContentPane nya.
:public class AplikasiKalkulator extends JFrame {
public AplikasiKalkulator() {Container pane = getContentPane();pane.setBackground(Color.white);pane.setLayout(new BorderLayout());PanelKalkulator panelKalk = new PanelKalkulator();pane.add(panelKalk);
}
public static void main(String [] args) {AplikasiKalkulator frame = new AplikasiKalkulator();frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);frame.setTitle("Aplikasi Frame Butang");frame.setSize(300, 200);frame. setVisible(true);
}}
55
Kelas JComponent Disenaraikan beberapa metod ahli yang diwarisi dari kelas JComponent sebagai rujukan
Rectangle getBounds(Rectangle rv) Stores the bounds of this component into "return value" rv and returns rv.
Graphics getGraphics() Returns this component's graphics context, which lets you draw on a component.
int getHeight() Returns the current height of this component.
Point getLocation(Point rv) Stores the x,y origin of this component into "return value" rv and returns rv.
Dimension getSize(Dimension rv) Stores the width/height of this component into "return value" rv and returns rv.
int getWidth() Returns the current width of this component.
int getX() Returns the current x coordinate of the component's origin.
int getY() Returns the current y coordinate of the component's origin.
56
void paint(Graphics g) Invoked by Swing to draw components.
protected void paintComponent(Graphics g) Calls the UI delegate's paint method, if the UI delegate is non-null.
void reshape(int x, int y, int w, int h) Moves and resizes this component.
void setBackground(Color bg) Sets the background color of this component.
void setBorder(Border border) Sets the border of this component.
void setFont(Font font) Sets the font for this component.
void setForeground(Color fg) Sets the foreground color of this component.
void setVisible(boolean aFlag) Makes the component visible or invisible.
void update(Graphics g) Calls paint.
57
Kelas Container Disenaraikan beberapa metod ahli yang diwarisi dari kelas Container sebagai rujukan
Component add(Component comp) Appends the specified component to the end of this container.
Component add(Component comp, int index) Adds the specified component to this container at the given position.
void add(Component comp, Object constraints) Adds the specified component to the end of this container.
Component add(String name, Component comp) Adds the specified component to this container.
Component getComponent(int n) Gets the nth component in this container.
Component getComponentAt(int x, int y) Locates the component that contains the x,y position.
int getComponentCount() Gets the number of components in this panel.
Component[] getComponents() Gets all the components in this container.
58
LayoutManager getLayout() Gets the layout manager for this container.
void paint(Graphics g) Paints the container.
void paintComponents(Graphics g) Paints each of the components in this container.
void remove(Component comp) Removes the specified component from this container.
void remove(int index) Removes the component, specified by index, from this container.
void removeAll() Removes all the components from this container.
void setLayout(LayoutManager mgr) Sets the layout manager for this container.