MODUL PROFESIONAL PEMBINAAN KARIER

MODUL PROFESIONAL PEMBINAAN KARIER

Mata Pelajaran Reakayasa Perangkat Lunak Sekolah Menengah Kejuruan (SMK)

Kelompok Kompetensi D (Pemrograman Desktop)

Penulis: Joko Pitono

Direktorat Jenderal Guru dan Tenaga Kependidikan Kementrian Pendidikan dan Kebudayaan Tahun 2017

i

Penulis: 1. Joko Pitono Emai: [email protected]

Penelaah: 1.

Siarra Maulida Asrin, S.T [081562783394], Email: [email protected]

2.

Abdul Haliq, S.Pd., M.Pd., [085341259862] Email : [email protected]

3.

Drs. Muhammad Mappeasse, M.Pd. [0811469750] Email : [email protected]

Ilustrator : 1. Sierra Maulida Asrin, S.T [081562783394] Email : [email protected] 2. Faizal Reza Nurzeha, A.Md. [085242177945] Email : [email protected]

Layouter : 1. Syamsul Hidayat, A.Md. [081355598663] Email : [email protected]

Copyright ©2017 Lembaga Pengembangan dan Pemberdayaan Pendidikan Tenaga Kependidikan Bidang Kelautan Perikanan Teknologi Informasi dan Komunikasi.

Hak Cipta Dilindungi Undang-Undang Dilarang mengkopi sebagian atau keseluruhan isi buku ini untuk kepentingan komersial tanpa izin tertulis dari Kementrian Pendidikan Kebudayaan.

ii

iii

KATA SAMBUTAN Peran guru profesional dalam proses pembelajaran sangat penting sebagai kunci keberhasilan belajar siswa. Guru profesional adalah guru yang kopeten membangun proses pembelajaran yang baik sehingga dapat menghasilkan pendidikan yang berkualitas. Hal ini tersebut menjadikan guru sebagai komponen yang menjadi fokus perhatian pemerintah pusat maupun pemerintah daerah dalam peningkatan mutu pendidikan terutama menyangkut kopetensi guru. Pengembangan profesionalitas guru melalui program Pembinaan Karier merupakan upaya peningkatan kompetensi untuk semua guru. Sejalan dengan hal tersebut, pemetaan kopetensi guru telah dilakukan melalui uji kompetensi guru (UKG) untuk kompetensi pedagogik dan profesional pada akhir tahun 2015. Hasil UKG menunjukanpeta kekuatan dan kelemahan kompetensi guru dalam penguasaan pengetahuan. Peta kompetensi guru tersebut dikelompokan menjadi 10 (sepuluh) kelopok kompetensi. Tindak lanjut pelaksanaan UKG diwujudkan dalam bentuk pelatihan guru paska UKG melalui program Guru Pembelajar.Tujuannya untuk meningkatkan kompetensi guru sebagai agen perubahaan dan sumber belajar utama bagi peserta didik. Program Guru Pembelajar dilaksanakan melalui pola tatap muka, daring (online) dan campuran (blended) tatap muka dengan online. Pusat Pengembangan dan Pemberdayaan Pendidik dan Tenag Kependidikan (PPPPTK), Lembaga Pengembangan dan Pemberdayaan Pendidik dan Tenaga Kependidikan Kelautan Perikanan Teknologi Informasi dan Komunikasi (LP3TK KPTK) dan Lembaga Pengembangan dan Pemberayaan Kepala Sekolah (LP2KS) merupakan Unit Pelaksana Teknis di lingkungan Direktorat Jendral Guru dan Tenaga Kependidikan yang bertanggung jawab dalam mengembangkan perangkat dan melaksanakan peningkaan kompetensi guru sesuai dengan bidangnya. Adapun peragkat pembelajaran yang dikembangkan tersebut adalah modul untuk program Guru Pembelajar (GP) tatap muka dan GP online untuk semua mata pelajaran dan kelompok kompetensi. Dengan modul ini diharapkan program GP memberikan sumbangan yang sangat besar dalam peningkatan kualitas kompetensi guru.Mari kita sukseskan program GP ini untuk mewujudkan Guru Mulia Karena Karya. Jakarta, Februari 2016 Direktur Jendral Guru dan Tenaga Kependidikan

Sumarna Surapranata, Ph.D NIP. 195908011985031002

iv

v

KATA PENGANTAR

Profesi guru dan tenaga kependidikan harus dihargai dan dikembangkan sebagai profesi yang bermartabat sebagaimana diamanatkan Undang-Undang Nomor 14 Tahun 2005 tentang Guru dan Dosen. Hal ini dikarenakan guru dan tenaga kependidikan merupakan tenaga profesional yang mempunyai fungsi, peran, dan kedudukan yang sangat penting dalam mencapai visi pendidikan 2025 yaitu “Menciptakan Insan Indonesia Cerdas dan Kompetitif”. Untuk itu guru dan tenaga kependidikan yang profesional wajib melakukan pengembangan keprofesian berkelanjutan. Buku pedoman Pedoman Penyusunan Modul Diklat Pembinaan Karier Bagi Guru dan

Tenaga

Kependidikan

pengembangan

keprofesian

untuk

institusi

berkelanjutan

penyelenggara

merupakan

program

petunjuk

bagi

penyelenggara pelatihan di dalam melaksakan pengembangan modul yang merupakan salah satu sumber belajar bagi guru dan tenaga kependidikan. Buku ini disajikan untuk memberikan informasi tentang penyusunan modul sebagai salah satu bentuk bahan

dalam kegiatan

pengembangan keprofesian

berkelanjutan bagi guru dan tenaga kependidikan. Pada kesempatan ini disampaikan ucapan terima kasih dan penghargaan kepada berbagai pihak yang telah memberikan kontribusi secara maksimal dalam mewujudkan buku ini, mudah-mudahan buku ini dapat menjadi acuan dan sumber inspirasi bagi guru dan semua pihak yang terlibat dalam pelaksanaan penyusunan modul untuk pengembangan keprofesian berkelanjutan. Kritik dan saran yang membangun sangat diharapkan untuk menyempurnakan buku ini di masa mendatang. Makassar, Desember 2016 Kepala LPPPTK KPTK Gowa Sulawesi Selatan,

Dr. H. Rusdi, M.Pd, NIP 19650430 199103 1 004

vi

vii

DAFTAR ISI

KATA SAMBUTAN ..................................................................................................... IV KATA PENGANTAR .................................................................................................... VI DAFTAR ISI ............................................................................................................. VIII DAFTAR GAMBAR .................................................................................................... XII DAFTAR TABEL........................................................................................................ XVI PENDAHULUAN ......................................................................................................... 1 A.

LATAR BELAKANG ..................................................................................................................... 1

B.

TUJUAN .................................................................................................................................. 1

C.

PETA KOMPETENSI.................................................................................................................... 2

D.

RUANG LINGKUP ...................................................................................................................... 2

E.

SARAN CARA PENGGUNAAN MODUL ........................................................................................... 3 1.

Cara Penggunaan Modul ................................................................................................ 3

2.

Kebutuhan Minimal Penggunaan ................................................................................... 3

3. Cara Instalasi Program Pendukung ...................................................................................... 3 A. Instalasi JDK 8 ...................................................................................................................... 3 B. Instalasi Netbeans 8.0.2 ...................................................................................................... 5 C. Instalasi Oracle XE 10g Database ........................................................................................ 8

MEMBUAT KOMPONEN GUI BERBASIS AWT (ABSTRACT WINDOW TOOLKIT) ............ 15 A.

TUJUAN ................................................................................................................................ 15

B.

INDIKATOR PENCAPAIAN KOMPETENSI ........................................................................................ 15

C.

URAIAN MATERI .................................................................................................................... 16 1.

Abstract Windowing Toolkit (AWT)............................................................................... 16

2.

Window Classes Fundamental ...................................................................................... 25

3.

Komponen didalam AWT .............................................................................................. 28

4.

Layout Manager didalam AWT ..................................................................................... 29

D.

AKTIVITAS PEMBELAJARAN ....................................................................................................... 34

E.

LATIHAN/ KASUS /TUGAS ........................................................................................................ 37

viii

F.

RANGKUMAN ......................................................................................................................... 38

G.

UMPAN BALIK DAN TINDAK LANJUT............................................................................................ 38

H.

KUNCI JAWABAN..................................................................................................................... 39 1.

Source Code Jawaban .................................................................................................... 39

2.

Output Source Code ....................................................................................................... 40

MEMBUAT KOMPONEN GUI BERBASIS SWING .......................................................... 43 A.

TUJUAN ................................................................................................................................ 43

B.


C.

URAIAN MATERI ..................................................................................................................... 43 1.

Java Swing ..................................................................................................................... 43

2.

Komponen didalam Swing ............................................................................................. 43

3.

Layout Manager didalam Swing .................................................................................... 47

D.

AKTIVITAS PEMBELAJARAN........................................................................................................ 50

E.

LATIHAN/ KASUS /TUGAS ......................................................................................................... 53 1.

Tampilan Program ......................................................................................................... 53

2.

Format Layout Program ................................................................................................ 53

F.

RANGKUMAN ......................................................................................................................... 54

G.


H.

KUNCI JAWABAN..................................................................................................................... 54 1.

Source Code Program .................................................................................................... 54

2.

Tampilan Program ......................................................................................................... 56

MEMBUAT KOMPONEN GUI BERBASIS DRAG AND DROP DENGAN NETBEANS ........... 59 A.

TUJUAN ................................................................................................................................ 59

B.


C.

URAIAN MATERI ..................................................................................................................... 59 1.

Definisi Netbeans ........................................................................................................... 59

2.

Bekerja dengan Netbeans.............................................................................................. 60

D.

AKTIVITAS PEMBELAJARAN........................................................................................................ 63

E.

LATIHAN/ KASUS /TUGAS ......................................................................................................... 71 1.

Output Program ............................................................................................................. 72

2.

Properties Komponen Program ..................................................................................... 73

F.

RANGKUMAN ......................................................................................................................... 73

G.


ix

H.

KUNCI JAWABAN .................................................................................................................... 74 1.

Source Code Program .................................................................................................... 74

2.

Tampilan Program ........................................................................................................ 82

EVENT HANDLING KOMPONEN GUI .......................................................................... 85 A.

TUJUAN ................................................................................................................................ 85

B.


C.

URAIAN MATERI .................................................................................................................... 85 1.

Pengertian Event Handling ........................................................................................... 85

2.

Class Event .................................................................................................................... 87

3.

Event Listeners .............................................................................................................. 89

D.

AKTIVITAS PEMBELAJARAN ....................................................................................................... 94

E.

LATIHAN/ KASUS /TUGAS ........................................................................................................ 99

F.

RANGKUMAN ........................................................................................................................ 99

G.

UMPAN BALIK DAN TINDAK LANJUT ......................................................................................... 100

H.

KUNCI JAWABAN .................................................................................................................. 101 1.

Source Code Program .................................................................................................. 101

2.

Output Tampilan Program .......................................................................................... 111

MEMBUAT TRANSFORMASI DENGAN KELAS GRAPHIC ............................................ 115

x

A.

TUJUAN .............................................................................................................................. 115

B.

INDIKATOR PENCAPAIAN KOMPETENSI ...................................................................................... 115

C.

URAIAN MATERI .................................................................................................................. 115 1.

Konsep Dasar Transformasi Objek .............................................................................. 115

2.

Translasi Objek ............................................................................................................ 116

3.

Rotasi Objek ................................................................................................................ 117

4.

Pengubahan Skala Objek/Scalling Object ................................................................... 119

5.

Animasi Objek ............................................................................................................. 120

D.

AKTIVITAS PEMBELAJARAN ..................................................................................................... 126

E.

LATIHAN/ KASUS /TUGAS ...................................................................................................... 129

F.

RANGKUMAN ...................................................................................................................... 129

G.

UMPAN BALIK DAN TINDAK LANJUT ......................................................................................... 130

H.

KUNCI JAWABAN .................................................................................................................. 131 1.

Source Code Program .................................................................................................. 131

2.

Tampilan Output Program .......................................................................................... 133

EVALUASI............................................................................................................... 134 KUNCI JAWABAN ................................................................................................... 142 DAFTAR PUSTAKA .................................................................................................. 144 GLOSARIUM........................................................................................................... 147

xi

DAFTAR GAMBAR GAMBAR 1 SAAT APLIKASI JDK PERTAMA KALI DIBUKA UNTUK INSTALASI ................... 3 GAMBAR 2 PEMILIHAN FITUR PLUGIN INSTALASI JDK ............................................... 4 GAMBAR 3 PROSES INISIALISASI INSTALASI JDK ...................................................... 4 GAMBAR 4 PEMILIHAN DIREKTORI INSTALASI JDK.................................................... 4 GAMBAR 5 INSTALASI JDK TELAH SELESAI .............................................................. 5 GAMBAR 6 PROSES PEMILIHAN FITUR INSTALASI NETBEANS .................................... 5 GAMBAR 7 EULA NETBEANS .................................................................................. 6 GAMBAR 8 PEMILIHAN INSTALASI JUNIT .................................................................. 6 GAMBAR 9 PEMILIHAN DIREKTORI UNTUK INSTALASI ................................................ 7 GAMBAR 10 PEMILIHAN FITUR CHECK FOR UPDATE ................................................. 7 GAMBAR 11 PROSES INSTALASI NETBEANS ............................................................. 8 GAMBAR 12 PEMILIHAN SURVEY PROGRAM NETBEANS ............................................ 8 GAMBAR 13 PROSES MENUNGGU LOADING APLIKASI ORACLE XE ............................ 9 GAMBAR 14 TAMPILAN AWAL INSTALASI APLIKASI ORACLE XE ................................. 9 GAMBAR 15 TAMPILAN EULA INSTALASI APLIKASI ORACLE XE .............................. 10 GAMBAR 16 PEMILIHAN DIREKTORI INSTALASI APLIKASI ORACLE XE ...................... 10 GAMBAR 17 PENULISAN PASSWORD UNTUK LOGIN DATABASE ORACLE XE ............ 10 GAMBAR 18 TAMPILAN PORT PENTING DALAM DATABASE ORACLE ......................... 11 GAMBAR 19 PROSES INSTALASI APLIKASI ORACLE XE ........................................... 11 GAMBAR 20 PROSES INSTALASI APLIKASI ORACLE XE TELAH SELESAI ................... 12 GAMBAR 1. 1 TAMPILAN OUTPUT FRAME ............................................................... 26 GAMBAR 1. 2 TAMPILAN OUTPUT FRAME DENGAN PANEL ....................................... 27 GAMBAR 1. 3 TAMPILAN KOMPONEN AWT PADA FRAME ......................................... 29 GAMBAR 1. 4 TAMPILAN FRAME DENGAN FLOW LAYOUT......................................... 31 GAMBAR 1. 5 TAMPILAN FRAME DENGAN BORDER LAYOUT .................................... 32 GAMBAR 1. 6 TAMPILAN FRAME DENGAN GRID LAYOUT.......................................... 34 GAMBAR 1. 7 TAMPILAN APLIKASI GUI AWT YANG DIBUAT ..................................... 37 GAMBAR 1. 8 TAMPILAN PROGRAM ....................................................................... 38 GAMBAR 1. 9 TAMPILAN FORM DATA ALUMNI ........................................................ 40

xii

GAMBAR 2. 1 TAMPILAN FRAME DENGAN FLOW LAYOUT ........................................ 46 GAMBAR 2. 2 TAMPILAN JOPTIONPANE................................................................. 47 GAMBAR 2. 3 TAMPILAN FRAME DENGAN FLOW LAYOUT SWING ............................. 48 GAMBAR 2. 4 TAMPILAN FRAME DENGAN GRID LAYOUT SWING .............................. 49 GAMBAR 2. 5 TAMPILAN APLIKASI SWING GUI YANG DIBUAT .................................. 52 GAMBAR 2. 6 HASIL TAMPILAN PROGRAM ............................................................. 53 GAMBAR 2. 7 SPESIFIKASI LAYOUT TAMPILAN PROGRAM ....................................... 53 GAMBAR 2. 8 TAMPILAN PROGRAM FORM PENDAFTARAN SISWA BARU................... 56

GAMBAR 3. 1 MEMBUKA NETBEANS LEWAT START MENU....................................... 60 GAMBAR 3. 2 MEMBUAT PROJECT BARU DARI NETBEANS ....................................... 61 GAMBAR 3. 3 MEMBUAT APLIKASI JAVA APPLICATION............................................. 61 GAMBAR 3. 4 MENENTUKAN LOKASI PENYIMPANAN PROJECT JAVA ......................... 62 GAMBAR 3. 5 MEMBUAT FRAME BARU PADA PROJECT NETBEANS ........................... 62 GAMBAR 3. 6 TULIS NAMA FORM YANG DIBUAT ...................................................... 62 GAMBAR 3. 7 TAMPILAN FORM YANG DI BUAT ........................................................ 63 GAMBAR 3. 8 MENU FILE UNTUK MEMBUAT PROJECT JAVA ..................................... 63 GAMBAR 3. 9 MEMBUAT PROJECT JAVA ................................................................ 64 GAMBAR 3. 10 MENULISKAN NAMA PROJECT DAN LOKASI PENYIMPANANNYA ........... 64 GAMBAR 3. 11 MENAMBAHKAN FORM PADA PROJECT YANG DIBUAT ........................ 65 GAMBAR 3. 12 MENULISKAN NAMA FORM .............................................................. 65 GAMBAR 3. 13 MEMILIH BAGIAN PREFERREDSIZE PADA PROPERTIES ...................... 66 GAMBAR 3. 14 MENGATUR LEBAR DAN TINGGI FRAME YANG DIBUAT........................ 66 GAMBAR 3. 15 DRAG KOMPONEN PANEL KE FORM ................................................. 66 GAMBAR 3. 16 HASIL KOMPONEN LABEL................................................................ 67 GAMBAR 3. 17 MENGGANTI TULISAN PADA JLABEL................................................. 67 GAMBAR 3. 18 MENGGANTI TIPE DAN UKURAN HURUF PADA JLABEL........................ 67 GAMBAR 3. 19 SEBELUM VARIABLE NAME DIGANTI ................................................. 68 GAMBAR 3. 20 SESUDAH DIGANTI ......................................................................... 68 GAMBAR 3. 21 LAYOUT AWAL APLIKASI ................................................................. 68 GAMBAR 3. 22 LAYOUT TEXT FIELD ...................................................................... 68 GAMBAR 3. 23 LAYOUT APLIKASI SETELAH DITAMBAHKAN BUTTON .......................... 69 GAMBAR 3. 24 LAYOUT APLIKASI SETELAH DITAMBAHKAN TABEL ............................. 69 GAMBAR 3. 25 KLIK KANAN TABEL YANG DITAMBAHKAN .......................................... 70 xiii

GAMBAR 3. 26 KONTEN TABEL YANG DIEDIT .......................................................... 70 GAMBAR 3. 27 LAYOUT AWAL APLIKASI.................................................................. 70 GAMBAR 3. 28 PEMILIHAN KELAS UTAMA APLIKASI YANG DIBUAT ............................. 71 GAMBAR 3. 29 APLIKASI GUI DENGAN DRAG AND DROP YANG DIBUAT ..................... 71 GAMBAR 3. 30 TAMPILAN KALKULATOR YANG DI BUAT ............................................ 72 GAMBAR 3. 31 TAMPILAN RUNNING SOURCE CODE ............................................... 82

GAMBAR 4. 1 DELEGATION OF EVENT MODEL ........................................................ 87 GAMBAR 4. 2 ACTIONLISTENER SEBELUM DAN SESUDAH DI KLIK ............................ 91 GAMBAR 4. 3 JIKA MOUSE KELUAR DARI FRAME .................................................... 92 GAMBAR 4. 4 JIKA MOUSE PADA FRAME ................................................................ 92 GAMBAR 4. 5 JIKA MOUSE DI KLIK ......................................................................... 92 GAMBAR 4. 6 JIKA MOUSE DI TEKAN...................................................................... 92 GAMBAR 4. 7 AWAL PROGRAM DIJALANKAN ........................................................... 93 GAMBAR 4. 8 JIKA TOMBOL “S” DI TEKAN............................................................... 93 GAMBAR 4. 9 JIKA TOMBOL “S” DI LEPAS ............................................................... 93 GAMBAR 4. 10 MENGAKSES MENU SOURCE ........................................................... 94 GAMBAR 4. 11 MENGAKSES EVENT KEYTYPED TEXT FIELD .................................... 95 GAMBAR 4. 12 MEMBERIKAN EVENT PADA BUTTON SIMPAN .................................... 96 GAMBAR 4. 13 PENGATURAN JUMLAH BARIS MENJADI 0.......................................... 97 GAMBAR 4. 14 VALIDASI INPUT NIS ...................................................................... 97 GAMBAR 4. 15 VALIDASI INPUT NAMA ................................................................... 97 GAMBAR 4. 16 VALIDASI INPUT NILAI .................................................................... 98 GAMBAR 4. 17 DATA YANG DI INPUTKAN ................................................................ 98 GAMBAR 4. 18 TAMPILAN DATA BERHASIL DI INPUT PADA TABEL............................. 98 GAMBAR 4. 19 OUTPUT TAMPILAN PROGRAM ...................................................... 111

xiv

xv

DAFTAR TABEL

TABEL 1. 1 KELAS DIDALAM AWT ......................................................................... 25 TABEL 1. 2 KOMPONEN AWT................................................................................ 28 TABEL 1. 3 KONSTRUKTOR FLOW LAYOUT ............................................................. 30 TABEL 1. 4 KONSTRUKTOR BORDERLAYOUT ......................................................... 31 TABEL 1. 5 KONSTRUKTOR GRID LAYOUT .............................................................. 33

TABEL 2. 1 KOMPONEN SWING ............................................................................. 44

TABEL 4. 1 EVENT SOURCE PADA JAVA................................................................ 86 TABEL 4. 2 CLASS-CLASS AWT EVENT .................................................................. 88 TABEL 4. 3 EVENT LISTENER PADA JAVA .............................................................. 89

xvi

xvii

PENDAHULUAN

A. Latar Belakang Guru

dan

tenaga

kependidikan

wajib

melaksanakan

kegiatan

pengembangan keprofesian secara berkelanjutan agar dapat melaksanakan tugas profesionalnya.Program Guru Pembelajar(GP) adalah pengembangan kompetensi Guru dan Tenaga Kependidikan yang dilaksanakan sesuai kebutuhan,

bertahap,

dan

berkelanjutan

untuk

meningkatkan

profesionalitasnya.

GP sebagai salah satu strategi pembinaan guru dan tenaga kependidikan diharapkan dapat menjamin guru dan tenaga kependidikan sehingga mampu secara terus menerus

memelihara, meningkatkan, dan mengembangkan

kompetensinya sesuai dengan standar yang telah ditetapkan. Pelaksanaan kegiatan GP akan mengurangi kesenjangan antara kompetensi yang dimiliki guru

dan

tenaga

kependidikan

dengan

tuntutan

profesional

yang

dipersyaratkan.

Program Diklat GP ini membutuhkan modul yang berfungsi sebagai salah satu sumber belajar. Modul Diklat GP Guru Rekayasa Perangkat Lunak (RPL) Kelompok Kompetensi D “ Pemrograman Desktop ” ini dapat digunakan oleh guru dan tenaga kependidikan dan berfungsi sebagai acuan untuk

memenuhi

tuntutan

kompetensinya,

sehingga

guru

dapat

melaksanakan tugasnya secara professional sesuai dengan standar yang telah ditetapkan.

B. Tujuan Tujuan disusunnya modul diklat GP RPL Kelompok Kompetensi D ini adalah memberikan pengetahuan dan ketrampilan kepada guru atau peserta diklat tentang pembuatan antarmuka beserta aplikasinya dan pembuatan aplikasi kelas graphics dengan benar melalui aktifitas observasi dan praktikum. Setelah mempelajari modul ini diharapkan guru dapat : “ Membuat program 1

