MODUL PEMBELAJARAN - 2

PEMROGRAMAN
BERORIENTASI OBJEK KELAS XII
Guru Mapel : Ulfa Khoirunisa, S.Pd.

Materi 2
Antarmuka / User Interface

Kegiatan Pembelajaran
 Siswa membaca materi yang ada dalam modul
 Silahkan beri tanda pada istilah istilah yang masih belum dipahami
 Tulis kembali istilah istilah tersebut pada buku tulis
 Diskusikan bersama teman satu kelas (jika ada)

Persiapan Kegiatan Praktik

Ikuti petunjuk latihan yang ada di dalam modul
Pahami setiap langkah dan bagian bagian yang ada
Beri catatan/tanda untuk bagian yang masih belum dipahami

Keterampilan
 Siswa dapat merancang pembuatan interface
 Siswa dapat membuat rancangan aplikasi dengan interface
  MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

GUI (GRAPHIC USER INTERFACE)

 GUI (Graphic User Interface) merupakan antarmuka pada system operasi atau
komputer yang menggunakan menu dan tampilan grafis agar mempermudah para
penggunanya untuk berinteraksi dengan komputer atau system operasi untuk
melakukan pekerjaan.
Contoh penggunaan GUI pada aplikasi :

 Keuntungan penggunaan GUI :

1. Menarik minat pengguna dengan menggunakan ikon grafik serta mengurangi
kebosanan pengguna pada waktu menggunakan computer dan aplikasi
2. Mempermudah pengguna untuk menggunakan aplikasi
3. Memahirkan pengguna dengan cepat
 Kekurangan penggunaan GUI :
1. Memakan memori atau kapasitas penyimpanan yang cukup besar
2. Bergantung pada perangkat keras yang digunakan
3. Tidak fleksibel pada semua perangkat karena adanya ketergantungan file
tertentu.
HAL YANG PERLU DIPERHATIKAN DALAM PERANCANGAN GUI
Beberapa hal yang perlu diperhatikan dalam merancang GUI :
o Relevan dengan aplikasi yang akan dirancang dan mudah dikenali
o Setiap elemen yang digunakan pada interface harus beralasan
dalam penggunaannya. Memperjelas pesan yang diberikan.
o Konsisten dalam layout, warna, gambar, icon, teks dan tipografi.
o Enak dilihat, sederhana, dan memiliki petunjuk yang jelas

2
 MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

 Sebelum membuat aplikasi Java dengan GUI, perlu diperhatikan pula susunan tata
letak/layout yang baik dan benar. Berikut adalah beberapa tipe tata letak di Java
GUI :
1. Flow Layout
Komponen disusun berdasarkan ukuran default masing-masing, dengan posisi
mulai dari kiri ke kanan dan dari atas ke bawah di dalam container/frame
yang digunakan. Contohnya :

2. Grid Layout Membagi komponen dalam bentuk “rectangular grid”.

3. Border Layout
Mengisi sebuah daerah yang berisi komponen-komponen yang berbeda pada
waktu yang berbeda.
4. Card Layout
5. Grid Bag Layout
Merupakan salah satu tata letak komponen GUI pada java yang paling flexibel
dan kompleks. Sehingga dapat memungkinkan bagi programer untuk
mengatur tata letak komponen GUI dalam beberapa span baris atau
kolom. Grid Bag Layout menempatkan komponen dalam bentuk empat persegi
panjang (sel).
6. Container
Merupakan sebuah kelas yang digunakan untuk sebagai tempat atau wadah
dalam penataan komponen GUI layout management.

3
  MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

KOMPONEN – KOMPONEN JFRAME PEMBUATAN GUI

 Dalam aplikasi Netbeans terdapat menu untuk membuat Interface / Antarmuka.

 Untuk pembuatan Interface dengan menggunakan aplikasi Netbeans bisa dengan
cara :
1. Buka Aplikasi Netbeans
2. Buat Project baru, dengan klik atau dengan kombinasi tombol Ctrl + Shift
+N
3. PIlih project Java – Java Application
4. Buat nama project, kemudian klik Finish
5. Klik kanan pada project yang telah dibuat, pilih New – Jframe Form

6. Maka muncul tampilan berikut :

4
 MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

7. Setelah klik Finish maka muncul tampilan seperti berikut :

8. Terdapat beberapa bagian pada JFrame, bagian pertama yang berbentuk

