Java GUI Java GUI 1 Konsep Graphical User

Java GUI

Java GUI 1. Konsep Graphical User Interface (GUI) di Java 2. Komponen Dasar Swing 3. Penanganan Kejadian (Event Handling) 4. Membangun Aplikasi GUI

Konsep Graphical User Interface (GUI) di Java

API untuk Aplikasi GUI di Java 1. AWT (Abstract Window Toolkit): Library dan komponen GUI (java. awt) yang pertama kali diperkenalkan oleh Java, Sun tidak merekomendasikan lagi penggunaan komponen GUI dari AWT 2. Swing or JFC (Java Foundation Class): Library dan komponen GUI (javax. swing) terbaru dari Java dan yang direkomendasikan Sun untuk pemrograman GUI. Komponen Swing sebagian besar adalah turunan AWT dan lebih lengkap daripada AWT

Fitur Swing Komponen GUI Lengkap: button, listbox, combobox, textarea, dsb Pluggable Look-and-Feel: tampilan GUI dapat diubah sesuai dengan kehendak (tidak perlu mengikuti native OS) Data Transfer Antar Komponen: drag and drop, copy and paste Internationalization: proses desain aplikasi yang memungkinkan aplikasi dijalankan sesuai dengan preferensi tanpa rekompilasi Localization: proses translasi teks ke bahasa lokal dan menambahkan komponen lokal

Komponen Swing

Komponen Dasar Swing 1. Top-Level Container: kontainer dasar dimana komponen lainnya diletakkan (JFrame, JDialog dan Applet) 2. Intermediate Container: kontainer perantara dimana komponen lainnya diletakkan (JPanel, JScroll. Pane, JTabbed. Pane, JToolbar, JSplit. Pane) 3. Atomic Component: komponen yang memiliki fungsi spesifik dan menerima interaksi langsung dari user (JButton, JLabel, JText. Area, dsb) 4. Layout Manager: mengatur tata letak dan posisi komponen dalam kontainer (Border. Layout, Box. Layout, Flow. Layout, Grid. Bag. Layout, Grid. Layout) 5. Event Handling: menangani event yang dilakukan user (klik mouse, ketik keyboard, perbesar frame, dsb)

Top-Level Container JFrame, JDialog, Applet

JFrame //1. Create the frame JFrame frame = new JFrame("Frame Beraksi"); //2. Optional: What happens when the frame closes? frame. set. Default. Close. Operation(JFrame. EXIT_ N_CLOSE); //3. Create components and put them in the frame //. . . create empty. Label. . . frame. get. Content. Pane(). add(empty. Label , Border. Layout. CENTER); //4. Size the frame. pack(); //5. Show it frame. set. Visible(true);

Frame. Beraksi. java import javax. swing. *; public class Frame. Beraksi { public static void main(String[] args){ JFrame frame = new JFrame("Frame Beraksi"); frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); JLabel empty. Label = new JLabel("Frame Beraksi"); frame. get. Content. Pane(). add(empty. Label); frame. set. Size(400, 200); frame. set. Visible(true); } }

Atomic Component

JButton import javax. swing. *; public class Button. Beraksi extends JFrame { JButton load = new JButton("Load"); JButton save = new JButton("Save"); public Button. Beraksi() { super("Button Beraksi"); set. Size(140, 170); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); JPanel pane = new JPanel(); pane. add(load); pane. add(save); add(pane); set. Visible(true); } public static void main(String[] arguments) { Button. Beraksi button = new Button. Bera }

Layout Manager

Border. Layout. Beraksi. java import java. awt. *; Import java. awt. event. *; import javax. swing. *; public class Border. Layout. Beraksi extends JFrame { JButton n. Button = new JButton("North"); JButton s. Button = new JButton("South"); JButton e. Button = new JButton("East"); JButton w. Button = new JButton("West"); JButton c. Button = new JButton("Center"); JButton( Center ); public Border. Layout. Beraksi() { super("Border Layout Beraksi"); set. Size(240, 280); set. Default. Close. Operation(JFrame. EXIT_ON_CLOS E); set. Layout(new Border. Layout()); add(n. Button, Border. Layout. NORTH); add(s. Button, Border. Layout. SOUTH); add(e. Button, Border. Layout. EAST); add(w. Button, Border. Layout. WEST); add(c. Button, Border. Layout. CENTER); } public static void main(String[] args) { Border. Layout. Beraksi frame = new Border. Layout. Beraksi(); Frame. set. Visible(true); } }

