JAVA SWING GUI

TEKNIK INFORMATIKA
-UNIVERSITAS WIJAYA PUTRA-
JAVA GUI
1. Konsep Graphical User Interface (GUI) di Java
2. Komponen Dasar Swing
3. Penanganan Kejadian (Event Handling)
4. Membangun Aplikasi GUI
3 komponen penting di GUI Programming
• Component
• Layout
• Event Handling
Component
Layout
• Berguna untuk menentukan posisi setiap komponen yang kita buat.
• Susunan komponen di layar :
• Absolute : koordinat x, y ditentukan untuk setiap komponen.
• Relatif terhadap posisi komponen lain / ukuran, resolusi layar, font yang
digunakan, dll.
Event Handling
KONSEP JAVA GUI
API untuk GUI di JAVA
1. AWT (Abstract Window Toolkit):
Library dan komponen GUI (java.awt) yang pertama kali iperkenalkan
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 sistem operasi)
• 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
1. 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)
Komponen SWING
• Komponen-Komponen GUI Swing, diantaranya :
Desain Aplikasi GUI di Netbeans
TOP-LEVEL CONTAINER
Japplet, Jdialog, JFrame
Top-Level Container
 //1. Create the frame
JFrame 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
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);
}
}
FrameBeraksi
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();
}
}
INTERMEDIATE CONTAINER
Menu
ATOMIC COMPONENT
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
JButton 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 ButtonBeraksi();
}
Choice with ComboBox, CheckBox, RadioButton
LAYOUT MANAGER
Layout Manager
1. Border Layout
2. Flow Layout
3. Grid Layout
4. Grid Bag Layout
5. Box Layout
6. Card Layout
 Border Layout
import javax.swing.*;
import java.awt.*; public static void main(String[] args) {
BorderLayoutBeraksi frame = new
public class BorderLayoutBeraksi extends JFrame { BorderLayoutBeraksi();
JButton nButton = new JButton("North"); Frame.setVisible(true);
JButton sButton = new JButton("South"); }
JButton eButton = new JButton("East"); }
JButton wButton = new JButton("West");
JButton cButton = new JButton("Center");
public BorderLayoutBeraksi() {
super("Border Layout Beraksi"); setSize(240, 280);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLayout(new BorderLayout());
add(nButton, BorderLayout.NORTH);
add(sButton, BorderLayout.SOUTH);
add(eButton, BorderLayout.EAST);
add(wButton, BorderLayout.WEST);
add(cButton, BorderLayout.CENTER); }
BorderLayout
 FlowLayout
public class FlowLayoutBeraksi extends JFrame { public static void main(String[] args) {
JButton a = new JButton("Alibi"); FlowLayoutBeraksi frame = new
JButton b = new JButton("Burglar"); FlowLayoutBeraksi();
JButton c = new JButton("Corpse");
}
JButton d = new JButton("Deadbeat");
JButton e = new JButton("Evidence"); }
JButton f = new JButton("Fugitive");
public FlowLayoutBeraksi() {
super("Flow Layout Beraksi"); setSize(360, 120);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
FlowLayout lm = new FlowLayout(FlowLayout.LEFT);
setLayout(lm);
add(a); add(b); add(c); add(d);
add(e); add(f);
setVisible(true);
}
 GridLayout
GridLayout family = new
GridLayout(3, 3, 10, 10);
public class GridLayoutBeraksi extends JFrame {
JButton marcia = new JButton("Marcia");
JButton carol = new JButton("Carol");
pane.setLayout(family);
JButton greg = new JButton("Greg"); pane.add(marcia); pane.add(carol);
JButton jan = new JButton("Jan"); pane.add(greg); pane.add(jan);
JButton alice = new JButton("Alice"); pane.add(alice); pane.add(peter);
JButton( Alice ); pane.add(cindy); pane.add(mike);
JButton peter = new JButton("Peter"); pane.add(bobby);
JButton cindy = new JButton("Cindy");
JButton mike = new JButton("Mike");
add(pane);
JButton bobby = new JButton("Bobby");
setVisible(true);
public GridLayoutBeraksi() { }
super(" Grid Layout Beraksi ");
setSize(260, 260); public static void main(String[] args) {
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); GridLayoutBeraksi frame = new
JPanel pane = new JPanel(); GridLayoutBeraksi();
}
}
GridLayout
BorderLayout + GridLayout
GridBagLayout
 BoxLayout