dengan bahasa pemrograman yang berorientasi obyek “. Sedangkan indikator pencapaian kompetensinya adalah : 1. Membuat antarmuka-pengguna menggunakan frame, panel, dan komponen-komponen GUI. 2. Membuat aplikasi GUI untuk memanipulasi basis data Memanipulasi data menggunakan Data Manipulation Language. 3. Membuat aplikasi dengan kelas Graphics untuk menggambar teks ataupun gambar

C. Peta Kompetensi

D. Ruang Lingkup Modul ini terdiri dari lima (5) materi pokok. Setiap materi pokok dirancang dalam kegiatan pembelajaran. Setiap kegiatan pembelajaran terdiri dari tujuan

pembelajaran,

indikator

essential,

uraian

materi,

aktivitas

pembelajaran, latihan/tugas/kasus, rangkuman dan umpan balik. Lima (5) materi pokok pada modul ini adalah : 1) Membuat Komponen GUI berbasis AWT (Abstract Window Toolkit), 2) Membuat Komponen GUI berbasis Swing, 3) Membuat Komponen GUI berbasis Drag and Drop dengan Netbeans; 4) Event Handling Komponen GUI; 5) Membuat Transformasi dengan Kelas Graphik.

2

E. Saran Cara Penggunaan Modul 1. Cara Penggunaan Modul Secara

umum,

penggunaan

modul

ini

harus

mempersiapkan

alat/komputer yang akan digunakan dalam membuat aplikasi desktop. Aplikasi tambahan yang digunakan adalah JDK 8, Netbeans dan Oracle 10g XE. Aplikasi JDK digunakan untuk mengompilasi sekaligus menjalankan aplikasi dengan bahasa pemrograman JAVA yang dibuat melalui aplikasi Netbeans, sedangkan aplikasi Oracle 10g XE digunakan sebagai database tempat penyimpanan databasedari aplikasi-aplikasi yang dibuat.

2. Kebutuhan Minimal Penggunaan Spesifikasi minimal penggunaan modul ini adalah: a. Sistem operasi Windows 7. b. Memori RAM 1024 MB. c. Komputer yang digunakan untuk melakukan pembuatan program harus terinstall aplikasi JDK dan Oracle XE 10g.

3. Cara Instalasi Program Pendukung a. Instalasi JDK 8 1)

Lakukan instalasi dengan cara melakukan double click file jdk-8u60windows-i586.exe. Pilih Next pada langkah berikut

Gambar 1 Saat aplikasi JDK pertama kali dibuka untuk instalasi

2)

Pilih Next

3

Gambar 2 Pemilihan Fitur Plugin Instalasi JDK

Aplikasi akan melakukan instalasi pada komputer

Gambar 3 Proses Inisialisasi Instalasi JDK

Tentukan lokasi penyimpanan file installer JDK 8, anda dapat memilih Next

Gambar 4 Pemilihan Direktori Instalasi JDK 4

Tunggu aplikasi JDK terinstal di komputer hingga menampilkan tampilan seperti berikut. Pilih Close

Gambar 5 Instalasi JDK telah selesai

Aplikasi JDK sudah selesai diinstal b.

Instalasi Netbeans 8.0.2 1)

Double click aplikasi Netbeans yang telah didownload dan tunggu hingga muncul tampilan seperti berikut. Pilih Next untuk memulai melakukan instalasi

Gambar 6 Proses Pemilihan Fitur Instalasi Netbeans

2) Centang bagian I Accept the License Agreement dan pilih Next 5

Gambar 7 EULA Netbeans

3) Pilih Next pada tampilan berikut

Gambar 8 Pemilihan instalasi unit

4) Pilih lokasi instalasi Netbeans dan lokasi instalasi JDK yang telah diinstal sebelumnya

6

Gambar 9 Pemilihan Direktori untuk Instalasi

5) Pilih Install pada tampilan berikut untuk memulai melakukan instalasi

Gambar 10 Pemilihan Fitur Check for Update

6) Tunggu proses instalasi

7

Gambar 11 Proses Instalasi Netbeans

7) Jangan pilih bagian Contribute .... dan pilih Finish

Gambar 12 Pemilihan Survey Program Netbeans

8) Instalasi Netbeans telah selesai dan aplikasi siap digunakan c. Instalasi Oracle XE 10g Database 1) Double click file Oracle XE.exe yang terdapat pada folder software penggunaan moduldan tunggu proses loading aplikasi Oracle XE

8

Gambar 13 Proses Menunggu Loading Aplikasi Oracle XE

2) Pilih Next pada bagian berikut

Gambar 14 Tampilan Awal Instalasi Aplikasi Oracle XE 3) Pilih “I Accept the license agreement” pada kotak dialog EULA berikut, jika sudah pilih Next

9

Gambar 15 Tampilan EULA Instalasi Aplikasi Oracle XE

4) Tentukan lokasi penyimpanan database Oracle, misal pada instalasi menggunakan sistem drive C:/

Gambar 16 Pemilihan Direktori Instalasi Aplikasi Oracle XE

5) Tulis password yang digunakan untuk login ke database

Gambar 17 Penulisan Password Untuk Login Database Oracle XE

10

6) Catat beberapa port penting yang ditampilkan pada preview sebelum instalasi seperti pada gambar berikut, kemudian Pilih install pada tampilan berikut

Gambar 18 Tampilan Port Penting dalam Database Oracle

7) Tunggu proses instalasi

Gambar 19 Proses Instalasi Aplikasi Oracle XE

11

8) instalasi sudah selesai, kemudian pilih Finish

Gambar 20 Proses Instalasi Aplikasi Oracle XE Telah Selesai

9) Konfigurasi database Pembelajaran 5)

12

(akan

dijelaskan

pada

modul

Kegiatan

13

14

MEMBUAT KOMPONEN GUI BERBASIS AWT (ABSTRACT WINDOW TOOLKIT) A. Tujuan Setelah mengikuti Kegiatan Pembelajaran 1 ini diharapkan peserta diklat dapat membuat proyek sistem informasi berbasis desktop.

B. Indikator Pencapaian Kompetensi 1.

Membuat perencanaan proyek sistem informasi berbasis desktop meliputi feasibility study, budget, sumber daya, scope, dan alokasi waktu.

2.

Membuat antar muka pengguna menggunakan frame, panel, dan komponen-komponen GUI berbasis AWT

3.

Membuat layout GUI dengan flow layout, border layout, dan grid layout dalam Frame GUI berbasis AWT.

15

C. Uraian Materi 1. Desain Antar Muka Antar muka pengguna memiliki empat komponen yaitu: a. Model pengguna, model konseptual yang diinginkan pengguna dalam memanipulasi informasi dan proses yang diaplikasikan pada informasi tersebut. b. Bahasa perintah (command language), peranti untuk memanipulasi model, idealnya dengan menggunakan bahasa alami. c. Umpan balik, untuk memberi keyakinan bahwa program telah menerima perintah pengguna dan dapat memahami maksud perintah tersebut termasuk kemampuan sebuah program yang membantu pengguna untuk mengoperasian program itu sendiri. d. Tampilan informasi, digunakan untuk menunjukkan status informasi atau program ketika pengguna melakukan suatu tindakan.

2. Prinsip Desain Desain antar muka yang baik berdasarkan pada user yang dinamakan User Centered Design (UCD). UCD adalah filosofi perancangan yang menempatkan pengguna sebagai pusat dari proses pengembangan sistem. Saat ini pendekatan UCD telah didukung berbagai teknik, metode, tools, prosedur, dan proses yang membantu perancangan sistem interaktif yang lebih berpusat pada pengguna. Pengguna tidak hanya memberi komentar tentang ide perancangan. Mereka harus secara intensif dilibatkan dalam semua aspek, termasuk bagaimana implementasi

sistem

yang

baru

akan

mempengaruhi

pekerjaannya. Pengguna juga dilibatkan dalam pengujian awal, evaluasi serta perancangan secara iteratif. Eason (1992) menggambarkan empat langkah kunci dalam pengembangan yaitu : a. Perencanaan b. Perancangan c. Implementasi d. Pengelolaan sistem.

16

Terdapat empat pendekatan dalam pengembangan sistem yaitu: a. Soft System Methodology (SSM), berfokus pada perencanaan. Penekanan SSM tidak pada pencarian solusi untuk suatu masalah, tetapi pada pemahaman situasi dimana masalah yang dirasakan dianggap bukan merupakan esensi/akar masalah sebenarnya. Langkah-langkah SSM yaitu: 1)

Langkah 1 dan 2 difokuskan pada pencarian pernyataan yang lengkap atas situasi permasalahan.

2)

Pada langkah ini dilakukan pertemuan yang melibatkan seluruh pihak yang berkepentingan (stakeholders). Umumnya stakeholders yang berbeda akan mempunyai pandangan yang berbeda pula tentang tujuan sistem.

3)

Perbedaan pandangan ini tidak perlu dipertentangkan, karena mereka menekankan pada aspek yang berbeda atas situasi keseluruhan dan mereka harus difasilitasi.

4)

Langkah 3 mencoba untuk membuat definisi sistem yang presisi.

5)

Langkah 4 menggunakan hasil dari langkah 3 untuk membuat model konseptual yang berupa pernyataan sistem secara abstrak.

6)

Membawa langkah 3 dan 4 dari dunia nyata yang memungkinkan untuk menghasilkan suatu pernyataan yang tidak dipengaruhi oleh batasan- batasan dalam dunia nyata.

7)

Chekland (1981) dan Wilson (1984) menyediakan sejumlah metoda yang dapat digunakan untuk menghasilkan suatu definisi yang formal dan komprehensif tentang sistem.

8)

Checkland menamakannya sebagai root definition, yang dapat membantu perancang untuk memastikan bahwa mereka telah mencakup seluruh aspek dari sistem dan menghasilkan definisi akar yang kuat.

9)

Definisi tersebut adalah elemen CATWOE: Clien atau pelanggan, Actors, Transformation, Weltanschauung (pandangan dunia), Owners, dan Environtment.

b. Open System Task Analysis (OSTA), berfokus pada langkah awal perencanaan.

17

c. Multiview, metodologi yang lengkap mulai dari perencanaan sampai dengan implementasi. d. Star Life Cycle, berfokus pada perancangan Konsep UCD (User Centered Design ) yaitu : a. Berpusat pada user. b. Tujuan/sifat-sifat, konteks dan lingkungan produk semua berdasarkan pada pengalaman user. c. Selanjutnya ditetapkan model pekerjaan pengguna yang akan didukung sistem. Prinsip user-centered design lifecycle [J. Gould, 1995] yaitu: a. Pertama-tama fokus pada pengguna (user requirement). 1)

Perancang harus mempunyai hubungan langsung dengan pengguna sesungguhnya atau calon pengguna – melalui interview, survei, partisipasi dalam workshop perancangan.

2)

Tujuan utama untuk memahami kognisi, karakter dan atitud pengguna serta karakteristik antropometri.

3)

Aktifitas utama mencakup pengambilan data, analisis dan integrasinya ke dalam informasi perancangan dari pengguna tentang karakteristik tugas, lingkungan teknis dan organisasi.

b. Perancangan terintegrasi (prototyping) 1)

Integratif? Perancangan harus mencakup antarmuka pengguna, sistem bantuan, rencana pelatihan, dokumentasi pengguna, dukungan teknis serta prosedur instalasi dan konfigurasi.

2)

Perancangan tersebut harus dikembangkan secara parallel, dan tidak secara sekuensial serta harus berada di bawah satu proses manajemen.

c. Dari awal berlanjut pada pengujian pengguna (usability measurement) 1)

Pengukuran penggunaan produk secara empiris

2)

Dibutuhkan observasi tentang kelakuan pengguna, evaluasi umpan balik yang cermat, wawasan pemecahan masalah dan motivasi yang kuat untuk mengubah rancangan.

3)

Umpan balik yang berasal dari pengguna dikumpulkan secara langsung atau tidak langsung dinyatakan dalam bentuk rekomendasi dan keputusan perancangan.

18

d. Perancangan interatif (spiral model) Iteratif Sistem yang sedang dikembangkan harus didefinisikan, dirancang, dites berulang kali berdasarkan hasil tes kelakuan dari fungsi, antarmuka, sistem bantuan, dokumentasi pengguna dan pendekatan pelatihannya. User dari user centered design yaitu : a. Pengguna, Orang yang akan menggunakan sistem. b. Pengguna langsung (end user), Orang yang menggunakan sistem untuk menyelesaikan pekerjaannya. c. Pengguna tidak langsung, Orang yang menggunakan sistem untuk penggunaan lainnya, seperti : system administrators, installers dan demonstrators. d. Stakeholder, Orang yang terpengaruh oleh sistem atau yang dapat mempengaruhi proses pengembangan, seperti : staf pemasaran dan pembeli. e. Usability engineers, Orang yang mempunyai latar belakang dalam psikologi dan

dapat

membantu

menentukan

konteks

dalam

menetapkan

penggunaan

dan

panduan

melaksanakan

perancangan, wawancara

kebutuhan penggunaan dan sesi pengujian. f. Technical staff dan software developers, Orang yang merinci spesifikasi fungsionalitas sistem dan mengembangkan use case model dan prototipe antarmukanya. Aturan dalam User centered design yaitu : a. Perspective, pengguna selalu benar. Jika terdapat masalah dalam penggunaan sistem, maka masalahnya terdapat pada sistem bukan pengguna. b. Installasi Pengguna mempunyai hak untuk dapat menginstal atau meng-uninstal perangkat lunak dan perangkat keras sistem secara mudah tanpa adanya konsekuensi negatif. c. Pemenuhan Pengguna mempunyai hak untuk mendapatkan sistem dapat bekerja persis seperti yang dijanjikan.

19

d. Instruksi Pengguna mempunyai hak untuk dapat menggunakan instruksi secara mudah (buku petunjuk, bantuan secara online atau kontekstual, pesan kesalahan). Tujuan dari instruksi tersebut agar pengguna mempunyai pemahaman dalam menggunakan sistem untuk mencapai tujuan yang diinginkan secara efisien dan terhindar dari masalah. e. Control Pengguna mempunyai hak untuk mengontrol sistem dan mampu membuat sistem menanggapi dengan benar atas permintaan yang diberikan. f. Umpan balik Sistem memnyediakan informasi yang jelas, dapat dimengerti dan akurat tentang tugas yang dilakukan dan kemajuan yang dicapai. g. Keterkaitan Pengguna mempunyai hak untuk mendapatkan informasi yang jelas tentang semua prasyarat yang dibutuhkan sistem untuk memperolah hasil terbaik. h. Scope Pengguna mempunyai hak untuk mengetahui batasan kemampuan sistem. i. Assistance Pengguna mempunyai hak untuk berkomunikasi dengan penyedia teknologi dan menerima pemikiran dan tanggapan yang membantu jika diperlukan. j. Usability Pengguna harus menjadi penguasa teknologi perangkat lunak dan perangkat keras bukan sebaliknya. Produk harus dapat digunakan secara alami dan intuitif. Lima sifat yang harus diubah yaitu : a. Selama proses pengembangan penekanan dan fokus hanya ditujukan pada mesin atau sistem, bukan pada orang yang akan menggunakan sistem. b. Dengan penetrasi teknologi ke pasar pelanggan, maka audiens terbesar telah berubah dan terus berubah secara dramatis. Perkembangan organisasi masih lambat dalam mensikapi evolusi ini.

20

c. Perancangan sistem yang usable adalah sulit, tidak dapat diprediksi dan perlu usaha keras. Namun saat ini banyak organisasi yang mensikapinya sebagai hal yang biasa. d. Organisasi menggunakan tim dan pendekatan yang sangat khusus dalam menghasilkan

dan

mengembangkan

sistem,

namun

gagal

untuk

mengintegrasikannya satu dengan yang lain. e. Saat ini penekanan dan kebutuhan adalah pada aspek perancangan, sementara banyak perancang memposisikan pikiran dan keterampilannya hanya untuk implementasi teknis. Menentukan kebutuhan pengguna dan organisasi dengan cara : a. Kualitas perancangan interaksi manusia dan komputer serta workstation. b. Kualitas dan isi tugas pengguna, contoh : apakah operator bertanggung jawab melakukan konfigurasi sistem seperti kenyamanan, keselamatan, kesehatan dan khususnya motivasi. c. Kinerja tugas yang efektif khususnya dalam hal transparansi aplikasi ke pengguna. d. Kerjasama dan komunikasi yang efektif diantara pengguna dan pihak ketiga yang relevan. e. Dibutuhkan kinerja sistem baru terhadap tujuan finansial. Solusi perancangan yang dihasilkan : a. Dengan menggunakan pengetahuan yang ada (standards, contoh petunjuk sistem lain, dan lain-lain), untuk mengembangkan suatu proposal solusi perancangan. b. Membuat solusi perancangan lebih konkrit( dengan menggunakan simulasi, prototipe, dan lain-lain). c. Memperlihatkan

prototipe

ke

pengguna

dan

mengamatinya

saat

melakukan tugas yang spesifik, dengan atau tanpa bantuan evaluator. d. Menggunakan umpan balik untuk perbaikan rancangan. e. Mengulangi proses sampai tujuan perancangan terpenuhi. Secara umum prinsip untuk membangun antarmuka ini yaitu : a. Gunakan dialog yang sederhana dan alami, menghindari penggunaan jargon dengan menampilkan techno-speak. b. Berusaha untuk konsisten, pada urutan, aksi, perintah, layout dan daftar kata- kata penting. 21

c. Sediakan

umpan

balik

yang

informatif,

secara

terus-menerus

memberitahu pengguna tentang yang terjadi. d. Minimalkan beban ingatan user, mendeskripsikan format input yang diperlukan seperti contoh dan default. Contohnya: Date _ _ – _ _ _ – _ _ (DD-Mmm-YY, e.g., 02-Aug-93). e. Memberikan perubahan aksi yang mudah, seperti memberikan undo. f. Menyediakan jalan keluar yang jelas, misal untuk mengatasi salah dalam memilih perintah. g. Menyediakan shortcut, memungkinkan user untuk menjalankan operasi yang sering dipakai dengan cepat. h. Mendukung fokus internal dari kontrol, seperti penggunaan enter next command lebih baik daripada Ready for next command. i. Menyediakan

penanganan

kesalahan,

memberi

petunjuk

tentang

kesalahan yg dilakukan user dan langkah perbaikannya. j. Menyediakan help dan dokumentasi, untuk membantu pengguna khususnya pengguna baru dalam menggunakan software.

3. Desain Grafik Desain grafik mempunyai sifat look dan feel, maksudnya : a. Look terlihat pada tampilan secara visualisasi seperti 1)

Simbolisasi/icon

2)

Enable/disable

3)

Active/inactive, dan lain-lain.

b. Feel akan terasa ketika pengguna melakukan seperti : 1)

drag, drag dan drop

2)

click/dblclick. Prinsip dalam membuat desain grafik yaitu :

a. Metaphor Penggunaan presentasi dan unsur visual untuk beberapa item yang relevan. Contoh: pada website toko furniture online dengan visualisasi etalase di toko dibuat mirip dengan aslinya. b. Kejelasan, tiap-tiap elemen pada suatu interface harus mempunyai suatu tujuan. Contoh: penggunaan white space mempunyai pengaruh antara lain: 22

1)

Menyediakan keseimbangan dan simetri dalam penggunaannya.

2)

Memperkuat dampak pesan yang disampaikan.

3)

Mengijinkan mata untuk istirahat dari unsur aktivitas.

4)

Digunakan untuk meningkatkan kesederhanaan, kerapian, kelas.

c. Konsistensi, pada layout, warna, gambar, ikon, teks, di dalam screen, antar screen dan lain-lain. d. Alignment, penggunaan model seperti : 1)

western world, dimulai dari kiri atas.

2)

grid, garis vertikal dan horizontal untuk membantu tata letak window.

3)

Left, center atau right.

e. Pendekatan(Proximity), item dikelompokkan berdasarkan hal-hal yang berkaitan. Jarak dalam proximity tidak menyiratkan suatu hubungan. f. Kontras, digunakan untuk membedakan kontrol yang aktif atau tidak dan mengatur item yang

paling penting dengan high light

(menyorotnya). g. Tipografi 1)

Karakter dan symbol harus nyata dan dapat dibedakan.

2)

Hindari penggunaan semua huruf besar.

3)

Readability (keadaaan yang dapat dibaca).

4)

Bagaimana agar mudah membaca teks yang banyak.

5)

Legibility (Sifat mudah dibaca).

6)

Bagaimana agar mudah untuk mengenali teks pendek yg muncul secara tiba-tiba.

7)

Jenis huruf (font).

h. Petunjuk 1)

Gunakan serif untuk teks yang panjang; sans serif untuk teks utama

2)

Gunakan 1-2 font (3 maks).

3)

Jangan gunakan bold, italic, kapital untuk teks yang panjang.

4)

Gunakan ukuran maks 1-3 point.

5)

Hati-hati penggunaan teks untuk latar belakang dengan warna.

i. Warna. 23

1)

Kita melihat dunia melalui refleksi model warna.

2)

Cahaya menerangi suatu permukaan dan dicerminkan pada mata kita.

3)

Printer

4)

Pada monitor, susunan khas RGB, nilai 0-255 setiap red, green, blue.

5)

Gunakan untuk satu tujuan, bukan hanya menambah beberapa warna pada tampilan.

6)

Tampilkan image berwarna pada background hitam.

7)

Pilih foreground dengan warna terang (white, bold green,…).

8)

Hindari coklat dan hijau sebagai warna background.

9)

Pastikan warna foreground kontras dengan warna background.

10) Gunakan warna untuk menarik perhatian, komunikasi organisasi, untuk menandai status, untuk menentukan hubungan 11) Hindari penggunaan warna untuk tugas yang tidak berhubungan. 12) Warna berguna untuk mendukung pencarian. j. Selalu konsisten dengan asosiasi pekerjaan dan budaya: 1)

Red : hot, warning, love

2)

Pink : female, menarik

3)

Orange : musim, hangat, Halloween

4)

Yellow : happy, hati-hati, suka cita

5)

Brown : warm, fall, ko, daratan

6)

Green : subur, pastoral, iri/cemburu

7)

Purple (ungu) : meriah, canggih.

k. Ikon 1)

Mewakili objek atau aksi yang lazim dan dapat dikenali

2)

Membuat ikon lebih menonjol dari background

3)

Pastikan ikon yang terpilih tampak terlihat jelas dari ikon yang tidak terpilih

24

4)

Buat setiap ikon yang berbeda.

5)

Hindari rincian yang berlebihan.

4. Abstract Windowing Toolkit (AWT) The Java Foundation Class (JFC), merupakan bagian penting dari Java SDK, yang termasuk dalam koleksi dari API mempermudah

pengembangan

dimana

dapat

aplikasi JAVA GUI (Graphical User

Interface). JFC termasuk diantara 5 bagian utama dari API yaitu AWT dan Swing. Tiga bagian yang lainnya dari API adalah Java2D, Accessibility, dan Drag and Drop. Semua itu membantu pengembang dalam mendesain dan mengimplementasikan aplikasi visual yang lebih baik. AWT dan Swing menyediakan komponen GUI yang dapat digunakan dalam membuat aplikasi Java dan applet. AWT menjamin tampilan look and feel pada aplikasi yang dijalankan pada dua mesin yang berbeda menjadi terlihat

sama.

Swing

API

dibangun

dari

beberapa

mengimplementasikan beberapa jenis bagian dari AWT.

API

yang

Kesimpulannya,

komponen AWT dapat digunakan dengan komponen Swing.

