PBO LANJUT

USING WYSIWYG EDITOR

FOR BUILDING GUI
Niko Ibrahim, MIT
Universitas Kristen Maranatha
Prerequisites
 Install NetBeans IDE 6
 Anda diasumsikan sudah mengenal:
 Use the GUI Builder interface
 Create a GUI Container
 Add Components:
 JFrame
 JPanel
 JButton
 JLabel
 JTextField
 JComboBox
 JList
 JRadioButton & ButtonGroup
 Resize Components
 Align Components
 Adjust Component Anchoring
 Set Component Auto-Resizing Behavior
 Edit Component Properties
Tutorial Content
 Pada tutorial ini, kita akan mencoba mengimplementasikan:
 JMenu
 JMenuItem & setMnemonics
 JRadioButtonMenuItem
 JTable
 JDialog
 JOptionPane
Step 1: Create a new project
 Buatlah sebuah project Java Application baru, dengan nama: TutorialGUI
 Buang tanda check pada checkbox “Create Main Class”
 Klik Next
Step2: Membuat JFrame Form
 Buatlah sebuah JFrame Form dengan meng-klik kanan project “TutorialGUI”
 Beri nama: OrderSystem
 Tuliskan nama package: si.maranatha
 Klik finish
Step 3: Membuat menu
 NetBeans menyediakan berbagai komponen menu yang dapat dilihat di
bagian Palette, Swing Menus

 Klik & drag komponen Menu Bar ke dalam JFrame yang telah dibuat
 Pada saat Menu Bar di-drop ke dalam JFrame, maka secara otomatis menu
bar tersebut akan di-attach di bagian atas JFrame.
Step 4: Menambah JMenu
 Secara default, NetBeans memberikan 2 buah JMenu yaitu:
 jMenu1 (File)
 jMenu2 (Edit)
 Kita dapat melihat komponen-komponen Swing yang telah dibuat, melalui
Inspector:

 Tambahkan sebuah JMenu baru ke dalam menu bar tersebut dengan cara
men-drag&drop komponen Menu dari palette
Step 5: Mengedit nama variabel & text JMenu

 Gantilah nama variabel dan text dari setiap JMenu tersebut dengan cara
meng-klik kanan masing-masing menu, lalu memilih “Change variable name”

 Gantilah sbb:
 jMenu1 (file) menjadi fileMenu
 jMenu2 (Edit) menjadi optionMenu
 jMenu3 (Menu) menjadi helpMenu
 Kemudian ganti tampilan teks untuk semua menu tersebut dengan cara
mengubah di bagian Properties, text.
 jMenu1  File
 jMenu2  Options
 jMenu 3  Help
Step 6: Menambahkan JMenuItem &
JRadioButtonMenuItem
 Kita dapat menambahkan JMenuItem ke dalam JMenu dengan cara men-
drag&drop komponen Menu Item dari pallete.
 Tambahkan 2 buah Menu Item kepada Menu “File”

 Tambahkan 3 buah Menu Item / RadioButton pada menu “Options”

 Tambahkan 1 buah Menu Item pada menu “Help”

 Step 7: Mengubah variable name
dan teks & First Run
 Ubahlah semua variable name & teks untuk setiap menu item yang telah dibuat
sbb:
 Menu File
 jMenuItem1  var name: newItem, teks: New
 jMenuItem2  var name: quitItem, teks: Quit
 Menu Options
 jRatioButtonMenuItem1  var name: hijauKuningItem, teks: “Menu Hijau, Panel Kuning”
 jRatioButtonMenuItem2  var name: biruPinkItem, teks: “Menu Biru, Panel Pink”
 jRatioButtonMenuItem3  var name: pinkHijauItem, teks: “Menu Pink, Panel Hijau”
 Tambahkan (drag) sebuah ButtonGroup dari palette ke dalam JFrame
 Untuk ketiga JRatioButtonMenuItem, pada bagian properties, kategori buttonGroup, klik drop
down list, kemudian pilihlah “buttonGroup1”

 Ubahlah properties selected sedemikian rupa sehingga hanya radio button yang pertama yang
memiliki atribut selected.
 Menu Help
 jMenuItem3  var name: aboutItem, teks: About
 Run project dengan menekan tombol Run