public class BoxLayoutBeraksi extends JFrame {
public BoxLayoutBeraksi() { public static void main(String[] args) {
super("BoxLayoutBeraksi"); setSize(430, 150); BoxLayoutBeraksi st = new
setDefaultCloseOperation(JFrame.EXIT_ON_CLO BoxLayoutBeraksi();
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);
}
 CardLayout
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");
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
1. Event adalah kejadian atau peristiwa yang dilakukan
oleh user terhadap user interface menggunakan
peralatan mouse dan keyboard
2. Setiap objek dapat dinotifikasi jika suatu event terjadi
sehingga objek tersebut dapat memutuskan apa yang
harus dilakukan untuk menanggapi (menangani) event
tersebut (event handling)
3. 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 (Kejadian)
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 event pada method handler
MouseAdapter{
public void mouseClicked(MouseEvent e){
//code penangan kejadian
}
}
Listener Yang Sering Digunakan
Kategori Interface Method
Action
ListenerActionListener
Yang BanyakactionPerformed(ActionEvent)
Dipakai
Item ItemListener itemStateChanged(ItemEvent)
Mouse MouseListener mouseClicked(MouseEvent)
mouseEntered(MouseEvent)
mouseExited(MouseEvent)
mousePressed(MouseEvent)
mouseReleased(MouseEvent)
Mouse Motion MouseMotionListener mouseDragged(MouseEvent)
mouseMoved(MouseEvent)
Key KeyListener keyPressed(KeyEvent)
keyReleased(KeyEvent)
keyTyped(KeyEvent
Focus FocusListener focusGained(FocusEvent)
focusLost(FocusEvent)
Window WindowListener windowClosing(Windowevent)
windowOpened(Windowevent)
windowActived(Windowevent)
windowDeactived(Windowevent)
Listener (Semua Komponen Swing)
Listener Deskripsi

ComponentListener 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
MouseMotionListener Mendengarkan perubahan posisi kursor mouse pada
komponen
MouseWheelListener Mendengarkan pergerakan roda mouse pada
komponen
HierarchyListener Mendengarkan perubahan hirarki komponen karena
kejadian yang berubah
HierarchyBoundListener Mendengarkan perubahan hirarki komponen karena
kejadian pergerakan dan perubahan ukuran
Membangun Aplikasi GUI
dengan Netbeans

STUDI KASUS OOP

The Palette
The Design Area
The Source Editor
The Property Editor
The Inspector
Studi Kasus Membangun
Aplikasi GUI
Studi Kasus Aplikasi GUI
1. Aplikasi Konversi Suhu
2. Aplikasi Pertambahan Dua Angka
3. Aplikasi Penghitungan Jumlah Hari
4. Aplikasi Kalkulator
5. Aplikasi Penentu Nilai Mahasiswa
6. Aplikasi Biodata Mahasiswa
Aplikasi Konversi Suhu
GUI Component: TextField, Label, Button
Events: actionPerformed, mouseClicked
Algoritma untuk Event Handling
1. Ambil Isi dari textfield, simpan dalam variabel celcius
2. Konversi celcius ke fahrenheit dengan rumus di bawah, dan simpan
hasilnya dalam variabel fahrenheit
fahrenheit = 1.8 * celcius + 32
3. Tempelkan hasil (fahrenheit) ke label fahrenheit (menimpa isi lama)
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
Bisa Juga dengan Klik Kanan
dan pilih Run Pada File Java
Memainkan Variable
Properties
Tahapan Membuat Aplikasi GUI
1. Membuat Project baru
2. Menambahkan JFrame Form (top level container)
3. Diatas JFrame diletakkan JPanel (intermediate container)
4. Tempelkan atomic (GUI) component
5. Edit text dari tiap component
6. Edit nama variable dari tiap component (untuk
mempermudah coding)
7. Rapikan tampilan dengan mengedit JFrame, JPanel dan
mengubah Layout
8. Pilih component yang akan mengelola event dan pilih
jenis event sesuai dengan kebutuhan
9. Tambahkan kode di method event yang disediakan
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
Aplikasi Operasi Dua Angka

GUI Component: Panel, Label, TextField, Button

Logic Programming: if-else
Event: actionPerformed, keyTyped
Features: pembuatan method baru
Operasi Dua Angka
 method baru

panggil method
class dan method baru
Aplikasi Penghitungan
Jumlah Hari
GUI Component: Panel, Label, TextField, PasswordField,
Button, ComboBox
Logic Programming: if-else, switch
Event: actionPerformed, keyTyped
Aplikasi Penghitungan Jumlah Hari
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
Aplikasi Kalkulator

GUI Component: Panel, TextField, Button

Logic Programming: If-Else, Switch
Aplikasi Kalkulator
Hints: Tahapan Kerja Kalkulator
7 + 8 = 15
operandSatu operator operandDua samadengan hasil

1. operandSatu: tampilkan angka yg ditekan di layar

2. operator:
1. Ambil yang ada di layar, simpan sebagai variable operandSatu
2. Beri tanda operator apa yg dijalankan (+, -, *, dst)
3. operandDua: tampilkan angka yg ditekan di layar
4. 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
if(operator.equals(“+”)){
layar.setText(operandSatu + operandDua);
}else if(){ ...
}
Aplikasi Biodata Organisasi
GUI Component: CheckBox, ComboBox, RadioButton, TextArea
Logic Programming: If-Else
Aplikasi Biodata Organisasi
Hints
Font tebal = new Font(“Arial”, Font.BOLD, 12)
Font tipis = new Font(“Arial”, Font.PLAIN, 12)

if(yaTebal.getText().equals(“Ya”)){
hasilTextArea.setFont(tebal);
}else{
hasilTextArea.setFont(tipis);
}
Aplikasi Biodata Mahasiswa
GUI Component: Menubar, Menuitem, Table
Aplikasi Biodata Mahasiswa