11 komponen gui

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.