Step 8: Menambah Panel
 Buatlah 2 buah Panel di dalam JFrame sbb:
Step 9: Menambah JTable
 Drag&Drop komponen JTable ke dalam panel atas:
Step 10: Customizing JTable
 Klik kanan JTable tersebut, kemudian pilih “Table Contents…”
 Akan muncul Customizer Dialog untuk tabel tersebut
 Pilihlah tab Columns, kemudian ubahlah sbb:

 Klik tombol Close

 Hasil:
Step 11: Melakukan Koneksi Database
 NetBeans dilengkapi dengan feature RDBMS yaitu JavaDB
 Kita akan melakukan koneksi ke database yang telah ada, yaitu “sample”
 Pilihlah services, kemudia klik kanan database “sample”
 Klik connect

 Isilah:
 Username: app
 Password: app
 Klik OK
Step 12: Data Binding Tabel ke JTable
 Dengan menggunakan NetBeans, kita dapat dengan mudah melakukan
binding sebuah tabel ke dalam JTable.
 Pada database “sample”, klik Tables, di situ terlihat banyak tabel seperti
“CUSTOMER”, “DISCOUNT CODE”, dll.
 Klik tanda „+‟ pada tabel ORDERS untuk melihat kolom-kolom yang ada.

 Untuk melakukan binding, klik tabel ORDERS kemudian drag&drop ke dalam

JTable yang telah dibuat sebelumnya.
 Klik kanan JTable tersebut, pilih “Set default size”
 Hasil:
> RUN !
Step 13: Intro to Java Persistence API
 Pada saat kita melakukan binding sebuah tabel, NetBeans secara otomatis
membuat sebuah file yang bernama Orders.java

 Orders.java ini merupakan Entity Class yang mewakili tabel ORDERS dari
database “sample”.
 Entity Class ini merupakan bagian dari JPA (Java Persistence API) yang akan
dibahas di lain waktu .
 Untuk saat ini, silahkan klik file tersebut untuk melihat isi source code-nya.
Step 14: Mengubah ukuran
 Ubahlah ukuran JFrame, JPanel & JTable dengan cara menggeser sisi-sisinya
sedemikian rupa sehingga menjadi lebih panjang sbb:
Step 15: Resize dan Ubah posisi kolom
 Run Program:

 Cobalah untuk me-resize kolom.

 Cobalah untuk menggeser posisi kolom.
Step 16: Menambahkan JButton
 Tambahkanlah 2 buah JButton ke dalam panel bawah.
 jButton1 var name: addButton, teks: Add
 jButton2  var name: updateButton, teks: Update
Step 17: Event-Handling
 NetBeans menyediakan fasilitas lengkap untuk melakukan event-handling.
 Untuk melakukan event-handling, pertama-tama kita harus memberikan
“listener” kepada komponen yang diinginkan.
 Klik kanan tombol addButton, kemudian pilih “Events” > “Action”

 klik “actionPerformed”
 NetBeans akan melakukan switch dari “Design View” menjadi “Source Code
View” dari file OrderSystem.java
 Untuk kembali ke “Design View”, klik saja tombol “Design” di atas.
Step 18: Mengimplementasikan Event-Handling

 Pada saat kita klik “actionPerformed”, maka secara otomatis NetBeans akan
membuatkan sebuah method yang bernama xxxActionPerformed, dimana
xxx merupakan nama variabel dari komponennya.
 Berikut adalah method actionPerformed untuk AddButton

 Untuk menguji event-handling, cobalah ketikan:

System.out.println("Hello, saya bisa membuat program keren loh!!!");
 Run program, kemudian klik tombol Add
 Hasil println dapat dilihat di bagian output, pada tab “Tutorial2(run)”
Step 19: NetBeans Autocomplete
 NetBeans memiliki feature autocomplete pada saat mengetik kode program.
 Sekarang kita coba memberikan “event-listener” kepada
JRatioButtonMenuItem.
 Klik kanan hijauKuningItem, kemudian pilih Events>Action>actionPerformed

 Pada method tersebut, cobalah ketik: jPanel1

 Kemudian lanjutkan dengan mengetik tanda titik: jPanel1.
 NetBeans akan menampilkan berbagai atribut/method yang dapat
digunakan oleh jPanel1.
 Step 20: Ctrl + Space
 Setelah mengetik tanda titik “.” kita dapat memaksa NetBeans untuk
