MODUL PROFESIONAL PEMBINAAN KARIER

Transkripsi

1 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

2 Penulis: 1. Joko Pitono Emai: Penelaah: 1. Siarra Maulida Asrin, S.T [ ], 2. Abdul Haliq, S.Pd., M.Pd., [ ] abdulhaliq88@gmail.com 3. Drs. Muhammad Mappeasse, M.Pd. [ ] mappeasseyusuf@yahoo.co.id Ilustrator : 1. Sierra Maulida Asrin, S.T [ ] siera.asrin@gmail.com 2. Faizal Reza Nurzeha, A.Md. [ ] faizarezanurzeha@gmail.com Layouter : 1. Syamsul Hidayat, A.Md. [ ] sh92ciamis@gmail.com 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

3 iii

4 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 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 iv

5 v

6 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 untuk institusi penyelenggara program pengembangan keprofesian berkelanjutan merupakan 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 vi

7 vii

8 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 Cara Penggunaan Modul Kebutuhan Minimal Penggunaan Cara Instalasi Program Pendukung... 3 A. Instalasi JDK B. Instalasi Netbeans C. Instalasi Oracle XE 10g Database... 8 MEMBUAT KOMPONEN GUI BERBASIS AWT (ABSTRACT WINDOW TOOLKIT) A. TUJUAN B. INDIKATOR PENCAPAIAN KOMPETENSI C. URAIAN MATERI Abstract Windowing Toolkit (AWT) Window Classes Fundamental Komponen didalam AWT Layout Manager didalam AWT D. AKTIVITAS PEMBELAJARAN E. LATIHAN/ KASUS /TUGAS viii

9 F. RANGKUMAN G. UMPAN BALIK DAN TINDAK LANJUT H. KUNCI JAWABAN Source Code Jawaban Output Source Code MEMBUAT KOMPONEN GUI BERBASIS SWING A. TUJUAN B. INDIKATOR PENCAPAIAN KOMPETENSI C. URAIAN MATERI Java Swing Komponen didalam Swing Layout Manager didalam Swing D. AKTIVITAS PEMBELAJARAN E. LATIHAN/ KASUS /TUGAS Tampilan Program Format Layout Program F. RANGKUMAN G. UMPAN BALIK DAN TINDAK LANJUT H. KUNCI JAWABAN Source Code Program Tampilan Program MEMBUAT KOMPONEN GUI BERBASIS DRAG AND DROP DENGAN NETBEANS A. TUJUAN B. INDIKATOR PENCAPAIAN KOMPETENSI C. URAIAN MATERI Definisi Netbeans Bekerja dengan Netbeans D. AKTIVITAS PEMBELAJARAN E. LATIHAN/ KASUS /TUGAS Output Program Properties Komponen Program F. RANGKUMAN G. UMPAN BALIK DAN TINDAK LANJUT ix

10 H. KUNCI JAWABAN Source Code Program Tampilan Program EVENT HANDLING KOMPONEN GUI A. TUJUAN B. INDIKATOR PENCAPAIAN KOMPETENSI C. URAIAN MATERI Pengertian Event Handling Class Event Event Listeners D. AKTIVITAS PEMBELAJARAN E. LATIHAN/ KASUS /TUGAS F. RANGKUMAN G. UMPAN BALIK DAN TINDAK LANJUT H. KUNCI JAWABAN Source Code Program Output Tampilan Program MEMBUAT TRANSFORMASI DENGAN KELAS GRAPHIC A. TUJUAN B. INDIKATOR PENCAPAIAN KOMPETENSI C. URAIAN MATERI Konsep Dasar Transformasi Objek Translasi Objek Rotasi Objek Pengubahan Skala Objek/Scalling Object Animasi Objek D. AKTIVITAS PEMBELAJARAN E. LATIHAN/ KASUS /TUGAS F. RANGKUMAN G. UMPAN BALIK DAN TINDAK LANJUT H. KUNCI JAWABAN Source Code Program Tampilan Output Program x

11 EVALUASI KUNCI JAWABAN DAFTAR PUSTAKA GLOSARIUM xi