5. Window Classes Fundamental Dalam mengembangkan aplikasi GUI, komponen GUI seperti tombol atau textfield diletakkan di dalam kontainer. Berikut ini adalah daftar dari beberapa kelas penting pada kontainer yang telah disediakan oleh AWT: Tabel 1. 1 Kelas didalam AWT Kelas AWT Komponen

Kontainer Panel

Window

Frame

Deskripsi Abstract Class untuk objek yang dapat ditampilkan pada console dan berinteraksi dengan user. Bagian utama dari semua kelas AWT. Abstract Subclass dari Component Class. Sebuah komponen yang dapat menampung komponen yang lainnya. Turunan dari Container Class. Sebuah frame atau window tanpa titlebar, menu bar tidak termasuk border. Superclass dari appletclass. Turunan dari Container class. Top level window, di mana berarti tidak bisa dimasukkan dalam objek yang lainnya. Tidak memiliki border dan menubar. Turunan dari window class. Window dengan judul, menubar, border dan pengatur ukuran di pojok. Memiliki empat konstruktor , dua diantaranya memiliki penulisan seperti di bawah ini: Frame() Frame(String title)

25

Untuk mengatur ukuran window, menggunakan method setSize. Syntax

: void setSize(int width, int height)

Mengubah ukuran komponen ini dengan width dan height sebagai parameter. Syntax : void setSize(Dimension d)

Mengubah ukuran dengan d.width dan d.height berdasar pada spesifikasi Dimensiond.

Default dari window adalah not visible atau tak tampak hingga Anda mengatur visibility menjadi true.Inilah syntax untuk methodset Visible. void setVisible(boolean b)