persegi seperti papan ini disebut dengan Frame.

FRAME

9. Bagian selanjutnya terdapat sebuah toolbar yang berisi Source, Design dan
History

Source : Untuk menampilkan Kode Program

Design : Untuk menampilkan Desain Form
History : Untuk menampilkan histori dari pembuatan program

5
  MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

10. Bagian yang kedua yaitu Palette, palette berisikan komponen-komponen yang
dapat ditambahkan ke dalam frame sebagai suatu susunan rancangan
program. Ada beberapa bagian pada Palette :
a. Swing Containers
Swing Containers ini menempatakan komponen-komponen yang berfungsi
sebagai container / background.

No. Komponen Fungsi

1. Panel Merupakan panel yang dapat digunakan sebagai
papan dari suatu bidang / layar lain
2. Split Pane Merupakan 2 tombol yang terbagi menjadi 2 sisi (kiri
& kanan)
3. Toolbar Merupakan bar yang dapat dimasukkan tool
didalamnya, biasanya digunakan diatas layar
4. Internal Frame Merupakan bingkai layar baru yang berada didalam
bingkai utama
5. Tabbed Pane Merupakan panel yang memiliki tab & bisa beralih
dari tab 1 ke tab lainnya
6. Scroll Pane Merupakan panel yang dapat di scroll baik horizontal
ataupun vertical
7. Desktop Pane Merupakan container yang digunakan untuk
membuat multi dokumen interface atau dekstop
virtual
8. Layered Pane Sebuah container yang memungkinkan setiap
komponen didalamnya saling bertumpukan jika
diperlukan

6
 MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

b. Swing Controls
Swing Controls menempatkan komponen-komponen yang fungsinya untuk
pengelolaan Swing.

No. Komponen Fungsi

1. Label Sebuah kolom/area yang digunakan untuk
menampilkan tulisan atau gambar
2. Toggle Button Tombol yang memiliki 2 keterangan seperti saklar
(ON/OFF)
3. Radio Button Tombol yang berfungsi untuk memilih pilihan, tombol
ini hanya dapat memilih satu pilihan saja
4. Combo Box Komponen yang digunakan sebagai dropdown list,
bisa digunakan untuk memilih multiple selection
5. Text Field Komponen yang digunakan sebagai input
teks/tulisan yang dapat diedit
6. Scroll Pane Merupakan panel yang dapat di scroll baik horizontal
ataupun vertical
7. Scroll Bar Komponen yang menyesuaikan tampilan sebuah
konten yang terbatas & menampilkan scroll
8. Progress Bar Sebuah bar yang mengindikasi sebuah pekerjaan
dengan menampilkan progress dari pekerjaan
tersebut

7
  MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

9. Password Sebuah bidang yang digunakan untuk menulis

Field katasandi, tidak akan menampilkan karakter &
diganti dengan tanda titik
10. Separator Digunakan untuk keperluan umum seperti membatasi
komponen & memberikan garis pemisah
11. Editor Pane Bidang yang sering disebut textarea, biasa
digunakan untuk menulis apapun didalamnya
12. Button Untuk membuat tombol sederhana
13. Check Box Kotak centang yang dapat dicentang atau tidak
untuk memilih pilihan lebih dari 1
14. Button Group Class yang digunakan untuk membuat multi lingkup
satu set tombol
15. List Menampilkan sebuah daftar & dapat dipilih lebih dari
satu
16. Text Area Tidak berbeda jauh dengan Editor Pane, sebuah
kolom besar yang dapat digunakan untuk menulis
teks
17. Slider Pengguna dapat menggeser sebuah nilai secara
grafik seperti membesar kecilkan volume
18. Formatted Komponen yang memungkinkan untuk mengedit
Field sebuah nilai didalamnya secara particular
19. Spinner Sebuah bidang input angka yang memiliki tombol naik
dan turun untuk mengontrol angka tersebut
20. Text Pane Bidang text yang dapat diisi dengan nilai dan
menandai isi isi tersebut
21. Tree Sebuah direktori folder yang tersusun seperti pohon
ketika memiliki folder didalam folder

8
 MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

c. Swing Menus
Swing Menus memiliki komponen-komponen yang dapat digunakan untuk
keperluan menu / navigasi.

No. Komponen Fungsi

