Kegiatan Belajar 2

KAIDAH PEMBUATAN ANTARMUKA, KOMPONEN SWING DAN

TOOLS PADA JAVA

PENDAHULUAN
Siswaku, bagaimana kabar Anda saat ini? Semoga Anda selalu
sehat sehingga dapat mempelajari materi modul dengan baik. Saat ini
Anda tengah berada pada Kegiatan Belajar 2 dalam Modul kaidah
pembuatan antarmuka, komponen swing dan tools pada java.
Kegiatan Belajar 2 akan menyajikan materi terkait kaidah pembuatan
antarmuka, komponen swing dan tools pada java. Bagaimana, Anda
sudah siap ? Bagus!
Kegiatan belajar 2 ini menyampaikan menu bar, tool bar dan
komponen user interface pada Java sebagai bekal untuk membuat
user interface sebuah program.
Penguasaan Anda terhadap materi dalam Kegiatan Belajar 2 ini,
akan menjadi titik tolak dalam mengembangkan sebuah program.
Dengan demikian produk Anda menjadi mantap, sesuai dengan
fungsi serta betul-betul dapat dipertanggungjawabkan.
Siswaku, agar Anda dapat menguasai materi Kegiatan Belajar 2
ini dengan baik dan berhasil mencapai capaian pembelajaran yang
telah dirumuskan, maka Anda perlu ikuti petunjuk belajar berikut
ini:
a. Sebelum membaca materi modul dalam KB 2 ini, renungkan
terlebih dahulu apa yang menjadi tujuan pembelajaran dalam
modul agar terbangun rasa tanggung jawab dan kesepenuhhatian
dalam belajar.
b. Bacalah materi modul dengan cermat dan seksama, serta
tambahkan catatancatatan seperlunya untuk membantu ingatan
Anda.
c. Cermati dan kerjakan tugas yang diberikan dalam modul dengan
sungguhsungguh. Jangan lupa gunakan pengetahuan dan
pengalaman yang telah Anda miliki sebelumnya.
d. Kerjakan tes formatif yang diberikan seoptimal mungkin dan
gunakan ramburambu jawaban untuk mengetahui seberapa tingi
ketuntasan belajar Anda.
e. Jangan lupa membuat catatan khusus yang Anda pandang
penting selama mempelajari isi modul.

Selamat belajar dan semoga Anda berhasil dengan baik……!

 INTI
1. Tujuan Pembelajaran
Setelah mengikuti serangkaian kegiatan pembelajaran dengan
menerapkan model PjBL, pendekatan saintifik, metode
pembelajaran diskusi dan penugasan program antarmuka atau
User Interface (UI), diharapkan peserta didik terlibat aktif dalam
kegiatan pembelajaran dan bertanggungjawab dalam
menyampaikan pendapat, menjawab pertanyaan, memberi saran
dan kritik, serta dapat menjelaskan kaidah pembuatan antarmuka
dengan tepat.

2. Pokok Materi
1. Kaidah pembuatan antarmuka
2. Membuat program antarmuka dengan Java Swing
3. Menggunakan tools Java

3. Uraian Materi
A. Kaidah Pembuatan Antarmuka
Kaidah pembuatan antarmuka “8 Golden Rules User Interface Design”
:
a. Strive For Consistency
Ini adalah kunci utama dari segala langkah dalam
melakukan pengaturan user interface. Membangun user
interface yang konsisten sangat dibutuhkan dalam satu
aplikasi, apalagi kalau aplikasi tersebut saling
berhubungan. Jika user mengetahui hubungannya saling
berkaitan maka user tidak perlu takut saat melakukan
eksplorasi aplikasi.
b. Cater to universal usability
Penciptaan ruang interface yang universal akan
mengakomodir keinginan semua orang sehingga lebih
banyak pengguna menyukainya.
c. Offer feedback
Pemberian informasi yang merupakan hasil feedback dari
aksi tidak hanya berupa jawaban namun juga bisa dibuat
user interface dengan desain yang berbeda. Dengan begitu,
user memahami bahwa aksi yang telah dilakukan
sebelumnya sudah mendapat respon dari aplikasi.
d. Design dialog to yield closure
Poin ini merupakan satu kesatuan dengan feedback
informasi. Karena fungsinya untuk menyampaikan bahwa
proses yang dilakukan oleh user telah selesai dilakukan.
Dengan begitu, user memahami bahwa prosesnya selesai
dan tidak ada proses selanjutnya yang perlu ditunggu.
e. Prevent errors
Pencegahan dilakukan untuk menghindari kesalahan yang
dilakukan selama menjalankan proses. Terdapat user yang
mudah bosan sehingga melakukan berbagai percobaan.
Seringkali percobaan yang dilakukan belum tentu berhasil,
karenanya user mencoba berbagai langkah. Poin ini akan
mencegah hal tersebut, sehingga walaupun user mencoba
dalam percobaan pertama langsung berhasil. Caranya
dengan melakukan pengisian formulir dengan beberapa
petunjuk sehingga user akan selalu berhasil pada
percobaan pertama.
f. Permit easy reversal of actions
Pada poin ini user bisa melakukan pembatalan atas aksi
yang dilakukan sebelumnya. Tidak hanya berupa tombol
back saja melainkan aksi pembatalan lainnya. Seperti saat
melakukan pembelian barang di toko online user ingin
membatalkan pemesanan maka bisa dilakukan. Sehingga
user tidak perlu menghubungi customer service atau
meminta bantuan kepada pemilik aplikasi. Hal ini tentu
akan membuat user semakin nyaman dengan aplikasi yang
telah disediakan oleh pengembang.
 g. Keep users in control