12 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 GAMBAR 16 PEMILIHAN DIREKTORI INSTALASI APLIKASI ORACLE XE GAMBAR 17 PENULISAN PASSWORD UNTUK LOGIN DATABASE ORACLE XE GAMBAR 18 TAMPILAN PORT PENTING DALAM DATABASE ORACLE GAMBAR 19 PROSES INSTALASI APLIKASI ORACLE XE GAMBAR 20 PROSES INSTALASI APLIKASI ORACLE XE TELAH SELESAI GAMBAR 1. 1 TAMPILAN OUTPUT FRAME GAMBAR 1. 2 TAMPILAN OUTPUT FRAME DENGAN PANEL GAMBAR 1. 3 TAMPILAN KOMPONEN AWT PADA FRAME GAMBAR 1. 4 TAMPILAN FRAME DENGAN FLOW LAYOUT GAMBAR 1. 5 TAMPILAN FRAME DENGAN BORDER LAYOUT GAMBAR 1. 6 TAMPILAN FRAME DENGAN GRID LAYOUT GAMBAR 1. 7 TAMPILAN APLIKASI GUI AWT YANG DIBUAT GAMBAR 1. 8 TAMPILAN PROGRAM GAMBAR 1. 9 TAMPILAN FORM DATA ALUMNI xii

13 GAMBAR 2. 1 TAMPILAN FRAME DENGAN FLOW LAYOUT GAMBAR 2. 2 TAMPILAN JOPTIONPANE GAMBAR 2. 3 TAMPILAN FRAME DENGAN FLOW LAYOUT SWING GAMBAR 2. 4 TAMPILAN FRAME DENGAN GRID LAYOUT SWING GAMBAR 2. 5 TAMPILAN APLIKASI SWING GUI YANG DIBUAT GAMBAR 2. 6 HASIL TAMPILAN PROGRAM GAMBAR 2. 7 SPESIFIKASI LAYOUT TAMPILAN PROGRAM GAMBAR 2. 8 TAMPILAN PROGRAM FORM PENDAFTARAN SISWA BARU GAMBAR 3. 1 MEMBUKA NETBEANS LEWAT START MENU GAMBAR 3. 2 MEMBUAT PROJECT BARU DARI NETBEANS GAMBAR 3. 3 MEMBUAT APLIKASI JAVA APPLICATION GAMBAR 3. 4 MENENTUKAN LOKASI PENYIMPANAN PROJECT JAVA GAMBAR 3. 5 MEMBUAT FRAME BARU PADA PROJECT NETBEANS GAMBAR 3. 6 TULIS NAMA FORM YANG DIBUAT GAMBAR 3. 7 TAMPILAN FORM YANG DI BUAT GAMBAR 3. 8 MENU FILE UNTUK MEMBUAT PROJECT JAVA GAMBAR 3. 9 MEMBUAT PROJECT JAVA GAMBAR MENULISKAN NAMA PROJECT DAN LOKASI PENYIMPANANNYA GAMBAR MENAMBAHKAN FORM PADA PROJECT YANG DIBUAT GAMBAR MENULISKAN NAMA FORM GAMBAR MEMILIH BAGIAN PREFERREDSIZE PADA PROPERTIES GAMBAR MENGATUR LEBAR DAN TINGGI FRAME YANG DIBUAT GAMBAR DRAG KOMPONEN PANEL KE FORM GAMBAR HASIL KOMPONEN LABEL GAMBAR MENGGANTI TULISAN PADA JLABEL GAMBAR MENGGANTI TIPE DAN UKURAN HURUF PADA JLABEL GAMBAR SEBELUM VARIABLE NAME DIGANTI GAMBAR SESUDAH DIGANTI GAMBAR LAYOUT AWAL APLIKASI GAMBAR LAYOUT TEXT FIELD GAMBAR LAYOUT APLIKASI SETELAH DITAMBAHKAN BUTTON GAMBAR LAYOUT APLIKASI SETELAH DITAMBAHKAN TABEL GAMBAR KLIK KANAN TABEL YANG DITAMBAHKAN xiii