1. Menu Bar Komponen untuk menampilkan menu dan item menu
2. Menu Sebuah menu tunggal, bisa digunakan sebagai menu
utama jika disisipkan submenu
3. Menu Item Sebuah item menu tunggal didalam menu
4. Menu Item / Sebuah item menu tunggal atau kotak centang
CheckBox didalam menu
5. Menu Item / Sebuah item menu tunggal atau kotak centang
RadioButton didalam menu
6. Popup Menu Layar munculan kecil yang menampilkan beberapa
pilihan / menu
7. Separator Keperluan umum untuk membatasi antara komponen
dan memberikan garis pembatas

d. Swing Windows
Swing Windows menampilkan beberapa komponen yang digunakan untuk
keperluan jendela (window) / layar.

No. Komponen Fungsi

1. Dialog Sebuah jendela yang digunakan menampilkan dialog
2. Color Chooser Jendela baru yang digunakan untuk memilih warna /
memanipulasi
3. Option Pane Jendela yang digunakan untuk menampilkan dialog
dan opsi yang ditampilkan

9
  MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

4. Frame Top Level Window, digunakan untuk bingkai window

utama
5. File Chooser Jendela baru untuk memilih sebuah file

e. Swing Fillers
Swing Fillers menampilkan komponen-komponen yang bisa digunakan
sebagai pengisi.

No. Komponen Fungsi

1. Glue Komponen yang tersedia untuk menggerakkan ke
arah vertikal & horizontal
2. Horizontal Komponen yang memiliki lebar pasti dan dapat
Strut bergerak ke arah horizontal
3. Vertical Glue Komponen yang memiliki lebar bebas & dapat
bergerak ke arah vertikal
4. Vertical Strut Komponen yang memiliki lebar pasti dan dapat
bergerak ke arah vertikal
5. Horizontal Komponen yang memiliki lebar bebas & dapat
Glue bergerak ke arah horizontal
6. Rigid Area Komponen yang memiliki ukuran pasti

f. AWT
AWT merupakan singkatan dari Abstract Window Tookit menampilkan
toolbox widget, grafis dan widget antarmuka pengguna yang sebelumnya
ada di Swing.

No. Komponen Fungsi

1. Label Bidang yang menampilkan tulisan, biasa digunakan
untuk judul

10
 MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

2. Text Field Bidang yang menampilkan kolom penulisan

3. Checkbox Kotak yang dapat dicentang atau tidak
4. List Menampilkan daftar
5. Scroll Pane Komponen yang otomatis membuat scroll horizontal
/ vertikal
6. Canvas Sebuah kanvas kosong dapat dimasukkan sesuatu
bahkan oleh pengguna lain
7. Popup Menu Layar popup yang menampilkan menu atau pilihan
lain
8. Button Tombol
9. Text Area Bidang besar untuk menulis beberapa baris kalimat
10. Choice Kolom tarik-turun yang menampilkan beberapa
pilihan untuk dipilih
11. Scrollbar Tombol scroll yang dapat diterapkan dimana saja
12. Panel Sebuah panel / container untuk keperluan umum
13. Menu Bar Sebuah bar menu yang dapat dimasukkan kedalam
frame

TUGAS 1
Setelah pembahasan mengenai GUI di atas, perhatikan tampilan aplikasi berikut
ini!

Tuliskan komponen-komponen GUI yang terdapat pada tampilan aplikasi di

atas serta tunjukkan bagiannya!

11
  MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

Nama :
Kelas :
TUGAS 1 : Identifikasi Komponen GUI
Jawaban :

Tanda Tangan Siswa TandaTangan Guru Mapel Nilai

(………………………..………) (………………………..………)

12
 MODUL PEMBELAJARAN - 2 PEMROGRAMAN BERORIENTASI OBJEK KELAS XII

KEGIATAN PRAKTIK 1
Pilihlah salah satu aplikasi yang sering kalian gunakan (boleh aplikasi
HP/Laptop). Kemudian identifikasi tampilan GUI sesuai aplikasi tersebut.
Tuliskan komponen apa saja yang ada di tampilan aplikasi serta
gambar/screenshoot bagiannya! (seperti yang sudah dicontohkan pada saat
pembelajaran melalui WA Group Mapel)
Nama :
Kelas :
Jawaban :

Tanda Tangan Siswa TandaTangan Guru Mapel Nilai

(………………………..………) (………………………..………)

13