User seringkali menyukai pengaturan interface sesuai
dengan keinginannya sendiri. Karenanya membiarkan user
memilih pengaturannya sendiri akan membuat user
semakin nyaman menggunakan aplikasi. Untuk user yang
memang terbiasa melakukan kontrol pribadi maka poin ini
berperan sangat penting.
h. Reduce short-term memory load
Pada proses ini data dipusatkan pada menu dan tombol
yang ada. Ini agar memudahkan user dalam menggunakan
menu dan tombol yang ada. User tidak perlu mencari-cari
lagi apa yang harus dimasukkan dan harus dilakukan
karena sudah disediakan dalam menu dan tombol yang
ada. Tidak perlu lagi user mengingat apa yang harus
dimasukkan dalam sistem karena aplikasi sudah
menyediakannya untuk user.

B. Membuat Program ntarmuka menggunakan Java Swing

a. Swing Containers

Gambar 1. Swing Containers

Fungsi Swing Containers :
No Tolls Fungsi
Untuk mengelompokkan
1 Panel
komponen-komponen.
Menampilkan dua komponen
dalam ruang yang tetap,
2 Split Pane memungkinkn user untuk
menentukan ukuran ruang yang
dipilih untuk setiap komponen
 Sebagai tempat untuk
menampilkan tool-tool yang
bertujuan
3 Tool Bar
mempermudah user dalam
mengoperasikan beberapa tool-tool
yang mungkin sering digunakan.
Merupakan frame internal (di
dalam frame utama). membuat
4 Internal Frame
banyak window (multi-window) di
dalam satu frame.
Membuat frame yang terdiri dari
5 Tabbed Pane tab-tab yang bisa dipilih oleh
user
Menyediakan scroll bar di
6 Scroll Pane sekeliling perubahan ukuran
komponen.
7 Desktop Pane
Menyediakan tiga lapis dimensi
8 Layered Pane untuk memposisikan
komponen.

b. Swing Controls

Gambar 2. Swing Controls

No Tolls Fungsi
1 Label Untuk memberikan keterangan
 tambahan atau indentitas pada
tombol atau perintah lainnya.
Button yang selalu berada dalam
salah satu dari dua kondisi.
2 Toggle Button Setiap klik pada button akan
merubah dari kondisi satu ke
kondisi lainnya.
Untuk meminta user agar memilih
satu dari lebih dua pilihan,
3 Radio Button contoh penggunaannya adalah
ketika kita mengisi data diri
untuk pilihan jenis kelamin
Berfungsi untuk menyisipkan
beberapa pilihan / perintah,
sehingga dengan Combo Box ini
4 Combo Box
lebih menghemat tempat,
karena dalam Combo Box ini
terdiri dari beberapa pilihan.
Untuk membuat kolom agar kelak
bisa diisi perintah-perintah
teks atau angka oleh user, semisal
5 Text Field pada pembuatan aplikasi
kalkulator “text field” berfungsi
menampilkan hasil dari
hitungan kalkulator tersebut.
Untuk menggeser jendela
6 Scroll Bar
(windows) secara vertikal.
Digunakan untuk menampilkan
7 Progress Bar
status proses
Tempat untuk mengisikan
8 Password Field
password yang kita milik
9 Separator Berfungsi sebagai “sekat” atau
 pemisah antar garis yang ada