Box. Layout. Beraksi. java import java. awt. *; import javax. swing. *; public class Box. Layout. Beraksi extends JFrame { public Box. Layout. Beraksi() { super("Box. Layout. Beraksi"); set. Size(430, 150); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); JPanel command. Pane = new JPanel(); Box. Layout horizontal = new Box. Layout(command. Pane, Box. Layout. X AXIS); command. Pane. set. Layout(horizontal); JButton subscribe = new JButton("Subscribe"); JButton unsubscribe = new JButton("Unsubscribe"); JButton refresh = new JButton("Refresh"); command. Pane. add(subscribe); command. Pane. add(unsubscribe); command. Pane. add(refresh); add(command. Pane); } public static void main(String[] args) { Box. Layout. Beraksi st = new Box. Layout. Beraksi(); } }

Flow. Layout. Beraksi. java import java. awt. *; b. Import java. awt. event. *; import javax. swing. *; public class Flow. Layout. Beraksi extends JFrame { JButton a = new JButton("Alibi"); JButton b = new JButton("Burglar"); JButton c = new JButton("Corpse"); JButton d = new JButton("Deadbeat"); JButton e = new JButton("Evidence"); public static void main(String[] args) { Flow. Layout. Beraksi frame = new Flow. Layout. Beraksi(); JButton f = new JButton("Fugitive"); public Flow. Layout. Beraksi() { super("Flow Layout Beraksi"); set. Size(360, 120); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); Flow. Layout lm = new Flow. Layout(Flow. Layout. LEFT); set. Layout(lm); add(a); add(b); add(c); add(d); add(e); add(f); set. Visible(true); } public static void main(String[] args) { Flow. Layout. Beraksi frame = new Flow. Layout. Beraksi(); } }

Card. Layout. Beraksi. java import javax. swing. *; import java. awt. *; class Card. Layout. Beraksi{ public static void main(String[] args){ JFrame frame = new JFrame("Card Layout Beraksi"); JPanel panel 1 = new JPanel(); JPanel panel 2 = new JPanel(); JButton button = new JButton("Button dalam panel ke 1"); JT t. A t t JT t. A ("T t d l l k 2") JText. Area text = new JText. Area("Text dalam panel ke 2"); panel 1. add(button); panel 2. add(text); JTabbed. Pane tab = new JTabbed. Pane(); tab. add(panel 1, "Tab 1"); tab. add(panel 2, "Tab 2"); frame. get. Content. Pane(). add(tab, Border. Layout. NORTH); frame. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); frame. pack(); frame. set. Visible(true); } }

Grid. Layout. Beraksi. java import java. awt. *; import java. awt. event. *; import javax. swing. *; public class Grid. Layout. Beraksi extends JFrame { JButton marcia = new JButton("Marcia"); JButton carol = new JButton("Carol"); JButton greg = new JButton("Greg"); JButton jan = new JButton("Jan"); JButton alice = new JButton("Alice"); JButton( Alice ); JButton peter = new JButton("Peter"); JButton cindy = new JButton("Cindy"); JButton mike = new JButton("Mike"); JButton bobby = new JButton("Bobby"); public Grid. Layout. Beraksi() { super(" Grid Layout Beraksi "); set. Size(260, 260); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); JPanel pane = new JPanel(); Grid. Layout family = new Grid. Layout(3, 3, 10); pane. set. Layout(family); pane. add(marcia); pane. add(carol); pane. add(greg); pane. add(jan); pane. add(alice); pane. add(peter); pane. add(cindy); pane. add(mike); pane. add(bobby); } add(pane); set. Visible(true); public static void main(String[] args) { Grid. Layout. Beraksi frame = new Grid. Layout. Beraksi(); } }

Penanganan Kejadian (Event Handling)

