Java GUI

JAVA GUI
1.
2.
3.
4.

Konsep Graphical User Interface (GUI)

di Java
Komponen Dasar Swing
Penanganan Kejadian (Event Handling)
Membangun Aplikasi GUI

Konsep Graphical User

Interface (GUI) di Java

API untuk Aplikasi GUI di Java

1. AWT (Abstract Window Toolkit):
Library dan komponen GUI (java.awt) yang pertama
kali diperkenalkan oleh Java, Sun tidak
merekomendasikan lagi penggunaan komponen GUI
dari AWT
2. Swing or JFC (Java Foundation Class):
Library dan komponen GUI (javax.swing) terbaru
dari Java dan yang direkomendasikan Sun untuk
pemrograman GUI. Komponen Swing sebagian besar
adalah turunan AWT dan lebih lengkap daripada AWT

Fitur Swing
Komponen

GUI Lengkap: button, listbox, combobox,

textarea, dsb
Pluggable Look-and-Feel: tampilan GUI dapat diubah sesuai
dengan kehendak (tidak perlu mengikuti native OS)
Data Transfer Antar Komponen: drag and drop, copy and
paste
Internationalization: proses desain aplikasi yang
memungkinkan aplikasi dijalankan sesuai dengan preferensi
tanpa rekompilasi
Localization: proses translasi teks ke bahasa lokal dan
menambahkan komponen lokal

Fitur Swing

Fitur Swing
Komponen

GUI Lengkap: button, listbox, combobox,

textarea, dsb
Pluggable Look-and-Feel: tampilan GUI dapat diubah sesuai
dengan kehendak (tidak perlu mengikuti native OS)
Data Transfer Antar Komponen: drag and drop, copy and
paste
Internationalization: proses desain aplikasi yang
memungkinkan aplikasi dijalankan sesuai dengan preferensi
tanpa rekompilasi
Localization: proses translasi teks ke bahasa lokal dan
menambahkan komponen lokal

Komponen Swing

Komponen Dasar Swing

. Top-Level Container: kontainer dasar dimana komponen
lainnya diletakkan (JFrame, JDialog dan Applet)
2. Intermediate Container: kontainer perantara dimana
komponen lainnya diletakkan
(JPanel, JScrollPane, JTabbedPane, JToolbar, JSplitPane)
3. Atomic Component: komponen yang memiliki fungsi
spesifik dan menerima interaksi langsung dari user
(JButton, JLabel, JTextArea, dsb)
4. Layout Manager: mengatur tata letak dan posisi
komponen dalam kontainer (BorderLayout, BoxLayout,
FlowLayout, GridBagLayout, GridLayout)
5. Event Handling: menangani event yang dilakukan user
(klik mouse, ketik keyboard, perbesar frame, dsb)

Top-Level Container

JFrame
//1. Create the frame
JFrame frame = new JFrame("Frame Beraksi");
//2. Optional: What happens when the frame closes?
frame.setDefaultCloseOperation(JFrame.EXIT_ N_CLOSE);
//3. Create components and put them in the frame
//...create emptyLabel...
frame.getContentPane().add(emptyLabel , BorderLayout.CENTER);
//4. Size the frame
frame.pack();
//5. Show it
frame.setVisible(true);

FrameBeraksi.java
import javax.swing.*;
public class FrameBeraksi {
public static void main(String[] args){
JFrame frame = new JFrame("Frame Beraksi");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JLabel emptyLabel = new JLabel("Frame Beraksi");
frame.getContentPane().add(emptyLabel);
frame.setSize(400,200);
frame.setVisible(true);
}
}