pada aplikasi atau software yang
nantinya akan dibuat
Sebuah panel yang digunakan
10 Editor Pane
untuk mengedit tulisan
Menampilkan atau menyisipkan
11 Tabel tabel pada aplikasi yang
nantinya akan kita buat.
Kontrol yang tampil pada layar
dengan bentuk tertentu yang
12 Button mirip dengan tombol persegi
panjang dengan tulisan di
tengahnya
Memilih lebih dai satu pilihan,
dengan menyimpan data dan
13 Check Box
akan menampilkannya ketika di
klik.
Untuk menggabungkan seluruh
14 Button Group button supaya menjadi satu
kesatuan fungsi.
Untuk menampilkan beberapa
15 List
item.
Tempat mengetikkan tulisan yang
16 Text Area berada dalam kotak yang
mempunyai fungsi scroll.
Berfungsi sebagai visualisasi
17 Slider proses perjalanan dari sebuah
musik atau video.
18 Formatted Field
Berisi angka yang diletakkan
secara ringkas atau berupa daftar,
19 Spinner
ketika kita membutuhkan angka
lebih kecil, kita tinggal klik
 tanda panah sampai muncul
angka yang kita inginkan, atau
sebaliknya misalkan kita butuh
angka lebih besar klik tanda
panah sampai muncul angka yang
kita inginkan.
Menampilkan teks dan
membolehkan user untuk
20 Text Pane
mengeditnya.

Menampilkan data dalam bentuk

21 Tree
hirarkis

c. Swing Menus

Gambar 3. Swing Menus

No Tolls Fungsi
Untuk menciptakan tab-tab menu
yang nantinya dipergunakan
1 Menu bar
untuk perintah menu yang
diinginkan.
Membentuk perintah menu yang
2 Menu masih bisa dilanjutkan ke
menu yang lebih khusus.
Berisi perintah-perintah spesifik
yang ada dalam menu bar,
3 Menu Item
sehingga perintah-perintah pada
menu item lebih khusus.
Memberi tanda (V) pada menu
perintah tertentu supaya
4 Check Box
komputer melakukan seperti apa
yang kita perintahkan
Untuk melakukan rating atau
survey sesuatu alamat website
5 Radio Button atau digunakan pada perintah
pemilihan halaman cetakan pada
printer.
Menu yang akan tampil secara
otomatis atau apabila kita
menggerakkan kursor mouse pada
6 Popup Menu
area tertentu, biasanya berisi
tentang informasi suatu
obyek/icon/menu.
Berfungsi sebagai “sekat” atau
pemisah antar garis yang ada
7 Separator
pada aplikasi atau software yang
nantinya akan dibuat.
C. Menggunakan Tools Java
Penggunaan GUI dan tools menerapkan prinsip drag dan drop.
Adapun prinsip drag dan drop adalah klik tools, tahan, geser tools
yang dipilih lalu lepaskan dijendela form perancangan.
a. jLabel
jLabel merupakan tools yang umum digunakan untuk
membuat pelabelan (penamaan). jLabel tidak dapat menerima
input, tetapi dapat diterapkan sebagai jendala output
(keluaran). Secara visual, jLabel mewakili suatu field atau
judul kolom didalam tabel.

Gambar 4. Pengaturan jLabel

b. jTextField
jTextField merupakan tools yang berfungsi untuk kotak
masukkan. Dalam penerapannya, tools ini membutuhkan
perubahan properti pada komponen text, variabel name dan
latarbelakangnya jika dibutuhkan.

Gambar 5. jTextField
c. jComboBox
Merupakan tools yang berfungsi untuk mendaftarkan pilihan
secara menurun (full down).Tools ini biasanya membutuhkan
pengaturan properti pada komponen nama variabel dan daftar
item.
 Gambar 6. jComboBox sebelum dijalankan (a) dan sesudah
dijalankan(b)
d. jRadioButton dan jCheckBox
RadioButton umumnya digunakan untuk mendaftarkan
pilihan yang hanya dapat menerima opsi tunggal, meskipun ini
dapat digunakan juga untuk multipilihan, tetapi disarankan
untuk opsi tunggal. Berbeda dengan jCheckBox, yang dapat
dipilih secara multi opsi.

Gambar 7. jRadioButton dan jCheckBox