14 GAMBAR KONTEN TABEL YANG DIEDIT GAMBAR LAYOUT AWAL APLIKASI GAMBAR PEMILIHAN KELAS UTAMA APLIKASI YANG DIBUAT GAMBAR APLIKASI GUI DENGAN DRAG AND DROP YANG DIBUAT GAMBAR TAMPILAN KALKULATOR YANG DI BUAT GAMBAR TAMPILAN RUNNING SOURCE CODE GAMBAR 4. 1 DELEGATION OF EVENT MODEL GAMBAR 4. 2 ACTIONLISTENER SEBELUM DAN SESUDAH DI KLIK GAMBAR 4. 3 JIKA MOUSE KELUAR DARI FRAME GAMBAR 4. 4 JIKA MOUSE PADA FRAME GAMBAR 4. 5 JIKA MOUSE DI KLIK GAMBAR 4. 6 JIKA MOUSE DI TEKAN GAMBAR 4. 7 AWAL PROGRAM DIJALANKAN GAMBAR 4. 8 JIKA TOMBOL S DI TEKAN GAMBAR 4. 9 JIKA TOMBOL S DI LEPAS GAMBAR MENGAKSES MENU SOURCE GAMBAR MENGAKSES EVENT KEYTYPED TEXT FIELD GAMBAR MEMBERIKAN EVENT PADA BUTTON SIMPAN GAMBAR PENGATURAN JUMLAH BARIS MENJADI GAMBAR VALIDASI INPUT NIS GAMBAR VALIDASI INPUT NAMA GAMBAR VALIDASI INPUT NILAI GAMBAR DATA YANG DI INPUTKAN GAMBAR TAMPILAN DATA BERHASIL DI INPUT PADA TABEL GAMBAR OUTPUT TAMPILAN PROGRAM xiv

15 xv

16 DAFTAR TABEL TABEL 1. 1 KELAS DIDALAM AWT TABEL 1. 2 KOMPONEN AWT TABEL 1. 3 KONSTRUKTOR FLOWLAYOUT TABEL 1. 4 KONSTRUKTOR BORDERLAYOUT TABEL 1. 5 KONSTRUKTOR GRID LAYOUT TABEL 2. 1 KOMPONEN SWING TABEL 4. 1 EVENT SOURCE PADA JAVA TABEL 4. 2 CLASS-CLASS AWT EVENT TABEL 4. 3 EVENT LISTENER PADA JAVA xvi

17 xvii

18

19 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

20 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

21 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-8u60- windows-i586.exe. Pilih Next pada langkah berikut Gambar 1 Saat aplikasi JDK pertama kali dibuka untuk instalasi 2) Pilih Next 3

22 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

23 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 ) 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

24 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

25 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

26 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

27 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

28 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

29 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

30 8) instalasi sudah selesai, kemudian pilih Finish Gambar 20 Proses Instalasi Aplikasi Oracle XE Telah Selesai 9) Konfigurasi database (akan dijelaskan pada modul Kegiatan Pembelajaran 5) 12

31 13

32 14

33 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

34 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

35 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

36 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

37 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 dalam menetapkan panduan perancangan, menentukan konteks penggunaan dan melaksanakan 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

38 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

39 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

40 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

41 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

42 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 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 4) Buat setiap ikon yang berbeda. 5) Hindari rincian yang berlebihan. 24

43 4. Abstract Windowing Toolkit (AWT) The Java Foundation Class (JFC), merupakan bagian penting dari Java SDK, yang termasuk dalam koleksi dari API dimana dapat mempermudah pengembangan 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 API yang mengimplementasikan beberapa jenis bagian dari AWT. 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: Kelas AWT Komponen Kontainer Panel Window Frame Tabel 1. 1 Kelas didalam AWT 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

44 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

45 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

46 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

47 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

48 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. Konstruktor FlowLayout() FlowLayout(int align) FlowLayout(int align, int hgap, int vgap) Tabel 1. 3 Konstruktor FlowLayout 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 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

49 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. Konstruktor BorderLayout() BorderLayout(int hgap, int vgap) Tabel 1. 4 Konstruktor Border Layout 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

50 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); Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut: 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

51 Konstruktor GridLayout() GridLayout(int rows, int cols) GridLayout(int rows, int cols, int hgap, int vgap) Tabel 1. 5 Konstruktor GridLayout 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); berikut: Jika kode tersebut dieksekusi, maka akan menampilkan output seperti 33

52 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