FrameBeraksi2.java
import javax.swing.*;
public class FrameBeraksi2 extends JFrame {
public FrameBeraksi2() {
super("Frame Beraksi 2");
setSize(300, 100);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public static void main(String[] arguments) {
FrameBeraksi2 frame= new FrameBeraksi2();
}
}

Atomic Component

JFrame
//1. Create the frame
JFrame frame = new JFrame("Frame Beraksi");
//2. Optional: What happens when the frame closes?
frame.setDefaultCloseOperation(JFrame.EXIT_ N_CLOSE);
//3. Create components and put them in the frame
//...create emptyLabel...
frame.getContentPane().add(emptyLabel , BorderLayout.CENTER);
//4. Size the frame
frame.pack();
//5. Show it
frame.setVisible(true);

Fitur Standard JComponent

Tool

Tips: setToolTipText()
Painting and Borders: setBorder(),
paintComponent()
Pluggable Look and Feel:
UIManager.setLookAndFeel()
Properties: putClientProperty(), getClientProperty()
Layout: setMinimumSize(), setMaximumSize,
setAlignmentX()
Drag and Drop: component .setDragEnabled(true)
Double Buffering: untuk menghaluskan gambar
Key Bindings: untuk mnemonics dan accelerators

//1. Create the frame

JFrame frame = new JFrame("Frame Beraksi");
//2. Optional: What happens when the frame closes?
frame.setDefaultCloseOperation(JFrame.EXIT_ N_CLOSE);
//3. Create components and put them in the frame
//...create emptyLabel...
frame.getContentPane().add(emptyLabel , BorderLayout.CENTER);
//4. Size the frame
frame.pack();
//5. Show it
frame.setVisible(true);

//1. Create the frame

JFrame frame = new JFrame("Frame Beraksi");
//2. Optional: What happens when the frame closes?
frame.setDefaultCloseOperation(JFrame.EXIT_ N_CLOSE);
//3. Create components and put them in the frame
//...create emptyLabel...
frame.getContentPane().add(emptyLabel , BorderLayout.CENTER);
//4. Size the frame
frame.pack();
//5. Show it
frame.setVisible(true);

JButton
import javax.swing.*;
public class ButtonBeraksi extends JFrame {
JButton load = new JButton("Load");
JButton save = new JButton("Save");
public ButtonBeraksi() {
super("Button Beraksi");
setSize(140, 170);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel pane = new JPanel();
pane.add(load);
pane.add(save);
add(pane);
setVisible(true);
}
public static void main(String[] arguments) {
ButtonBeraksi button = new ButtonBera

Layout Manager

Jenis Layout Manager

1.
2.
3.
4.
5.
6.

Border Layout
Flow Layout
Grid Layout
Grid Bag Layout
Box Layout
Card Layout

BorderLayoutBeraksi.java
import java.awt.*;
Import java.awt.event.*;
import javax.swing.*;
public class BorderLayoutBeraksi extends JFrame
{
JButton nButton = new JButton("North");
JButton sButton = new JButton("South");
JButton eButton = new JButton("East");
JButton wButton = new JButton("West");
JButton cButton = new JButton("Center");
JButton( Center );
public BorderLayoutBeraksi() {
super("Border Layout Beraksi"); setSize(240,
280);
setDefaultCloseOperation(JFrame.EXIT_ON_CLO
SE);
setLayout(new BorderLayout());
add(nButton, BorderLayout.NORTH);
add(sButton, BorderLayout.SOUTH);
add(eButton, BorderLayout.EAST);
add(wButton, BorderLayout.WEST);
add(cButton, BorderLayout.CENTER); }

public static void

main(String[] args) {
BorderLayoutBeraksi
frame = new
BorderLayoutBeraksi();
Frame.setVisible(true);
}
}

Jenis Layout Manager

1.
2.
3.
4.
5.
6.

Border Layout
Flow Layout
Grid Layout
Grid Bag Layout
Box Layout
Card Layout

Jenis Layout Manager

1.
2.
3.
4.
5.
6.

Border Layout
Flow Layout
Grid Layout
Grid Bag Layout
Box Layout
Card Layout

FlowLayoutBeraksi.java
import java.awt.*; bImport java.awt.event.*;
import javax.swing.*;
public class FlowLayoutBeraksi extends JFrame {
JButton a = new JButton("Alibi");
JButton b = new JButton("Burglar");
JButton c = new JButton("Corpse");
JButton d = new JButton("Deadbeat");
JButton e = new JButton("Evidence");
public static void main(String[] args) {
FlowLayoutBeraksi frame = new
FlowLayoutBeraksi();
JButton f = new JButton("Fugitive");
public FlowLayoutBeraksi() {
super("Flow Layout Beraksi"); setSize(360, 120);

Border Layout
2. Flow Layout
3. Grid Layout
4. Grid Bag Layout
5. Box Layout
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
6.
Card Layout
FlowLayout lm = new
1.

FlowLayout(FlowLayout.LEFT);
setLayout(lm);
add(a); add(b); add(c); add(d);
add(e); add(f);
setVisible(true);

public static void

main(String[] args) {
FlowLayoutBeraksi
frame = new
FlowLayoutBeraksi();
}
}

GridLayoutBeraksi.java
GridLayout family = new
GridLayout(3, 3, 10, 10);

import java.awt.*; import java.awt.event.*;

import javax.swing.*;
public class GridLayoutBeraksi extends JFrame
{
JButton marcia = new JButton("Marcia");
JButton carol = new JButton("Carol");
JButton greg = new JButton("Greg");
JButton jan = new JButton("Jan");
JButton alice = new JButton("Alice");
JButton( Alice );
JButton peter = new JButton("Peter");
JButton cindy = new JButton("Cindy");
JButton mike = new JButton("Mike");
JButton bobby = new JButton("Bobby");
public GridLayoutBeraksi() {
super(" Grid Layout Beraksi ");
setSize(260, 260);
setDefaultCloseOperation(JFrame.EXIT_ON_
CLOSE);
JPanel pane = new JPanel();

pane.setLayout(family);
pane.add(marcia);
pane.add(carol);
pane.add(greg);
pane.add(jan);
pane.add(alice);
pane.add(peter);
pane.add(cindy);
pane.add(mike);
pane.add(bobby);

add(pane);
setVisible(true);

public static void

main(String[] args) {
GridLayoutBeraksi frame
= new
GridLayoutBeraksi();
}
}

GridBagLayout

BoxLayoutBeraksi.java
import java.awt.*; import javax.swing.*;
public class BoxLayoutBeraksi extends JFrame {
public BoxLayoutBeraksi() {
super("BoxLayoutBeraksi"); setSize(430,
150);
setDefaultCloseOperation(JFrame.EXIT_ON_CLO
SE);

JPanel commandPane = new JPanel();

BoxLayout horizontal = new
BoxLayout(commandPane,BoxLayout.X AXIS);
commandPane.setLayout(horizontal);
JButton subscribe = new
JButton("Subscribe");
JButton unsubscribe = new
JButton("Unsubscribe");
JButton refresh = new JButton("Refresh");
commandPane.add(subscribe);
commandPane.add(unsubscribe);
commandPane.add(refresh);
add(commandPane);
}

public static void

main(String[] args) {
BoxLayoutBeraksi st = new
BoxLayoutBeraksi();
}
}

CardLayoutBeraksi.java
import javax.swing.*; import java.awt.*;
class CardLayoutBeraksi{
public static void main(String[] args){
JFrame frame = new JFrame("Card Layout Beraksi");
JPanel panel1 = new JPanel(); JPanel panel2 = new JPanel();
JButton button = new JButton("Button dalam panel ke 1");
JT tA t t JT tA ("T t d l l k 2")
JTextArea text = new JTextArea("Text dalam panel ke 2");
panel1.add(button); panel2.add(text);
JTabbedPane tab = new JTabbedPane();
tab.add(panel1, "Tab 1"); tab.add(panel2, "Tab 2");
frame.getContentPane().add(tab,BorderLayout.NORTH);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.pack(); frame.setVisible(true);
}
}

Penanganan

Kejadian
(Event Handling)

Event
Event

adalah kejadian atau peristiwa yang

dilakukan oleh user terhadap user interface
menggunakan peralatan mouse dan keyboard
Setiap objek dapat dinotifikasi jika suatu event
terjadi sehingga objek tersebut dapat
memutuskan apa yang harus dilakukan untuk
menanggapi (menangani) event tersebut (event
handling)
Agar suatu objek dapat dinotifikasi tentang suatu
event, objek harus mendaftarkan diri sebagai
event listener ke sumber yg menghasilkan event,
dan mengimplementasikan interface listener yg
sesuai

Proses Penanganan Event

1. Komponen harus didaftarkan sebagai pendengar
(listener) dg menggunakan method addXXXListener()
JButton tombolSelesai = new JButton(Selesai);
tombolSelesai.addActionListener(this);

2. Meng-implementasi interface listener atau meng-extends

class adapter (bisa juga dengan membuat inner class)
1. class HelloGUI implements MouseListener{}
2. class HelloGUI extends MouseAdapter{} atau
class HelloGUI extends JFrame{ class handler extends
MouseAdapter{}}

3. Menuliskan code penangan kejadian pada method class

handler extends
MouseAdapter{
public void mouseClicked(MouseEvent e){
//code penangan kejadian }}

Listener Yang Sering Digunakan

Kategori

Interface

Method

Action

ActionListener

actionPerformed(ActionEvent)

Item

ItemListener

itemStateChanged(ItemEvent)

Mouse

MouseListene mouseClicked(MouseEvent)
mouseEntered(MouseEvent)
r

mouseExited(MouseEvent)
mousePressed(MouseEvent)
mouseReleased(MouseEvent)

Mouse
Motion
Key

MouseMotionLi
stener
KeyListener

mouseDragged(MouseEvent)
mouseMoved(MouseEvent)

Focus

FocusListener

focusGained(FocusEvent)
focusLost(FocusEvent)

Window

WindowListene windowClosing(Windowevent)
windowOpened(Windowevent)
r

keyPressed(KeyEvent)
keyReleased(KeyEvent)
keyTyped(KeyEvent

windowActived(Windowevent)

Daftar Listener Lengkap

Listener (Semua Komponen Swing)

Listener

Deskripsi

ComponentListen
er

Mendengarkan perubahan size, position,

atau visibility
dari komponen

FocusListener

Mendengarkan ketika komponen

mendapatkan atau
kehilangan fokus keyboard

KeyListener

Mendengarkan penekanan tombol

keyboard (hanya
untuk komponen yang mendapat fokus
keyboard)

MouseListener

Mendengarkan penekanan mouse, klik

mouse,
pelepasan mouse, dan pergerakan mouse

MouseMotionList
ener

Mendengarkan perubahan posisi kursor

mouse pada
komponen

MouseWheelListe

Mendengarkan pergerakan roda mouse

Listener API Table -1Listener or Adapter

Listener Method

ActionListener

actionPerformed(ActionEvent)

AncestorListener

ancestorAdded(AncestorEvent)
ancestorMoved(AncestorEvent)
ancestorRemoved(AncestorEvent
)

CaretListener

caretUpdate(CaretEvent)

CellEditorListener

editingStopped(ChangeEvent)
editingCanceled(ChangeEvent)

ChangeListener

stateChanged(ChangeEvent)

ComponentListener
ComponentAdapter

componentHidden(ComponentEv
ent)
componentMoved(ComponentEve
nt)
componentResized(ComponentEv
ent)
componentShown(ComponentEve
nt

ContainerListener
ContainerAdapter

componentAdded(ContainerEvent
)

Deskripsi

Listener API Table -2-

Listener or Adapter

Listener Method

FocusListener
FocusAdapter

focusGained(FocusEvent)
focusLost(FocusEvent)

HierarchyBoundsListe
ner
HierarchyBoundsAdap
ter

ancestorMoved(HierarchyEvent)
ancestorResized(HierarchyEvent)

HierarchyListener

hierarchyChanged(HierarchyEvent)

HyperlinkListener

hyperlinkUpdate(HyperlinkEvent)

InputMethodListener

caretPositionChanged(InputMethod
Event)
inputMethodTextChanged(InputMet
hodEvent)

InternalFrameListener
InternalFrameAdapter

internalFrameActivated(InternalFra
meEvent)
internalFrameClosed(InternalFrame
Event)
internalFrameClosing(InternalFram
eEvent)

Deskrip
si

Listener API Table -3Listener or

Adapter

Listener Method

ListDataListen
er

contentsChanged(ListDataEvent)
intervalAdded(ListDataEvent)
intervalRemoved(ListDataEvent)

ListSelectionLi
stener

valueChanged(ListSelectionEvent)

MenuDragMou
seListener

menuDragMouseDragged(MenuDragM
ouseEvent)
menuDragMouseEntered(MenuDragMo
useEvent)
menuDragMouseExited(MenuDragMou
seEvent)
menuDragMouseReleased(MenuDragM
ouseEvent)

MenuKeyListe
ner

menuKeyPressed(MenuKeyEvent)
menuKeyReleased(MenuKeyEvent)
menuKeyTyped(MenuKeyEvent)

Desk
ripsi

Listener API Table -4Listener or Adapter

Listener Method

MouseListener

mouseClicked(MouseEvent)
mouseEntered(MouseEvent)
mouseExited(MouseEvent)
mousePressed(MouseEvent)
mouseReleased(MouseEvent)

MouseMotionListene mouseDragged(MouseEvent)
r
mouseMoved(MouseEvent)
MouseMotionAdapte
r,
MouseInputAdapter
MouseWheelListener popupMenuCanceled(PopupMenuEv
MouseAdapter
ent)
popupMenuWillBecomeInvisible(Po
pupMenuEvent)
popupMenuWillBecomeVisible(Popu
pMenuEvent)
PropertyChangeList
ener

propertyChange(PropertyChangeEv
ent)

TableColumnModelLi

columnAdded(TableColumnModelEv

Deskrips
i

Membangun Aplikasi GUI dengan

Netbeans

The Palette

The Design Area

The Source Editor

The Property Editor

The Inspector

Studi Kasus Membangun

Aplikasi GUI

Studi Kasus Aplikasi GUI

1.
2.
3.
4.
5.
6.

Aplikasi
Aplikasi
Aplikasi
Aplikasi
Aplikasi
Aplikasi

Konversi Suhu
Pertambahan Dua Angka
Penghitungan Jumlah Hari
Kalkulator
Penentu Nilai Mahasiswa
Biodata Mahasiswa

Aplikasi Konversi Suhu

GUI

Component: TextField, Label, Button

Events: actionPerformed, mouseClicked

1. Membuat Project Baru

2. Memberi Nama Project

Nama

Project: CelciusToFahrenheit
Uncheck: Create Main Class

3. Menambahkan JFrame
Form Pada Project

Nama

Frame: CelciusToFahrenheitGUI
Package: GUI

3. Menempatkan GUI
Component ke Design
(Frame)

4. Mengubah Text dari

GUI Component (Edit Text)

JTextField1:

Kosongi
JLabel1: Celcius
JLabel2: Fahrenheit
JButton1: Convert

5. Mengubah Nama Variable

dari Setiap GUI Component
(Change Variable Name)
JTextField1:

celciusTextField
JLabel1: celciusLabel
JLabel2: fahrenheitLabel
JButton1: convertButton

6. Rapikan Tampilan Frame Program Kita (Potong Yang

Tidak Perlu)

7. Buat Event untuk

Convert Button
Klik

Kanan Pada Convert Button

Pilih Event Action ActionPerfomed
atau Pilih Event Mouse MouseClick

8. Buat Code untuk Event

Handling di Convert Button

double fahrenheit =
Double.parseDouble(celciusTextField.getText()) * 1.8 + 32;

fahrenheitLabel.setText(fahrenheit + " Fahrenheit");

9. Kompilasi (Build, F11)

Project

10. Jalankan (Run, F6) Project

Aplikasi Pertambahan Dua

Angka

GUI

Component: Panel, Label, TextField, Button

Logic Programming: if-else
Events: actionPerformed
Features: requestFocus, Sistem.exit(0)

Aplikasi Pertambahan Dua Angka

1. Angka
Pertama dan
Angka Kedua
dimasukkan
oleh user
2. Tombol
Tambah diklik
maka akan
keluar hasil
pertambahan
di field ketiga
3. Tombol
Hapus untuk
membersihka

Operasi Dua Angka

Fitur Tambahan:
1. Error dialog
muncul bila
input nilai
bukan
numerik
2. Gunakan
Event
keyTyped
pada TextField
untuk
tampilkan
error
3. Memunculkan
error dialog:

method baru

panggil method

Aplikasi Penghitungan Jumlah

Hari

GUI

Component: Panel, Label, TextField, PasswordField, Button, ComboBox

Logic Programming: if-else, switch
Event: actionPerformed, keyTyped

Aplikasi Penghitungan Jumlah Hari

1. Muncul login form,
bila ID User dan
Password = admin,
maka aplikasi akan
muncul
2. Tombol Hitung
diklik, maka akan
muncul jumlah hari
pada bulan dan
tahun yang
ditunjuk
3. Perhatikan bahwa
ada perhitungan
tahun kabisat pada
bulan pebruari
4. Tombol simpan
untuk menyimpan

Ganti TextField menjadi ComboBox

Aplikasi Penampil Gambar dengan

Button

GUI

Component: BorderLayout, Button,

CardLayout
Logic Programming: none
Event: actionPerformed

Penampil Gambar (Button)

Aplikasi Penampil Gambar dengan

Button (FullScreen Undecorated)

GUI

Component: BorderLayout, Button, CardLayout

Logic Programming: none
Event: actionPerformed

Aplikasi Penampil
Gambar

GUI

Component:ComboBox, CardLayout
Logic Programming: none
Event: itemStateChanged

Penampil Gambar (ComboBox)

Login Form dan

Konfirmasi Keluar
Aplikasi

GUI

Component:TextField, PasswordField,
Menu Bar, Menu Item
Logic Programming: If-Else
Event: KeyPressed

Aplikasi Penentu Nilai

Mahasiswa

GUI

Component: Label, TextField, Button

Logic Programming: if-else, switch
Event: actionPerformed, keyTyped

Aplikasi Penentu Nilai Mahasiswa

Nilai Rata-Rata:
UTS+TM+UAS/3
Grade:
1. 90-: A
2. 80-89: B
3. 70-79: C
Hasil:
4. A-C: Lulus
5. D: Tidak Lulus
Fitur Tambahan:
6. Error dialog muncul
ketika input nilai
bukan numerik, nilai
tidak antara 0-100,
atau isian kosong

Aplikasi Kalkulator

GUI

Component: Panel, TextField, Button

Logic Programming: If-Else, Switch

Aplikasi Kalkulator
1. Cara bekerja
seperti
kalkulator
2. Tombol yang
kita tekan
akan muncul
di layar
3. Hasil
perhitungan
akan muncul
di layar
4. Keterangan:
C = clear

Hints: Tahapan Kerja Kalkulator

7
+
operandSatu
1.
2.

3.
4.

8 = 15
operator operandDua

samadengan

hasil

operandSatu: tampilkan angka yg ditekan di layar

operator:
1. Ambil yang ada di layar, simpan sebagai variable
operandSatu
2. Beri tanda operator apa yg dijalankan (+, -, *, dst)
operandDua: tampilkan angka yg ditekan di layar
samadengan:
1.Ambil yang ada di layar, simpan sebagai variable
operandDua
2.Buat keputusan (if or switch), operator apa yang
digunakan dan proses apa yg dilakukan
3.if(operator.equals(+)){
layar.setText(operandSatu + operandDua);
}else if(){
}