e. jButton
jButton merupakan tools yang berfungsi untuk memanggil
perintah yang telah ditulis oleh programmer didalam tools ini.

Gambar 8. jButton
f. jTable
Merupakan tools yang berfungsi untuk manampilkan data dari
database aplikasi. Untuk pengaturan properti jTable cukup pada
komponen nama variabel dan disain judul kolom (field)-nya saja.
 Gambar 9. jTable
g. jCalendar
jCalender merupakan komponen tools yang juga tersedia di
Java, namun untuk menggunakannya di editor NetBeans, perlu
sedikit konfigurasi karena kadangkala jCalender tidak ikut
terinstal bersama dengan editornya. Untuk itu kita perlu
mengunduhnya terlebih dahulu. Perlu diingat juga, selain
jCalender, Java NetBeans menyediakan plugin lain diluar
jCalender, yaitu DateChooser dan jdatepicker.

Gambar 10. jCalendar

4. Forum Diskusi
Untuk memperdalam pemahaman mengenai pembuatan program
antarmuka dengan Java Swing, diskusikan dengan temanmu,
program antarmuka yang bisa menampung masalah yang kalian
pilih pada pertemuan sebelumnya!
 PENUTUP
1. Rangkuman
a. Kaidah perancangan antarmuka
a.Strive For Consistency
b.Cater to universal usability
c.Offer feedback
d.Design dialog to yield closure
e.Prevent errors
f.Permit easy reversal of actions
g.Keep users in control
h.Reduce short-term memory load
b. Komponen Java Swing
a.Swing Containers
b.Swing Controls
c.Swing Menus
c. Komponen Tools
a.jLabel
b.jTextField
c.jComboBox
d.jRadioButton dan jCheckBox
e.jButton
f.jTable
g.jCalendar

2. Tes Formatif
Untuk mengetahui tingkat penguasaan terhadap materi yang telah
disajikan dalam kegiatan belajar 1 di atas, kerjakan tes formatif
berikut dengan sungguh - sungguh. Pilihlah salah satu jawaban yang
paling tepat dari pertanyaan berikut:
1. 8 prinsip pembuatan antarmuka antarmuka salah satunya adalah
Cater to universal usability, yaitu . . . .
a. Jika user mengetahui hubungannya saling berkaitan maka
user tidak perlu takut saat melakukan eksplorasi aplikasi.
 b. Penciptaan ruang interface yang universal akan mengakomodir
keinginan semua orang sehingga lebih banyak pengguna
menyukainya.
c. Pemberian informasi yang merupakan hasil feedback agar user
memahami bahwa aksi yang telah dilakukan sebelumnya
sudah mendapat respon dari aplikasi.
d. fungsinya untuk menyampaikan bahwa proses yang dilakukan
oleh user telah selesai dilakukan.
e. Pencegahan dilakukan untuk menghindari kesalahan yang
dilakukan selama menjalankan proses.
2. 8 prinsip pembuatan antarmuka antarmuka salah satunya adalah
Design dialog to yield closure, yaitu . . . .
a. Jika user mengetahui hubungannya saling berkaitan maka
user tidak perlu takut saat melakukan eksplorasi aplikasi.
b. Penciptaan ruang interface yang universal akan mengakomodir
keinginan semua orang sehingga lebih banyak pengguna
menyukainya.
c. Pemberian informasi yang merupakan hasil feedback agar user
memahami bahwa aksi yang telah dilakukan sebelumnya
sudah mendapat respon dari aplikasi.
d. fungsinya untuk menyampaikan bahwa proses yang dilakukan
oleh user telah selesai dilakukan.
e. Pencegahan dilakukan untuk menghindari kesalahan yang
dilakukan selama menjalankan proses.
3. 8 prinsip pembuatan antarmuka antarmuka salah satunya adalah
Prevent errors, yaitu . . . .
a. Jika user mengetahui hubungannya saling berkaitan maka
user tidak perlu takut saat melakukan eksplorasi aplikasi.
b. Penciptaan ruang interface yang universal akan mengakomodir
keinginan semua orang sehingga lebih banyak pengguna
menyukainya.
 c. Pemberian informasi yang merupakan hasil feedback agar user