Contoh 1, Membuat Frame pada JAVA: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Frame import java.awt.*; publicclass SampleFrame extends Frame{ publicstaticvoid main(String[] args){ SampleFrame sf =new SampleFrame(); sf.setSize(400,200);//mengatur ukuran Frame sf.setVisible(true); //Membuat window menjadi terlihat } }

Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut

Gambar 1. 1 Tampilan output Frame

Kode di atas akan menampilkan suatu frame dengan ukuran panjang 400 pixel dan lebar 100 pixel.

26

Contoh 2, Membuat Tampilan pada Frame: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Panel import java.awt.*; publicclass BuatPanel extends Panel{ public BuatPanel(){ setBackground(Color.blue); } publicvoid paint(Graphics g){ g.setColor(new Color(0,255,0));//tulisan hijau g.setFont(new Font("Arial",Font.PLAIN,16)); g.drawString("Percobaan Membuat Panel",30,100); g.setColor(new Color(1.0f,0,0));//garis merah g.fillRect(30,100,150,10); } publicstaticvoid main(String[] args){ Frame f =new Frame("Frame dengan Panel"); BuatPanel gp =new BuatPanel(); f.add(gp); f.setSize(600,300); f.setVisible(true); } }

Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut

Gambar 1. 2 Tampilan output Frame dengan Panel Kode di atas akan membuat Panel dalam suatu Frame, dalam panel tersebut terdapat tulisan hijau “Percobaan Membuat Panel” yang berjenis Arial ukuran 16. Selain itu, terdapat blok merah yang berada di bawah tulisan yang dibuat.

27

6. Komponen di dalam AWT Berikut ini adalah daftar dari kontrol AWT. Kontrol adalah komponen seperti tombol atau textfield yang mengijinkan user untuk berinteraksi dengan aplikasi GUI. Berikut ini semua subkelas dari Components class. Tabel 1. 2 Komponen AWT Label

Button

Choice

TextField

Checkbox

List

TextArea

CheckboxGroup Scrollbar

Contoh 3, Membuat Komponen: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Frame dengan isi beberapa komponen yang terdapat pada AWT, seperti button, Label, Textbox, Checkbox, Listbox, Combobox, Scroll dan yang lainnya import java.awt.*; publicclass KontrolFrame extends Frame{ publicstaticvoid main(String[] args){ KontrolFrame kf =new KontrolFrame(); kf.setLayout(new FlowLayout()); kf.setSize(900,120); kf.add(new Button("Tombol"));//Menambahkan button kf.add(new Label("Label"));//Menambahkan label kf.add(new TextField());//Menambahkan textfield CheckboxGroup cbg =new CheckboxGroup(); kf.add(new Checkbox("Check Box 1", cbg,true));// checkbox kf.add(new Checkbox("Check Box 2", cbg,false)); kf.add(new Checkbox("Check Box 3", cbg,false)); List list =new List(3,false); list.add("List Box 1");//Menambahkan listbox list.add("List Box 2"); list.add("List Box 3"); list.add("List Box 4"); list.add("List Box 5"); kf.add(list); Choice chooser =new Choice(); chooser.add("Combobox 1");//Menambahkan combobox chooser.add("Combobox 2"); chooser.add("Combobox 3"); kf.add(chooser); kf.add(new Scrollbar());//Menambahkan scrollbar kf.setVisible(true); } }

Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut 28

Gambar 1. 3 Tampilan komponen AWT pada Frame

7. Layout Manager di dalam AWT Posisi dan ukuran suatu komponen ditentukan oleh layout manager. Layout manager mengatur tampilan dari komponen di dalam kontainer. Berikut ini beberapa layout manager yang terdapat di dalam Java : a. Flow Layout b. Border Layout c. Box Layout d. Grid Layout e. Grid Bag Layout f. Card Layout g. Spring Layout

Layout manager dapat diatur menggunakan method set Layout dari Container class. Method ini dapat ditulis sebagai berikut: void setLayout(LayoutManager mgr)

Jika kita memilih untuk tidak menggunakan layout manager, kita dapat mengisi null sebagai argumen untuk method ini. Tetapi selanjutnya, kita akan mengatur

posisi

elemen

secara manual dengan menggunakan method

setBounds dari Components class. public void setBounds(int x, int y, int width, int height)

Method ini mengatur posisi berdasarkan pada argumen x dan y, dan ukuran berdasarkan argumen width dan height.

a. Flow Layout FlowLayout Manager adalah default manager untuk Panel class dan subkelasnya, termasuk applet class. Cara meletakkan komponen dari FlowLayout Manager dimulai dari kiri ke kanan dan dari atas ke bawah, 29

dimulai dari pojok kiri atas. Seperti pada saat mengetik menggunakan editor kata. Berikut adalah bagaimana FlowLayout Manager bekerja, dimana memiliki tiga konstruktor seperti daftar di bawah ini.

Tabel 1. 3 Konstruktor FlowLayout Konstruktor FlowLayout()

FlowLayout(int align)

Deskripsi Membuat objek baru Flow Layout dengan posisi di tengah dan lima unit horizontal dan vertikal gap dimasukkan pada komponen sebagai default. Membuat objek baru FlowLayout dengan posisi. Posisi argumen mengikuti penulisan sebagai berikut: FlowLayout.LEFT FlowLayout.CENTER FlowLayout.RIGHT

FlowLayout(int align, int hgap, int vgap)

Membuat objek baru FlowLayout dengan argumen pertama sebagai posisi pada komponen dan hgap untuk horizontal dan vgap untuk vertikal pada komponen. Gap dapat dikatakan sebagai jarak antara komponen dan biasanya diukur dengan satuan pixel.

Contoh 4, Membuat Frame dengan FlowLayout: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Frame dengan isi 3 tombol dengan aligment kanan ukuran hgap = 10 px dan vgap = 40 px. import java.awt.*; publicclass CobaFlowLayout extends Frame { publicstaticvoid main (String args[]){ CobaFlowLayout fl =new CobaFlowLayout(); fl.setLayout(new FlowLayout(FlowLayout.RIGHT,10,40)); fl.add(new Button("ONE")); fl.add(new Button("TWO")); fl.add(new Button("THREE")); fl.setSize(250,100); fl.setVisible(true); } }

Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut:

30

Gambar 1. 4 Tampilan Frame dengan Flow Layout

b. Border Layout Border Layout membagi kontainer menjadi lima bagian di antaranya Utara, Selatan, Timur, Barat, dan Tengah. Setiap komponen dimasukkan ke dalam region yang spesifik. Region utara dan selatan membentuk jalur horizontal sedangkan region timur dan barat membentuk jalur vertikal. Dan region tengah berada pada perpotongan jalur horizontal dan vertikal. Tampilan ini adalah bersifat default untuk objek Window, termasuk objek dari subkelas Window yaitu tipe Frame dan Dialog.

Tabel 1. 4 Konstruktor Border Layout Konstruktor BorderLayout()

BorderLayout(int hgap, int vgap)

Deskripsi Membuat objek BorderLayout baru tanpa spasi yang diaplikasikan di antara komponen yang berbeda. Membuat objek BorderLayout baru dengan spasi unithgaphorizontal dan unit vgap vertikal yang diaplikasikan di antara komponen yang berbeda.

Seperti pada FlowLayout Manager, parameter hgap dan vgap di sini juga

menjelaskan

jarak

antara

komponen

dengan

kontainer.

Untuk

menambahkan komponen ke dalam region yang spesifik, gunakan method menambahkan dan melewatkan dua argumen yaitu komponen yang ingin dimasukkan ke dalam region dan region mana yang ingin dipakai untuk meletakkan komponen. Perlu diperhatikan bahwa hanya satu komponen yang dapat dimasukkan dalam satu region. Menambahkan lebih dari satu komponen pada kontainer yang bersangkutan, maka komponen yang terakhir ditambahkan yang akan ditampilkan. Berikut ini adalah daftar dari kelima region: 31

BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.EAST BorderLayout.WEST BorderLayout.CENTER

Contoh 5, Membuat Frame dengan BorderLayout: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Frame dengan layout tipe Border Layout import java.awt.*; publicclass CobaBorderLayout extends Frame{ publicstaticvoid main(String[] args){ CobaBorderLayout bl =new CobaBorderLayout(); bl.setLayout(new BorderLayout(10,10)); bl.add(new Button("Atas"), BorderLayout.NORTH); bl.add(new Button("Bawah"), BorderLayout.SOUTH); bl.add(new Button("Kanan"), BorderLayout.EAST); bl.add(new Button("Kiri"), BorderLayout.WEST); bl.add(new Button("Tengah"), BorderLayout.CENTER); bl.setSize(200,200); bl.setVisible(true); } }


Gambar 1. 5 Tampilan Frame dengan Border Layout

c.

GridLayout Dengan GridLayout manager, komponen juga diposisikan dari kiri ke kanan

dan dari atas ke bawah seperti pada FlowLayout manager. GridLayout manager membagi kontainer menjadi baris dan kolom. Semua region memiliki ukuran yang sama. Hal tersebut tidak mempedulikan ukuran sebenarnya dari komponen. Berikut ini adalah daftar dari konstruktor untuk GridLayout class. 32

Tabel 1. 5 Konstruktor GridLayout Konstruktor GridLayout() GridLayout(int rows, int cols) GridLayout(int rows, int cols, int hgap, int vgap)

Deskripsi Membua tobjek GridLayout baru dengan satu baris dan satu kolom sebagai default Membuat objek GridLayout baru dengan jumlah baris dan kolom sesuai dengan keinginan Membuat objek GridLayout baru dengan jumlah baris dan kolom yang ditentukan. Unit spasi hgap horizontal dan vgap vertikal diaplikasikan ke dalam komponen.

Contoh 6, Membuat Frame dengan GridLayout: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Frame tipe layout Grid Layout. Di mana di dalam Frame tersebut akan ada 2 baris dan 3 kolom, di mana jarak vgap dan hgap-nya adalah 4 px. import java.awt.*; publicclass CobaGridLayout extends Frame{ publicstaticvoid main(String[] args){ CobaGridLayout gld =new CobaGridLayout(); gld.setLayout(new GridLayout(2,3,4,4)); gld.add(new Button("Tombol Baris 1 Kolom 1")); gld.add(new Button("Tombol Baris 1 Kolom 2")); gld.add(new Button("Tombol Baris 1 Kolom 3")); gld.add(new Button("Tombol Baris 2 Kolom 1")); gld.add(new Button("Tombol Baris 2 Kolom 1")); gld.setSize(200,200); gld.setVisible(true); } }


33

Gambar 1. 6 Tampilan Frame dengan Grid Layout

D. Aktivitas Pembelajaran Pembelajaran dilaksanakan menggunakan sistem self based learning atau sistem pembelajaran mandiri. Seluruh peserta diklat/workshop belajar secara aktif mengumpulkan berbagai sumber selain modul ini, misalnya melalui majalah atau melalui internet. Aktivitas pembelajaran dalam mempelajari Kegiatan Pembelajaran 1 sebagai berikut: Membuat kelas java dengan nama Latihan.java Buat Pembagian Panel pada Frame Pada langkah ini, buatlah 3 pembagian Frame (atas, tengah dan bawah). Tuliskan kode berikut Latihan cl =new Latihan(); Panel PanelAtas =new Panel(); Panel PanelTengah =new Panel(); Panel PanelBawah =new Panel();

Buat Komponen yang diisi Pada Panel Atas Isikan kode berikut, kode berikut akan mengatur panel atas dengan layout tipe flow layout 34

/* North Panel */ //Flow Layout PanelAtas.add(new Label("FORM DATA GURU"));

Buat Komponen yang diisi Pada Panel Tengah Kode berikut akan mengisi panel tengah dengan 3 jenis komponen yaitu Label, Textfield dan Combobox. Layout yang digunakan pada panel tengah yaitu layout tipe grid layout /* Center Panel */ //Grid Layout PanelTengah.setLayout(new GridLayout(4,4)); PanelTengah.add(new Label("Nama : ")); PanelTengah.add(new TextField("Isi Nama Anda")); PanelTengah.add(new Label("NIP : ")); PanelTengah.add(new TextField("Isi NIP Anda")); PanelTengah.add(new Label("Jenis Kelamin : ")); Choice chooser =new Choice(); chooser.add("Laki-Laki"); chooser.add("Perempuan"); PanelTengah.add(chooser);

Buat Komponen yang diisi Pada Panel Bawah Kode berikut akan mengisi panel bawah dengan 2 jenis komponen yaitu Button dan Check Box. Layout yang digunakan pada panel bawah ialah layout tipe Border Layout /* South Panel */ PanelBawah.setLayout(new BorderLayout()); PanelBawah.add(new Button("Submit"), BorderLayout.NORTH); PanelBawah.add(new Checkbox("Advanced Mode"), BorderLayout.WEST); PanelBawah.add(new Checkbox("Mini Mode"), BorderLayout.EAST);

Atur Tipe Layout Utama dan ukuran Frame Kode berikut akan mengatur secara total layout dari suatu Frame, tipe layout yang digunakan alah tipe Border Layout //Border Layout cl.add(PanelAtas, BorderLayout.NORTH); cl.add(PanelTengah, BorderLayout.CENTER); cl.add(PanelBawah, BorderLayout.SOUTH); cl.setSize(300,300); cl.setVisible(true);

35

Mengecek kode yang telah dibuat. Secara keseluruhan, kode yang dibuat ialah seperti berikut import java.awt.*; publicclass Latihan extends Frame{ publicstaticvoid main(String[] args){ Latihan cl =new Latihan(); Panel PanelAtas =new Panel(); Panel PanelTengah =new Panel(); Panel PanelBawah =new Panel(); /* North Panel */ //Flow Layout PanelAtas.add(new Label("FORM DATA GURU")); /* Center Panel */ //Grid Layout PanelTengah.setLayout(new GridLayout(4,4)); PanelTengah.add(new Label("Nama : ")); PanelTengah.add(new TextField("Isi Nama Anda")); PanelTengah.add(new Label("NIP : ")); PanelTengah.add(new TextField("Isi NIP Anda")); PanelTengah.add(new Label("Jenis Kelamin : ")); Choice chooser =new Choice(); chooser.add("Laki-Laki"); chooser.add("Perempuan"); PanelTengah.add(chooser); /* South Panel */ PanelBawah.setLayout(new BorderLayout()); PanelBawah.add(new Button("Submit"), BorderLayout.NORTH); PanelBawah.add(new Checkbox("Advanced Mode"), BorderLayout.WEST); PanelBawah.add(new Checkbox("Mini Mode"), BorderLayout.EAST); //Border Layout cl.add(PanelAtas, BorderLayout.NORTH); cl.add(PanelTengah, BorderLayout.CENTER); cl.add(PanelBawah, BorderLayout.SOUTH); cl.setSize(300,300); cl.setVisible(true); } }

36

Langkah 8 Melihat jalannya aplikasi GUI yang dibuat Hasil running aplikasi yang dibuat ialah

Gambar 1. 7 Tampilan Aplikasi GUI AWT yang dibuat

E. Latihan Soal Pak Alqodri adalah pegawai administrasi di SMK X di Kota Malang, setiap tahun Pak Alqodri selalu mencacatat beberapa hal administrasi di sekolahnya, salah satunya ialah mendata alumni. Setelah beliau amati, ternyata cara yang dilakukan beliau sangatlah memboroskan karena data alumni dikumpulkan pada lembaran kertas yang mudah rusak karena ukuran yang tipis. Untuk mengatasi hal itu, Pak Alqodri berinisiatif membuat suatu formulir berbasis komputer yang dapat digunakan oleh siswa dalam mengisi data alumninya ke dalam database sekolah tersebut. Kegiatan yang dilakukan Pak Alqodri bukan tidak ada alasan, tentu Pak Alqodri memiliki pandangan terkait penggunaan database dengan model ter-komputerisasi di era saat ini. Namun, masalah mulai terjadi ketika Pak Alqodri harus menginputkan data alumni satu-persatu dimana format setiap tahun dari buku alumni sekolah tersebut berbeda yang tentunya akan memakan banyak waktu untuk menginputkan data tersebut. Untuk mengatasi hal tersebut, Pak Alqodri meminta bantuan anda untuk membuat suatu form yang terdiri dari 5 bagian dalam form yaitu Nama Lengkap, Alamat, Jenis Kelamin, Agama dan nomor HP. Dimana 3 komponen (nama,alamat,nomor HP) merupakan komponen TextField, agama dan jenis kelamin merupakan pilihan dengan tipe Combo Box (untuk pilihan jenis kelamin hanya laki-laki dan perempuan, dan pilihan agama terdiri dari Islam, Kristen, Hindu, Budha dan Agama Lain). Selain itu, karena pak Alqodri sudah tua, beliau menginginkan bahwa aplikasi yang dibuat berukuran 350 pixel X 300 pixel untuk mengakomodasi kebutuhan Pak Alqodri tersebut.

37

Buat aplikasi GUI berbasis AWT yang dapat menampilkan form sesuai kebutuhan pak Alqodri!

Gambar 1. 8 Tampilan program

F. Rangkuman AWT (Abstract Window Toolkit) merupakan tool yang disedikan oleh JAVA dalam pengembangan aplikasi GUI (Graphical User Interface). Untuk menggunakan aplikasi GUI dengan tipe AWT, dapat dilakukan import library AWT dengan memberikan syntax import java.awt.*;. Untuk mempercantik tampilan GUI, pada AWT juga disediakan komponen-komponen seperti Button, List Box, Combo box, TextField dan yang lainnya, yang dapat digunakan untuk membangun aplikasi GUI yang menarik dan interaktif. Untuk mempermudah pengaturan posisi pada Frame, pada aplikasi GUI yang dibuat dapat memakai layout model seperti model flow layout, border layout dan grid layout.

G. Umpan Balik dan Tindak Lanjut Anda diharapkan memberikan umpan balik dan rencana tindak lanjut dengan mengisi tabel berikut ini: INDIKATOR PENCAPAIAN KOMPETENSI Membuat bentuk desain antar muka

38

HASIL YANG DICAPAI YA TIDAK

RENCANA TINDAK LANJUT

Membuat antar muka pengguna menggunakan frame, panel, dan komponenkomponen GUI Menempatkan dialog antar muka pengguna sesuai secara berurutan sesuai alur proses. Mencatat hasil pengujian ke dalam catatan pengujian

H. Kunci Jawaban Source Code Jawaban import java.awt.*; publicclass Tugas extends Frame{ publicstaticvoid main(String[] args){ Tugas cl =new Tugas(); Panel PanelAtas =new Panel(); Panel PanelTengah =new Panel(); Panel PanelBawah =new Panel(); /* North Panel */ //Flow Layout PanelAtas.add(new Label("FORM DATA ALUMNI")); /* Center Panel */ //Grid Layout PanelTengah.setLayout(new GridLayout(7,5)); PanelTengah.add(new Label("Nama Lengkap: ")); PanelTengah.add(new TextField("")); PanelTengah.add(new Label("Alamat : ")); PanelTengah.add(new TextField("")); PanelTengah.add(new Label("Jenis Kelamin : ")); Choice chooser =new Choice(); chooser.add("Laki-Laki"); chooser.add("Perempuan"); PanelTengah.add(chooser); PanelTengah.add(new Label("Agama : ")); Choice chooser2 =new Choice(); chooser2.add("Islam"); chooser2.add("Kristen"); chooser2.add("Hindu"); chooser2.add("Budha"); chooser2.add("Agama Lain"); PanelTengah.add(chooser2);

39

PanelTengah.add(new Label("Nomor HP: ")); PanelTengah.add(new TextField("")); /* South Panel */ PanelBawah.setLayout(new BorderLayout()); PanelBawah.add(new Button("Submit"), BorderLayout.NORTH); //Border Layout cl.add(PanelAtas, BorderLayout.NORTH); cl.add(PanelTengah, BorderLayout.CENTER); cl.add(PanelBawah, BorderLayout.SOUTH); cl.setSize(350,300); cl.setVisible(true); } }

Output Source Code

Gambar 1. 9 Tampilan Form Data Alumni

40

41

42

MEMBUAT KOMPONEN GUI BERBASIS SWING A. Tujuan Setelah mengikuti kegiatan pembelajaran 2 ini diharapkan peserta diklat dapat membuat antarmuka-pengguna menggunakan frame, panel, dan komponen-komponen GUI.

B. Indikator Pencapaian Kompetensi 1. Mendesain aplikasi GUI menggunakan Swing. 2. Membuat layout tipe flow layout, border layout, dan grid layout dalam komponen GUI menggunakan Swing. 3. Membuat tampilan yang komplek dalam mendesain aplikasi GUI menggunakan Swing.

C. Uraian Materi 1. Java Swing Swing merupakan suatu cara untuk pembuatan aplikasi yang berbasis GUI (Graphical User Interface) di Java dengan pendekatan yang lebih baru dan lebih bagus hasilnya. Sebenarnya terdapat dua cara untuk pembuatan aplikasi yang berbasis GUI di Java selain menggunakan Swing, kita juga dapat menggunakan AWT, namun karena tingkat keamanannya rendah, AWT sudah dibahas pada modul 8 dan 9. Cukup banyak paket di java untuk melakukan pemrograman GUI, tetapi sebagai pengenalan anda cukup memahami paket yang berada di javax.swing.

2. Komponen di dalam Swing Tidak seperti beberapa komponen AWT yang menggunakan native code,

keseluruhan

Swing

ditulis

menggunakan bahasa pemrograman

Java. Swing menyediakan implementasi platform-independent dimana aplikasi yang

dikembangkan dengan platform

yang

berbeda dapat

memiliki tampilan yang sama.

43

Seperti pada package AWT, package dari Swing menyediakan banyak kelas untuk membuat aplikasi GUI. Package tersebut dapat ditemukan di javax.swing. Swing

Perbedaan

ditulis

utama

menyeluruh

antara keduanya

menggunakan

Java

adalah

komponen

mengingat

yang

belakangan tidak. Kesimpulannya, program GUI ditulis menggunakan banyak kelas dari package Swing yang mempunyai tampilan look and feel yang sama meski dijalankan pada beda paltform. Lebih dari itu, Swing menyediakan komponen yang lebih menarik seperti color chooser dan option pane. Nama dari komponen GUI milik Swing hampir sama persis dengan komponen GUI milik AWT. Perbedaan jelas terdapat pada penamaan komponen. Pada dasarnya, nama komponen Swing sama dengan nama komponen AWT tetapi dengan tambahan huruf J pada prefixnya. Sebagai contoh, satu komponen dalam AWT adalah button class. Sedangkan pada

Swing,

nama komponen tersebut menjadi Jbutton class. Berikut

adalah daftar dari komponen Swing.

Tabel 2. 1 Komponen Swing Komponen Swing JComponent

JButton JCheckBox JFileChooser

JTextField

JFrame

44

Penjelasan Kelas induk untuk semua komponen Swing, tidak termasuk top-level container checkbox class dalam package AWT Tombol “push”. Korespondesi pada button class dalam package AWT Item yang dapat dipilih atau tidak oleh pengguna. Korespondensi pada AWT Mengijinkan pengguna untuk memilih sebuah file. Korespondensi pada cfilechooser class dalam package AWT Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. Turunan dan korepondensi pada frame class dalam package AWT tetapi keduanya sedikit tidak cocok dalam kaitannya dengan menambahkan komponen pada kontainer. Perlu mendapatkan content pane yang terbaru sebelum menambah sebuah komponen.

Komponen Swing JPanel

JApplet

JOptionPane JDialog

JColorChooser JFileChooser

JTextField

JFrame

JPanel

JApplet

JOptionPane JDialog

Penjelasan Turunan Jcomponent. Kontainer class sederhana tetapi bukan top-level. Korespondensi pada panel class dalam package AWT. Turunan dan korepondensi ke Applet class dalam package AWT. Juga sedikit tidak cocok dengan applet class dalam kaitannya dengan menambahkan komponen pada container Turunan Jcomponent. Disediakan untuk mempermudah menampilkan pop- up kotak dialog. Turunan dan korespondensi pada dialog class dalam package AWT. Biasanya digunakan untuk menginformasikan sesuatu kepada pengguna atau prompt pengguna untuk input. Turunan Jcomponent. Mengijinkan pengguna untuk memilih warna Mengijinkan pengguna untuk memilih sebuah file. Korespondensi pada cfilechooser class dalam package AWT Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. Turunan dan korepondensi pada frame class dalam package AWT tetapi keduanya sedikit tidak cocok dalam kaitannya dengan menambahkan komponen pada kontainer. Perlu mendapatkan content pane yang terbaru sebelum menambah sebuah komponen. Turunan Jcomponent. Kontainer class sederhana tetapi bukan top-level. Korespondensi pada panel class dalam package AWT. Turunan dan korepondensi ke Applet class dalam package AWT. Juga sedikit tidak cocok dengan applet class dalam kaitannya dengan menambahkan komponen pada container Turunan Jcomponent. Disediakan untuk mempermudah menampilkan pop- up kotak dialog. Turunan dan korespondensi pada dialog class dalam package AWT. Biasanya digunakan untuk menginformasikan sesuatu kepada pengguna atau prompt pengguna untuk input.

Untuk daftar yang lengkap dari komponen Swing, Anda dapat melihatnya di dokumentasi API.

45

Contoh 1, Membuat Frame dengan Swing: Coba perhatikan source code berikut, kode di bawah akan membuat suatu Frame yang terdapat JPanel import javax.swing.*; publicclass BuatJPanel { publicstaticvoid main(String[] args){ JFrame f =new JFrame("Tes JPanel"); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);//tutup Frame JPanel p =new JPanel();// membuat objek JPanel p.add(new JButton("Tombol 1"));// button di kaitkan ke panel p.add(new JButton("Tombol 2"));// button di kaitkan ke panel p.add(new JButton("Tombol 3"));// button di kaitkan ke panel f.add(p);// mengaitkan panel ke frame f.pack();// membuat ukuran default f.setVisible(true);// menampilkan frame } }


Gambar 2. 1 Tampilan Frame dengan Flow Layout Contoh 2, Membuat MessageBox dengan Swing: Perhatikan source code berikut, kode di bawah akan membuat suatu JOptionPane import javax.swing.*; publicclass CobaOptionPane { JOptionPane optionPane; public CobaOptionPane(){ } void launchFrame(){ optionPane =new JOptionPane(); String name = optionPane.showInputDialog("Tuliskan Nama Anda"); optionPane.showMessageDialog(null,"Nama Anda Adalah "+ name +".","Message",optionPane.PLAIN_MESSAGE); System.exit(0);} publicstaticvoid main(String[] args){

46

new CobaOptionPane().launchFrame(); } }


Gambar 2. 2 Tampilan JOptionPane

3. Layout Manager di dalam Swing a. FlowLayout FlowLayout digunakan untuk melakukan pengaturan rata kiri, rata kanan, rata tengah Contoh 3, Membuat Frame dengan FlowLayout: Perhatikan source code berikut, kode di bawah akan membuat Frame dengan isi 3 tombol dengan aligment kanan ukuran hgap = 10 px dan vgap = 40 px. import javax.swing.*; import java.awt.*; publicclass FlowLayoutSwing { publicstaticvoid main(String[] args){ JFrame f =new JFrame("Flow Layout Swing"); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton b1 =new JButton("Tombol 1"); JButton b2 =new JButton("Tombol 2"); JButton b3 =new JButton("Tombol 3"); JPanel p1 =new JPanel(); p1.setLayout(new FlowLayout()); p1.add(b1); p1.add(b2); p1.add(b3); f.add("South", p1); JButton b4 =new JButton("Tombol 4"); JButton b5 =new JButton("Tombol 5"); JButton b6 =new JButton("Tombol 6"); JPanel p2 =new JPanel(); p2.setLayout(new FlowLayout(FlowLayout.CENTER,10,20)); p2.add(b4);

47

p2.add(b5); p2.add(b6); f.add("North", p2); f.pack(); f.setVisible(true); } }


Gambar 2. 3Tampilan Frame dengan Flow Layout Swing

b.

BorderLayout Penggunaan BorderLayout untuk meletakkan komponen sesuai arah

mata angin. Karena BorderLayout berada di paket java.awt maka kita harus mengimport-nya sebelum kita menggunakannya, dan kita juga harus mengaitkannya ke method setLayout.

c.

GridLayout Sesuai dengan namanya, GridLayout menggunakan grid dengan ukuran

yang sama untuk setiap komponen. Contoh 4, Membuat Frame dengan GridLayout: Coba perhatikan source code berikut, kode dibawah akan membuat suatu Frame tipe layout Grid Layout. import javax.swing.*; import java.awt.*; publicclass GridLayoutSwing { publicstaticvoid main(String[] args){ JFrame f =new JFrame("Grid Layout Swing"); f.setDefaultLookAndFeelDecorated(true); f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); JButton b1 =new JButton("Tombol 1");

48

JButton JButton JButton JButton JButton

b2 b3 b4 b5 b6

=new =new =new =new =new

JButton("Tombol JButton("Tombol JButton("Tombol JButton("Tombol JButton("Tombol

2"); 3"); 4"); 5"); 6");

JPanel p1 =new JPanel(); p1.setLayout(new GridLayout(4,2)); p1.add(b1); p1.add(b2); p1.add(b3); p1.add(b4); p1.add(b5); p1.add(b6); f.add("North", p1); JButton JButton JButton JButton JButton JButton

b7 =new JButton("Tombol 7"); b8 =new JButton("Tombol 8"); b9 =new JButton("Tombol 9"); b10 =new JButton("Tombol 10"); b11 =new JButton("Tombol 11"); b12 =new JButton("Tombol 12");

JPanel p2 =new JPanel(); p2.setLayout(new GridLayout(2,4,10,10)); p2.add(b7); p2.add(b8); p2.add(b9); p2.add(b10); p2.add(b11); p2.add(b12); f.add("South", p2); f.pack(); f.setVisible(true); } }


Gambar 2. 4 Tampilan Frame dengan Grid Layout Swing 49

D. Aktivitas Pembelajaran Pembelajaran dilaksanakan menggunakan sistem self based learning atau sistem pembelajaran mandiri. Seluruh peserta diklat/workshop belajar secara aktif mengumpulkan berbagai sumber selain modul ini, misalnya melalui majalah atau melalui internet. Aktivitas pembelajaran dalam mempelajari Kegiatan Pembelajaran 2 sebagai berikut: 1. Buat Kelas Java dengan nama Latihan2.java 2.

Buat kontainer dan atur model layout kontainer tersebut Buat fungsi overloading method, dan juga atur layout frame ke dalam border layout. Tuliskan kode berikut public Latihan2(){ Container kontainer = getContentPane(); //layout border kontainer.setLayout(new BorderLayout());

3.

Buat Panel 1 Buat panel didalam overloading method tersebut dengan isi beberapa tombol dengan aturan layout Grid Layout //membuat panel JPanel p1 =new JPanel(); p1.setLayout(new GridLayout(4,3)); //menampilkan tombol 1-12 for(int x=1;x<=9;x++){ p1.add(new JButton(""+x)); } p1.add(new JButton(""+10)); p1.add(new JButton(""+11)); p1.add(new JButton(""+12));

4. Masukkan Panel 2 Buat panel 2 yang berada pada kanan frame dan masukkan panel pertama tadi pada Panel 2 //membuat panel dan memasukkan p1 ke panel kedua JPanel p2=new JPanel(new BorderLayout()); p2.add(new JLabel("TAMPILAN LAYOUT SWING"), BorderLayout.NORTH); p2.add(p1,BorderLayout.CENTER);

50

5. Memasukkan panel ke frame Tulis kode berikut untuk memasukkan panel ke frame yang dibuat /* South Panel */ PanelBawah.setLayout(new BorderLayout()); PanelBawah.add(new Button("Submit"), BorderLayout.NORTH); PanelBawah.add(new Checkbox("Advanced Mode"), BorderLayout.WEST); PanelBawah.add(new Checkbox("Mini Mode"), BorderLayout.EAST);

6. Atur Tipe Layout Utama dan ukuran Frame Kode berikut akan mengatur secara total layout dari suatu Frame, tipe layout yang digunakan alah tipe Border Layout //memasukkan panel ke frame kontainer.add(p2,BorderLayout.EAST); kontainer.add(new Kiri"),BorderLayout.CENTER);

JButton("Tombol

7. Buat fungsi utama Kode berikut akan membuat frame dengan nama Latihan 2 dengan ukuran frame 400 pixel X 300 pixel publicstaticvoid main(String[] args){ Latihan2 tampilan =new Latihan2(); tampilan.setTitle("Latihan 2"); tampilan.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); tampilan.setSize(400,300); tampilan.setVisible(true);

8. Kompilasi program GUI yang dibuat Secara keseluruhan, kode yang dibuat ialah seperti berikut import java.awt.*; import javax.swing.*; publicclass Latihan2 extends JFrame{ public Latihan2(){ Container kontainer = getContentPane(); //layout border kontainer.setLayout(new BorderLayout()); //membuat panel JPanel p1 =new JPanel(); p1.setLayout(new GridLayout(4,3)); //menampilkan tombol 1-12

51

for(int x=1;x<=9;x++){ p1.add(new JButton(""+x)); } p1.add(new JButton(""+10)); p1.add(new JButton(""+11)); p1.add(new JButton(""+12)); //membuat panel dan memasukkan p1 ke panel kedua JPanel p2=new JPanel(new BorderLayout()); p2.add(new JLabel("TAMPILAN LAYOUT SWING"), BorderLayout.NORTH); p2.add(p1,BorderLayout.CENTER); //memasukkan panel ke frame kontainer.add(p2,BorderLayout.EAST); kontainer.add(new JButton("Tombol Kiri"),BorderLayout.CENTER); } publicstaticvoid main(String[] args){ Latihan2 tampilan =new Latihan2(); tampilan.setTitle("Latihan 2"); tampilan.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); tampilan.setSize(400,300); tampilan.setVisible(true); } }

9. Melihat jalannya aplikasi GUI yang dibuat Hasil running aplikasi yang dibuat ialah

Gambar 2. 5 Tampilan Aplikasi Swing GUI yang dibuat

52

E. Latihan Soal Buat suatu form yang dengan nama “Form Pendaftaran Siswa Baru”. Pada form tersebut, terdapat 7 isian yang harus diisi oleh pengguna. Yaitu Nama, Alamat, Jenis Kelamin, Asal Sekolah, Tingkatan Prestasi dan Nilai UN. Gunakan Flow Layout dengan ukuran 1200 x 250 pixel untuk membuat suatu frame utama. Gunakan 3 panel untuk menginputkan komponen yang terdapat pada frame tersebut. Panel 1 untuk flow layout, panel 2 untuk grid layout pertama dan panel 3 untuk grid layout kedua. Pada bagian Asal Sekolah, gunakan grid layout dengan ukuran 1 baris 2 kolom untuk meletakkan komponen Combo Box. Sedangkan pada bagian Tingkatan Prestasi, gunakan grid layout 1 baris 5 kolom untuk meletakkan komponen Check Box. Tambahkan 2 button yang diletakkan diakhir form dengan nama Simpan dan Bersihkan Data.

1. Tampilan Program

Gambar 2. 6 Hasil Tampilan Program

2. Format Layout Program

Gambar 2. 7 Spesifikasi Layout Tampilan Program

53

F. Rangkuman Swing GUI merupakan tool yang disediakan oleh JAVA dalam membangun aplikasi GUI (Graphical User Intercae). Untuk menggunakan Swing GUI tersebut, pengguna dapat mengimpor library Swing dengan menuliskan syntax import javax.swing.*; diawal aplikasi yang dibuat. Swing merupakan pembaharuan

dari AWT, sehingga library AWT dapat digabungkan dengan aplikasi GUI Swing. Komponen-komponen pada Swing GUI, diberi tambahan J pada prefix komponen tersebut. Selain itu, untuk mempermudah membuat pengaturan tampilan pada GUI Swing dapat memakai layout seperti pada AWT.

G. Umpan Balik dan Tindak Lanjut Anda diharapkan memberikan umpan balik dan rencana tindak lanjut dengan mengisi tabel berikut ini: INDIKATOR PENCAPAIAN KOMPETENSI



Mendesain aplikasi GUI menggunakan Swing. Membuat layout tipe flow layout, border layout, dan grid layout dalam komponen GUI menggunakan Swing. Membuat tampilan yang komplek dalam mendesain aplikasi GUI menggunakan Swing.

H. Kunci Jawaban Source Code Program import javax.swing.*; import java.awt.*; class Tugas extends JFrame{ private Container konten =new Container(); private JPanel panel1 =new JPanel();

54

JLabel LBLnama =new JLabel(); private JTextField TBnama =new JTextField(10); private JLabel LBLAlamat =new JLabel(); private JTextField TBalamat =new JTextField(25); private JLabel LBprestasi =new JLabel(); private JPanel panel2 =new JPanel(); private JCheckBox CHsekolah =new JCheckBox("Sekolah"); private JCheckBox CHkota =new JCheckBox("Kabupaten/Kota"); private JCheckBox CHprov =new JCheckBox("Provinsi"); private JCheckBox CHnas =new JCheckBox("Nasional"); private JCheckBox CHinter =new JCheckBox("Internasional"); private JPanel panel3 =new JPanel(); private JLabel LBLasal_sek =new JLabel(); //Digunakan untuk mengelompokkan radio button private ButtonGroup RBsekolah =new ButtonGroup(); private JRadioButton RBmts =new JRadioButton("Mts/MTsN"); private JRadioButton RBsmp =new JRadioButton("SMP/SMPN"); private JLabel JK =new JLabel(); String ARRjk[]={"Laki-Laki","Perempuan"}; private JComboBox CBjenis_kelamin =new JComboBox(ARRjk); private JLabel LBLnun =new JLabel(); private JTextField TBnun =new JTextField(5); private JButton BTNsimpan =new JButton("Simpan"); private JButton BTNselesai =new JButton("Bersihkan Data");

Tugas(){ super("Form Pendaftaran Siswa Baru"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); this.setLocation(100,100); this.setSize(1200,250); konten=getContentPane(); konten.setLayout(new FlowLayout(FlowLayout.CENTER)); LBLnama.setText("Nama"); LBLAlamat.setText("Alamat"); LBLasal_sek.setText("Asal Sekolah"); LBprestasi.setText("Tingkatan Prestasi"); JK.setText("Jenis Kelamin"); LBLnun.setText("Nilai UN"); panel1.setLayout(new GridLayout(7,2)); panel1.add(LBLnama); panel1.add(TBnama); panel1.add(LBLAlamat); panel1.add(TBalamat); panel1.add(JK); panel1.add(CBjenis_kelamin); panel1.add(LBLasal_sek); RBsekolah.add(RBmts); RBsekolah.add(RBsmp); panel3.setLayout(new GridLayout(1,2)); panel3.add(RBmts); panel3.add(RBsmp); panel1.add(LBLasal_sek); panel1.add(panel3);

55

panel1.add(LBprestasi); panel2.setLayout(new GridLayout(1,5)); panel2.add(CHsekolah); panel2.add(CHkota); panel2.add(CHprov); panel2.add(CHnas); panel2.add(CHinter); panel1.add(panel2); panel1.add(LBLnun); panel1.add(TBnun); panel1.add(BTNselesai); panel1.add(BTNsimpan); konten.add(panel1); show(); } publicstaticvoid main(String args[]){ new Tugas(); } }

Tampilan Program

Gambar 2. 8 Tampilan Program Form Pendaftaran Siswa Baru

56

57

58

MEMBUAT KOMPONEN GUI BERBASIS DRAG AND DROP DENGAN NETBEANS A. Tujuan Setelah mengikuti kegiatan Pembelajaran 3 ini diharapkan peserta diklat dapat

membuat

antarmuka-pengguna

menggunakan

frame,

panel,

dan

komponen-komponen GUI

B. Indikator Pencapaian Kompetensi 1. Mendesain aplikasi GUI berbasis Drag and Drop. 2. Membuat komponen GUI berbasis Drag and Drop. 3. Membuat tampilan yang komplek dalam mendesain aplikasi GUI berbasis Drag and Drop.

C. Uraian Materi 1. Definisi Netbeans NetBeans adalah suatu tool untuk membuat program dengan menggunakan bahasa pemrograman Java berbasis grafis maupun teks. Cara membuat program dengan merancang tampilan menggunakan komponent visual dan proses diletakan pada event driven. Netbeans menyediakan sekumpulan perangkat lunak

modular yang disebut modul

yangdipakai untuk membangun suatu aplikasi. Sebuah modul adalah merupakan arsip Java (Java Archive) yang memuat kelas-kelas Java yang berinteraksi dengan NetBeans OpenAPI . Kemudian rancangan tampilan yang dibuat menggunakan NetBens programnya secara otomatis akan digenerate menjadi kode. Di dalam Netbeans, banyak komponen GUI yang disertakan seperti AWT (Abstract Window Toolkit) dan Swing (telah dipelajari di Kegiatan Pembelajaran 1 dan 2). Beberapa komponen Swing yang terdapat pada Netbeans ialah: a. JButton b. JPanel 59

c. JLabel d. Combo Box e. JCheckBox f. Jtext Field g. Jtable h. Dan lain sebagainya

2. Bekerja dengan Netbeans Untuk mulai membuat aplikasi GUI berbasiskan Drag and Drop dalam aplikasi Netbeans dapat mengunduh aplikasi tersebut pada web resmi aplikasi tersebut di alamat https://netbeans.org/downloads/. Lakukan instalasi aplikasi tersebut seperti instalasi pada bagian Saran Penggunaan Modul di awal Modul. Untuk mulai membuat aplikasi GUI dapat menggunakan langkah-langkah berikut: a. Buka aplikasi netbeans dengan memilih StartNetbeans

Gambar 3. 1 Membuka Netbeans lewat Start Menu b. Buat project baru pada aplikasi yang dibuat, pilih File  New Project

60

Gambar 3. 2 Membuat project baru dari Netbeans

c. Pilih kategori aplikasi yang dibuat dengan kategori Java dan Projectnya ialah Java Application

Gambar 3. 3 Membuat aplikasi Java Application

d. Tuliskan nama project yang dibuat dan tentukan lokasi project yang disimpan. Jangan centang pada bagian create main class, jika sudah pilih Finish

61

Gambar 3. 4 Menentukan lokasi penyimpanan project Java

e. Buat Frame baru dengan melakukan Klik Kanan pada Project yang dibuat  Pilih Jframe Form

Gambar 3. 5Membuat Frame baru pada project Netbeans

f.

Tuliskan nama form yang dibuat, kemudian pilih Finish

Gambar 3. 6 Tulis nama Form yang dibuat

62

g. Frame telah selesai dibuat dan siap diisi komponen

Gambar 3. 7 Tampilan Form yang di buat

D. Aktivitas Pembelajaran Pembelajaran dilaksanakan menggunakan sistem self based learning atau sistem pembelajaran mandiri. Seluruh peserta diklat/workshop belajar secara aktif mengumpulkan berbagai sumber selain modul ini, misalnya melalui majalah atau melalui internet. Aktivitas pembelajaran dalam mempelajari Kegiatan Pembelajaran 3 sebagai berikut: 1. Buat Project Java dengan nama Latihan3.java. Pilih File  New Project

Gambar 3.8 Menu File untuk membuat project Java

10. Pilih Project Java Application. Pada bagian berikut, pilih kategori Java dan jenis Project yang dibuat ialah Java Application. Jika sudah pilih Next

63

Gambar 3. 9 Membuat project Java 11. Pilih lokasi penyimpanan. Tulis nama project yang dibuat, pada latihan ini nama project yang dibuat ialah Latihan3. Setelah itu tentukan lokasi penyimpanan project dengan memilih Browse. Pada bagian create main class, jangan centang bagian tersebut, hal ini dikarenakan saat pembuatan project aplikasi kelas utama yang dibuat berupa Form yang nanti akan dibuat. Jika sudah pilih Finish

Gambar 3. 10 Menuliskan nama project dan lokasi penyimpanannya

12. Membuat Form baru. Setelah package project selesai dibuat, buat Form untuk menempatkan komponen GUI. Klik Kanan project yang dibuat  Pilih New Jframe Form

64

Gambar 3. 11 Menambahkan Form pada project yang dibuat 13. Menuliskan nama Form. Tulis nama Form yang dibuat, misal pada latihan ini dengan nama Form1. Jika sudah pilih Finish

Gambar 3. 12 Menuliskan nama Form 14. Atur ukuran Form/Frame yang dibuat. Untuk mengatur ukuran form yang dibuat, klik pada form yang sudah dibuat sebelumnya, kemudian pada bagian properties window pilih bagian preferredSize. Klik pada tanda “..” dan isikan bagian lebar dan tinggi form yang dibuat, misal pada modul menggunakan 500 pixel X 450 pixel

65

Gambar 3. 13 Memilih bagian preferredSize pada properties

Gambar 3. 14 Mengatur lebar dan tinggi frame yang dibuat 15. Tambahkan komponen panel. Untuk menambahkan komponen panel, pilih pada bagian pallete window bagian swing kemudian pilih panel untuk di-drag ke frame yang dibuat

Gambar 3. 15 Drag komponen Panel ke form 66

16. Tambahkan label. Untuk menambahkan komponen label, metode yang digunakan sama halnya ketika menambahkan panel, yaitu dengan melakukan drag and drop komponen label ke form yang sudah dibuat.

Gambar 3. 16 Hasil komponen label

Untuk mengubah tulisan jLabel tersebut, masuk ke menu properties pada properties window, kemudian edit tulisan pada bagian text. Misal seperti gambar berikut

Gambar 3. 17Mengganti tulisan pada jLabel

Untuk mengatur ukuran maupun jenis font dari jLabel, dapat menggunakan bagian pada font. Misalkan seperti gambar berikut

Gambar 3. 18 Mengganti tipe dan ukuran huruf pada jLabel

Untuk mempermudah menghafalkan id komponen atau pembagian dari komponen yang terdapat pada aplikasi, kita dapat mengatur nama variabel dari komponen tersebut. Untuk menggantinya, masuk ke menu codepada properties window pada bagian Variable Name, ubah sesuai kebutuhan aplikasi yang digunakan. Misal jlabel1 diganti menjadi LBLjudul 67

Gambar 3. 19 Sebelum variable name diganti

Gambar 3. 20 Sesudah diganti 17. Tambahkan Label untuk form isian. Tambahkan komponen label pada form yang dibuat tersebut, buat layout seperti gambar di bawah ini (Jenis font Tahoma ukuran 18)

Gambar 3. 21 Layout awal aplikasi

18. Tambahkan TextField pada setiap label. Tambahkan komponen Text Field pada form yang dibuat tersebut, buat layout seperti gambar dibawah ini

Gambar 3. 22 Layout Text Field 68

19. Tambahkan Komponen Button. Tambahkan komponen button (pada pallete window komponennya ialah Button) pada form yang dibuat tersebut, buat layout seperti gambar di bawah ini

Gambar 3. 23 Layout aplikasi setelah ditambahkan button 20. Tambahkan komponen tabel. Tambahkan komponen tabel pada form yang dibuat tersebut, buat layout seperti gambar di bawah ini

Gambar 3. 24 Layout aplikasi setelah ditambahkan tabel

Setelah tabel ditambahkan, atur jumlah kolom dari tabel yang digunakan misalnya 2 kolom. Lakukan klik kanan pada tabel yang ditambahkan  kemudian pilih Table contents  Masuk pada bagian columns

69

Gambar 3. 25 klik kanan tabel yang ditambahkan

Ganti jumlah count dari kolom menjadi 3 (hanya contoh) dengan nama kolomnya yaitu NIS, Nama dan Nilai kemudian pilih Close. Tampilan tabel yang diatur ialah seperti berikut

Gambar 3. 26 Konten tabel yang diedit

21. Kompilasi program yang dibuat Setelah layout selesai dibuat, lakukan kompilasi pada aplikasi yang dibuat. Gunakan shortcut key “F6” atau memakai tombol run pada menubar

Gambar 3. 27 Layout awal aplikasi

Jika muncul pemberitahuan pemilihan kelas utama dari aplikasi, pilih form yang digunakan tadi

70

Gambar 3. 28 Pemilihan kelas utama aplikasi yang dibuat 22. Melihat hasil running aplikasi yang dibuat Lihat jalannya aplikasi yang dibuat

Gambar 3. 29 Aplikasi GUI dengan drag and drop yang dibuat

E. Latihan Soal Pak Alqodri guru yang mengajar pelajaran Olah Raga di sekolah X. Pak Alqodri sangat senang mengajar pelajaran yang di ampu olehnya tersebut. Suatu hari, Pak Alqodri diminta tolong oleh anaknya yang masih berumur 15 tahun (kelas 2 SMP) untuk membantu mengerjakan Pekerjaan Rumah pelajaran matematika yang diberikan oleh gurunya disekolah. Pak Alqodri yang memang suka berolah raga ternyata kurang bisa dalam menghitung, apalagi tugas yang diberikan oleh guru Matematika anaknya merupakan perhitungan matematika trigonometri (hanya cosinus, sinus dan tangen) yang notabennya Pak Alqodri memang kurang mampu dalam perhitungan trigonometri tersebut. 71

Untuk membantu mengajari anaknya tersebut, tentu Pak Alqodri memerlukan suatu alat bantu berupa kalkulator yang tidak hanya mampu menghitung operasi biasa (penjumlahan, pengurangan, perkalian, pembagian), melainkan operasi perhitungan trigonometri (cosinus, sinus dan tangen). Kalkulator yang dibuat harus terdiri dari 2 komponen pokok, yaitu terdapat 19 Button (10 Button untuk angka 0 sampai 9 dan 10 Button untuk operasi) dan TextField (untuk menampilkan hasil operasi perhitungan). Selain itu, karena Pak Alqodri sudah tua maka kalkulator yang dibuat harus berukuran sedikit besar dari biasanya (lebar 450 pixel dan tinggi 300 pixel) dan tampilan model kalkulator harus sesuai jenis komponennya (kalkulator dibagi menjadi 3 panel yang terdiri dari 1 panel untuk text field, 1 panel untuk angka dan 1 panel operasi. Buatlah sebuah Layout kalkulator yang dapat membantu Pak Alqodri untuk membantu mengerjakan tugas matematika anaknya tersebut! Catatan : Layout kalkulator yang dibuat hanyalah tampilan saja tanpa kode

Output Program

Gambar 3. 30 Tampilan Kalkulator yang di buat

72

Properties Komponen Program Tombol 1 2 3 4 5 6 7 8 9 0 + X / Sin Cos

Nama Variabel BTN1 BTN2 BTN3 BTN4 BTN5 BTN6 BTN7 BTN8 BTN9 BTN0 BTNplus BTNminus BTNkali BTNbagi BTNsinus BTNcos

F. Rangkuman Salah satu cara dalam membangun aplikasi GUI selain memakai kode native (kode asli JAVA seperti AWT) dan juga Swing, terdapat pula cara membangun aplikasi GUI dengan cara Drag and Drop. Cara ini lebih mudah digunakan dalam membangun aplikasi dekstop GUI dari pada 2 cara sebelumnya (AWT dan Swing), karena dengan cara ini pengguna hanya perlu melakukan Drag kemudian Drop komponen GUI yang dipilih untuk diletakkan pada Form yang telah tersedia, selanjutnya secara otomatis oleh aplikasi di generate kode dari tampilan GUI tersebut. Salah satu aplikasi yang dapat digunakan untuk membangun aplikasi desktop GUI tersebut adalah Netbeans. Aplikasi tersebut akan melakukan generate code GUI dari kegiatan Drag and Drop pengguna dalam membuat aplikasi desktop GUI.

G. Umpan Balik dan Tindak Lanjut Anda diharapkan memberikan umpan balik dan rencana tindak lanjut dengan mengisi tabel berikut ini:

73

INDIKATOR PENCAPAIAN KOMPETENSI



Mendesain aplikasi GUI berbasis Drag and Drop

Membuat komponen GUI berbasis Drag and Drop. Membuat tampilan yang komplek dalam mendesain aplikasi GUI berbasis Drag and Drop.

H. Kunci Jawaban Source Code Program /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ /** * * @author Anak Wadung */ publicclass Kalkulator extends javax.swing.JFrame { /** * Creates new form Kalkulator */ public Kalkulator(){ initComponents(); } /** * This method is called from within the constructor to initialize the form. * WARNING: Do NOT modify this code. The content of this method is always * regenerated by the Form Editor. */

74

@SuppressWarnings("unchecked") // <editor-fold defaultstate="collapsed" desc="Generated Code"> privatevoid initComponents(){ jPanel1 =new javax.swing.JPanel(); TBisi =new javax.swing.JTextField(); jPanel2 =new javax.swing.JPanel(); BTN0 =new javax.swing.JButton(); BTN1 =new javax.swing.JButton(); BTN2 =new javax.swing.JButton(); BTN3 =new javax.swing.JButton(); BTN4 =new javax.swing.JButton(); BTN5 =new javax.swing.JButton(); BTN6 =new javax.swing.JButton(); BTN7 =new javax.swing.JButton(); BTN8 =new javax.swing.JButton(); BTN9 =new javax.swing.JButton(); BTNClear =new javax.swing.JButton(); jPanel3 =new javax.swing.JPanel(); BTNplus =new javax.swing.JButton(); BTNminus =new javax.swing.JButton(); BTNkali =new javax.swing.JButton(); BTNbagi =new javax.swing.JButton(); BTNsin =new javax.swing.JButton(); BTNcos =new javax.swing.JButton(); BTNtangen =new javax.swing.JButton(); BTNhasil =new javax.swing.JButton();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLO SE); setTitle("Kalkulator"); setPreferredSize(new java.awt.Dimension(400,300)); TBisi.setFont(new java.awt.Font("Tahoma",0,14));// NOI18N javax.swing.GroupLayout jPanel1Layout =new javax.swing.GroupLayout(jPanel1); jPanel1.setLayout(jPanel1Layout); jPanel1Layout.setHorizontalGroup( jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignm ent.LEADING) .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, jPanel1Layout.createSequentialGroup() .addContainerGap() .addComponent(TBisi) .addContainerGap()) ); jPanel1Layout.setVerticalGroup( jPanel1Layout.createParallelGroup(javax.swing.GroupLayout.Alignm ent.LEADING)

75

.addGroup(javax.swing.GroupLayout.Alignment.TRAILING, jPanel1Layout.createSequentialGroup() .addContainerGap(20, Short.MAX_VALUE) .addComponent(TBisi, javax.swing.GroupLayout.PREFERRED_SIZE,36, javax.swing.GroupLayout.PREFERRED_SIZE) .addContainerGap()) ); BTN0.setText("0"); BTN1.setText("1"); BTN2.setText("2"); BTN3.setText("3"); BTN4.setText("4"); BTN5.setText("5"); BTN6.setText("6"); BTN7.setText("7"); BTN8.setText("8"); BTN9.setText("9"); BTNClear.setText("Clear"); javax.swing.GroupLayout jPanel2Layout =new javax.swing.GroupLayout(jPanel2); jPanel2.setLayout(jPanel2Layout); jPanel2Layout.setHorizontalGroup( jPanel2Layout.createParallelGroup(javax.swing.GroupLayout.Alignm ent.LEADING) .addGroup(jPanel2Layout.createSequentialGroup() .addContainerGap() .addGroup(jPanel2Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING,false) .addGroup(jPanel2Layout.createSequentialGroup() .addComponent(BTN0) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTNClear, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)) .addGroup(jPanel2Layout.createSequentialGroup() .addComponent(BTN1) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTN2) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED)

76

.addComponent(BTN3)) .addGroup(jPanel2Layout.createSequentialGroup() .addComponent(BTN4) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTN5) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTN6)) .addGroup(jPanel2Layout.createSequentialGroup() .addComponent(BTN7) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTN8) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTN9))) .addContainerGap(14, Short.MAX_VALUE)) ); jPanel2Layout.setVerticalGroup( jPanel2Layout.createParallelGroup(javax.swing.GroupLayout.Alignm ent.LEADING) .addGroup(jPanel2Layout.createSequentialGroup() .addContainerGap(javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(jPanel2Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.BASELINE) .addComponent(BTN7) .addComponent(BTN8) .addComponent(BTN9)) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addGroup(jPanel2Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.BASELINE) .addComponent(BTN4) .addComponent(BTN5) .addComponent(BTN6)) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addGroup(jPanel2Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.BASELINE) .addComponent(BTN1) .addComponent(BTN2) .addComponent(BTN3)) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addGroup(jPanel2Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING) .addComponent(BTN0) .addComponent(BTNClear))) ); BTNplus.setText("+");

77

BTNminus.setText("-"); BTNkali.setText("X"); BTNbagi.setText("/"); BTNsin.setText("Sin"); BTNcos.setText("Cos"); BTNtangen.setText("Tg"); BTNtangen.setToolTipText(""); BTNhasil.setText("Hasil"); BTNhasil.setToolTipText(""); javax.swing.GroupLayout jPanel3Layout =new javax.swing.GroupLayout(jPanel3); jPanel3.setLayout(jPanel3Layout); jPanel3Layout.setHorizontalGroup( jPanel3Layout.createParallelGroup(javax.swing.GroupLayout.Alignm ent.LEADING) .addGroup(jPanel3Layout.createSequentialGroup() .addContainerGap() .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING,false) .addComponent(BTNbagi, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING,false) .addComponent(BTNplus, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addComponent(BTNminus, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addComponent(BTNkali, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))) .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING) .addGroup(jPanel3Layout.createSequentialGroup() .addGap(18,18,18) .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING,false) .addComponent(BTNsin, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addComponent(BTNcos, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE))) .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, jPanel3Layout.createSequentialGroup() .addGap(16,16,16) .addComponent(BTNtangen, javax.swing.GroupLayout.PREFERRED_SIZE,53, javax.swing.GroupLayout.PREFERRED_SIZE)))

78

.addGap(18,18,18) .addComponent(BTNhasil, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGap(18,18,18)) ); jPanel3Layout.setVerticalGroup( jPanel3Layout.createParallelGroup(javax.swing.GroupLayout.Alignm ent.LEADING) .addGroup(jPanel3Layout.createSequentialGroup() .addContainerGap() .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING,false) .addComponent(BTNhasil, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(javax.swing.GroupLayout.Alignment.TRAILING, jPanel3Layout.createSequentialGroup() .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.LEADING) .addGroup(jPanel3Layout.createSequentialGroup() .addComponent(BTNsin, javax.swing.GroupLayout.PREFERRED_SIZE,37, javax.swing.GroupLayout.PREFERRED_SIZE) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELA TED) .addComponent(BTNcos, javax.swing.GroupLayout.PREFERRED_SIZE,37, javax.swing.GroupLayout.PREFERRED_SIZE)) .addGroup(jPanel3Layout.createSequentialGroup() .addComponent(BTNplus) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELA TED) .addComponent(BTNminus) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(BTNkali))) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELA TED, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addGroup(jPanel3Layout.createParallelGroup(javax.swing.GroupLay out.Alignment.BASELINE) .addComponent(BTNbagi) .addComponent(BTNtangen)) .addGap(7,7,7))) .addContainerGap(javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)) ); javax.swing.GroupLayout layout =new javax.swing.GroupLayout(getContentPane()); getContentPane().setLayout(layout); layout.setHorizontalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEA DING) .addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE)