53 /* 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

54 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

55 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

56 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 HASIL YANG DICAPAI YA TIDAK RENCANA TINDAK LANJUT 38

57 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

58 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

59 41

60 42

61 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

62 Seperti pada package AWT, package dari Swing menyediakan banyak kelas untuk membuat aplikasi GUI. Package tersebut dapat ditemukan di javax.swing. Perbedaan utama antara keduanya adalah komponen Swing ditulis menyeluruh menggunakan Java 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. Komponen Swing JComponent JButton JCheckBox JFileChooser Tabel 2. 1 Komponen Swing 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 JTextField Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. JFrame 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. 44

63 Komponen Swing JPanel JApplet 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 JOptionPane Turunan Jcomponent. Disediakan untuk mempermudah menampilkan pop- up kotak dialog. JDialog Turunan dan korespondensi pada dialog class dalam package AWT. Biasanya digunakan untuk menginformasikan sesuatu kepada pengguna atau prompt pengguna untuk input. JColorChooser JFileChooser Turunan Jcomponent. Mengijinkan pengguna untuk memilih warna Mengijinkan pengguna untuk memilih sebuah file. Korespondensi pada cfilechooser class dalam package AWT JTextField Mengijinkan untuk mengedit text satu baris. Korespondensi pada textfield class dalam package AWT. JFrame JPanel 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. JApplet Turunan dan korepondensi ke Applet class dalam package AWT. Juga sedikit tidak cocok dengan applet class dalam kaitannya dengan menambahkan komponen pada container JOptionPane Turunan Jcomponent. Disediakan untuk JDialog 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

64 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 Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut: Gambar 2. 1 Tampilan Frame dengan Flow Layout Contoh 2, Membuat MessageBox dengan Swing: JOptionPane Perhatikan source code berikut, kode di bawah akan membuat suatu 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

65 new CobaOptionPane().launchFrame(); Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut: 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

66 p2.add(b5); p2.add(b6); f.add("north", p2); f.pack(); f.setvisible(true); Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut: 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

67 JButton b2 =new JButton("Tombol 2"); JButton b3 =new JButton("Tombol 3"); JButton b4 =new JButton("Tombol 4"); JButton b5 =new JButton("Tombol 5"); JButton b6 =new JButton("Tombol 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 b7 =new JButton("Tombol 7"); JButton b8 =new JButton("Tombol 8"); JButton b9 =new JButton("Tombol 9"); JButton b10 =new JButton("Tombol 10"); JButton b11 =new JButton("Tombol 11"); JButton 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); Jika kode tersebut dieksekusi, maka akan menampilkan output seperti berikut: Gambar 2. 4 Tampilan Frame dengan Grid Layout Swing 49

68 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

69 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

70 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

71 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

72 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. HASIL YANG DICAPAI YA TIDAK RENCANA TINDAK LANJUT 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

73 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

74 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

75 57

76 58

77 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

78 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 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

79 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

80 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

81 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

82 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 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

83 Gambar 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 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

84 Gambar Memilih bagian preferredsize pada properties Gambar 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 Drag komponen Panel ke form 66

85 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 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 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

86 Gambar Sebelum variable name diganti Gambar 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 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 Layout Text Field 68

87 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 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 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

88 Gambar 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 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 Layout awal aplikasi Jika muncul pemberitahuan pemilihan kelas utama dari aplikasi, pilih form yang digunakan tadi 70

89 Gambar Pemilihan kelas utama aplikasi yang dibuat 22. Melihat hasil running aplikasi yang dibuat Lihat jalannya aplikasi yang dibuat Gambar 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

90 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 Tampilan Kalkulator yang di buat 72

91 Properties Komponen Program Tombol Nama Variabel 1 BTN1 2 BTN2 3 BTN3 4 BTN4 5 BTN5 6 BTN6 7 BTN7 8 BTN8 9 BTN9 0 BTN0 + BTNplus - BTNminus X BTNkali / BTNbagi Sin BTNsinus Cos 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

92 INDIKATOR PENCAPAIAN KOMPETENSI Mendesain aplikasi GUI berbasis Drag and Drop HASIL YANG DICAPAI YA TIDAK RENCANA TINDAK LANJUT 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. */ /** * 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

93 @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)); NOI18N TBisi.setFont(new java.awt.font("tahoma",0,14));// 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

94 .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

95 77.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("+");

96 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

97 .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

98 .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(); // </editor-fold> /** 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 laf.html */ try{ for(javax.swing.uimanager.lookandfeelinfo info : javax.swing.uimanager.getinstalledlookandfeels()){ 80

99 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); //</editor-fold> /* 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

100 private javax.swing.jpanel jpanel1; private javax.swing.jpanel jpanel2; private javax.swing.jpanel jpanel3; // End of variables declaration Tampilan Program Gambar Tampilan Running Source Code 82

101 83

102 84

103 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

104 Event Source Button Checkbox Choice Tabel 4. 1 Event Source pada JAVA Keterangan Membangkitkan ActionEvent pada saat button diklik Membangkitkan ItemEvent pada saat di-check atau un-check Membangkitkan ItemEvent pada saat pilihan diubah List 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

105 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 listener menerima sebuah event object (pemberitahuan) dari source, dia 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. Immediate subclass dari class EventObject adalah class AWTEvent. ClassAWTEvent didefinisikan pada 87

106 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 Dibangkitkan pada saat sebuah komponen Event disembunyikan, dipindahkan, diubah ukurannya, maupun diset mjd visible Container Event Dibangkitkan pada saat sebuah komponen ditambahkan/dipiindahkan ke/dari sebuah container Focus Event Dibangkitkan pada saat sebuah komponen memperoleh atau kehilangan fokus keyboard Input Event Item Event Key Event Mouse Event Text Event Window Event Kelas induk yg merupakan kelas abstrak dr semua kelas yg termsk ke dalam event input 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 Dibangkitkan pada saat input dilakukan melalui keyboard Dibangkitkan pada saat mouse di-drag, dipindahkan, diklik, ditekan, maupun dilepas; juga terjadi pada saat mouse masuk atau keluar dari sebuah komponen Dibangkitkan pada saat teks yg berada dalam komponen textarea atau textfield diubah Dibangkitkan pada saat window atau form diaktivasi, ditutup, di-minimize, di-maximize, dibuka, atau dikeluarkan 88

107 3. Event Listeners Event listeners adalah class yang mengimplementasikan interfaces<type>listener. Tabel di bawah menunjukkan beberapa listener interfaces yang biasanya digunakan. Event Listener Action Listener Key Listener Mouse Listener Mouse Motion Listener Interface Focus Listener Window Listener Tabel 4. 3 Event Listener pada JAVA 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

108 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

109 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

110 Jika dieksekusi, maka tampilan programnya adalah 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

111 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); Jika dieksekusi, maka tampilan programnya adalah Gambar 4. 7 Awal Program dijalankan Gambar 4. 8 Jika Tombol S di tekan Gambar 4. 9 Jika Tombol S di lepas 93

