JOBSHEET 11

GUI (Graphical User Interface)

1. Kompetensi
Setelah menempuh perkuliahan ini mahasiswa mampu :
1) Membuat aplikasi Graphical User Interface sederhana dengan bahasa
pemrograman java,
2) Mengenal komponen GUI seperti frame, label, textfield, combobox, radiobutton,
checkbox, textarea, menu, serta table,
3) Menambahkan event handling pada aplikasi GUI
2. Graphical User Interface
GUI adalah singkatan dari Graphical User Interface, yaitu onscreen (layout) untuk
interaksi antara pengguna dengan computer menggunakan tampilan grafis (bukan text).
Kenapa perlu mengembangkan perangkat lunak dengan tampilan GUI ? Jawabanya
adalah : GUI sangat user-friendly dan menarik, tidak membosankan (bagi pengguna bukan
developer), dan mudah digunakan (Robin Olofsson dan Sebastian Hultstrand, 2015). Dari
jawaban diatas kita bisa berasumsi bahwa perangkat lunak dengan Graphical user
Interface lebih nyaman digunakan oleh penggunanya.

GUI Text - based

3. Input dan Output GUI menggunakan Option Panes

Salah satu cara yang simple dan mudah dalam membuat tampilan grafis pada java adalah
menggunakan pop up option pane. Option pane adalah message box yang akan muncul
pada layar dengan menampilkan pesan kepada user. Berikut adalah langkah – langkah
percobaan untuk menampilkan action pane pada java :
A. Percobaan 1
1) Bukalah program Netbeans IDE yang sudah terinstall di computer anda !
2) Buatlah project baru, kemudian lengkapi dialog wizard sampai selesai,
3) Untuk memudahkan pengorganisasian source code, buatlah package dengan
nama yang sesuai dengan project yang sedang anda buat , contoh :
com.praktikumGUI.
4) Buat class baru dengan nama OptionPaneSederhana
package com.praktikumGUI;

public class OptionPaneSederhana {

5) Kemudian import package : import javax.swing.*; (untuk memanggil

komponen GUI yang akan ditampilkan).
6) Kemudian tambahkan main method didalamnya :
public static void main(String[] args) {

7) Kemudian panggil option panes dengan menambahkan kode berikut di dalam

main method seperti berikut :

JOptionPane.showMessageDialog(null, "Coding itu Mudah

Ker!!!");

8) Jalankan program kemudian akan tampil seperti ini :

Pada percobaan diatas kita hanya menampilkan satu dari tiga cara untuk
menggunakan message dialog pada option pane. Dan pada percobaan berikut ini
kita akan mencoba mendemonstrasikan keseluruhan tipe dari message dialognya.
 Gambar : 1Detail method pada Joption Pane

B. Percobaan 2
1) Buatlah class baru dengan nama MenggunakanOptionPane, dan import
javax.swing
package com.praktikumGUI;

import javax.swing.*;

public class MenggunakanOptionPane {

2) Tambahkan main method pada class tersebut :

public static void main(String[] args) {

3) Tambahkan kode untuk menampilkan input dialog di dalam main method :

// koding untuk menampilkan input dialog

String nama = JOptionPane.showInputDialog(null, "Siapa

namamu ?");

4) Tambahkan kode untuk menampilkan confirm dialog :

// koding untuk menampilkan confirm dialog
 int pilihan = JOptionPane.showConfirmDialog(null,
"Coding itu mudah kan , " +nama+ "?");

5) Tambahkan koding untuk merespon confirm dialog yang akan dipilih :

// koding untuk menampilkan jawaban dari respon yang berbeda

if(pilihan == JOptionPane.YES_OPTION){
JOptionPane.showMessageDialog(null, "Tentu saja! "
+ "Bahkan anak umur 4 tahun sudah bisa coding java");
}else{
JOptionPane.showMessageDialog(null, "Susah sih ! Soalnya saya
Malas");
}

6) Jalankan program kemudian akan tampil hasil seperti ini :

4. GUI Basic
Frame adalah tampilan on screen windows pada pemrograman java. Secara umum frame
adalah sebuah object hasil instansiasi dari class JFrame. Berikut ini adalah contoh simple
coding untuk menampilkan frame pada java.
A. Percobaan 1
1) Buat class baru dengan nama SimpelFrame, dan juga import javax.swing

package com.praktikumGUI;

import javax.swing.*;

public class SimpelFrame {

2) Tambahkan main method pada class SimpelFrame :

public static void main(String[] args) {

3) Setelah itu instansiasi class JFrame di dalam main method dan buat visibilitas dari
frame menjadi true :
JFrame frame = new JFrame();
frame.setVisible(true);

4) Jalankan dan amati hasil percobaan.

B. Percobaan 2
Pada percobaan pertama kita bisa menganalisa jika properties dari JFrame itu cukup
complex. Dan untuk membuat tampilan dari JFrame lebih menarik , maka kita perlu
memodifikasi tampilan JFrame lebih lanjut.
1) Buatlah class dengan nama KompleksFrame dan juga import javax.swing
package com.praktikumGUI;

import javax.swing.*;

public class KompleksFrame {

}
 2) Buat main method dan didalamnya tambahkan koding untuk instansiasi JFrame :
public static void main(String[] args) {
JFrame frame = new JFrame();
}

3) Tambahkan properties dari frame seperti berikut ini :

frame.setVisible(true);
frame.setForeground(Color.BLUE);
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setLocation(10, 50);
frame.setSize(300, 100);
frame.setTitle("Frame Koding Itu Mudah");

4) Jalankan program , kemudian akan tampil seperti ini :

5) Pertanyaan : jelaskan fungsi dari setiap properties di bawah ini ?

- setForeground(Color.BLUE);
- setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
- setLocation(10, 50);
- setSize(300, 100);
- setTitle("Frame Koding Itu Mudah");

5. PERCOBAAN – PERCOBAAN
A. Percobaan 1
 Pertanyaan ?

B. Percobaan 2
 Pertanyaan :

C. Percobaan 3
 Pertanyaan ?

D. Tugas