79

.addGroup(layout.createSequentialGroup() .addContainerGap() .addComponent(jPanel2, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addComponent(jPanel3, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addContainerGap()) ); layout.setVerticalGroup( layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEA DING) .addGroup(layout.createSequentialGroup() .addComponent(jPanel1, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, Short.MAX_VALUE) .addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.UNRE LATED) .addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Ali gnment.LEADING) .addComponent(jPanel3, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE) .addComponent(jPanel2, javax.swing.GroupLayout.Alignment.TRAILING, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE)) .addContainerGap()) ); pack(); }// /** * @param args the command line arguments */ publicstaticvoid main(String args[]){ /* Set the Nimbus look and feel */ //<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) "> /* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel. * For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/p laf.html */ try{ for(javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()){

80

if("Nimbus".equals(info.getName())){ javax.swing.UIManager.setLookAndFeel(info.getClassName()); break; } } }catch(ClassNotFoundException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).l og(java.util.logging.Level.SEVERE,null, ex); }catch(InstantiationException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).l og(java.util.logging.Level.SEVERE,null, ex); }catch(IllegalAccessException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).l og(java.util.logging.Level.SEVERE,null, ex); }catch(javax.swing.UnsupportedLookAndFeelException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).l og(java.util.logging.Level.SEVERE,null, ex); } // /* Create and display the form */ java.awt.EventQueue.invokeLater(new Runnable(){ publicvoid run(){ new Kalkulator().setVisible(true); } }); } // Variables declaration - do not modify private javax.swing.JButton BTN0; private javax.swing.JButton BTN1; private javax.swing.JButton BTN2; private javax.swing.JButton BTN3; private javax.swing.JButton BTN4; private javax.swing.JButton BTN5; private javax.swing.JButton BTN6; private javax.swing.JButton BTN7; private javax.swing.JButton BTN8; private javax.swing.JButton BTN9; private javax.swing.JButton BTNClear; private javax.swing.JButton BTNbagi; private javax.swing.JButton BTNcos; private javax.swing.JButton BTNhasil; private javax.swing.JButton BTNkali; private javax.swing.JButton BTNminus; private javax.swing.JButton BTNplus; private javax.swing.JButton BTNsin; private javax.swing.JButton BTNtangen; private javax.swing.JTextField TBisi;

81

private javax.swing.JPanel jPanel1; private javax.swing.JPanel jPanel2; private javax.swing.JPanel jPanel3; // End of variables declaration }

Tampilan Program

Gambar 3. 31 Tampilan Running Source Code

82

83

84

EVENT HANDLING KOMPONEN GUI A. Tujuan Setelah mengikuti Kegiatan Pembelajaran 4 ini diharapkan peserta diklat dapat membuat antarmuka-pengguna menggunakan frame, panel, dan komponen-komponen GUI.

B. Indikator Pencapaian Kompetensi 1. Memberikan action listener pada komponen GUI yang telah dibuat. 2. Memberikan key listener pada komponen GUI yang telah dibuat. 3. Memberikan mouse listener pada komponen GUI yang telah dibuat.

C. Uraian Materi 1. Pengertian Event Handling Event merupakah kejadian yang mucul ketika seorang user berinteraksi dengan suatu aplikasi sedangkan Handling merupakan proses penanganan terhadap event yang terjadi. Event handling merupakan suatu proses penanganan interaksi yang diberikan pada aplikasi, dimana penanganan tersebut berupa

pemberian respon

terhadap input yang ada. Pada bahasa JAVA, mekanisme event handlingtentang bagaimana program merespon input user dikenal dengan istilah Delegation of Event Model. Pada Delegation of Event Model, terdapat 3 bagian utama yaitu: 1) Event Source The event source mengacu pada komponen GUI yang mengenerate event. Sebagai contoh, jika user menekan tombol, event source dalam hal ini adalah tombol. Berikut ini merupakan tabel event source pada JAVA

85

Tabel 4. 1 Event Source pada JAVA Event Source Button Checkbox

Keterangan Membangkitkan ActionEvent pada saat button diklik Membangkitkan ItemEvent pada saat di-check atau un-check

Choice List

Membangkitkan ItemEvent pada saat pilihan diubah Membangkitkan ActionEvent pada saat sebuah item di-doubleclick dan membangkitkan ItemEvent pada saat item dipilih/di-check maupun di-uncheck

Item Menu

Membangkitkan ActionEvent pada saat item menu diklik dan membangkitkan ItemEvent pada saat item menu di-check maupun di-uncheck

Scrollbar

Membangkitkan AdjustmentEvent pada saat scrollbar diubah

Text

Membangkitkan

TextEvent

pada

saat

user

memasukkan karakter pada komponen textarea atau textfield Window

Membangkitkan WindowEvent pada saat sebuah window atau frame diaktivasi, ditutup, dinonaktifkan, di-minimize, di-maximize, dibuka, dan dikeluarkan

2) Event Listener/Handler The event listener menerima berita dari event-event dan prosesproses interaksi user. Ketika tombol ditekan, listener akan mengendalikan dengan menampilkan sebuah informasi yang berguna untuk user.

3) Event Object Ketika sebuah event terjadi (misal, ketika user berinteraksi dengan komponen GUI), sebuah objek event diciptakan. Objek berisi semua informasi yang perlu tentang event yang telah terjadi. Informasi meliputi tipe dari event yang telah terjadi, seperti ketika mouse telah di-klik. Ada

86

beberapa class event

untuk kategori

yang berbeda dari

user action.

Sebuah event object mempunyai tipe data tentang salah satu dari class ini.

Gambar berikut merupakan gambar alur Delegation of Event Model

Gambar 4. 1 Delegation of Event Model

Pada awalnya, sebuah listener seharusnya diregistrasikan dengan sebuah source sehingga dapat menerima informasi tentang event-event yang terjadi pada source tersebut. Hanya listeners yang sudah teregistrasi yang dapat menerima pemberitahuan event-event. Ketika telah teregistrasi, sebuah listener hanya tinggal menunggu sampai event terjadi. Ketika sesuatu terjadi dengan event source, sebuah event object akan menguraikan event yang diciptakan. Event kemudian ditembak oleh source pada listeners yang teregistrasi. Saat (pemberitahuan)

dari

listener source,

menerima dia

sebuah event

object

akan bekerja. Menerjemahkan

pemberitahuan dan memproses event yang terjadi.

2. Class Event Sebuah event object mempunyai sebuah class event sebagai tipe data acuannya. Akar dari hirarki class event adalah class EventObject, yang dapat

ditemukan pada paket java.util.

EventObject adalah

class AWTEvent.

Immediate

subclass

dari

class

ClassAWTEvent didefinisikan pada 87

paket java.awt. Itu merupakan akar dari semua AWTbasedevents. Tabel berikut ini menampilkan beberapa dari class-class AWT event Tabel 4. 2 Class-class AWT event Event Class

Keterangan

Action Event

Dibangkitkan pada saat objek button di-klik, item list di-doubleclick, maupun item menu dipilih

Adjustment Event Dibangkitkan pada saat objek scrollbar diubah Component Event

Dibangkitkan disembunyikan,

pada

saat

dipindahkan,

sebuah

komponen

diubah

ukurannya,

sebuah

komponen

maupun diset mjd visible Container Event

Dibangkitkan

pada

saat

ditambahkan/dipiindahkan ke/dari sebuah container Focus Event

Dibangkitkan

pada

saat

sebuah

komponen

memperoleh atau kehilangan fokus keyboard Input Event

Kelas induk yg merupakan kelas abstrak dr semua kelas yg termsk ke dalam event input

Item Event

Dibangkitkan pada saat sebuah item dlm list atau checkbox diklik; juga terjadi saat item-nya dibuat, dan pada saat item menu di-check maupun un-check

Key Event

Dibangkitkan pada saat input dilakukan melalui keyboard

Mouse Event

Dibangkitkan pada saat mouse di-drag, dipindahkan, diklik, ditekan, maupun dilepas; juga terjadi pada saat

mouse

masuk

atau

keluar

dari

sebuah

komponen Text Event

Dibangkitkan pada saat teks yg berada dalam komponen textarea atau textfield diubah

Window Event

Dibangkitkan pada saat window atau form diaktivasi, ditutup,

di-minimize,

dikeluarkan

88

di-maximize,

dibuka,

atau

3. Event Listeners Event

listeners

adalah

class

yang

mengimplementasikan

interfacesListener. Tabel di bawah menunjukkan beberapa listener interfaces yang biasanya digunakan. Tabel 4. 3 Event Listener pada JAVA Event Listener Action Listener

Key Listener

Mouse Listener

Mouse Motion Listener Interface

Focus Listener

Window Listener

Deskripsi Bereaksi atas perubahan mouse atau atau keyboard. Method pada event listener ini adalah actionPerformed(ActionEvent). Untuk memberikan reaksi terhadap interaksi yang terdapat pada keyboard. Setidaknya terdapat 3 method yang digunakan dalam listener ini, yaitu: a. keyPressed(KeyEvent) b. keyReleased(KeyEvent) c. keyTyped(KeyEvent) Bereaksi atas pergerakan mouse. Terdapat setidaknya 5 method yang terdapat pada event listerner ini: a. mouseClicked (MouseEvent) b. mousePressed (MouseEvent) c. mouseReleased (MouseEvent) d. mouseEntered (MouseEvent) e. mouseExited (MouseEvent) Untuk mendukung event Mouse Listener. Menyediakan method yang akan memantau pergerakan mouse, seperti drag dan pemindahan mouse. Method yang digunakan oleh interface ini adalah mouse Dragged (MouseEvent) merupakan event listener dari FocusEvent, pada interface ini terdapat 2 method : a. focusGained (FocusEvent) b. focusLast (FocusEvent) Bereaksi atas perubahan window. Terdapat setidaknya 4 method pada listener ini, yaitu: a. windowClosing (WindowEvent) b. windowOpened (WindowEvent) c. windowActived (WindowEvent) d. windowDeactived (WindowEvent)

Terdapat beberapa listener yang sering digunakan oleh para programmer dalam membuat aplikasi GUI, diantaranya ialah ActionListener, KeyListener dan MouseListener. Berikut ini beberapa contoh listener:

89