112 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 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

113 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 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

114 // 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 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

115 Gambar Pengaturan jumlah baris menjadi 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 Validasi Input NIS 13. Jika pada Field nama_siswa ditekan angka 1--9 pada keyboard maka akan menampilkan output message box seperti berikut Gambar Validasi Input Nama 14. Jika pada Field nilai_siswa ditekan tombol a pada keyboard maka akan menampilkan output message box seperti berikut 97

116 Gambar Validasi Input Nilai 15. Lakukan input data dan tekan tombol Simpan Gambar Data yang di inputkan 16. Melihat data input pada tabel Gambar Tampilan Data Berhasil di input pada Tabel 98

117 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

118 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. HASIL YANG DICAPAI YA TIDAK RENCANA TINDAK LANJUT 100

119 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. */ /** * 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. // <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

120 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

121 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

122 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

123 ); 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

124 org.netbeans.lib.awtextra.absoluteconstraints(130,10,-1,122)); getcontentpane().add(jpanel3,new org.netbeans.lib.awtextra.absoluteconstraints(181,78,-1,140)); pack(); // </editor-fold> 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

125 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

126 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

127 // 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)); /** 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 */ 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

128 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); //</editor-fold> /* 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

129 Output Tampilan Program Gambar Output Tampilan Program 111

130 112

131 113

132 114

133 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