menampilkan auto-complete dengan menekan tombol “Ctrl+Space”
 Cobalah mengetikan: jpanel1.set (lalu berhenti)
 Kemudian tekan tombol “Ctrl+space”
 Secara otomatis, NetBeans akan menampilkan auto-complete untuk method
yang dimulai dengan kata “set”:

 NetBeans juga menampilkan dokumentasi “javaDoc” untuk setiap

atribut/method yang kita sorot.
 Carilah dan klik method “setBackground”
 Lalu langsung ketikan: Color.
 Pilih: yellow
Step 21: Automatic Fixing Error
 NetBeans juga dilengkapi dengan feature “Automatic fixing error” 
 Perhatikanlah bahwa di dalam source code tersebut, kata Color.yellow diberi
garis warna merah.
 NetBeans juga menampilkan icon lampu disebelah kiri, yang berarti ada eror di
dalam kode kita.

 Klik kanan icon lampu tersebut, lalu pililh Fixable Error, klik Fix Code…

 Pilih “Add import for java.awt.Color”

 Perhatikan bahwa garis merah menghilang . Scroll source code ke atas,

lihatlah bahwa NetBeans telah menambahkan kode import:

 Tips: Anda juga bisa langsung melakukan klik kiri icon tsb untuk langsung
menampilkan pilihan Fix Code.
Step 22: modifikasi jPanel2 & JFrame
 Beri background warna kuning juga untuk jPanel2 & JFrame

 Run program!
 Klik radio item yang pertama.

 Note: Untuk memberi warna JFrame, Anda harus mengambil komponen

ContentPane terlebih dahulu. ContentPane inilah yang kita beri warna
background.
Step 23: Do It Yourself (DIY)
 Pada method tersebut, beri warna background “green” untuk jMenuBar1.
 Setelah itu, berikan pula action-listener untuk kedua menu item lainnya.
 biruPink item
 pinkHijau menu item
 Hasil:
Step 24: Membuat JDialog
 Sekarang kita akan membuat sebuah JDialog.
 Drag&drop Dialog pada palette ke dalam form yang telah kita buat.

 Perhatikan di dalam Inspector, bahwa komponen JDialog telah ditambahkan

ke dalam JFrame.

 Klik kanan jDialog1 tsb, kemudian pilih Change variable name, beri nama:
aboutDialog
 Step 25: Dekorasi JDialog
 aboutDialog tersebut masih kosong.
 Kita akan mendekorasinya dengan cara menambahkan sebuah gambar, label,
dan tombol.
 Double klik aboutDialog tersebut.
 Akan ditampilkan form untuk dialog tersebut:

 Kita akan menambahkan sebuah gambar dan label pada form dialog tersebut.
 Sebelumnya, copy-kan gambar logo.png ke folder “\Tutorial2\src”
 Drag&drop sebuah label ke dalam form dialog.
 Lalu pada properties, klik tanda elipsis dari icon:

 Akan muncul dialog untuk mengelola jlabel tersebut.

Step 26: Menambahkan resources
 Akan muncul dialog sbb:

 Klik tanda elipsis pada “File:”. Kemudian pilihlah gambar yang telah di-
copykan tadi.

 Klik OK.
 Step 27: Tambahkan Label & Button
& Modifikasi properties dialog
 Tambahkanlah sebuah label dengan tulisan: “Order System Versi 1.0”
 Anda dapat mengubah jenis, ukuran, dan warna font pada bagian properties.
 Kemudian tambahkan juga sebuah button.
 Berikanlah action untuk close button tersebut:
aboutDialog.setVisible(false);
 Pada bagian properties, modifikasi hal-hal berikut:
 title: About
 minimumSize: 400, 200
 modal: true (beri tanda check)  agar bisa on-top (tidak bisa ke form sebelumnya)
 resizeable: false (uncheck)
 Hasil:
Step 28: Kembali ke form utama
 Untuk kembali ke “design-view” dari form utama, double-klik saja JFrame
melalui inspector:

 Beri action untuk menu item About.

 Ketikan kode berikut:
aboutDialog.setVisible(true);
 Berikan pula action untuk menu item Quit:
System.exit(0);
FINAL RESULT

Congratulations!
© Niko Ibrahim, MIT