Contoh 1: ActionListener: import java.awt.*; import javax.swing.*; import java.awt.event.*; publicclass DemoAction extends JFrame{ private JButton BTNsimpan =new JButton("Simpan"), BTNclear =new JButton("Clear"); private JLabel LBLsimpan =new JLabel("Anda Menekan Tombol Simpan"), LBLclear =new JLabel("Anda Menekan Tombol Clear"); DemoAction(){ super("Demo Action Listener"); JPanel Panel1 =new JPanel(); Panel1.setLayout(new FlowLayout()); Panel1.add(BTNsimpan); Panel1.add(BTNclear); getContentPane().add(Panel1); setSize(200,150); setDefaultCloseOperation(EXIT_ON_CLOSE); BTNclear.addActionListener(new ActionListener(){ publicvoid actionPerformed (ActionEvent evn){ BTNsimpan.setVisible(false); BTNclear.setVisible(false); LBLclear.setVisible(true); Panel1.add(LBLclear); BTNsimpan.setEnabled(false); } }); BTNsimpan.addActionListener(new ActionListener(){ publicvoid actionPerformed (ActionEvent evn){ BTNsimpan.setVisible(false); BTNclear.setVisible(false); LBLsimpan.setVisible(true); Panel1.add(LBLsimpan); BTNclear.setEnabled(false); } });

setVisible(true); } publicstaticvoid main(String[] args){ DemoAction Demoaksi =new DemoAction(); } }

Jika dieksekusi, maka tampilan programnya adalah

90

Gambar 4. 2 ActionListener Sebelum dan Sesudah di klik Contoh 2: MouseListener: import java.awt.*; import java.awt.event.*; publicclass DemoMouse extends Frame implements MouseListener, MouseMotionListener { TextField TB; public DemoMouse(){ super("Demo MouseListener"); TB =new TextField(60); addMouseListener(this); } publicvoid launchFrame(){ add(TB, BorderLayout.SOUTH); setSize(200,200); setVisible(true); } publicvoid mouseClicked(MouseEvent me){ TB.setText("Mouse di klik"); } publicvoid mouseEntered(MouseEvent me){ TB.setText("Mouse Terdapat pada Frame."); } publicvoid mouseExited(MouseEvent me){ TB.setText("Mouse Keluar dari Frame"); } publicvoid mousePressed(MouseEvent me){ TB.setText("Mouse di tekan"); } publicvoid mouseReleased(MouseEvent me){ TB.setText("Mouse Tidak Ditekan"); } publicvoid mouseDragged(MouseEvent me){ TB.setText("Mouse di drag dari "+ me.getX()+","+ me.getY()); } publicvoid mouseMoved(MouseEvent me){ TB.setText("Mouse dipindah dari "+ me.getX()+","+ me.getY()); } publicstaticvoid main(String[] args){ DemoMouse med =new DemoMouse(); med.launchFrame(); }

91

}


Gambar 4. 4 Jika Mouse pada Frame

Gambar 4. 3 Jika Mouse Keluar dari Frame

Gambar 4. 5 Jika Mouse di klik

Gambar 4. 6 Jika Mouse di tekan

Contoh 3, KeyListener : import java.awt.*; import java.awt.event.*; import javax.swing.*; publicclass DemoKey extends JFrame implements KeyListener { private String baris1=""; private JTextArea textArea; public DemoKey(){ super("Mencoba Key Event"); textArea =new JTextArea (10,15); textArea.setText("Tekan sembarang tombol di keyboard..."); textArea.setEnabled(false);

92

textArea.setDisabledTextColor(Color.BLACK); getContentPane().add(textArea); addKeyListener (this); setSize (300,150); setLocationRelativeTo(null); setVisible(true); } publicvoid keyPressed (KeyEvent e){ textArea.setText("Tombol yang ditekan : "+ e.getKeyText(e.getKeyCode())); } publicvoid keyReleased (KeyEvent e){ textArea.setText("Tombol yang dilepas : "+ e.getKeyText(e.getKeyCode())); } publicvoid keyTyped (KeyEvent e){ textArea.setText("Tombol yang ditulis : "+ e.getKeyChar()); } publicstaticvoid main (String args[]){ DemoKey test =new DemoKey(); test.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }


Gambar 4. 7 Awal Program dijalankan

Gambar 4. 8 Jika Tombol “S” di tekan

Gambar 4. 9 Jika Tombol “S” di lepas

93

D. Aktivitas Pembelajaran Pembelajaran dilaksanakan menggunakan sistem self based learning atau sistem pembelajaran mandiri. Seluruh peserta diklat/workshop belajar secara aktif mengumpulkan berbagai sumber selain modul ini, misalnya melalui majalah atau melalui internet. Aktivitas pembelajaran dalam mempelajari Kegiatan Pembelajaran 2 sebagai berikut: 1. Buka project Latihan yang sudah dibuat pada Kegiatan Pembelajaran 3 2. Import komponen awt.event.* dan komponen swing pada project. Pada tampilan desain, pilih bagian source dan tambahkan syntax berikut

Gambar 4. 10 Mengakses menu source Letakkan syntax dibawah ini pada baris paling awal dari project yang di buat, hal ini dimaksudkan untuk mengimport komponen AWT dan Swing sehingga operasi dapat dilakukan dengan baik import java.awt.event.*; import javax.swing.*; import javax.swing.table.*;

3. Buat suatu fungsi yang dapat melakukan validasi input harus berupa angka. Letakkan fungsi tersebut diatas konstruktor fungsi utama. Source code untuk validasi tersebut adalah publicvoid FilterHanyaAngka(java.awt.event.KeyEvent evt){ char c = evt.getKeyChar(); if(!((Character.isDigit(c)||(c == KeyEvent.VK_BACK_SPACE)||(c == KeyEvent.VK_DELETE))) ) { JOptionPane.showMessageDialog(null,"Harus Angka"); evt.consume(); } }

94

4. Buat suatu fungsi yang dapat melakukan validasi input harus berupa huruf. Letakkan fungsi tersebut dibawah method Filter Hanya Angka. Source code untuk validasi tersebut adalah

publicvoid FilterHanyaAngka(java.awt.event.KeyEvent evt){ char c = evt.getKeyChar(); if(((Character.isDigit(c)||(c == KeyEvent.VK_BACK_SPACE)||(c == KeyEvent.VK_DELETE))) ) { JOptionPane.showMessageDialog(null,"Harus Huruf"); evt.consume(); } }

5. Berikan suatu event pada komponen Text Field NIS Klik kanan komponen TextField NIS  event KeyTyped

Gambar 4. 11 Mengakses event keyTyped Text Field

Tambahkan kode hingga method tersebut seperti berikut privatevoid nis_siswaKeyTyped(java.awt.event.KeyEvent evt){ // TODO add your handling code here: FilterHanyaAngka(evt);//kode yang ditambahkan }

6. Berikan suatu event pada komponen Text Field Nama. Klik kanan komponen TextField Nama  event KeyTyped  Masukan kode berikut privatevoid nama_siswaKeyTyped(java.awt.event.KeyEvent evt){

95

// TODO add your handling code here: FilterHanyaHuruf(evt); }

7. Berikan suatu event pada komponen Text Field Nilai Klik kanan komponen TextField Nilai event KeyTyped Masukan kode berikut privatevoid nilai_siswaKeyTyped(java.awt.event.KeyEvent evt){ // TODO add your handling code here: FilterHanyaAngka(evt); }

8. Berikan suatu event pada komponen Button Klik kanan komponen Button simpan event actionPerformed

Gambar 4. 12 Memberikan event pada Button Simpan

Masukan kode berikut privatevoid jButton1ActionPerformed(java.awt.event.ActionEvent evt){ DefaultTableModel model =(DefaultTableModel) jTable3.getModel(); String row[]={ nis_siswa.getText(), nama_siswa.getText(),nilai_siswa.getText()}; model.addRow(row); }

9. Atur jumlah baris pada tabel sejumlah 0 baris Masuk ke tab Desain  Klik Kanan Tabel  Table ContentsRow set menjadi 0Close

96

Gambar 4. 13 Pengaturan jumlah baris menjadi 0

10. Kompilasi Program yang dibuat 11. Cek Validasi Input yang diberikan Validasi input ini merupakan pemanggilan method FilterHanyaAngka dan FilterHanyaHuruf. Sehingga input yang diberikan oleh user sesuai dengan permintaan program. 12. Jika pada Field nis_siswa ditekan tombol “a” pada keyboard maka akan menampilkan output message box seperti berikut

Gambar 4. 14 Validasi Input NIS

13. Jika pada Field nama_siswa ditekan angka 1--9 pada keyboard maka akan menampilkan output message box seperti berikut

Gambar 4. 15 Validasi Input Nama 14. Jika pada Field nilai_siswa ditekan tombol “a” pada keyboard maka akan menampilkan output message box seperti berikut

97

Gambar 4. 16 Validasi Input Nilai

15. Lakukan input data dan tekan tombol Simpan

Gambar 4. 17 Data yang di inputkan

16. Melihat data input pada tabel

Gambar 4. 18 Tampilan Data Berhasil di input pada Tabel

98

E. Latihan Soal Berikan suatu event pada setiap tombol kalkulator GUI yang sudah di buat pada Kegiatan Pembelajaran 3 agar dapat berfungsi dengan baik.

F. Rangkuman Event handling merupakan suatu proses penanganan interaksi yang diberikan pada aplikasi, dimana penanganan tersebut berupa pemberian respon terhadap input yang ada. Pada bahasa JAVA, mekanisme event handlingtentang bagaimana program merespon input user dikenal dengan istilah Delegation of Event Model. Pada Delegation of Event Model, terdapat 3 bagian utama yaitu:

1) Event Source Event source mengacu pada komponen GUI yang men-generate event. Sebagai contoh, komponen yang digunakan ialah Button, Checkbox, List, Choice, dan yang lainnya.

2) Event Listener/Handler Event listener ini juga berfungsi untuk memberikan reaksi terhadap implus yang diberikan user pada objek event.

3) Event Object Event Object berisi semua informasi yang perlu tentang event yang telah terjadi. Informasi meliputi tipe dari event yang telah terjadi, seperti ketika mouse telah di-klik. Ada beberapa class event

untuk kategori

yang berbeda dari user action. Sebuah event object mempunyai tipe data tentang salah satu dari class ini. Terdapat beberapa listener yang sering digunakan oleh para programmer dalam membuat aplikasi GUI, diantaranya ialah ActionListener, KeyListener dan MouseListener.

99

G. Umpan Balik dan Tindak Lanjut Anda diharapkan memberikan umpan balik dan rencana tindak lanjut dengan mengisi tabel berikut ini:

INDIKATOR PENCAPAIAN KOMPETENSI Membuat perencanaan proyek sistem informasi berbasis desktop meliputi feasibility study, budget, sumber daya, scope, dan alokasi waktu Membuat antar muka pengguna menggunakan frame, panel, dan komponenkomponen GUI berbasis AWT Membuat layout GUI dengan flow layout, border layout, dan grid layout dalam Frame GUI berbasis AWT.

100



H. Kunci Jawaban Source Code Program /* * To change this license header, choose License Headers in Project Properties. * To change this template file, choose Tools | Templates * and open the template in the editor. */ /** * * @author Anak Wadung */ publicclass Kalkulator extends javax.swing.JFrame { String angka; double jumlah,angka1,angka2; int pilih; /** * Creates new form Kalkulator */ public Kalkulator(){ initComponents(); } /** * This method is called from within the constructor to initialize the form. * WARNING: Do NOT modify this code. The content of this method is always * regenerated by the Form Editor. */ @SuppressWarnings("unchecked") // <editor-fold defaultstate="collapsed" desc="Generated Code"> privatevoid initComponents(){ jPanel1 =new javax.swing.JPanel(); TBisi =new javax.swing.JTextField(); jPanel2 =new javax.swing.JPanel(); BTN0 =new javax.swing.JButton(); BTN1 =new javax.swing.JButton(); BTN2 =new javax.swing.JButton(); BTN3 =new javax.swing.JButton(); BTN4 =new javax.swing.JButton(); BTN5 =new javax.swing.JButton(); BTN6 =new javax.swing.JButton(); BTN7 =new javax.swing.JButton(); BTN8 =new javax.swing.JButton(); BTN9 =new javax.swing.JButton(); BTNClear =new javax.swing.JButton(); jPanel3 =new javax.swing.JPanel();

101

BTNplus =new javax.swing.JButton(); BTNminus =new javax.swing.JButton(); BTNkali =new javax.swing.JButton(); BTNbagi =new javax.swing.JButton(); BTNsin =new javax.swing.JButton(); BTNcos =new javax.swing.JButton(); BTNtangen =new javax.swing.JButton(); BTNhasil =new javax.swing.JButton();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE) ; setTitle("Kalkulator"); setPreferredSize(new java.awt.Dimension(420,300)); getContentPane().setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout()); jPanel1.setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout()); TBisi.setFont(new java.awt.Font("Tahoma",0,14));// NOI18N jPanel1.add(TBisi,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,20,382,36)); getContentPane().add(jPanel1,new org.netbeans.lib.awtextra.AbsoluteConstraints(0,0,402,-1)); jPanel2.setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout()); BTN0.setText("0"); BTN0.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN0ActionPerformed(evt); } }); jPanel2.add(BTN0,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,113,-1,-1)); BTN1.setText("1"); BTN1.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN1ActionPerformed(evt); } }); jPanel2.add(BTN1,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,79,-1,-1)); BTN2.setText("2"); BTN2.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN2ActionPerformed(evt); } });

102

jPanel2.add(BTN2,new org.netbeans.lib.awtextra.AbsoluteConstraints(59,79,-1,-1)); BTN3.setText("3"); BTN3.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN3ActionPerformed(evt); } }); jPanel2.add(BTN3,new org.netbeans.lib.awtextra.AbsoluteConstraints(108,79,-1,-1)); BTN4.setText("4"); BTN4.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN4ActionPerformed(evt); } }); jPanel2.add(BTN4,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,45,-1,-1)); BTN5.setText("5"); BTN5.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN5ActionPerformed(evt); } }); jPanel2.add(BTN5,new org.netbeans.lib.awtextra.AbsoluteConstraints(59,45,-1,-1)); BTN6.setText("6"); BTN6.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN6ActionPerformed(evt); } }); jPanel2.add(BTN6,new org.netbeans.lib.awtextra.AbsoluteConstraints(108,45,-1,-1)); BTN7.setText("7"); BTN7.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN7ActionPerformed(evt); } }); jPanel2.add(BTN7,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,11,-1,-1)); BTN8.setText("8"); BTN8.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN8ActionPerformed(evt); } });

103

jPanel2.add(BTN8,new org.netbeans.lib.awtextra.AbsoluteConstraints(59,11,-1,-1)); BTN9.setText("9"); BTN9.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTN9ActionPerformed(evt); } }); jPanel2.add(BTN9,new org.netbeans.lib.awtextra.AbsoluteConstraints(108,11,-1,-1)); BTNClear.setText("Clear"); BTNClear.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNClearActionPerformed(evt); } }); jPanel2.add(BTNClear,new org.netbeans.lib.awtextra.AbsoluteConstraints(57,113,90,-1)); getContentPane().add(jPanel2,new org.netbeans.lib.awtextra.AbsoluteConstraints(20,80,-1,-1)); jPanel3.setLayout(new org.netbeans.lib.awtextra.AbsoluteLayout()); BTNplus.setText("+"); BTNplus.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNplusActionPerformed(evt); } }); jPanel3.add(BTNplus,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,11,40,-1)); BTNminus.setText("-"); BTNminus.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNminusActionPerformed(evt); } }); jPanel3.add(BTNminus,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,40,41,-1)); BTNkali.setText("X"); BTNkali.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNkaliActionPerformed(evt); }

104

}); jPanel3.add(BTNkali,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,74,41,-1)); BTNbagi.setText("/"); BTNbagi.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNbagiActionPerformed(evt); } }); jPanel3.add(BTNbagi,new org.netbeans.lib.awtextra.AbsoluteConstraints(10,103,41,-1)); BTNsin.setText("Sin"); BTNsin.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNsinActionPerformed(evt); } }); jPanel3.add(BTNsin,new org.netbeans.lib.awtextra.AbsoluteConstraints(69,11,51,37)); BTNcos.setText("Cos"); BTNcos.addActionListener(newjava.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNcosActionPerformed(evt); } }); jPanel3.add(BTNcos,new org.netbeans.lib.awtextra.AbsoluteConstraints(69,54,-1,37)); BTNtangen.setText("Tg"); BTNtangen.setToolTipText(""); BTNtangen.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNtangenActionPerformed(evt); } }); jPanel3.add(BTNtangen,new org.netbeans.lib.awtextra.AbsoluteConstraints(67,103,53,-1)); BTNhasil.setText("Hasil"); BTNhasil.setToolTipText(""); BTNhasil.addActionListener(new java.awt.event.ActionListener(){ publicvoid actionPerformed(java.awt.event.ActionEvent evt){ BTNhasilActionPerformed(evt); } }); jPanel3.add(BTNhasil,new

105

org.netbeans.lib.awtextra.AbsoluteConstraints(130,10,-1,122)); getContentPane().add(jPanel3,new org.netbeans.lib.awtextra.AbsoluteConstraints(181,78,-1,140)); pack(); }// privatevoid BTN0ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="0"; TBisi.setText(angka); } privatevoid BTN1ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="1"; TBisi.setText(angka); } privatevoid BTN2ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="2"; TBisi.setText(angka); } privatevoid BTN3ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="3"; TBisi.setText(angka); } privatevoid BTN4ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="4"; TBisi.setText(angka); } privatevoid BTN5ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="5"; TBisi.setText(angka); } privatevoid BTN6ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="6"; TBisi.setText(angka); } privatevoid BTN7ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="7"; TBisi.setText(angka);

106

} privatevoid BTN8ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="8"; TBisi.setText(angka); } privatevoid BTN9ActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka +="9"; TBisi.setText(angka); } privatevoid BTNClearActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: TBisi.setText(""); angka1=0.0; angka2=0.0; jumlah=0.0; angka=""; } privatevoid BTNplusActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka1=Double.parseDouble(angka); TBisi.setText("+"); angka=""; pilih=1; } privatevoid BTNminusActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka1=Double.parseDouble(angka); TBisi.setText("-"); angka=""; pilih=2; } privatevoid BTNkaliActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka1=Double.parseDouble(angka); TBisi.setText("X"); angka=""; pilih=3; } privatevoid BTNbagiActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: angka1=Double.parseDouble(angka); TBisi.setText("/"); angka="";

107

pilih=4; } privatevoid BTNhasilActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: switch(pilih){ case1: angka2 = Double.parseDouble(angka); jumlah = angka1 + angka2; angka = Double.toString(jumlah); TBisi.setText(angka); break; case2: angka2 = Double.parseDouble(angka); jumlah = angka1 - angka2; angka = Double.toString(jumlah); TBisi.setText(angka); break; case3: angka2 = Double.parseDouble(angka); jumlah = angka1 * angka2; angka = Double.toString(jumlah); TBisi.setText(angka); break; case4: angka2 = Double.parseDouble(angka); jumlah = angka1 / angka2; angka = Double.toString(jumlah); TBisi.setText(angka); break; case5: // TBisi.setText(angka); break; case6: angka2 = Double.parseDouble(angka); jumlah = angka1 * angka2; angka = Double.toString(jumlah); TBisi.setText(angka); break; case7: angka2 = Double.parseDouble(angka); jumlah = angka1 / angka2; angka = Double.toString(jumlah); TBisi.setText(angka); break; default: break; } } privatevoid BTNsinActionPerformed(java.awt.event.ActionEvent evt){

108

// TODO add your handling code here: String sin = TBisi.getText(); double derajat = Double.parseDouble(sin); double pi = Math.PI; //dalam bentuk degrees// double hasil = Math.sin(derajat * pi/180); TBisi.setText(Double.toString(hasil)); } privatevoid BTNcosActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: String cos = TBisi.getText(); double derajat = Double.parseDouble(cos); double pi = Math.PI; //dalam bentuk degrees// double hasil = Math.cos(derajat * pi/180); TBisi.setText(Double.toString(hasil)); } privatevoid BTNtangenActionPerformed(java.awt.event.ActionEvent evt){ // TODO add your handling code here: String tan = TBisi.getText(); double derajat = Double.parseDouble(tan); double pi = Math.PI; //dalam bentuk degrees// double hasil = Math.tan(derajat * pi/180); TBisi.setText(Double.toString(hasil)); }

/** * @param args the command line arguments */ publicstaticvoid main(String args[]){ /* Set the Nimbus look and feel */ //<editor-fold defaultstate="collapsed" desc=" Look and feel setting code (optional) "> /* If Nimbus (introduced in Java SE 6) is not available, stay with the default look and feel. * For details see http://download.oracle.com/javase/tutorial/uiswing/lookandfeel/plaf .html */ try{ for(javax.swing.UIManager.LookAndFeelInfo info : javax.swing.UIManager.getInstalledLookAndFeels()){ if("Nimbus".equals(info.getName())){ javax.swing.UIManager.setLookAndFeel(info.getClassName()); break; } } }catch(ClassNotFoundException ex){

109

java.util.logging.Logger.getLogger(Kalkulator.class.getName()).log( java.util.logging.Level.SEVERE,null, ex); }catch(InstantiationException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).log( java.util.logging.Level.SEVERE,null, ex); }catch(IllegalAccessException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).log( java.util.logging.Level.SEVERE,null, ex); }catch(javax.swing.UnsupportedLookAndFeelException ex){ java.util.logging.Logger.getLogger(Kalkulator.class.getName()).log( java.util.logging.Level.SEVERE,null, ex); } // /* Create and display the form */ java.awt.EventQueue.invokeLater(new Runnable(){ publicvoid run(){ new Kalkulator().setVisible(true); } }); } // Variables declaration - do not modify private javax.swing.JButton BTN0; private javax.swing.JButton BTN1; private javax.swing.JButton BTN2; private javax.swing.JButton BTN3; private javax.swing.JButton BTN4; private javax.swing.JButton BTN5; private javax.swing.JButton BTN6; private javax.swing.JButton BTN7; private javax.swing.JButton BTN8; private javax.swing.JButton BTN9; private javax.swing.JButton BTNClear; private javax.swing.JButton BTNbagi; private javax.swing.JButton BTNcos; private javax.swing.JButton BTNhasil; private javax.swing.JButton BTNkali; private javax.swing.JButton BTNminus; private javax.swing.JButton BTNplus; private javax.swing.JButton BTNsin; private javax.swing.JButton BTNtangen; private javax.swing.JTextField TBisi; private javax.swing.JPanel jPanel1; private javax.swing.JPanel jPanel2; private javax.swing.JPanel jPanel3; // End of variables declaration }

110

Output Tampilan Program

Gambar 4. 19 Output Tampilan Program

111

112

113

114

MEMBUAT TRANSFORMASI DENGAN KELAS GRAPHIC A. Tujuan Setelah mengikuti Kegiatan Pembelajaran 5 ini diharapkan peserta diklat dapat membuat aplikasi dengan kelas Graphic untuk menggambar tek ataupun gambar

B. Indikator Pencapaian Kompetensi 1. Memberikan aksi rotasi pada gambar yang dibuat dari kelas Graphic. 2. Memberikan aksi translasi pada gambar yang dibuat dari kelas Graphic. 3. Memberikan pengubahan skala pada gambar yang dibuat dari kelas Graphic.