134 Terdapat 2 jenis utama dari transformasi, yaitu Transformasi Objek dan transformasi kordinat. Pada transformasi objek, bagian yang ditransformasikan adalah titik-titik yang menyusun objek 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

135 //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

136 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); Jika kode di atas dikompilasi, maka output-nya adalah 118

137 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

138 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); Jika kode di atas dikompilasi, maka output-nya adalah 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

139 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

140 // 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

141 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 */ 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 Color(130,235,24));//setColor secara manual 123

142 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 secara manual k.fillpolygon(x, y,3);//membuat fillpolygon dengan jumlah titiknya 3, mengambil array dari x[] dan y[] //cahaya matahari k.setcolor(new Color(245,135,14));//setColor secara 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

143 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 Color(252,176,63));//setColor 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 secara manual k.filloval(185,415,10,10);//menentukan titik koordinat x,y lalu lebar dan tinggi bulatan //jalan k.setcolor(new Color(97,111,96));//setColor secara manual k.fillpolygon(a, b,4);//membuat fillpolygon dengan jumlah titiknya 4, mengambil array dari a[] dan b[] //garis jalan k.setcolor(new Color(255,255,255));//setColor secara manual k.fillpolygon(c, d,4);//membuat fillpolygon dengan jumlah titiknya 4, mengambil array dari c[] dan d[] k.fillpolygon(e, f,4);//membuat fillpolygon dengan jumlah titiknya 4, mengambil array dari e[] dan f[] k.fillpolygon(g, h,4);//membuat fillpolygon dengan jumlah titiknya 4, mengambil array dari g[] dan h[] 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

144 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 java.awt.*; import java.awt.event.*; import java.util.calendar; import java.util.random; 3. 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()<getheight())panjang=getwidth()-100; 126

145 else Panjang=getHeight()-100; G.drawOval(PX-Panjang/2,PY- Panjang/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

146 new Latihan8().setVisible(true); publicvoid paint(graphics G){ G.setColor(Color.black);//warna jam int Panjang; if(getwidth()<getheight())panjang=getwidth()-100; else Panjang=getHeight()-100; G.drawOval(PX-Panjang/2,PY-Panjang/2,Panjang,Panjang); float Detik=Waktu(Calendar.SECOND)+(float)Waktu(Calendar.MILLISECOND )/1000; G.drawLine(PX,PY,(int)(PX+(Math.sin(2*Math.PI*Detik/60)*Panjan g/2)),(int)(py+(-1*math.cos(2*math.pi*detik/60)*panjang/2))); privateint Waktu(int Jenis){ return Calendar.getInstance().get(Jenis); 5. Melihat jalannya program Gambar 5. 6 Jalannya program detik 128

147 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

148 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. HASIL YANG DICAPAI YA TIDAK RENCANA TINDAK LANJUT 130

149 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()<getheight())pjg=getwidth()-100; else pjg=getheight()-100; G.drawOval(PusatX-pjg/2,PusatY-pjg/2,pjg,pjg); for(int I=1;I<=12;I++){ 131

150 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

151 Tampilan Output Program Gambar 5. 8 Hasil kompilasi program 133

152 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. 2 b. 3 c. 4 d Perhatikan potongan source code di atas. Apakah yang terjadi jika pada Check Box 2 juga bernilai true? a. Kedua check box akan terpilih b. Error saat kompilasi program c. Hanya check box 2 yang terpilih d. 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. Kedua check box akan terpilih b. Error saat kompilasi program c. Hanya check box 2 yang terpilih d. Hanya Check box 3 yang terpilih 4. Tahap ke 4 dalam membangun koneksi database berbasis JDBC adalah a. Connection 134

153 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+ ) ;

154 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. Menampilkan kurva dengan titik balik di kanan atas b. Menampilkan kurva dengan titik balik di kiri atas c. Menampilkan kurva dengan titik balik di kiri bawah d. 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

155 Code yang dapat menghasilkan tampilan gradient seperti gambar di atas adalah a. b. GradientPaint gp4 = new GradientPaint(25, 25, Color.blue, 15, 25, Color.black, true); 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 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

156 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); 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); 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

157 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. b. GradientPaint gp1 = new GradientPaint(5, 5, Color.red, 20, 20, Color.black, true); 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