memahami bahwa aksi yang telah dilakukan sebelumnya
sudah mendapat respon dari aplikasi.
d. fungsinya untuk menyampaikan bahwa proses yang dilakukan
oleh user telah selesai dilakukan.
e. Pencegahan dilakukan untuk menghindari kesalahan yang
dilakukan selama menjalankan proses.
4. 8 prinsip pembuatan antarmuka antarmuka salah satunya adalah
Keep users in control, yaitu . . . .
a. membiarkan user memilih pengaturannya sendiri
b. data dipusatkan pada menu dan tombol yang ada.
c. user bisa melakukan pembatalan atas aksi yang dilakukan
sebelumnya.
d. fungsinya untuk menyampaikan bahwa proses yang dilakukan
oleh user telah selesai dilakukan.
e. Pencegahan dilakukan untuk menghindari kesalahan yang
dilakukan selama menjalankan proses.
5. 8 prinsip pembuatan antarmuka antarmuka salah satunya adalah
Reduce short-term memory load, yaitu . . . .
a. membiarkan user memilih pengaturannya sendiri
b. data dipusatkan pada menu dan tombol yang ada.
c. user bisa melakukan pembatalan atas aksi yang dilakukan
sebelumnya.
d. fungsinya untuk menyampaikan bahwa proses yang dilakukan
oleh user telah selesai dilakukan.
e. Pencegahan dilakukan untuk menghindari kesalahan yang
dilakukan selama menjalankan proses.
6. Fungsi dari swing container split pane adalah . . . .
a. mengelompokkan komponen-komponen.
b. Menampilkan dua komponen dalam ruang yang tetap
c. tempat untuk menampilkan tool-tool
d. membuatbanyak window (multi-window) di dalam satu frame.
 e. Membuat frame yang terdiri dari tab-tab yang bisa dipilih oleh
User
7. Fungsi dari swing container panel adalah . . . .
a. mengelompokkan komponen-komponen.
b. Menampilkan dua komponen dalam ruang yang tetap
c. tempat untuk menampilkan tool-tool
d. membuatbanyak window (multi-window) di dalam satu frame.
e. Membuat frame yang terdiri dari tab-tab yang bisa dipilih oleh
User
8. Fungsi dari swing container internal frame adalah . . . .
a. mengelompokkan komponen-komponen.
b. Menampilkan dua komponen dalam ruang yang tetap
c. tempat untuk menampilkan tool-tool
d. membuatbanyak window (multi-window) di dalam satu frame.
e. Membuat frame yang terdiri dari tab-tab yang bisa dipilih oleh
User
9. Fungsi dari swing container tabbed pane adalah . . . .
a. mengelompokkan komponen-komponen.
b. Menampilkan dua komponen dalam ruang yang tetap
c. tempat untuk menampilkan tool-tool
d. membuatbanyak window (multi-window) di dalam satu frame.
e. Membuat frame yang terdiri dari tab-tab yang bisa dipilih oleh
User
10. Fungsi radio button adalah . . . .
a. Button yang selalu berada dalam salah satu dari dua kondisi.
b. Untuk meminta user agar memilih satu dari lebih dua pilihan
c. membuat kolom agar kelak bisa diisi perintah-perintah teks
atau angka oleh user
d. Digunakan untuk menampilkan status proses
e. Untuk menggeser jendela (windows) secara vertikal.

Cocokkanlah jawabanmu dengan kunci jawaban tes formatif KB 2

yang terdapat pada akhir modul. Hitunglah jawaban yang benar.
Selanjutnya gunakan rumus berikut untuk mengetahui tingkat
penguasaan terhadap materi kegiatan belajar 1

JumlaℎJawaban Benar
Tingkat Penguasaan= x 100%
10

Keterangan :
90 - 100% = baik sekali
80 - 89% = baik
70 - 79% = cukup
<70% = kurang
Daftar Pustaka
1. Yasin, Verdi. 2012. Rekayasa Perangkat Lunak Berorientasi Objek.
Jakarta: Mitra Wacana Media
2. Armansyah. 2019. Diktat Pemrograman Berorientasi Objek (Edisi
Revisi 1). Program Studi Ilmu Komputer Fakultas Sains Dan
Teknologi Universitas Islam Negeri Sumatera Utara Medan
3. Jurnal Perancangan Interaksi Pengguna (User Interaction Design)
Menggunakan Metode Prototyping oleh Rina Candra Noor Santi.
2016
 KUNCI JAWABAN TES FORMATIF
KEGIATAN BELAJAR 2
KAIDAH PEMBUATAN ANTARMUKA DAN KOMPONEN SWING DAN
TOOLS PADA JAVA

1. B
2. D
3. E
4. A
5. B
6. B
7. A
8. D
9. E
10. B