C. Uraian Materi 1. Konsep Dasar Transformasi Objek Transformasi merupakan suatu operasi memodifikasi bentuk objek tanpa merusak bentuk dasar dari objek yang ditransformasikan. Salah satu contoh transformasi adalah transformasi dari window ke viewport. Pada Viewport, objek yang akan digambar pada layar biasanya mempunyai ukuran yang jauh lebih besar dibanding dengan ukuran layar, sehingga perlu dilakukan pemetaan transformasi yang memungkinkan objek tersebut bisa seluruhnya digambar dilayar, tetapi pada layar dengan koordinat yang terbatas, dan biasanya dibatasi oleh sebuah kotak yang disebut windows, sedangkan layarnya tersebut disebut Viewport. Penggunaan transformasi pada suatu objek gambar biasanya digunakan untuk mempermudah dalam melihat objek tersebut ataupun. Beberapa tujuan khusus diperlukannya transformasi objek adalah: a. Merubah atau menyesuaikan komposisi pandangan. b. Memudahkan membuat objek yang simetris c. Melihat objek dari sudut pandang berbeda d. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, biasanya digunakan pada animasi komputer. 115

Terdapat 2 jenis utama dari transformasi, yaitu Transformasi Objek dan

transformasi

ditransformasikan

kordinat. adalah

Pada titik-titik

transformasi yang

objek,

menyusun

bagian

objek

yang

tersebut.

Sedangkan pada transformasi koordinat, yang diubah adalah sistem koordinatnya

sehingga

objek

mengalami

transformasi

dikarenakan

perubahan system koordinat tersebut. Diantara 2 jenis transformasi terdapat 3 jenis transformasi yang dikenal pada transformasi objek 2 dimensi yaitu Rotasi, Translasi dan Skala.

2. Translasi Objek Translasi merupakan bentuk transformasi yang memindahkan posisi suatu objek, baik pada sumbu x, sumbu y, atau bahkan sumbu z (jika pada objek 2 dimensi maka yang berpindah adalah sumbu x dan y saja). Fungsi yang digunakan untuk melakukan translasi adalah : translate(x_trans, y_trans);

Nilai x_trans dan y_trans merupakan perpindahan yang dilakukan pada objek yang ditranslasikan. Titik x_trans merupakan perpindahan yang terjadi pada sumbu x dari titik awal. Sedangkan y_trans merupakan perpindahan yang terjadi pada sumbu y dari titik awal. Suatu translasi pada akhirnya akan menghasilkan titik x‟ dan y‟, dimana titik x‟ dan y‟ tersebut merupakan titik setelah objek ditranslasi dari titik awal. Secara matematis, nilai x‟ dan y‟ dapat dihitung dengan menggunakan rumus: x ‟ = x_awal + x_trans y „ = y_awal + y_trans