Event adalah kejadian atau peristiwa yang dilakukan oleh user terhadap user interface menggunakan peralatan mouse dan keyboard Setiap objek dapat dinotifikasi jika suatu event terjadi sehingga objek tersebut dapat memutuskan apa yang harus dilakukan untuk menanggapi (menangani) event tersebut (event handling) Agar suatu objek dapat dinotifikasi tentang suatu event, objek harus mendaftarkan diri sebagai event listener ke sumber yg menghasilkan event, dan mengimplementasikan interface listener yg sesuai

Proses Penanganan Event 1. Komponen harus didaftarkan sebagai pendengar (listener) dg menggunakan method add. XXXListener() JButton tombol. Selesai = new JButton(“Selesai”); tombol. Selesai. add. Action. Listener(this); 2. Meng-implementasi interface listener atau meng-extends class adapter (bisa juga dengan membuat inner class) 1. class Hello. GUI implements Mouse. Listener{} 2. class Hello. GUI extends Mouse. Adapter{} atau class Hello. GUI extends JFrame{ class handler extends Mouse. Adapter{}} 3. Menuliskan code penangan kejadian pada method class handler extends Mouse. Adapter{ public void mouse. Clicked(Mouse. Event e){ //code penangan kejadian }}

Membangun Aplikasi GUI dengan Netbeans

The Palette

The Design Area

The Source Editor

The Property Editor

The Inspector

Studi Kasus Membangun Aplikasi GUI

Studi Kasus Aplikasi GUI 1. 2. 3. 4. 5. 6. Aplikasi Konversi Suhu Aplikasi Pertambahan Dua Angka Aplikasi Penghitungan Jumlah Hari Aplikasi Kalkulator Aplikasi Penentu Nilai Mahasiswa Aplikasi Biodata Mahasiswa

Aplikasi Konversi Suhu GUI Component: Text. Field, Label, Button

1. Membuat Project Baru

2. Memberi Nama Project: Celcius. To. Fahrenheit Uncheck: Create Main Class

3. Menambahkan JFrame Form Pada Project Nama Frame: Celcius. To. Fahrenheit. GUI Package: GUI

3. Menempatkan GUI Component ke Design (Frame)

4. Mengubah Text dari GUI Component (Edit Text) JText. Field 1: Kosongi JLabel 1: Celcius JLabel 2: Fahrenheit JButton 1: Convert

5. Mengubah Nama Variable dari Setiap GUI Component (Change Variable Name) JText. Field 1: celcius. Text. Field JLabel 1: celcius. Label JLabel 2: fahrenheit. Label JButton 1: convert. Button

6. Rapikan Tampilan Frame Program Kita (Potong Yang Tidak Perlu)

7. Buat Event untuk Convert Button Klik Kanan Pada Convert Button Pilih Event Action. Perfomed atau Pilih Event Mouse. Click

8. Buat Code untuk Event Handling di Convert Button double fahrenheit = Double. parse. Double(celcius. Text. Field. get. Text()) * 1. 8 + 32; fahrenheit. Label. set. Text(fahrenheit + " Fahrenheit");

9. Kompilasi (Build, F 11) Project

10. Jalankan (Run, F 6) Project

Bisa Juga dengan Klik Kanan dan pilih Run Pada File Java

Memainkan Variable Properties

Tahapan Membuat Aplikasi GUI 1. Membuat Project baru 2. Menambahkan JFrame Form (top level container) 3. Diatas JFrame diletakkan JPanel (intermediate container) 4. Tempelkan atomic (GUI) component 5. Edit text dari tiap component 6. Edit nama variable dari tiap component (untuk mempermudah coding) 7. Rapikan tampilan dengan mengedit JFrame, JPanel dan mengubah Layout 8. Pilih component yang akan mengelola event dan pilih jenis event sesuai dengan kebutuhan 9. Tambahkan kode di method event yang disediakan

Aplikasi Pertambahan Dua Angka GUI Component: Label, Text. Field, Button

Aplikasi Pertambahan Dua Angka 1. Angka Pertama dan Angka Kedua dimasukkan oleh user 2. Tombol Tambah diklik maka akan keluar hasil pertambahan di field ketiga 3. Tombol Hapus untuk membersihkan

Aplikasi Operasi Dua Angka GUI Component: Label, Text. Field, Button

Operasi Dua Angka Fitur Tambahan: 1. Error dialog muncul bila input nilai bukan numerik 2. Gunakan Event key. Typed pada Text. Field untuk tampilkan error

method baru panggil method

Aplikasi Penghitungan Jumlah Hari GUI Component: Panel, Label, Text. Field, Button, Combo. Box Logic Programming: If-Else, Switch

Aplikasi Penghitungan 1. Jumlah Hariform, bila Muncul login ID User dan Password = admin, maka aplikasi akan muncul 2. Tombol Hitung diklik, maka akan muncul jumlah hari pada bulan dan tahun yang ditunjuk 3. Perhatikan bahwa ada perhitungan tahun kabisat pada bulan pebruari 4. Tombol simpan untuk menyimpan hasil ke file Fitur Tambahan:

Ganti Text. Field menjadi Combo. Box

Login Form dan Konfirmasi Keluar Aplikasi GUI Component: Text. Field, Password. Field, Menu Bar, Menu Item Logic Programming: If-Else Event: Key. Pressed

Aplikasi Penentu Nilai Mahasiswa GUI Component: Label, Text. Field, Button Logic Programming: If-Else, Switch

Aplikasi Penentu Nilai Mahasiswa Nilai Rata-Rata: UTS+TM+UAS/3 Grade: 1. 90 -: A 2. 80 -89: B 3. 70 -79: C Hasil: 1. A-C: Lulus 2. D: Tidak Lulus Fitur Tambahan: 1. Error dialog muncul bila input nilai bukan numerik 2. Error dialog muncul bila isian kosong

System. out. println(hasil + abc + ‘n’);

Aplikasi Kalkulator GUI Component: Panel, Text. Field, Button Logic Programming: If-Else, Switch

Aplikasi Kalkulator 1. Cara bekerja seperti kalkulator 2. Tombol yang kita tekan akan muncul di layar 3. Hasil perhitungan akan muncul di layar 4. Keterangan: C = clear

7 + 8 = 15 Hints: Tahapan Kerja Kalkulator operand. Satu operator operand. Dua samadengan hasil 1. 2. operand. Satu: tampilkan angka yg ditekan di layar operator: 1. Ambil yang ada di layar, simpan sebagai variable operand. Satu 2. Beri tanda operator apa yg dijalankan (+, -, *, dst) 3. operand. Dua: tampilkan angka yg ditekan di layar 4. samadengan: 1. Ambil yang ada di layar, simpan sebagai variable operand. Dua 2. Buat keputusan (if or switch), operator apa yang digunakan dan proses apa yg dilakukan 3. if(operator. equals(“+”)){ layar. set. Text(operand. Satu + operand. Dua); else if(){ }

Aplikasi Biodata Organisasi GUI Component: Check. Box, Combo. Box, Radio. Button, Text. Area Logic Programming: If-Else

Aplikasi Biodata Organisasi 1. Nama dan Alamat ditulis 2. Pekerjaan (PNS, TNI, Karyawan, Pengusaha) dipilih 3. Jenis Kelamin dipilih 4. Cetak tebal di cek 5. Ketika klik Tampilan, maka data akan ditampilkan di Text. Area di bawah 6. Tombol Simpan untuk menyimpan di file (txt)

Hints Font tebal = new Font(“Arial”, Font. BOLD, 12) Font tipis = new Font(“Arial”, Font. PLAIN, 12) if(ya. Tebal. get. Text(). equals(“Ya”)){ hasil. Text. Area. set. Font(tebal); }else{ hasil. Text. Area. set. Font(tipis); }

Aplikasi Biodata Mahasiswa GUI Component: Menubar, Menuitem, Table

Aplikasi dengan frame Aplikasi Biodata 1. Mahasiswa lengkap beserta menubar 2. 3. 4. 5. 6. dan menuitem Data diisi kemudian diklik Tambahkan maka data akan masuk ke table Bersihkan: membersihkan isian di Textfield Hapus: menghapus record di table Simpan: menyimpan record di file Keluar: keluar aplikasi