Perhatikan contoh berikut! Contoh 1, Translasi Objek Persegi Panjang; import java.awt.*; import javax.swing.*; publicclass Contoh1 extends JPanel { publicvoid paintComponent (Graphics g) { super.paintComponent(g); Graphics2D g2d =(Graphics2D) g;

116

//Gambar bujur sangkar g2d.setColor(Color.BLUE); g2d.fillRect(10,100,120,130); g2d.drawRect(10,100,120,130); g2d.drawString("Objek Sebelum Translasi",10,250); g2d.translate(200,100);//method untuk translasi g2d.fillRect(150,100,120,130); g2d.drawString("Objek Setelah Ditranslasi",150,250); } publicstaticvoid main(String[] args){ JFrame frame =new JFrame("Transformasi Objek 2 Dimensi"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.add(new Contoh1()); frame.setSize(600,420); frame.setLocationRelativeTo(null); frame.setVisible(true); } }

Jika kode di atas dikompilasi, maka output-nya adalah

Gambar 5. 1 Translasi objek Persegi

3. Rotasi Objek Rotasi merupakan bentuk transformasi yang digunakan untuk memutar posisisuatu benda terhadap suatu titik kordinat. Fungsi yang digunakan untuk melakukan rotasi ialah : rotate(derajat_rotasi)

Parameter derajat_rotasi yang dimasukkan pada fungsi rotate memiliki 2 macam perbedaan, jika parameter derajat_rotasi bernilai postif, maka 117

objek akan diputar berlawanan arah jarum jam. Sedangkan jika parameter derajat_rotasi bernilai negatif, maka objek akan diputar searah jarum jam.

Perhatikan contoh berikut! Contoh 2, Rotasi Objek Persegi Panjang; package contoh2; import java.awt.*; import javax.swing.*; publicclass Contoh2 extends JPanel { publicvoid paintComponent (Graphics g) { super.paintComponent(g); Graphics2D g2d =(Graphics2D) g; //Gambar bujur sangkar g2d.setColor(Color.BLUE); g2d.fillRect(10,100,140,90); g2d.drawRect(10,100,140,90); g2d.drawString("Objek Tanpa Rotasi",10,250); g2d.translate(450,100); g2d.rotate(45);//method untuk rotasi g2d.fillRect(10,100,140,90); g2d.drawString("Objek Rotasi Positif",10,250); g2d.translate(30,100); g2d.rotate(-90);//method untuk rotasi g2d.fillRect(10,100,140,90); g2d.drawString("Objek Rotasi Minus",10,250); } publicstaticvoid main(String[] args){ JFrame frame =new JFrame("Transformasi Objek 2 Dimensi"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.add(new Contoh2()); frame.setSize(700,420); frame.setLocationRelativeTo(null); frame.setVisible(true); } }


118

Gambar 5. 2 Rotasi objek Persegi

4. Pengubahan Skala Objek/Scalling Object Penskalaan/Scalling merupakan bentuk transformasi yang dapat mengubah ukuran (besar maupun kecilnya) suatu objek. Fungsi yang digunakan untuk melakukan penskalaan ialah : scale(x,y)

Perubahan ukuran suatu objek diperoleh dengan mengalikan semua titik atau vertex pada objek dengan faktor skala pada masing-masing sumbu (x dan y). Sebagai contoh untuk memperkecil objek maka dapat menuliskan scale(0.5,0.5), maka otomatis objek akan berukuran lebih kecil karena kordinatnya dikalikan 0.5 akan menghasilkan ukuran lebih kecil (berukuran setengah dari objek awal).

Perhatikan contoh berikut! Contoh 3, Scalling Objek Persegi Panjang; import java.awt.*; import javax.swing.*; publicclass Contoh3 extends JPanel { publicvoid paintComponent (Graphics g) { super.paintComponent(g); Graphics2D g2d =(Graphics2D) g; //Gambar bujur sangkar g2d.setColor(Color.BLUE); g2d.fillRect(10,100,140,90);

119

g2d.drawRect(10,100,140,90); g2d.drawString("Objek Tanpa Scalling",10,250); g2d.translate(200,100); g2d.scale(0.5,0.5);//fungsi skala g2d.fillRect(10,100,140,90); g2d.drawString("Scalling Lebih Kecil",10,250); g2d.translate(150,10); g2d.scale(3.5,3.5); g2d.fillRect(10,100,140,90); g2d.drawString("Scalling Lebih Besar",10,250); } publicstaticvoid main(String[] args){ JFrame frame =new JFrame("Transformasi Objek 2 Dimensi"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.add(new Contoh3()); frame.setSize(600,600); frame.setLocationRelativeTo(null); frame.setVisible(true); } }


Gambar 5. 3 Scalling objek Persegi

5. Animasi Objek Animasi merupakan teknik untuk membuat objek seolah-olah bergerak menjadi satu kesatuan utuh. Dalam bahasa JAVA, animasi dapat dilakukan dengan cara melakukan perulangan sebanyak n kali dengan frekuensi 120

kemunculan pada rentang waktu tertentu. Terdapat beberapa contoh animasi yang dapat dibuat pada bahasa JAVA, yaitu animasi teks berjalan, animasi gambar, animasi objek bergerak (*.gif), dan yang lainnya. Berikut ini contoh pembuatan animasi dengan teknik perulangan untuk menampilkan tulisan “ALQODRI” dengan waktu delay 1 detik (1000ms).

Contoh 1. Membuat Animasi Teks package tugas2; // animasi sederhana // modfikasi dari Tips & Trik IlmuKomputer.Com (2005) import java.awt.*; import java.awt.event.*; publicclass animasiSederhana extends Frame implements Runnable { Thread animation; // Mengatur waktu delay int frameDelay =1000;//1000 ms = 1 detik // Tulisan yang akan ditampilkan String frames[]={"A","AL","ALQ","ALQO","ALQOD","ALQODR","ALQODRI"}; // Menentukan variabel yang diperlukan int numFrames = frames.length; int currentFrame =0; long lastDisplay =0; int screenWidth =300;//lebar layar int screenHeight =100;//tinggi layar publicstaticvoid main(String args[]){ animasiSederhana app =new animasiSederhana(); } public animasiSederhana(){ super("Animasi Sederhana"); setup(); setSize(screenWidth,screenHeight); addWindowListener(new WindowEventHandler()); show(); animation =new Thread(this); animation.start(); } void setup(){ setFont(new Font("default",Font.BOLD,30));//mengatur font } publicvoid paint(Graphics g){ g.drawString(frames[currentFrame],60,60);//membuat frame } publicvoid run(){

121

// membuat animasi (perulangan) do{ long time = System.currentTimeMillis(); if(time - lastDisplay > frameDelay){ repaint(); try{ Thread.sleep(frameDelay);//berhenti selama frameDelay=100 }catch(InterruptedException ex){ } ++currentFrame; currentFrame %= numFrames; lastDisplay = time; } }while(true); } class MenuItemHandler implements ActionListener, ItemListener { publicvoid actionPerformed(ActionEvent ev){ String s=ev.getActionCommand(); if(s=="Exit"){ System.exit(0); } } publicvoid itemStateChanged(ItemEvent e){ } } //Kelas yang digunakan agar tombol close pada frame bisa berfungsi class WindowEventHandler extends WindowAdapter { publicvoid windowClosing(WindowEvent e){ System.exit(0); } } }

6.

Output Membuat Animasi Teks

Gambar 5. 4 Tampilan hasil running program

Selain menggunakan teknik perulangan, terdapat pula pendekatan dengan menggunakan Thread. Thread merupakan suatu metode untuk memproses suatu proses program dengan cara mengakses suatu modul program yang dieksekusi secara urut atau pun bersamaan. Penggunaan Thread dalam memungkinkan seorang pembuat program dapat melakukan 122

animasi pada JAVA dengan langsung menentukan proses apa yang dilakukan program dan berapa lama waktu tunggu menuju proses tersebut (delay). Contoh 2. Membuat Animasi Teks dengan Thread /* * To change this template, choose Tools | Templates * and open the template in the editor. */ package gambarjava; /** * * diperoleh dari http://javalfi.blogspot.co.id/2012/10/membuat-animasi-gambargerak.html; */ import java.awt.*; import java.util.logging.Level; import java.util.logging.Logger; publicclass gambarJava extends Panel{ //atap rumah int x[]=newint[]{90,150,210};//x1,x2,x3 int y[]=newint[]{260,200,260};//y1,y2,y3 //jalan int a[]=newint[]{584,240,413,584};//x1,x2,x3,x4 int b[]=newint[]{200,460,460,320};//y1,y2,y3,y4 //garis jalan atas int e[]=newint[]{537,563,573,547};//x1,x2,x3,x4 int f[]=newint[]{280,260,260,280};//y1,y2,y3,y4 //garis jalan tengah int c[]=newint[]{442,468,478,452};//x1,x2,x3,x4 int d[]=newint[]{360,340,340,360};//y1,y2,y3,y4 //garis jalan bawah int g[]=newint[]{337,363,373,347};//x1,x2,x3,x4 int h[]=newint[]{450,430,430,450};//y1,y2,y3,y4 public gambarJava(){//constructor setBackground(new Color(207,245,243));//setBackground dengan set warna secara manual } publicvoid paint(Graphics k){//method paint //rumput tanah k.setColor(new manual

Color(130,235,24));//setColor

secara

123

k.fillRect(0,200,584,262); //matahari k.setColor(Color.yellow);//setColor menjadi warna kuning k.fillOval(430,50,80,80);/** * x,y maksudnya 80,80 adalah lebar bulatannya, sama karena membentuk lingkaran sempurna */ /** membuat gambar gerak */ Thread t =new Thread();//Sebuah thread merupakan sebuah pengontrol aliran program for(int i=1; i<=70;i++){ k.setColor(new Color(207,245,243));//setColor dengan warna yang sama dengan warna langit k.fillRect(0,0,300,200);//buat fillRect untuk menimpa gambar awan yang bergerak //awan k.setColor(new Color(96,213,207));//setColor secara manual k.fillOval(120+i,60,70,40);//x,y maksudnya 70,40 adalah agar bentuknya tidak bulat sempurna(ouval) k.fillOval(140+i,70,70,40);//x+i maksudnya agar fillOval bergerak ke arah kanan k.fillOval(100+i,70,70,40); k.fillOval(160+i,60,70,40); k.fillOval(60+i,70,70,40); k.fillOval(80+i,50,70,40); if(i ==70){//jika i sudah mencapai titik 70 i =1;//maka i akan kembali ke titik 1 atau awan kembali ke titik semula } try{//tambahkan blok try-catch t.sleep(50);//sleep digunakan untuk mengatur kecepatan gerak. Harus menggunakan blok try-catch }catch(InterruptedException ex){ Logger.getLogger(gambarJava.class.getName()).log(Level.SEVERE , null, ex); } //atap rumah k.setColor(new Color(177,115,29));//setColor manual k.fillPolygon(x, y,3);//membuat fillPolygon jumlah titiknya 3, mengambil array dari x[] dan y[] //cahaya matahari k.setColor(new Color(245,135,14));//setColor manual k.drawLine(430,90,380,90);//garis kiri k.drawLine(440,60,380,30);//garis kiri atas k.drawLine(440,120,380,150);//garis kiri bawah k.drawLine(560,90,510,90);//garis kanan k.drawLine(560,30,500,60);//garis kanan atas

124

secara dengan

secara

k.drawLine(560,150,500,120);//garis kanan bawah k.drawLine(470,10,470,50);//garis atas k.drawLine(470,130,470,170);//garis bawah //dinding k.setColor(new Color(67,177,114));//setColor secara manual k.fillRect(100,260,100,200);//titik koordinat x,y lalu lebarnya,tingginya //pintu k.setColor(new


secara

manual k.fillRect(150,370,50,90);//titik koordinat x,y lalu lebarnya,tingginya //gagang pintu k.setColor(new Color(92,86,39));//setColor manual k.fillOval(185,415,10,10);//menentukan koordinat x,y lalu lebar dan tinggi bulatan

secara titik

//jalan k.setColor(new


secara

manual k.fillPolygon(a, b,4);//membuat fillPolygon jumlah titiknya 4, mengambil array dari a[] dan b[] //garis jalan k.setColor(new Color(255,255,255));//setColor manual k.fillPolygon(c, d,4);//membuat fillPolygon jumlah titiknya 4, mengambil array dari c[] dan d[] k.fillPolygon(e, f,4);//membuat fillPolygon jumlah titiknya 4, mengambil array dari e[] dan f[] k.fillPolygon(g, h,4);//membuat fillPolygon jumlah titiknya 4, mengambil array dari g[] dan h[]

dengan

secara dengan dengan dengan

} } publicstaticvoid main(String[] args){ Frame f1 =new Frame();//instansiasi class Frame gambarJava H =new gambarJava();//instansiasi class gambarJava f1.add(H); f1.setSize(600,500);//setSize window f1.setVisible(true);//setVisible menjadi true agar window dapat tampil } }

125

7.

Output Membuat Animasi Teks

Gambar 5. 5 Tampilan hasil running animasi program

D. Aktivitas Pembelajaran Pembelajaran dilaksanakan menggunakan sistem self based learning atau sistem pembelajaran mandiri. Seluruh peserta diklat/workshop belajar secara aktif mengumpulkan berbagai sumber selain modul ini, misalnya melalui majalah atau melalui internet. Aktivitas pembelajaran dalam mempelajari Kegiatan Pembelajaran 2 sebagai berikut: 1.

Buat Kelas Java dengan nama Latihan8.java

2.

Import beberapa komponen library yang diperlukan import import import import

3.

java.awt.*; java.awt.event.*; java.util.Calendar; java.util.Random;

Buat method paint dengan isi berupa garis yang memiliki waktu delay. Tuliskan Source Code berikut untuk membuat objek pada method paint G.setColor(Color.black);//warna jam int Panjang; if(getWidth()
126

else Panjang=getHeight()-100; G.drawOval(PX-Panjang/2,PYPanjang/2,Panjang,Panjang); float Detik=Waktu(Calendar.SECOND)+(float)Waktu(Calendar.MILLISE COND)/1000; G.drawLine(PX,PY,(int)(PX+(Math.sin(2*Math.PI*Detik/60)*Pa njang/2)),(int)(PY+(1*Math.cos(2*Math.PI*Detik/60)*Panjang/2)));

4. Secara garis besar, isi kelas Latihan8.java adalah sebagai berikut: package latihan8; import java.awt.*; import java.awt.event.*; import java.util.Calendar; import java.util.Random; publicclass Latihan8 extends Frame { privateint PX,PY,xorR,xorG,xorB; Random Rdm; public Latihan8(){ super("Waktu Detik"); setLayout(new FlowLayout()); setSize(800,600); addWindowListener(new WindowListener(){ publicvoid windowActivated(WindowEvent e){} publicvoid windowClosed(WindowEvent e){} publicvoid windowClosing(WindowEvent e){ System.exit(0); } publicvoid windowDeactivated(WindowEvent e){} publicvoid windowDeiconified(WindowEvent e){} publicvoid windowIconified(WindowEvent e){} publicvoid windowOpened(WindowEvent e){} }); Rdm=new java.util.Random(); setBackground(Color.white); new javax.swing.Timer(1000,new ActionListener(){//mengatur kecepatan detik 1 detik 1000 ms publicvoid actionPerformed(ActionEvent ev){ repaint(); PX=getWidth()/2; PY=getHeight()/2; xorR=Rdm.nextInt(255); xorG=Rdm.nextInt(255); xorB=Rdm.nextInt(255); } }).start(); } publicstaticvoid main(String[]a){

127

new Latihan8().setVisible(true); } publicvoid paint(Graphics G){ G.setColor(Color.black);//warna jam int Panjang; if(getWidth()
5. Melihat jalannya program

Gambar 5. 6 Jalannya program detik

128

E. Latihan Soal Buatlah suatu objek jam analog yang mampu beroperasi selayaknya jam analog yang ditempelkan pada jam-jam dinding. Jam tersebut harus mampu melakukan rotasi jarum 1 detik dan jika mencapai 60 detik maka jarum menit akan bergerak (selayaknya jam analog). Interval dari jam tersebut harus sesuai dengan interval detik pada jam analog seperti biasanya. Contoh Tampilan Program

Gambar 5. 7 Jalannya program jam

F. Rangkuman Transformasi adalah perubahan yang terjadi pada objek gambar yang telah dibuat pada suatu frame. Perubahan tersebut dibagi menjadi 3 macam, yaitu translasi, rotasi dan skala (scalling). Translasi adalah suatu perubahan posisi (perspektif vertex x atau y) yang terjadi pada objek yang dibuat. Method yang digunakan untuk melakukan translasi adalah method translate(x,y). Rotasi adalah suatu perubahan posisi berupa berputarnya

suatu objek dengan 1 titik inti sebesar beberapa derajat. Method yang digunakan untuk melakukan rotasi adalah rotate(x). Skala (scalling) adalah suatu perubahan ukuran yang terjadi pada objek yang telah dibuat, perubahan tersebut berupa perubahan lebih kecil ataupun perubahan menjadi lebih besar. Method yang digunakan untuk scalling adalah scale(x,y).

Untuk mengimplementasikan transformasi tersebut, dalam

bahasa JAVA dapat melakukan modifikasi terhadap method paint() yang telah mendeklarasikan pada objek yang dibuat. 129

Animasi pada bahasa JAVA dapat dilakukan dengan 2 metode, perulangan dan menggunakan Thread. Secara umum, untuk membuat animasi melalui kedua metode tersebut, harus menampilkan delay time (dalam satuan miliseconds). Thread merupakan suatu metode untuk memproses suatu proses program dengan cara mengakses suatu modul program yang dieksekusi secara urut ataupun bersamaan. Penggunaan Thread dalam memungkinkan seorang pembuat program dapat melakukan animasi pada JAVA dengan langsung menentukan proses apa yang dilakukan program dan berapa lama waktu tunggu menuju proses tersebut (delay).

G. Umpan Balik dan Tindak Lanjut Anda diharapkan memberikan umpan balik dan rencana tindak lanjut dengan mengisi tabel berikut ini: 4. Memberikan aksi rotasi pada gambar yang dibuat dari kelas Graphic. 5. Memberikan aksi translasi pada gambar yang dibuat dari kelas Graphic. Memberikan pengubahan skala pada gambar yang dibuat dari kelas Graphic. INDIKATOR PENCAPAIAN KOMPETENSI Memberikan aksi rotasi pada gambar yang dibuat dari kelas Graphic Memberikan

aksi

translasi

pada gambar yang dibuat dari kelas Graphic. Memberikan

aksi

translasi

pada gambar yang dibuat dari kelas Graphic. Memberikan pengubahan skala pada gambar yang dibuat dari kelas Graphic.

130



H. Kunci Jawaban Source Code Program package tugas3_jamanalog; import java.awt.*; import java.awt.event.*; import java.util.Calendar; import java.util.Random; publicclass Tugas3_JamAnalog extends Frame { privateint PusatX,PusatY,xorR,xorG,xorB; Random Rdm; public Tugas3_JamAnalog(){ super("Jam"); setLayout(new FlowLayout()); setSize(800,600); addWindowListener(new WindowListener(){ publicvoid windowActivated(WindowEvent e){} publicvoid windowClosed(WindowEvent e){} publicvoid windowClosing(WindowEvent e){ System.exit(0); } publicvoid windowDeactivated(WindowEvent e){} publicvoid windowDeiconified(WindowEvent e){} publicvoid windowIconified(WindowEvent e){} publicvoid windowOpened(WindowEvent e){} }); Rdm=new java.util.Random(); setBackground(Color.white); new javax.swing.Timer(1000,new ActionListener(){//mengatur kecepatan detik 1 detik 1000 ms publicvoid actionPerformed(ActionEvent ev){ repaint(); PusatX=getWidth()/2; PusatY=getHeight()/2; xorR=Rdm.nextInt(255); xorG=Rdm.nextInt(255); xorB=Rdm.nextInt(255); } }).start(); } publicstaticvoid main(String[]a){ new Tugas3_JamAnalog().setVisible(true); } publicvoid paint(Graphics G){ G.setColor(Color.black);//warna jam int pjg; if(getWidth()
131

G.fillOval((int)(PusatX+Math.sin(30*Math.PI*I/180)*pjg/2),(int) (PusatY+Math.cos(30*Math.PI*I/180)*-1*pjg/2),5,5); G.drawString(""+I,(int)(PusatX+Math.sin(30*Math.PI*I/180)*pjg/2 .2),(int)(PusatY+Math.cos(30*Math.PI*I/180)*-1*pjg/2.2)); } float Detik=Waktu(Calendar.SECOND)+(float)Waktu(Calendar.MILLISECOND) /1000; G.drawLine(PusatX,PusatY,(int)(PusatX+(Math.sin(2*Math.PI*Detik /60)*pjg/2)),(int)(PusatY+(1*Math.cos(2*Math.PI*Detik/60)*pjg/2))); float Menit=Waktu(Calendar.MINUTE)+(float)Detik/60; G.drawLine(PusatX,PusatY,(int)(PusatX+(Math.sin(2*Math.PI*Menit /60)*pjg/2.1)),(int)(PusatY+(1*Math.cos(2*Math.PI*Menit/60)*pjg/2.1))); float Jam=Waktu(Calendar.HOUR)+(float)Menit/60; G.drawLine(PusatX,PusatY,(int)(PusatX+(Math.sin(2*Math.PI*Jam/1 2)*pjg/2.3)),(int)(PusatY+(1*Math.cos(2*Math.PI*Jam/12)*pjg/2.3))); G.fillOval(PusatX-5,PusatY-5,10,10); } privateint Waktu(int Jenis){ return Calendar.getInstance().get(Jenis);//mengambil nilai jam di komputer } }

132

Tampilan Output Program

Gambar 5. 8 Hasil kompilasi program

133

EVALUASI

1. Source code di atas adalah source code untuk layout tipe Grid Layout. Berapakah ukuran kolom dari frame yang diatur oleh Grid Layout tersebut? a. b. c. d.

2 3 4 5

2. Perhatikan potongan source code di atas. Apakah yang terjadi jika pada Check Box 2 juga bernilai true? a. b. c. d.

Kedua check box akan terpilih Error saat kompilasi program Hanya check box 2 yang terpilih Hanya Check box 1 yang terpilih

3. Perhatikan potongan source code di atas. Apakah yang terjadi jika pada Check Box 2 dan 3 juga bernilai true? a. b. c. d.

Kedua check box akan terpilih Error saat kompilasi program Hanya check box 2 yang terpilih Hanya Check box 3 yang terpilih

4. Tahap ke 4 dalam membangun koneksi database berbasis JDBC adalah a. Connection 134

b. Driver c. Result Set d. Statement 5. Tahap ke 2 dalam membangun koneksi database berbasis JDBC adalah a. Connection b. Driver c. Result Set d. Statement 6. Input tombol Del pada Keyboard dapat diterima dengan fungsi … a. KeyTyped(…) b. KeyPressed(…) c. MouseClicked(…) d. MouseEntered(…) 7. Input tombol Alt pada Keyboard dapat diterima dengan fungsi … a. KeyTyped(…) b. KeyPressed(…) c. MouseClicked(…) d. MouseEntered(…) 8. Tuliskan SQL code yang mampu melakukan insert data pada database dari hasil input yang diberikan pada JTextField1 yang diberi nama variabel nama dan JTextField2 yang diberi nama variabel nisn a. string s = “INSERT INTO data_siswa VALUES(„”+this.nama+”‟,‟”+this.nisn+”‟)”; b. String s = “INSERT INTO data_siswa VALUES(„”+this.nama+”‟,‟”+this.nisn+”)”; c. String s = “INSERT INTO data_siswa VALUES(”+this.nama+”,”+this.nisn+”)”; d. String s = “INSERT INTO data_siswa VALUES(„”+this.nama+”‟,‟”+this.nisn+”‟)”;

9. 135

Periksalah code di atas. Analisis yang tepat jika code tersebut dijalankan adalah a. Ukuran button kiri dan kanan akan berukuran sama b. tampilan hgap dan vgap berukuran sama c. Akan menampilkan frame dengan layout Atas, Bawah, Kiri, Kanan dan Tengah d. Jika dikompilasi, maka program akan menampilkan Compile Error

10. Periksalah method paint di atas. Analisis yang tepat jika code tersebut dijalankan adalah a. b. c. d.

Menampilkan kurva dengan titik balik di kanan atas Menampilkan kurva dengan titik balik di kiri atas Menampilkan kurva dengan titik balik di kiri bawah Menampilkan kurva dengan titik balik di kanan bawah

11. Bagaimanakah alur dari method paint di atas ? a. Jika method diatas dipanggil, maka akan menampilkan suatu objek oval dengan lebar w = 200 pixel dan tinggi h = 150 pixel b. Jika method di atas dipanggil, maka akan menampilkan suatu objek oval dengan tinggi h = 200 pixel dan lebar w = 150 pixel c. Jika method di atas dipanggil, maka akan menampilkan suatu objek oval dengan tinggi x = 150 pixel dan lebar y = 200 pixel d. Jika method di atas dipanggil, maka akan menampilkan suatu objek oval nilai y = 200 pixel dan x = 150 pixel

12.

136

Code yang dapat menghasilkan tampilan gradient seperti gambar di atas adalah a. GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true);

b. GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.blue, true);

c. GradientPaint gp4 = new GradientPaint(25, 25, Color.black, 15, 25, Color.blue, true);

d. GradientPaint gp4 = new GradientPaint(25, 25, Color.black, 15, 25, Color.black, true);

13. Code yang mampu menghasilkan tampilan seperti gambar berikut adalah

a. @Override public void paint(Graphics g) { Arc2D.Float arc = new Arc2D.Float(Arc2D.PIE); arc.setFrame(70, 200, 150, 150); arc.setAngleStart(0); arc.setAngleExtent(145); Graphics2D g2 = (Graphics2D) g; g2.setColor(Color.gray); g2.draw(arc); g2.setColor(Color.red); g2.fill(arc);

137

b. @Override public void paint(Graphics g) { Arc2D.Float arc = new Arc2D.Float(Arc2D.PIE); arc.setFrame(70, 200, 150, 150); arc.setAngleStart(0); arc.setAngleExtent(0); Graphics2D g2 = (Graphics2D) g; g2.setColor(Color.gray); g2.draw(arc); g2.setColor(Color.red); g2.fill(arc);

c. @Override public void paint(Graphics g) { Arc2D.Float arc = new Arc2D.Float(Arc2D.PIE); arc.setFrame(70, 200, 150, 150); arc.setAngleStart(145); arc.setAngleExtent(0); Graphics2D g2 = (Graphics2D) g; g2.setColor(Color.gray); g2.draw(arc); g2.setColor(Color.red); g2.fill(arc);

d. @Override public void paint(Graphics g) { Arc2D.Float arc = new Arc2D.Float(Arc2D.PIE); arc.setFrame(70, 200, 150, 150); arc.setAngleStart(145); arc.setAngleExtent(145); Graphics2D g2 = (Graphics2D) g;

138

g2.setColor(Color.gray); g2.draw(arc); g2.setColor(Color.red); g2.fill(arc);

14. Code yang dapat menghasilkan tampilan gradient seperti gambar di atas adalah a. GradientPaint gp1 = new GradientPaint(5, 5, Color.red, 20, 20, Color.black, true);

b. GradientPaint gp1 = new GradientPaint(5, 5, Color.black, 20, 20, Color.red, true);

c. GradientPaint gp1 = new GradientPaint(20, 20, Color.red, 5, 5, Color.bclk, true);

d. GradientPaint gp1 = new GradientPaint(5, 5, Color.red, 20, 20, Color.black, not false);

15. Code yang mampu menghasilkan tampilan persegi seperti gambar berikut adalah

a. import java.awt.Graphics; import javax.swing.JComponent; import javax.swing.JFrame; class MyCanvas extends JComponent {

139

publicvoid paint(Graphics g) { g.drawRect (10, 10, 200, 200); } } publicclass DrawRect { publicstaticvoid main(String[] a) { JFrame window = new JFrame(); window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); window.setBounds(30, 30, 300, 300); window.getContentPane().add(new MyCanvas()); window.setVisible(true); } }

b. import java.awt.Graphics; import javax.swing.JComponent; import javax.swing.JFrame; class MyCanvas extends JComponent { publicvoid paint(Graphics g) { g.drawRect (200, 10, 100, 200); } } publicclass DrawRect { publicstaticvoid main(String[] a) { JFrame window = new JFrame(); window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); window.setBounds(30, 30, 300, 300); window.getContentPane().add(new MyCanvas()); window.setVisible(true); } }

c. import java.awt.Graphics; import javax.swing.JComponent; import javax.swing.JFrame; class MyCanvas extends JComponent { publicvoid paint(Graphics g) { g.drawRect (10, 10, 200, 150); } }

140

publicclass DrawRect { publicstaticvoid main(String[] a) { JFrame window = new JFrame(); window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); window.setBounds(30, 30, 300, 300); window.getContentPane().add(new MyCanvas()); window.setVisible(true); } }

d. import java.awt.Graphics; import javax.swing.JComponent; import javax.swing.JFrame; class MyCanvas extends JComponent { publicvoid paint(Graphics g) { g.drawRect (10, 10, 150, 510); } } publicclass DrawRect { publicstaticvoid main(String[] a) { JFrame window = new JFrame(); window.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); window.setBounds(30, 30, 300, 300); window.getContentPane().add(new MyCanvas()); window.setVisible(true); } }

141

KUNCI JAWABAN

1. B 2. C 3. D 4. C 5. A 6. B 7. B 8. D 9. D 10. B 11. A 12. A 13. A 14. A 15. A

142

143

DAFTAR PUSTAKA

___.

2012. Custom Graphics, (online). (https://www3.ntu.edu.sg/home/ehchua/programming/java/J4b_CustomGra phics.html), diakses pada 20 Oktober 2015

___. 2012. Java Game Programming 2D Graphics, Java2D and Images, (online).(http://www3.ntu.edu.sg/home/ehchua/programming/java/j8b_game _2dgraphics.html), diakses pada 20 Oktober 2015 ___.

2012. Menampilkan Data ke JTable, (online). (http://tutorialjavanetbeansmysql.blogspot.co.id/2012/03/menampilkandata-dalam-jtable-tetetete.html), diakses pada 25 Oktober 2015

___. 2012. Mengenal Action atau Event Listener pada Java, (online). (http://tutorialjavanetbeansmysql.blogspot.co.id/2012/06/mengenal-actionatau-event-listener.html), diakses pada 25 Oktober 2015 ___.

2012. Mengenal Lebih Jauh Event Di Java, (online). (http://tutorialjavanetbeansmysql.blogspot.co.id/2012/06/mengenal-lebihjauh-event-di-java.html), diakses pada 25 Oktober 2015

____.. What is the Difference Between Precision and Scale in Oracle, (online). (http://stackoverflow.com/questions/5689369/what-is-the-differencebetween-precision-and-scale-in-oracle), diakses pada 20 Oktober 2015 ____.2012. Membuat Animasi Gambar Bergerak, (online) (http://javalfi.blogspot.co.id/2012/10/membuat-animasi-gambar-gerak.html), diakses pada 10 Oktober 2015 Akakom. 2009. Panduan Praktikum PBO 2 Manajemen Informatioa 2009, (online).(http://ns.akakom.ac.id/~kurikulum2009/lokakarya%20%20pandua n%20prakitkum_1921Jan2010/Panduan%20Praktikum%202009_1/PBO2_MI/), diakses 26 Oktober 2015 Ardie. 2014. Tutorial Java Desktop 2 Melakukan Koneksi ke Database JavaDB, (online).(http://jagocoding.com/tutorial/468/Tutorial_Java_Desktop_2_Mela kukan_Koneksi_ke_Database_JavaDB), diakses pada 10 Oktober 2015 Bima, Ifnu. ____. Jawa Swing, (online). (https://projecttemplate.googlecode.com/files/swing-excerpt.pdf), diakses pada 12 Oktober 2015 Bodnar. ____. Transformations, (online), (http://zetcode.com/gfx/java2d/transformations/), diakses pada 10 Oktober 2015 144

Bodnar.___. Painting in Swing, (online), (http://zetcode.com/gfx/java2d/transformations/), diakses pada 15 Oktober 2015 Bodnar.___. Painting in Swing, (online), (http://zetcode.com/tutorials/javaswingtutorial/painting/), diakses pada 15 Oktober 2015 Bodnar.___. Text and Fonts, (online), (http://zetcode.com/gfx/java2d/textfonts/), diakses pada 15 Oktober 2015 _____.2012. DATABASE & PEMBUATAN LAPORAN, (http://dokumen.tips/documents/bahasa-pemrograman3-java-guidatabase.html), diakses pada 12 Oktober 2015

(online).

Edik. 2009. Setting JDBC Untuk Oracle 10g Express Edition, (online). (khannedy.com/2009/03/08/setting-jdbc-untuk-oracle-10g-express-editiondi-netbeans-2/), diakses pada 15 Oktober 2015 Diana. ___. MIDLet, (online). (http://sendy_diana.staff.gunadarma.ac.id/Downloads/files/26548/PENGEN ALAN+JAVA+BAB+8.doc), diakses pada 23 Oktober 2015 Gata, W. 2005. GUI, ERROR EXCEPTION, THREAD, I/O (INPUT/OUTPUT), (online). (http://dokumen.tips/documents/bahasa-pemrograman3-java-guidatabase.html), diakses pada 23 Oktober 2015 Java

Tutorial.___. Draw Rectangle, (http://www.java2s.com/Tutorial/Java/0261__2DGraphics/0360__Rectangle.htm), diakses pada 15 Oktober 2015

(online).

Jayadi, P. 2014. CRUD dengan Java, (online). (http://puguhjayadi.blogspot.co.id/2014/10/crud-dengan-java-danoracle.html), diakses pada 14 Oktober 2015 Kukuh. 2014. Tugas Praktikum Simbada Oracle Dan Netbeans, (online). (http://kukuhbonanza.blogspot.co.id/2014/02/tugas-praktikum-simbadaoracle-dan.html), diakses pada 10 Oktober 2015 Kustiawan, R. 2011. Swing, (online). (https://ratnokustiawan.files.wordpress.com/2011/03/swing.pdf), diakses 25 September 2015 Michael, Ben. 2014. Making a simple Java Calculator in Netbeans 7.4, (online). (http://www.howsto.com/ken-michael/making-a-simple-java-calculator-innetbeans-7-4), diakses pada 20 Oktober 2015

145

Oracle Document. 2015. Graphics (Java Platform SE 7 b99), (online) (http://docs.oracle.com/javase/7/docs/api/java/awt/Graphics.html), diakses pada 10 Oktober 2015 Putra, Ondra. 2015. Dasar-dasar JAVA GUI - SWING - Event handlingNetbeans, (online). (http://uniqosmart.blogspot.co.id/2015/04/dasar-dasarjava-gui-swing-event.html), diakses 15 Oktober 2015 ____.

2014. Transformasi 2D, (online).(pdf.nscpolteksby.ac.id/2Transformasi%202D-20140317.pdf), diakses 15 Oktober 2015

Renitha. 2013. Transformasi Objek, (online). (http://pendtiumrenitha.blogspot.co.id/2013/04/transformasiobjek.html#sthash.dQ8Hfhl2.dpuf), diakses pada 12 Oktober 2015 Rohim, Abdul. 2013. Program Kalkulator Sederhana Menggunakan Java Netbeans, (online). (http://www.dendicious.com/2013/11/programkalkulator-sederhana.html), diakses pada 12 Oktober 2015 JENI Center.AWT Swing, (online). (http://www.dendicious.com/2013/11/programkalkulator-sederhana.html), diakses pada 13 Oktober 2015 TutorialsPoint.___. AWT Quick Guide, (online). (http://www.tutorialspoint.com/awt/awt_quick_guide.htm), diakses pada 27 September 2015

146

GLOSARIUM

Istilah Deskripsi Abstract Windowing Suatu model pengembangan bahasa JAVA Toolkit (AWT) native, dimana kode program masih bersifat primitif ActionListener Bereaksi atas perubahan mouse atau atau keyboard. Method pada event listener ini adalah actionperformed(actionevent). BorderLayout Model layout membagi kontainer menjadi lima bagian diantaranya utara, selatan, timur, barat, dan tengah Class AWTEvent Akar dari semua awtbased events Class Color kelas yang dapat memberikan warna terhadap objek gambar/tulisan yang terdapat pada Frame Class Font merupakan kelas yang dapat menampilkan tulisan pada frame dengan warna-warna tertentu Connection langkah kedua setelah langkah inisialisasi Driver untuk melakukan koneksi database Create/Insert Untuk menambahkan record pada database Database suatu struktur penyimpanan data, dimana tujuan penyimpanan tersebut akan mengolah suatu data seperti melakukan insert database, update database, read database dan delete database Delegation of Event Mekanisme event handling tentang bagaimana Model program merespon input user Delete Berkaitan dengan operasi untuk menghapus suatu record dalam database Drag and Drop Suatu metode pengembangan komponen GUI dengan cara drag kemudian drop komponen ke frame yang dikehendaki drawLine() Method untuk membuat objek garis drawLine() Method untuk membuat objek garis Driver suatu driver yang menjadi identitas koneksi database yang dilakukan Event Kejadian yang mucul ketika seorang user berinteraksi dengan suatu aplikasi 147

Istilah Event listeners

Deskripsi Berita dari event-event dan proses-proses interaksi user Event handling Suatu proses penanganan interaksi yang diberikan pada aplikasi, dimana penanganan tersebut berupa pemberian respon terhadap input yang ada Event Object Event yang ditampilkan oleh object Event Source Komponen GUI yang men-generate event fillRect(int x, int y, Mengisi sesuatu pada bujur sangkar yang int width, int height) dipilih fillRect(int x, int y, Mengisi sesuatu pada bujur sangkar yang int width, int height) dipilih FlowLayout model layout yang cara peletakan komponennya dimulai dari kiri ke kanan dan dari atas ke bawah, dimulai dari pojok kiri atas Focus Listener merupakan event listener dari FocusEvent, pada interface ini terdapat 2 method : a. focusGained(FocusEvent) b. focusLast(FocusEvent) Frame Turunan dari window class. Window dengan judul, menubar, border dan pengatur ukuran di pojok. Memiliki empat konstruktor , dua diantaranya memiliki penulisan seperti dibawah ini : Graphics2D sub kelas dari kelas Graphics yang terdapat pada bahasa JAVA Graphics2D sub kelas dari kelas Graphics yang terdapat pada bahasa JAVA GridLayout Model layout yang membagi kontainer menjadi baris dan kolom Handling proses penanganan terhadap event yang terjadi Istilah Deskripsi JApplet Turunan dan korepondensi ke Applet class dalam package AWT. Juga sedikit tidak cocok dengan applet class dalam kaitannya dengan menambahkan komponen pada container JApplet Turunan dan korepondensi ke Applet class dalam package AWT. Juga sedikit tidak cocok dengan applet class dalam kaitannya dengan menambahkan komponen pada container Java Database suatu fungsi dalam java yang menghubungkan Connectivity (JDBC) aplikasi yang dibangun dengan menggunakan bahasa Java dengan database JAVA GUI Model layout program JAVA yang menampilkan layout dengan model grafik dengan menampilkan beberapa komponen tidak hanya text

148

Istilah Java.awt.Graphics

JButton JCheckBox JColorChooser JComponent

JDBC API

JDBC Driver Manager

JDBC TestSuite

JDBC-ODBC Bridge

JDialog

JDialog

JFileChooser

JFileChooser

JFrame

JFrame

Deskripsi Teknologi grafis yang mampu melakukan rendering grafis dengan jenis teks, gambar vektor dan gambar bitmap Tombol “push”. Korespondesi pada button class dalam package AWT Item yang dapat dipilih atau tidak oleh pengguna. Korespondensi pada Turunan Jcomponent. Mengijinkan pengguna untuk memilih warna Kelas induk untuk semua komponen Swing, tidak termasuk top-level container checkbox class dalam package AWT Penyedia metode akses sederhana ke sumber data relational (RDBMS) menggunakan pemrograman Java Defisikan object-object yang dapat digunakan untuk melakukan koneksi ke sebuah sumber data membantu untuk mencara driver mana yang cocok digunakan untuk melakukan sebuah koneksi ke sumber data tertentu Penyedia fasilitas JDBC untuk melakukan koneksi ke sumber data menggunakan ODBC (Open DataBase Connectivity) driver Turunan dan korespondensi pada dialog class dalam package AWT. Biasanya digunakan untuk menginformasikan sesuatu kepada pengguna atau prompt pengguna untuk input. Turunan dan korespondensi pada dialog class dalam package AWT. Biasanya digunakan untuk menginformasikan sesuatu kepada pengguna atau prompt pengguna untuk input. Mengijinkan pengguna untuk memilih sebuah file. Korespondensi pada cfilechooser class dalam package AWT Mengijinkan pengguna untuk memilih sebuah file. Korespondensi pada cfilechooser class dalam package AWT Turunan dan korepondensi pada frame class dalam package AWT tetapi keduanya sedikit tidak cocok dalam kaitannya dengan menambahkan komponen pada kontainer. Perlu mendapatkan content pane yang terbaru sebelum menambah sebuah komponen. Turunan dan korepondensi pada frame class dalam package AWT tetapi keduanya sedikit tidak cocok dalam kaitannya dengan menambahkan komponen pada kontainer. Perlu 149

Istilah

JOptionPane

JOptionPane

JPanel

JPanel

JTextField

JTextField

KeyListener

Komponen

Kontainer

Layout MouseListener

MouseMotionListener Interface

150

Deskripsi mendapatkan content pane yang terbaru sebelum menambah sebuah komponen. Turunan Jcomponent. Disediakan untuk mempermudah menampilkan pop- up kotak dialog. Turunan Jcomponent. Disediakan untuk mempermudah menampilkan pop- up kotak dialog. Turunan Jcomponent. Kontainer class sederhana tetapi bukan top-level. Korespondensi pada panel class dalam package AWT. Turunan Jcomponent. Kontainer class sederhana tetapi bukan top-level. Korespondensi pada panel class dalam package AWT. Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. Untuk memberikan reaksi terhadap interaksi yang terdapat pada keyboard. Setidaknya terdapat 3 method yang digunakan dalam listener ini, yaitu: a. keyPressed(KeyEvent) b. keyReleased(KeyEvent) c. keyTyped(KeyEvent) Abstract Class untuk objek yang dapat ditampilkan pada console dan berinteraksi dengang user. Bagian utama dari semua kelas AWT. Abstract Subclass dari Component Class. Sebuah komponen yang dapat menampung komponen yang lainnya. Suatu pengaturan tampilan pada Frame Bereaksi atas pergerakan mouse. Terdapat setidaknya 5 method yang terdapat pada event listerner ini: a. mouseClicked(MouseEvent) b. mousePressed(MouseEvent) c. mouseReleased(MouseEvent) d. mouseEntered(MouseEvent) e. mouseExited(MouseEvent) Untuk mendukung event MouseListener. Menyediakan method yang akan memantau pergerakan mouse, seperti drag dan

Istilah

NetBeans

Panel

Read/View ResultSet Rotasi

Scalling Statement Swing

Thread

Transformasi

Translasi

Update Viewport Window

WindowListener

Deskripsi pemindahan mouse. Method yang digunakan oleh interface ini adalah mouseDragged(MouseEvent) Suatu tool untuk membuat program dengan menggunakan bahasa pemrograman Java berbasis grafis maupun teks Turunan dari Container Class. Sebuah frame atau window tanpa titlebar, menubar tidak termasuk border. Superclass dari applet class. Menampilkan record database variabel hasil operasi query yang dijalankan Bentuk transformasi yang digunakan untuk memutar posisisuatu benda terhadap suatu titik kordinat Bentuk transformasi yang dapat mengubah ukuran (besar maupun kecilnya) suatu objek Kelas pada Java yang digunakan untuk mengeksekusi suatu query Swing merupakan suatu cara untuk pembuatan aplikasi yang berbasis GUI (Graphical User Interface) di Java dengan pendekatan yang lebih baru dan lebih bagus hasilnya Suatu metode untuk memproses suatu proses program dengan cara mengakses suatu modul program yang dieksekusi secara urut ataupun bersamaan Suatu operasi memodifikasi bentuk objek tanpa merusak bentuk dasar dari objek yang ditransformasikan Bentuk transformasi yang memindahkan posisi suatu objek, baik pada sumbu x, sumbu y, atau bahkan sumbu z (jika pada objek 2 dimensi maka yang berpindah adalah sumbu x dan y saja) Memperbarui record dari database berdasarkan kategori tertentu Pemetaan tampilan layar sehingga objek dapat terlihat pada titik kordinat tertentu Turunan dari Container class. Top level window, dimana berarti tidak bisa dimasukkan dalam objek yang lainnya.Tidak memiliki border dan menubar. Bereaksi atas perubahan window. Terdapat setidaknya 4 method pada listener ini, yaitu: a. windowClosing(WindowEvent) b. windowOpened(WindowEvent) c. windowActived(WindowEvent) d. windowDeactived(WindowEvent) 151

152

MODUL PROFESIONAL PEMBINAAN KARIER

Recommend Documents