Anda di halaman 1dari 122

MATERI PELATIHAN

Java Swing

Ifnu Bima
ifnubima@gmail.com http://www.nagasakti.or.id/roller/ifnu
Versi : 0.1-07.03

Daftar Isi
Java Foundation Class.............................................................................................. ..............1 Feature JFC................................................................................................................... .....1 Swing Package............................................................................................................... ....2 Swing HelloWorld................................................................................................. ............4 Install Java Development Kit.......................................................... .............................4 Membuat program HelloWorld .................................................................. .................4 Melakukan kompilasi program HelloWorld.................................... ............................5 Menjalankan program HelloWorld.................................................. ............................6 Membuat Swing HelloWorld dengan Netbeans 5.5....................................................... ...6 Komponen Swing ...................................................................................................... ............9 Struktur Komponen Swing................................................................................. .............10 Bekerja dengan JLabel, JTextField dan JButton............................................ .................10 Bekerja dengan JCheckBox dan JRadioButton................................. .............................15 Bekerja dengan JList dan JComboBox ................................................ ..........................19 Bekerja dengan Menu, Popup Menu dan Toolbar................................ ..........................23 Membuat Menu................................................................................. .........................25 Membuat Popup Menu ............................................................................. ................30 Membuat Toolbar ............................................................................. .........................33 Membuat Dialog dan JFileChooser................................................................................ .37 Membuat pre-defined dialog dengan JOptionPane................................................ ....38 Membuat JFileChooser................................................................... ...........................44 Konsep MVC............................................................................................................ ............48 Model dalam Komponen Swing ....................................................... .............................50 TableModel.............................................................................................................. ........52 ListModel dan ListSelectionModel.............................................................................. ...55 Menangani Event.......................................................................................................... ........57 Event Listener dalam Swing ................................................................ ..........................58 ActionListener................................................................................................ .................64 KeyListener................................................................................................................... ...67
HALAMAN III

MouseListener dan MouseMotionListener........................................................ .............70 Koneksi Database Dengan JDBC...................................................................................... ...74 Mengenal JDBC................................................................................. .............................74 Database Driver.............................................................................................. .................75 Membuat Koneksi............................................................................... ............................76 Memanipulasi Data dari Database.............................................................. ....................78 Menggunakan PreparedStatement..................................................... .............................83 DataBinding Menggunakan GlazedLists.................................................................. ...........87 EventList.................................................................................................................... ......88 EventList dari Record-Record Database............................................................... ..........89 EventList dalam Model............................................................................... ....................92 EventListModel.................................................................................... ......................92 EventComboBoxModel................................................................................. .............94 EventTableModel...................................................................................................... ..95 Satu EventList untuk Semua Model..................................................................... ......98 Pengurutan Tabel .................................................................................................. ..........99 Manual Sorting...................................................................................... ...................100 Automatic Sorting................................................................................................... ..102 Menyaring Text dalam Tabel........................................................................... ..............104 TextFilterator......................................................................................................... ....105 Mem-filter Data Customer .............................................................. ........................105 TransformedList dan UniqueList............................................................................... ....108 Model Master-Detail........................................................................................ ..............111 FilterList, Matcher dan MatcherEditor......................................................... ............112 Membuat Model Master-Detail................................................................................ .114 Penutup.............................................................................................................................. ..117 Referensi dan Bacaan Lebih Lanjut................................................................................... .118

HALAMAN IV

HALAMAN V

JAVA FOUNDATION CLASS | HALAMAN 1

Java Foundation Class


a!a "oundation #lass $ "#% merupakan sekumpulan class-class a!a &ang digunakan untuk mengembangkan perangkat lunak berbasis '() $'raphical (ser )nterface%. *elain itu+ mempun&ai class-class &ang "# ,uga digunakan untuk menambahkan

fungsi dan kemampuan interaksi &ang !ariatif dari pemrograman a!a. -ari definisi ini+ "# tidak han&a berisi class-class '() sa,a tetapi ,uga class-class lain &ang dapat meningkatkan kemampuan pemrograman a!a baik dari segi fungsionalitasn&a maupun dari segi kemampuan interaksi pemrograman a!a &ang sangat ka&a.

Feature JFC
Fitur-fitur yang dipunyai oleh JFC Fitur Komponen Swing #ook Deskripsi Memuat semua class-class yang dibutuhkan untuk membuat aplikasi berbasis G !" dari tombol" table" tab" menu" toolbar dan sebagainya and Memberikan kemampuan kepada program Ja&a yang dikembangkan menggunakan library swing untuk memilih tema tampilan' Misalnya sebuah program yang sama dapat mempunyai tampilan windows #aF atau Ja&a #aF" atau #aF lain yang dikembangkan oleh komunitas seperti JGoodies' (ccessibility ()! Faslititas untuk mengembangkan misalnya aplikasi bagi untuk penyandang cacat" dukungan Feel $#aF%

membuat huruf braile" kemampuan mengambil input dari layar sentuh dan sebagainya' Ja&a *D ()! +erisi kumpulan class-class yang dapat digunakan

HALAMAN

2 | JAVA SWING
untuk memanipulasi ob,ect-ob,ect * dimensi" sperti garis" kotak" lingkaran" kur&a dan lain sebagainya' Selain itu Ja&a *D ()! ,uga memberikan kemampuan program yang ditulis menggunakan Ja&a untuk mencetak output ke alat pencetak seperti printer' Drag-anddrop Menyediakan kemampuan drag-and-drop antara program Ja&a dan program lain yang ditulis spesifik untuk suatu platform sistem operasi tertentu' !nternational Membantu pengembang perangkat lunak untuk i-ation $i./n% membangun aplikasi yang dapat mendukung semua bahasa dan huruf yang ada di dunia' .abel "eature "# /odul ini akan berkonsentrasi untuk membahas komponen swing. 0emilihan komponen dan librar& swing &ang tepat dapat mempengaruhi kualitas program &ang kita buat secara signifikan. 1al ini dikarenakan+ dalam dunia spesifik lagi aplikasi belum ada membimbing berkualitas. 0ada umumn&a aplikasi &ang dikembangkan dengan *wing framework pengembang &ang untuk a!a *tandard 2dition+ lebih benar-benar membuat komprehensif aplikasi &ang a!a &ang dibangun menggunakan swing+

mempun&ai kode &ang sangat 3kotor3+ dimana kode &ang berisi pengendalian terhadap e!ent komponen swing bercampur aduk dengan kode &ang berisi aturan bisnis dan kode &ang berisi manipulasi terhadap data.

Swing Package
*wing 40) sangat bagus dan lengkap+ a!a 5.0 men&ertakan setidakn&a tu,uh belas $17% buah package &ang berisi class-class

JAVA FOUNDATION CLASS | HALAMAN 3


swing &ang siap digunakan.
,a&a0'accessibility ,a&a0'swing ,a&a0'swing'border ,a&a0'swing'colorchooser ,a&a0'swing'e&ent ,a&a0'swing'filechooser ,a&a0'swing'plaf ,a&a0'swing'plaf'basic ,a&a0'swing'te0t ,a&a0'swing'te0t'html

,a&a0'swing'plaf'metal ,a&a0'swing'te0t'rtf ,a&a0'swing'plaf'multi ,a&a0'swing'table

,a&a0'swing'plaf'synth ,a&a0'swing'tree ,a&a0'swing'undo

(tungn&a kita tidak akan menggunakan semua class-class dalam package swing+ han&a sebagian kecil sa,a dari class-class tersebut &ang nantin&a akan benar-benar kita gunakan. *ehingga kita bisa berkonsentrasi untuk memahami beberapa komponen penting sa,a. -alam modul ini nanti kita han&a akan menggunakan beberapa class komponen swing &ang penting sa,a. 6eberapa kelas ini sudah cukup sebagai bahan pemembuat perangkat lunak berkualitas. 7omunitas a!a ,uga men&ediakan ban&ak sekali librar& swing+ 'oodies &ang komunitas dari mengembangkan ,a!adesktop.org baik

antara lain dari *wing8 dan feature menarik. *edangkan

librar& standard swing dengan menambahkan berbagai macam mengembangkan ban&ak sekali librar& swing untuk keperluan khusus. 9&aris semua komponen &ang kita perlukan tersedia di internet+ kita tinggal mencari dan menggunakan. 0raktek &ang baik dalam memilih komponen apa &ang tepat adalah dengan mencari dahulu informasi di internet. 1al ini sangat bermanfaat untuk mengurangi waktu kita mengembangkan komponen+ sehingga kita bisa lebih ban&ak berkonsentrasi untuk mengembangkan sisi bisnis dan usabilit& dari software &ang kita kembangkan. *ebaik apapun softeware &ang kita buat tapi tidak memberikan nilai tambah terhadap masalah &ang dihadapi adalah kesia-siaan belaka. 6an&ak sekali software &ang dianggap gagal komponen umum hingga komponen untuk tu,uan khusus ban&ak

HALAMAN

4 | JAVA SWING
memberikan nilai tambah terhadap masalah &ang dihadapi han&a karena tampilan '()-n&a sangat susah dipahami dan tidak intuitif.

Swing HelloWorld
/enggunakan contoh langsung adalah cara &ang tepat untuk memulai proses bela,ar. #ara ini memberikan gambaran kongkrit tentang sub,ect &ang akan dipela,ari+ sehingga proses bela,ar lebih cepat diserap. (ntuk tu,uan ini+ kita akan membuat sebuah program kecil &ang menampilkan kata :1ello;orld< menggunakan komponen swing. 6erikut ini adalah langkah-langkah &ang harus anda lakukan untuk membuat program :1ello;orld< berbasis komponen swing: 1. =. 3. >. )nstall a!a -e!elopment 7it $ -7% /embuat program 1ello;orld itu sendiri /elakukan kompilasi program 1ello;orld /en,alankan program 1ello;orld

Install Java Development Kit


?ang perlu kita lakukan dalam langkah ini han&alah mendownload -7 dari website ,a!a.sun.com. kemudian ,alankan program instalasin&a dan ikuti perintah-perintah dalam langkah-langkah instalasi tersebut. *etelah proses instalasi selesai+ kita siap untuk membuat program a!a.

Membuat program HelloWorld

0rogram a!a dengan tampilan seperti di atas dapat dibuat dengan dua cara. #ara &ang pertama adalah dengan menggunakan te8t

JAVA FOUNDATION CLASS | HALAMAN 5


editor dan mengetik kode program. #ara &ang kedua adalah dengan menggunakan 9etbeans /atisse '() 6uilder. @akukan langkah-langkah berikut ini diatas menggunakan te8t editor: 1. =. 6uka te8t editor kesa&angan anda. 7etikkan kode program di bawah ini dan simpan dengan nama file 1ello;orld.,a!a : public class HelloWorld { public HelloWorld(){ } public void display(){ JFrame.setDefaultLookAndFeelDecorated(true); JLabel label = new JLabel("HelloWorld"); JFrame frame = new JFrame(); frame.getContentPane().add(label); frame.setVisible(true); frame.pack(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } public static void main(String[] str){ HelloWorld hello = new HelloWorld(); SwingUtilities.invokeLater( new Runnable() { public void run(){ hello.display(); } }); } } untuk membuat program

Melakukan kompilasi program HelloWorld


7ompilasi program tersebut dengan cara men,alankan program ,a!ac $,a!a compiler%. ika anda beker,a di lingkungan windows buka command prompt+ kemudian ketik program berikut ini :

HALAMAN

6 | JAVA SWING
c:\latihan> javac HelloWorld.java ika anda beker,a di lingkungan '9(/linu8+ buka console dan ketikkan perintah berikut ini : shell$ javac HelloWorld.java

Menjalankan program HelloWorld


0roses kompilasi akan menghasilkan file &ang berekstensi .class+ file inilah &ang akan kita eksekusi. ika anda beker,a di lingkungan windows lakukan perintah berikut ini: c:\latihan> java HelloWorld ika anda bekerka di lingkungan '9(/@inu8 ,alankan perintah berikut ini: shell$ java HelloWorld

Membuat Swing HelloWorld dengan Netbeans 5.5


9etbeans A.A dilengkapi dengan '() builder &ang dikenal dengan /atisse. -alam modul ini selan,utn&a+ /atisse akan digunakan untuk men&ebut 9etbeans '() 6uilder. .ools ini sangat powerful dan produktif dalam membuat komponen '(). @angkah-langkah &ang harus anda lakukan untuk membuat *wing 1ello;orld dengan /atisse adalah sebagai berikut: 1. 6uat pro,ect baru dalam 9etbeans+ caran&a pilih menu : File > New Project =. @angkah berikutn&a anda harus menentukan kategori pro,ect &ang akan anda buat+ caran&a pilih : General > Java Application 4nda akan dibawa ke dialog untuk menentukan nama pro,ect

JAVA FOUNDATION CLASS | HALAMAN 7


dan folder dimana anda meletakkan pro,ect tersebut+ pilih folder sesuai keinginan anda. 3. 7lik kanan di pro,ect &ang baru anda buat+ popup menu akan muncul+ kemudian pilihlah menu : New > JFrame Form... 7emudian masukkan nama class misaln&a 1elloworld.,a!a+ klik finish. >. .ampilan 9etbeans akan berganti dengan tampilan '() builder+ dimana di sisi kanan akan terlihat *wing 0allet. 7lik item @abel di *wing 0allet kemudian klik di atas "rame+ sebuah @abel akan dibuat. "rame &ang akan dibuat+

endela -esign dan 0allete 9etbeans /atisse A. (ntuk memenuhi tu,uan kita membuat *wing 1ello;orld+ kita akan memasukkan string :1ello;orld< ke dalam @abel &ang baru sa,a kita buat. #aran&a+ dobel klik di atas @abel tersebut+ kursor muncul bersama te8t field dan ketikkan :1elloworld<. 5. 7lik kanan di file 1ello;orld.,a!a pada ,endela e8plorer di sebelah kiri+ pilih menu Run File... untuk mengcompile dan

HALAMAN

8 | JAVA SWING
men,alankan class 1ello;orld.,a!a atau tekan tombol *1)". B "5. /atisse mempun&ai sistem @a&outing &ang sangat fleksible+ sistem la&out &ang digunakan oleh /atisse adalah 'roup@a&out. -alam chapter berikutn&a kita akan bela,ar bagaimana menggunakan 'roup@a&out ini dengan benar dan memanfaatkan keunggulan&a dalam menata component '() dengan sangat rapi. *wing helloworld ini han&a sebagian kecil sa,a dari peker,aan &ang harus dilakukan dalam membangun aplikasi desktop berbasis a!a. *elan,utn&a kita akan membahas penggunaan '() sederhana dengan menggunakan /atisse. @abel+ 6utton+ #heck6o8+ .e8t"ield dan Cadio6utton untuk membuat aplikasi

KOMPONEN SWING | HALAMAN 9

Komponen Swing
*wing toolkit men&ediakan ban&ak sekali komponen untuk

membangun aplikasi '() desktop. *wing toolkit ,uga men&ediakan class-class untuk menangani interaksi antara aplikasi dan user menggunakan standard input seperti ke&board dan mouse. 7omponen-komponen &ang disediakan swing mencakup semua '() toolkit &ang laDim digunakan dalam apilasi desktop+ seperti : .abel+ @ist+ .ree+ 6utton+ @abel dan masih ban&ak komponenkomponen lainn&a &ang sudah teru,i dan siap pakai. *elain komponen '()+ swing ,uga men&ediakan fasilitas untuk proses undo+ komponen untuk mengolah te8t+ internationaliDation+ 7omponen '() &ang mendukung pen&andang cacat $accessibilit& support% dan fasilitas drag-and-drop. @ook and "eel merupakan fasilitas &ang unik dalam swing. -engan fasilitas @ook and "eel ini kita bisa dengan mudah merubah tampilan dari program kita sesuai dengan keinginan dan tu,uan kita. /isaln&a+ agar program terlihat fanc& atau agar program terlihat konsisten dalam segala keadaan. *wing ,uga men&ediakan librar& a!a =- untuk pengolahan data secara !isual+ seperti mengolah gambar+ ob,ect =-+ bahkan animasi. *wing@abs.org men&ediakan libar& *wing 0ainter &ang merupakan pengembangan dari profesional. a!a 5.0 menambahkan ban&ak sekali fitur-fitur baru ke dalam package swing+ termasuk dukungan untuk librar& Epen'@ menggunakan E'@+ .ra& )con dan ;eb *er!ice. -engan adan&a a!a =-+ *wing 0ainter ini memungkinkan aplikasi swing mempun&ai tampilan &ang indah dan terlihat

HALAMAN

10 | JAVA SWING
dukungan ini swing men,adi lebih poweful dan mempun&ai masa depan &ang cerah.

Struktur Komponen Swing


*ecara arsitektur+ *wing dibangun diatas arsitektur 4;. $4bstract ;indows .oolkit%. 4;. adalah '() toolkit &ang dikembangkan oleh *un engineer sebelum swing muncul. 7elemahan utama 4;. adalah fleksibilitas tampilan '()+ seperti painting method &ang masih sangat primitif. *wing dimaksudkan untuk memperbaiki kekurangan dari 4;. tanpa harus membuang teknologi &ang sudah dibuat dan membuat '() toolkit baru dari nol. 7omponen 4;. diletakkan dalam satu package &aitu ,a!a.awt+ didalamn&a terdapat komponen-komponen '() dasar+ salah satun&a adalah #omponent. #lass #omponent adalah mo&ang dari sebagian besar komponen 4;. maupun *wing. #heck6o8+ @abel+ 6utton dan beberapa komponen 4;. lainn&a adalah turunan langsung dari class #omponent. 9amun dalam ken&ataan&a arsitektur demikian tidak memberikan fleksibilitas &ang cukup memadai untuk membuat berbagai macam komponen baru &ang dibutuhkan dalam desktop application. *wing muncul dengan membawa teknologi 4;. &ang telah ditambahkan dengan ban&ak kemampuan. 9&aris semua komponen '() dari swing merupakan turunan class #ontainer dan class #ontainer adalah turunan dari class #omponent.

Bekerja dengan JLabel, JTextField dan JButton


6eker,a dengan komponen swing menggunakan /atisse sangat

KOMPONEN SWING | HALAMAN 11


men&enangkan dan mudah. 'roup@a&out &ang sangat fleksibel memungkinkan kita untuk membuat aplikasi dengan tampilan seperti &ang kita harapkan. @abel+ te8tfield dan tombol adalah komponen-komponen dasar &ang selalu ada dalam setiap aplikasi berbasis desktop. 7etiga komponen ini mempun&ai fungsi &ang sangat sederhana+ te8tfield men&impan data berbentuk te8t $string% &ang relatif pendek + label ban&ak digunakan untuk memberikan keterangan pen,elas terhadap komponen lain dan tombol digunakan user untuk men,alankan satu instruksi tertentu. 6erikut ini adalah contoh aplikasi sederhana &ang melakukan pen,umlahan dua buah bilangan.

#ontoh program menggunakan @abel+ .e8t"ield dan 6utton (ntuk membuat aplikasi ini menggunakan /atisse+ lakukan

langkah-langkah berikut ini: 1. 6uat pro,ect baru di 9etbeans $kalau sudah membuat pro,ect+ tidak perlu membuat lagi% dengan cara memilih menu : File > New Project 7emudian ikuti petun,uk &ang diberikan dialog. =. 6uat class "rame baru+ caran&a dengan memilih menu : File > New File 7emudian akan muncul dialog seperti di bawah ini :

HALAMAN

12 | JAVA SWING

endela dialog new file 3. 0ilih kategori : Java GUI Forms > JFrame Form *eperti terlihat di dialog 9ew "ile dialog diatas+ kemudian beri nama 0en,umlahan.,a!a >. 6uat tampilan form seperti gambar bawah ini+ caran&a dengan klik endela 0allete di sebalah kanan untuk memilih komponen apa &ang akan dibuat+ kemudian klik di ,endela -esign untuk menempatkan komponen &ang sudah dipilih tadi ke dalam form. 1asiln&a terlihat seperti pada gambar di bawah ini:

KOMPONEN SWING | HALAMAN 13

penting
Jendela Design menampilkan visualisasi komponen G I! Jendela Sour"e menampilkan kode program dari "lass #ang sedang dibuka! Jendela Swing $allete berisikan komponen% komponen swing #ang bisa kita drag%and%drop ke dalam jendela design! Jendela $roperties digunakan untuk mengedit properti dari komponen #ang sedang akti& dalam jendela design! Jendela Inspe"tor menampilkan semua komponen swing dalam "lass #ang sedang akti& baik #ang keli'atan se"ara visual di jendela design atau tidak!

endela design 9etbens /atisse A. 'anti nama setiap komponen agar mudah dikenali. 7lik kanan diatas setiap komponen &ang ada dalam endela -esign diatas+ kemudian pilih menu : Klik kanan > Change Variable Name ... 'anti nama komponen-komponen tersebut $sesuai urutan dari kiri ke kanan+ atas ke bawah% men,adi : lbl7eterangan+ t8t4+ lbl0lus+ t8t6+ btn1itung+ lbl1asil. 5. /enambahkan !ariable untuk menampung nilai &ang akan di,umlahkan. 7lik tombol *ource untuk membuka ,endela &ang menampilkan kode sumber dari program di atas kemudian tambahkan kode di bawah ini tepat dibawah definisi dari class 0en,umlahan: private String str = "Hasilnya adalah : "; private int a, b; 7. /enangani penekanan tombol btn1itung. 7lik kanan diatas komponen btn1itung kemudian pilih menu :

HALAMAN

14 | JAVA SWING
Events > Action > actionPerformed 4nda akan dibawa ke ,endela *ource+ dan akan menemukan kode program seperti di bawah ini : private void btnHitungActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: } (bah kode program diatas men,adi :

penting
J(abel dan J)e*tField mempun#ai met'od get)e*t dan set)e*t untuk mengambil dan mengeset te*t #ang ditampilkan!

private void btnHitungActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: a = Integer.parseInt(txtA.getText()); b = Integer.parseInt(txtB.getText()); int hasil = a + b; lblHasil.setText(str + hasil); } F. #ompile dan ,alankan program. .ekan tombol *1)". B "5+ atau klik kanan file 0en,umlahan.,a!a kemudian pilih menu Cun "ile. #atatan : /ethod )nteger.parse)nt digunakan untuk merubah *tring men,adi )nteger. /ethod btn1itung4ction0erformed akan dipanggil setiap kali kita memencet tombol btn1itung. *ekarang anda bisa melihat bahwa beker,a dengan @abel+

.e8t"ield dan 6utton sangat sederhana. (ntuk latihan+ silahkan rubah fungsi &ang digunakan dalam program diatas+ misaln&a perkalian dua bilangan atau pengurangan dua bilangan.

KOMPONEN SWING | HALAMAN 15

Bekerja dengan JCheckBox dan JRadioButton


#heck6o8 dan kemungkinan Cadio6utton benar han&a bisa mempun&ai dua buah atau salah. 7edua komponen ini nilai+

penting
JC'e"k+o* dan J,adio+utton sebaikn#a digunakan 'an#a jika item pili'an#a sedikit dan tidak bersi&at dinamis

digunakan untuk merepresentasikan data &ang berupa pilihan. #heck6o8 digunakan ,ika pilihan&a berupa multiple selection+ sedangkan selection. Cadio6utton digunakan misaln&a untuk merepresentasikan pilihan ,enis kelamin. #heck6o8 digunakan misaln&a untuk merepresentasikan pilihan hobb&. 6utton'roup diperlukan untuk mengumpulkan Cadio6utton &ang mempun&ai grup pilihan &ang sama. /isaln&a grup pilihan ,enis kelamin digunakan untuk pilihan mengumpulkan laki-laki dan Cadio6utton Cadio6utton &ang &ang ika merepresentasikan Cadio6utton digunakan ,ika pilihan&a berupa single

merepresentasikan pilihan perempuan dalam satu group. laki dan pilihan perempuan bisa dipilih bersamaan.

Cadio6utton tidak diletakkan dalam satu group+ maka pilihan laki-

*tatus dari Cadio6utton dan #heck6o8 dapat diketahui dengan melihat nilai kembalian dari method is*elected+ ,ika dipilih maka nilai kembalian method is*elected adalah benar+ dan false ,ika sebalikn&a. *etiap Cadio6utton dan #heck6o8 mempun&ai te8t &ang

menerangkan pilihan &ang diwakilin&a. /ethod get.e8t dan set.e8t digunakan untuk memanipulasi te8t. -ibawah ini adalah contoh program &ang menggunakan #heck6o8 dan Cadio6utton.

HALAMAN

16 | JAVA SWING

#ontoh aplikasi menggunakan #heck6o8 dan Cadio6utton -i bagian atas aplikasi ini+ terdapat dua Cadio6utton untuk

merepresentasikan pilihan tipe warna+ transparan atau berwarna. -ibawahn&a terdapat pilihan warna &ang dapat dipilih lebih dari satu buah menggunakan #heck6o8. (ntuk membuat program diatas ikuti langkah-langkah berikut ini: 1. 6uat class 0ilihan.,a!a =. 6uat tampilan diatas menggunakan /atisse. komponen &ang harus dibuat adalah : -ua ob,ect Cadio6utton : radio6erwarna dan baru bertipe "rame "orm+ kemudian beri nama

radio.ransparan. *atu ob,ect 6utton'roup : group.ipe;arna. 2mpat ob,ect chk7uning. *atu ob,ect .e8t4rea : t8t;arna. *atu ob,ect *croll0ane : scroll;arna endela #heck6o8 : chk1i,au+ chk6iru+ chk/erah+

(ntuk melihat semua komponen &ang ada dalam -esign+ gunakan endela )nspector di sisi kiri bawah.

3. /asukkan ob,ect radio6erwarna dan radio.ransparan ke dalam

KOMPONEN SWING | HALAMAN 17


ob,ect group.ipe;arna. #aran&a dengan : a% /emilih komponen radio6erwarna di endela -esign b% 7lik tab code di endela 0roperties c% 0ilih properti : 0ost-#reation #ode d% /asukkan kode berikut ini kedalam dialog &ang muncul : groupTipeWarna.add(radioBerwarna); @akukan langkah &ang sama terhadap ob,ect radio.ransparan. >. /enangani e!ent ketika Cadio6utton diklik. #aran&a dengan : a% /emilih komponen radio6erwarna di endela -esign b% 7lik kanan komponen radio6erwarna+ kemudian pilih menu: Event > Action > actionPerformed c% 4nda akan dibawa ke dalam endela #ode+ dan menemukan kode berikut ini : private void radioBerwarnaActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: } (bahlah kode diatas men,adi : private void radioBerwarnaActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: if(radioBerwarna.isSelected()){ lblTipeWarna.setText("Tipe warna : " + radioBerwarna.getText()); } } @akukan langkah &ang sama terhadap radio.ransparan.

penting
J,adio+utton #ang mempun#ai group #ang sama- 'arus dimasukkan dalam sebua' obje"t +uttonGroup #ang sama!

HALAMAN

18 | JAVA SWING
A. 6uat sebuah pri!ate method untuk menangani e!ent pemilihan terhadap #heck6o8. /ethod tampilkan;arna ini nantin&a akan dipanggil setiap kali salah satu dari #heck6o8 dipilih. &ang dilakukan oleh metod tampilkan;arna adalah mengecek status setiap #heck6o8+ apakah sedang dipilih atau tidak. ika sedang dipilih maka te8t dari ditampilkan dalam t8t;arna. #lass *tring6uffer digunakan untuk menampung nilai te8t dari #heck6o8 &ang statusn&a terpilih. #heck6o8 tersebut akan

penting
Class String+u&&er sangat dianjurkan untuk digunakan sebagai "lass untuk memanipulasi String! $enggabungan string menggunakan operator . sangat tidak dianjurkanapalagi jika ukuran obje"t String%n#a suda' "ukup besar!

private void tampilkanWarna(){ StringBuffer warna = new StringBuffer(); if(chkBiru.isSelected()){ warna.append(chkBiru.getText() + " "); } if(chkHijau.isSelected()){ warna.append(chkHijau.getText() + " "); } if(chkKuning.isSelected()){ warna.append(chkKuning.getText() + " "); } if(chkMerah.isSelected()){ warna.append(chkMerah.getText() + " "); } txtWarna.setText(warna.toString()); } 5. /enangani berikut : a% 0ilih komponen chk1i,au di endela -esign. b% 7lik kanan komponen chk1i,au untuk memunculkan conte8t $popup% menu. e!ent pemilihan #heck6o8. #aran&a sebagai

KOMPONEN SWING | HALAMAN 19


c% 0ilih menu : Event > Action > actionPerformed d% 4nda akan dibawa ke endela #ode+ kemudian dalam

method chk1i,au4ction0erformed tersebut panggil method tampilkan;arna. seperti di bawah ini : private void chkHijauActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: tampilkanWarna(); } @akukan hal ini untuk semua #heck6o8. 7. #ompile dan ,alankan program dengan menekan tombol *1)". B "5. #ara lain dalam menampilkan pilihan adalah dengan menggunakan @ist dan #ombo6o8. 7edua komponen ini mempun&ai fleksibilitas &ang lebih tinggi dan lebih mudah digunakan ,ika ob,ect &ang dimasukkan dalam pilihan lebih kompleks. @ist dan #ombo6o8 bisa mempun&ai #omponent2ditor agar pilihan &ang ditampilkan tidak han&a berupa te8t+ bisa berupa warna atau icon. 6agian berikutn&a akan membahas bagaimana beker,a menggunakan @ist dan #ombo6o8.

penting
JCombo+o* dan J(ist digunakan jika item pili'an bersi&at dinamis! JCombo+o* dapat mempun#ai bentuk #ang dapat diedit se'ingga user dapat memasukkan pili'an #ang tidak ada dalam da&tar! J(ist dapat menerima pili'an lebi' dari satu!

Bekerja dengan JList dan JComboBox


#ombo6o8 memerlukan tempat &ang minimalis dibandingkan dengan Cadio6utton+ selain itu #ombo6o8 mempun&ai bentuk #ombo6o8 &ang dapat diedit+ sehingga memungkinkan user untuk memilih pilihan &ang tidak ada dalam item #ombo6o8.

HALAMAN

20 | JAVA SWING

#ontoh #ombo6o8 @ist memungkinkan multiple selection dengan menekan tombol : *1)". B @eft #lick atau #.C@ B @eft #lick. 7emampuan ini membantu user ,ika harus melakukan multiple selection. #ombo6o8 dan @ist sangat fleksibel+ kita dapat menambah dan menghapus item di dalamn&a dengan sangat mudah. *ehingga cocok digunakan untuk merepresentasikan pilihan &ang item pilihann&a bersifat dinamis. 4plikasi di bawah ini adalah contoh penggunaan #ombo6o8 dan @ist.

#ontoh program menggunakan #ombo6o8 dan @ist 6agian pertama program ini terdapat sebuah @abel+ setiap kali item di dalam #ombo6o8 dan @abel di

#ombo6o8 dipilih+

sebelahn&a akan menampilkan item &ang dipilih tersebut. 6agian kedua program ini terdapat sebuah *etiap kali item-item di dalam @ist dan .e8t4rea.

@ist dipilih+

.e8t4rea akan

menampilkan item-item &ang dipilih tersebut dipisahkan dengan

KOMPONEN SWING | HALAMAN 21


koma $+%. )kuti langkah-langkah berikut ini untuk membuat program di atas: 1. 6uatlah class "rame "orm baru dan beri nama

@ist4nd#ombo.,a!a. =. 6uat tampilan program diatas menggunakan /atisse+ kemudian tambahkan komponen-komponen: a% 2mpat buah @abel : lbl0eker,aan+ lbl0ilihan0eker,aan+

lbl1obb&+ lbl0ilihan1obb&. b% *atu buah #ombo6o8 : cmb0eker,aan c% *atu buah @ist : lst1obb& d% *atu buah te8t4rea : t8t0ilihan1obb& 3. /erubah isi #ombo6o8. (ntuk merubah isi dari #ombo6o8 dan @ist kita akan menggunakan endela 0roperties+ endela ini letakn&a di sebelah kanan bawah+ dibawah endela 0allete dan akan muncul han&a ,ika ,endela -esign &ang dipilih.

penting
Jendela $roperties tidak 'an#a berisi properties dari komponen swing #ang sedang akti& tetapi juga berisi )ab /vents dan )ab Code! )ab /vents digunakan untuk memasukkan kode #ang akan dieksekusi ketika event tertentu dikenakan ter'adap komponen swing! )ab Code digunakan untuk mende&inisikan kode apa #ang 'arus dieksekusi dalam kondisi tertentu- misaln#a setela' obje"t komponen swing diinisialisasi!

endela 0roperties 0ilih komponen #ombo6o8 di endela -esign+ endela

0roperties akan menampilkan properties dari #ombo6o8. 0ada bagian model di dalam endela 0roperties masukkan item 0ela,ar+ /ahasiswa+ 0rogrammer+ .echnical ;riter dan .ester.

HALAMAN

22 | JAVA SWING
*etiap item dipisahkan dengan koma $+%. >. /erubah isi @ist. 0ilih @ist di endela -esign maka endela 0roperties untuk @ist akan muncul. -i bagian model isikan item : /embaca+ Elahraga+ .rekking+ #oding+ /enonton "ilm+ 6ersepeda dan /enga,ar. *etiap item dipisahkan dengan koma $+%. A. /enangani pemilihan #ombo6o8. 7lik kanan #ombo6o8 di

endela -esign+ kemudian pilih menu : Events > Action > actionPerformed endela #ode akan terbuka+ tambahkan code seperti di bawah ini : private void cmbPekerjaanActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: lblPilihanPekerjaan.setText( "Pekerjaan anda : " + cmbPekerjaan.getSelectedItem()); } method get*elected)tem dari #ombo6o8 digunakan untuk

memperoleh item &ang sedang di pilih dalam #ombo6o8. 5. /enangani e!ent pemilihan dari @ist. 2!ent &ang digunakan untuk menangani pemilihan item dari user memilih item dalam @ist berbeda dengan #ombo6o8. @ist akan mengaktifkan @ist*election e!ent ketika @ist. (ntuk menangani e!ent ini+ lakukan langkah-langkah berikut : a% 7lik kanan pada @ist di dalam endela -esign+ kemudian pilih menu : Events > ListSelection > valueChanged b% -alam ,endela kode &ang ketik kode seperti berikut ini :

KOMPONEN SWING | HALAMAN 23


private void lstHobbyValueChanged( javax.swing.event.ListSelectionEvent evt) { // TODO add your handling code here: Object[] selectedItems = lstHobby.getSelectedValues(); if(selectedItems == null || selectedItems.length == 0) txtPilihanHobby.setText(""); else{ StringBuffer strValues = new StringBuffer(); for(Object item : selectedItems){ strValues.append(item.toString() + ", "); } txtPilihanHobby.setText( strValues.substring(0, strValues.length() 2)); } } #atatan : /ethod get*electedValues dari @ist mengembalikan item-item &ang terpilih.

penting
JMenu+ar dan J)ool+ar 'an#a bisa ditamba'kan ke dalam JFrame! JMenuItem adala' struktur terluar dari Menu #ang tidak bisa mempun#ai "'ild! J)ool+ar pada umumn#a menampung J+utton #ang diberi I"on dan mempun#ai ba"kground transparan!

Bekerja dengan Menu, Popup Menu dan Toolbar


/enu+ 0opup menu dan .oolbar digunakan untuk melakukan na!igasi dalam aplikasi. dengan ketiga komponen itu na!igasi dalam aplikasi men,adi lebih fleksibel dan mudah digunakan oleh user. /enu dan .oolbar pada umumn&a diletakkan di bagian atas dari aplikasi agar mudah ditemukan oleh user. *edangkan 0opup

HALAMAN

24 | JAVA SWING
/enu bisa muncul di mana sa,a sesuai dengan konteks aplikasi. /enu6ar adalah class &ang digunakan untuk menampung /enu. /enu dapat menampung satu atau lebih /enu)tem. /enu)tem merupakan bagian terluar dari struktur menu &ang tidak bisa mempun&ai child. *eparatordigunakan untuk memisahkan antara satu menu item dan menu item &ang lain. tersebut. *elain /enu)tem+ ika didalam menu terdapat sub menu+ gunakan /enu untuk menampung sub menu /enu ,uga dapat menerima class #heck6o8/enu)tem dan Cadio6utton/enu)tem. 0opup/enu mempun&ai ban&ak kesamaan dibandingkan dengan /enu6ar. 0erbedaan utaman&a adalah : berada di atas sebuah ,endela /enu6ar han&a bisa 0opup/enu "rame. *edangkan

bisa muncul di mana sa,a sesuai dengan konteks dari aplikasi. 0erbedaan lainn&a terletak di dalam penggunaan umum keduan&a. /enu6ar berisikan menu/instruksi &ang bersifat umum dan berlaku untuk semua keadaan dalam aplikasi. *edangkan 0opup/enu 0opup/enu akan mempun&ai menu/instruksi &ang berbeda-beda berdasarkan dari konteks aplikasi. Eleh karena itu terkadang disebut ,uga sebagai konteks menu. .oolbar memberikan cara &ang lebih praktis dibandingkan menu+ bahkan bisa dikatakan bahwa toolbar adalah cara cepat untuk mengakses menu. Eleh karena itu+ setiap item dalam toolbarbiasan&a ,uga tersedia dalam menu. 0ada umumn&a toolbar diwakili han&a dengan gambar/icon &ang melambangkan perintah dari toolbarn&a. -i internet ban&ak tersedia toolbar icon gratis &ang dapat kita gunakan. 6erbeda dengan /enu6ar dan 0opup/enu &ang han&a bisa 6utton atau Cadio6utton+ #heck6o8+

menerima menu item+

.ool6ar dapat menampung

control lain&a. *eperti contohn&a :

toggle6utton dan lain&a. 9ormaln&a+ .ool6ar akan diisi dengan

KOMPONEN SWING | HALAMAN 25


6utton &ang dihilangkan te8t-n&a dan diganti dengan icon. 7ita ,uga perlu merubah dekorasi cantik dan menarik. 6utton agar tampilann&a terlihat

#ontoh program dengan /enu+ 0opup /enu dan .oolbar (ntuk membuat program seperti di atas+ ada beberapa tahap &ang perlu dilakukan. .ahap pertama adalah membuat /enu+ &ang kedua adalah membuat 0opup /enu dan &ang ketiga adalah membuat .oolbar.

Membuat Menu
6eker,a dengan /enu dalam swing+ antara lain : 1. /enu6ar : #lass &ang menampung semua menu+ han&a bisa menampung /enu sebagai child. =. /enu : #lass &ang mempun&ai child menu item. 6iasan&a /enu ini &ang ,adi child langsung dengan /enu6ar 3. /enu)tem : (,ung dari menu+ disinilah ob,ect 4ction a!a melibatkan enam komponen

diletakkan+ sehingga ketika kita memilih /enu)tem ada action tertentu &ang di,alankan aplikasi. >. #heck6o8/enu)tem : (,ung dari menu+ namun bentukn&a lebih mirip #heck6o8. A. Cadio6utton/enu)tem : (,ung dari menu+ namun bentukn&a lebih mirip 6utton.

HALAMAN

26 | JAVA SWING
5. *eparator : pemisah antar /enu)tem atau antar /enu

*etiap komponen menu mempun&ai fungsi dan kegunaan masingmasing. ika kita perhatikan+ menu dalam aplikasi umumn&a mempun&ai shortcut untuk mengakses menu tanpa menggunakan bantuan mouse. /isaln&a menu "ile biasan&a dapat diakses menggunakan tombol 4@. B "+ menu "ormat dapat diakses dengan 4@. B E. "asilitas shortcut menu ini disebut sebagai 7e&board /nemonic. "ile mempun&ai mnemonic "+ "ormat mempun&ai mnemonic o+ dan seterusn&a. 0ada umumn&a tampilan mnemonic dari sebuah menu diwakili dengan huruf &ang bergaris bawah. /atisse mempun&ai fasilitas &ang sangat E7 untuk beker,a dengan /enu+ fasilitas drag-and-dropn&a membantu ban&ak peker,aan membangun aplikasi barbasis '() secara signifikan.

penting
Jendela Inspe"tor akan memperli'atkan semua komponen swing baik #ang terli'at atau tidak terli'at dalam jendela design! Jendela Inspe"tor sangat berguna ketika kita bekerja dengan Menu! $roses penamba'anpengurangan dan pengaturan posisi menu semua dilaksanakan dari Jendela Inspe"tor

-alam program diatas kita akan membuat struktur menu sebagai berikut:

*truktur menu dari aplikasi )kuti langkah-langkah berikut ini untuk membuat struktur menu seperti diatas: 1. =. 6uat sebuah class "rame dan beri nama .oolbar/enu.,a!a /enambahkan /enu6ar ke dalam "rame. 0ilih komponen

KOMPONEN SWING | HALAMAN 27


/enu 6ar dari endela 0allete kemudian klik "rame di endela -esign. *ebuah class /enu6ar akan ditambahkan di dalam "rame. 'anti naman&a men,adi menu6ar. 3. /enambahkan /enu ke dalam /enu6ar. 7lik kanan

/enu6ar &ang baru sa,a kita buat di kemudian pilih menu : Add > JMenu 'anti nama

endela )nspector+

/enu tersebut men,adi menu"ile. 7emudian

alihkan perhatian anda ke endela 0roperties

endela 0roperties dari class /enu )si properti te8t dengan string :"ile<. 7emudian set isi properti mnemonic dengan string :f<+ hal ini akan men&ebabkan tampilan&a menu"ile men,adi "ile dan user dapat menekan tombol 4@. B " untuk mengaktifkan menu menu"ile. >. /enambahkan menambahkan /enu)tem. @angkah berikutn&a adalah

/enu)tem ke dalam

/enu menu"ile &ang

telah dibuat di langkah sebelumn&a. caran&a+ klik kanan di /enu menu"ile di endela )nspector+ kemudian pilih menu : Add > JMenuItem .ambahkan berturut-turut menu9ew+ menuEpen dan

menu*a!e. 0ilih /enu)tem dari endela )nspector+ kemudian

HALAMAN

28 | JAVA SWING
untuk masing-masing /enu)tem set te8t dan mnemonic &ang sesuai dari endela 0roperties. A. /enambahkan *eparator. -alam struktur menu &ang bagus+ menu &ang mempun&ai fungsi serupa diletakkan dalam urutan berderdekatan dan dipisahkan dengan separator $pemisah%. @angkah langkah menambahkan menambahkan *eparatortidak /enu)tem+ klik berbeda kanan di dengan /enu

menu"ile kemudian pilih menu: Add > JSeparator 5. /enambahkan /enu. 6erikutn&a kita akan menambahkan

/enu baru ke dalam /enu menu"ile. /enu &ang baru ini akan bertindak sebagai sub menu. #aran&a ,uga sama : klik kanan di /enu menu"ile kemudian pilih menu : Add > JMenu 6eri nama menu*etting+ set te8t dan mnemonic &ang sesuai pada endela 0roperties. 7. /enambahkan #heck6o8/enu)tem. 0erilaku #heck6o8

#heck6o8/enu)tem tidak berbeda ,auh dengan biasa+ bedan&a han&alah

#heck6o8/enu)tem berada dalam /enu menu*etting

struktur menu. #ara menambahkan #heck6o8/enu)tem sama dengan komponen lain : klik kanan kemudian pilih menu : Add > JCheckBoxMenuItem 6eri nama chk@ine9umber+ set te8t dan mnemonic &ang sesuai pada endela 0roperties. #heck6o8/enu)tem sedikit sepesial dibandingkan dengan /enu)tem+ karena #heck6o8/enu)tem memiliki properties selected. 0roperties selected ini digunakan untuk menentukan apakah #heck6o8/enu)tem dalam keadaan terpilih atau tidak.

KOMPONEN SWING | HALAMAN 29


F. /enambahkan Cadio6utton/enu)tem. -alam contoh ini kita akan mempun&ai dua buah Cadio6utton/enu)tem+ radio6inar& dan radio.e8t. 7eduan&a dibuat dengan langkah &ang sama dengan komponen lain+ klik kanan di kemudian pilih menu : Add > JRadioButtonMenuItem *et te8t dan mnemonic &ang sesuai dari endela 0roperties. G. /enambahkan 6utton'roup. *eperti haln&a Cadio6utton+ /enu menu*etting+

Cadio6utton/enu)tem ,uga memerlukan 6utton'roup agar han&a satu buah Cadio6utton/enu)tem &ang bisa dipilih. #ara menambahkan 6utton'roup sangat mudah+ klik item 6utton'roup dari endela 0allete kemudian klik endela -esign+ maka otomatis 6utton'roup akan ditambahkan. 'anti naman&a men,adi groupEpen/ethod. -alam endela )nspector+ 6utton'roup &ang baru dibuat tadi akan berada dalam kategori Ether #omponents+ seperti terlihat dalam gambar di bawah ini :

6utton'roup berada dalam kategori Ether #omponents 10. /enambahkan Cadio6utton/enu)tem ke dalam 6utton'roup. 0ilih masing-masing Cadio6utton/enu)tem dari endela

HALAMAN

30 | JAVA SWING
)nspector+ kemudian perahatikan endela 0roperties dari

Cadio6utton/enu)tem tersebut+ pada bagian group6utton pilih item groupEpen/ethod+ seperti terlihat dalam gambar di bawah ini :

0roperties dari Cadio6utton/enu)tem 11. #ompile dan ,alankan class .oolbar/enu.,a!a. 7lik kanan class .oolbar/enu dari endela -esign kemudaian pilih menu Cun "ile atau tekan tombol *1)". B "5. 6eker,a dengan /enu menggunakan /atisse sangatlah

men&enangkan dan produktif. 1al ini berbeda sekali ,ika harus mengetik satu demi satu kode untuk men&usun struktur menu seperti contoh program diatas. /embuat 0opup /enu menggunakan /atisse ,uga sama

mudahn&a. 1an&a sa,a kita harus menentukan dimana dan dengan cara apa popup menu itu muncul+ apakah dengan penekanan tombol tertentu dari ke&board atau ketika tombol mouse ditekan.

Membuat $opup Menu


0opup menu pada dasarn&a tidak ,auh berbeda dibandingkan dengan menu biasa+ han&a sa,a popup menu dapat muncul di mana sa,a+ tidak han&a di bagian atas "rame seperti haln&a /enu6ar.

KOMPONEN SWING | HALAMAN 31


*elain itu kita harus menentukan kapan popup muncul+ pada umumn&a popup akan muncul ketika user melakukan klik kanan terhadap suatu komponen swing. /isaln&a+ ketika suatu table di klik kanan terdapat popup &ang muncul+ dan sebagain&a. 0opup menu terutama digunakan sebagai :conte8t sensiti!e menu<+ dimana menu &ang ditampilkan oleh popup menu tergantung konteks dari aplikasi+ semisal : komponen apa &ang dikenai aksi klik kanan+ bagaimana keadaan data dalam komponen tersebut dan sebagain&a. 4plikasi &ang memerlukan interaksi &ang sangat intens dengan user sebaikn&a menggunakan popup menu untuk memudahkan user mengakses action tertentu. 1al ini ,auh lebih praktis dibanding user harus mengakses menu dalam /enu6ar di bagian atas "rame. 0opup menu dalam contoh program diatas akan muncul ketika user melakukan klik kanan terhadap "rame. menu &ang ditampilkan&a pun han&a ada tiga buah: cut+ cop& dan paste. )kuti langkah-langkah beritkut ini untuk membuat 0opup menu : 1. 6uka class .oolbar/enu.,a!a+ &ang telah dibuat dalam langkah sebelumn&a+ dalam endela -esign. =. 7lik endela 0allete dan pilih -esign. *ecara 0opup/enu+ kemudian klik 0opup/enu akan

endela

otomatis

ditambahkan dalam class .oolbar/enu.,a!a. 0opup/enu tidak terlihat dalam endela -esign+ namun anda bisa mengkasesn&a melalui endela )nspector. 3. /enambahkan /enu)tem. *eperti haln&a /enu6ar+ *eparator. sangat

0opup/enu dapat memiliki child berupa /enu+ /enu)tem+ #heck6o8/enu)tem+ /enambahkan Cadio6utton/enu)tem dan ke dalam /enu)tem 0opup/enu

HALAMAN

32 | JAVA SWING
sederhana+ caran&a : klik kanan pada 0opup/enu di endela -esign+ kemudian pilih menu : Add > JMenuitem 'anti nama ob,ectn&a men,adi menu#ut+ beralihlah ke endela 0roperties kemudian set te8t dan mnemonic &ang sesuai. @akukan langkah ini untuk dan menu0aste. >. /emunculkan 0opup/enu. 7etika tombol kanan mouse di klik diatas "rame+ 0opup/enu akan tampil. 4gar beha!ior tersebut ber,alan+ kita perlu menangani e!ent mouse#lick terhadap "rame. #aran&a : a% 7lik kanan "rame di endela -esign+ kemudian pilih menu : Events > Mouse > mouseClicked b% -i dalam ,endela source &ang terbuka masukkan kode berikut ini : private void formMouseClicked( java.awt.event.MouseEvent evt) { // TODO add your handling code here: if(evt.getButton() == MouseEvent.BUTTON3){ popUpMenu.show( (Component)evt.getSource(), evt.getX(),evt.getY()); } } 7ondisi if diatas digunakan apakah tombol &ang diklik mouse adalah tombol sebelah kanan+ ,ika nilai kembalian method get6utton sama dengan nilai 6(..E93 maka benar tombol kanan &ang ditekan. /ethod show digunakan untuk memunculkan popup menu+ /enu)tem &ang lain+ menu#op&

KOMPONEN SWING | HALAMAN 33


parameter nantin&a pertama popup diisi dengan akan #omponent dimana

menu

ditampilkan+

sedangkan

parameter kedua dan ketiga diisi dengan letak koordinat popup menu akan ditampilkan. A. *impan file .oolbar/enu.,a!a+ compile dan ,alankan. 7emudian coba munculkan popup menu dengan mengklik kanan "rame. 0opup menu sangat berguna ,ika aplikasi &ang kita kembangkan membutuhkan interaksi &ang intensif dengan user. 0opup menu men&ediakan cara mudah untuk mengakses menu/action &ang sesuai dengan konteks dari aplikasi.

Membuat )oolbar
.oolbar memberikan dimensi lain dalam mengakses menu dbandingkan menu ataupun popup menu. 0ada umumn&a .oolbar merupakan cara singkat untuk mengakses menu. /enu &ang diwakili toolbar adalah menu &ang bersifat umum dan tidak terikat pada konteks tertentu. 7egunaan lain dari toolbar adalah mempercantik tampilan aplikasi+ karena toolbar biasan&a adalah tombol &ang didekorasi dengan icon &ang menarik. *elain itu toolbar ,uga memberikan kesempatan kepada user untuk mengkustomisasi tampilan dari aplikasi. 7arena la&out toolbar sangat fleksibel+ user bisa memindah-mindahkan letak toolbar di dalam aplikasi+ di atas+ dibawah atau disamping+ atau bahkan mengambang $floating% diatas ,endela &ang sedang aktif. -alam contoh program diatas kita akan membuat sebuah .ool6ar dengan dua buah 6utton &ang telah didekorasi dengan icon cantik. )con &ang digunakan ban&ak tersedia di internet+ format file &ang dipilih adalah .png+ karena format file ini paling bagus dalam menangani transparasi komponen.

HALAMAN

34 | JAVA SWING
*ebelum mulai membuat .ool6ar+ kita perlu mempersiapkan

terlebih dahulu icon &ang akan digunakan sebagai dekorasi 6utton. )kuti langkah-langkah berikut ini : 1. 6uatlah sebuah ,a!a package baru untuk menampung semua icon &ang akan digunakan. caran&a klik kanan di ,endela 0ro,ects bagian nama pro,ect+ pilih menu : New > Java Package 6eri nama images untuk ,a!a package &ang baru sa,a kita buka. =. /emasukkan )con ke dalam package. (ntuk memasukkan image ke dalam package kita perlu tahu dimana pro,ect disimpan+ misalkan pro,ect disimpan dalam folder : c:\javaswing 6uka file e8plorer+ kemudian na!igasi ke folder c:\javaswing\src\images #op& semua icon &ang diperlukan ke dalam folder diatas.

penting
+uild $roje"t akan ber'asil jika tidak ada satupun error dalam kode program! Sebelum melakukan build proje"t pastikan terlebi' da'ulu tidak ada error dalam kode! (akukan build setiap kali menamba'kan &ile non% java ke dalam &older sour"e &ile! 0gar &ile tersebut ikut ter"op# ke dalam &older build1"lasses

3.

6uild pro,ect. @angkah ini diperlukan untuk mengcompile semua file .,a!a men,adi file .class. *elain itu proses ini ,uga akan mengkopi file selain file .,a!a $termasuk file icon% ke dalam folder buildHclasses. ika proses ini tidak dilaksanakan+ maka ketika program di,alankan+ file icon tidak akan ditemukan dan program men,adi error .

*etelah proses persiapan selesai+ lakukan langkah-langkah berikut ini untuk membuat .oolbar : 1. 6uka class .oolbar/enu.,a!a &ang sudah dibuat di langkah sebelumn&a. =. 6uat sebuah ob,ect .ool6ar+ caran&a : klik item .ool6ar dari endela 0allete+ kemudian klik "rame di endela -esign. *ecara otomatis sebuah ob,ect .ool6ar akan dimasukkan ke

KOMPONEN SWING | HALAMAN 35


dalam "rame. 'anti naman&a men,adi tool6ar. 3. /enambahkan 6utton dalam .ool6ar. 7lik item 6utton dalam endela 0allete kemudian klik komponen .ool6ar &ang baru sa,a kita buat tadi. .ool6ar+ ganti nama 6utton baru akan diletakkan diatas 6utton tersebut men,adi btn9ew.

@etakkan lagi satu buah 6utton diatas .ool6ar dan beri nama btn/a8imiDe. >. /endekorasi .ampilan 6utton. 4gar tampilan 6utton terlihat cantik+ kita perlu mengeset beberapa nilai dari properti 6utton+ seperti terlihat pada gambar di bawah ini :

endela 0roperties 6utton a% .e8t+ hapus nilai te8tn&a. b% 6order+ pilih bordern&a men,adi empt& border dan set nilai bordern&a men,adi IA+A+A+AJ. .u,uan pemberian empt& border ini agar tombol berukuran lebih besar dibandingkan dengan icon &ang akan digunakan nanti+ dan setiap mouse melewati 6utton+ ada efek transisi &ang cantik. (ntuk mengedit border dari 6utton+ /atisse men&ediakan endela 6order untuk memilih border &ang kita inginkan untuk button. 6order &ang dipilih bisa single border+ atau composite border &ang terdiri dari beberapa border.

HALAMAN

36 | JAVA SWING

endela 6order 2ditor dari 6utton c% EpaKue+ uncheck nilai opaKue. 6ertu,uan agar tomboln&a berwarna transparan+ sehingga mempun&ai warna background &ang sama dengan background .ool6ar. d% )con+ ganti icon&a dengan icon &ang telah disiapkan. (ntuk memasukkan icon ke dalam 6utton+ tekan tombol di samping pilihan )con di dalam endela 0roperties+ kemudian akan muncul -ialog )con 2ditor seperti di bawah ini :

endela icon editor

KOMPONEN SWING | HALAMAN 37


0ilih radio button #lasspath+ kemudian tekan tombol *elect "ile dan pilih salah satu icon &ang telah disiapkan. .ekan E7. @akukan langkah-langkah &ang sama terhadap 6utton &ang lain. A. #ompile hasiln&a. dan ,alankan class .oolbar/enu untuk melihat

Membuat Dialog dan JFileChooser


-ialog memerankan peran &ang penting dalam aplikasi berbasis desktop. )nteraksi antara user dengan aplikasi terkadang tidak ber,alan dengan baik karena user memberikan aksi &ang tidak !alid kepada aplikasi. 7etika kepada hal tersebut apa ter,adi+ aplikasi ter,adi harus dan memberitahukan user &ang telah

bagaimana seharusn&a user memperbaikin&a. /odel interaksi seperti ini tepat dilaksanakan menggunakan dialog. *kenario lain adalah ketika aplikasi memerlukan input dari user agar aplikasi bisa terus melaksanakan tugasn&a+ misaln&a meminta konfirmasi apakah user &akin akan melaksanakan sebuah aksi penting terhadap aplikasi seperti delete+ update atau add data. -ialog ,uga memberikan pembatasan kepada user+ sebelum dialog selesai diproses+ user tidak akan bisa berinteraksi dengan bagian aplikasi lain&a. -ialog mencegah hal ini ter,adi dengan memastikan bahwa ,endela &ang bisa diaktifkan han&alah ,endela dialog+ sedangkan ,endela aplikasi &ang lain tidak dapat diaktifkan selama ,endela dialog masih aktif. 4plikasi sangat sering menggunakan dialog untuk berinteraksi dengan user+ tetapi ,enis interaksin&a selalu seragam dan berulangulang. *wing men&ediakan dialog &ang didesign untuk keperluan &ang sering muncul dalam aplikasi+ seperti Eption0ane dan "ile#hooser. *wing ,uga men&ediakan class -ialog ,ika kita ingin

HALAMAN

38 | JAVA SWING
membuat dialog custom sesuai keinginan kita.

Membuat pre%de&ined dialog dengan J2ption$ane


Eption0ane men&ediakan beberapa dialog &ang siap pakai dan sering digunakan dalam aplikasi. Eption0ane sangat memudahkan kita dalam meminta user suatu input tertentu atau memberitahu user apa &ang ter,adi dalam aplikasi. Eption0ane mempun&ai ban&ak static method untuk menampilkan popup dialog dengan mudah. .erdapat empat method utama &ang dapat kita gunakan sebagai landasan membuat dialog. 7eempat method tersebut secara rinci digambarkan dalam table berikut ini:
/ethod show#onfirm-ialog show)nput-ialog -eskripsi /eminta konfirmasi daru user+ seperti &es/no/cancel /eminta input dari user+ baik berupa input te8t menggunakan .e8t"ield maupun pilihan menggunakan #ombo6o8 show/essage-ialog /emberitahukan user tentang apa &ang baru sa,a ter,adi showEption-ialog 'abungan dari ketiga ,enis dialog diatas

.able method Eption0ane *wing ,uga men&ediakan method show)nternalLLL &ang digunakan ,ika kita beker,a dengan )nternal"rame. 0arameter dari keempat method tersebut mengikuti pola &ang konsisten. .erurut dari kiri ke kanan+ berikut ini parameterparameter &ang bisa diterima oleh method-method dalam class Eption0ane: 1. parent#omponent /endefisikan komponen &ang akan men,adi parent dari dialog bo8 ini. "rame dari parent component tersebut akan men,adi frame dari dialog dan dialog akan ditampilkan di tengah-tengah parent component. ika nilai dari parent#omponent diset null+

KOMPONEN SWING | HALAMAN 39


maka dialog akan menggunakan frame default dan dialog akan diletakkan ditengah-tengah la&ar monitor $tergantung @M"%. =. message 0esan &ang deskriptif menerangkan perihal dialog &ang

muncul. 0ada umumn&a message berupa pesan *tring &ang akan diletakkan dalam dialog+ namun ,enis ob,ect lain ,uga dii,inkan digunakan sebagai message. Eb,ect-ob,ect &ang dii,inkan akan diperlakukan berbeda+ ob,ect-ob,ect tersebut antara lain a% Eb,ectIJ *etiap ob,ect akan ditampilkan dalam dialog berurut dari atas ke bawah. 4turan ini berlaku rekursif untuk semua ob,ect didalam arra&. b% #omponent ika ob,ect &ang dimasukkan sebagai message bertipe #omponent+ maka #omponent tersebut akan ditampilkan ditengah-tengah dialog. c% )con )con akan dimasukkan ke dalam sebuah @abel kemudian ditampilkan di sebelah kiri dari dialog. d% others Eb,ect lain&a akan ditampilkan dalam dialog dengan mengambil nilai kembalian dari method to*tring dari setiap ob,ect. 3. message.&pe /endefisikan ,enis dari pesan. 0ada umumn&a memberikan custom icon untuk setiap ,enis pesan. *etiap @M" manager

HALAMAN

40 | JAVA SWING
akan memperlakukan setiap ,enis pesan dengan berbeda+ namun perbedaan&a tidak akan terlalu mencolok. 0ilihan &ang mungkin dan icon &ang mewakilin&a adalah: a% 2CCECN/2**4'2 b% )9"EC/4.)E9N/2**4'2 c% ;4C9)9'N/2**4'2 d% 0@4)9N/2**4'2 $tanpa icon% >. option.&pe /endefisikan tombol-tombol &ang akan ditampilkan di bagian bawah dari dialog. a% -2"4(@.NE0.)E9 b% ?2*N9ENE0.)E9 c% ?2*N9EN#49#2@NE0.)E9 d% E7N#49#2@NE0.)E9 9amun kita tidak dibatasi untuk han&a menggunakan empat ,enis set tombol diatas+ kita dapat mendefisikan tombol-tombol &ang akan muncul sesuai kebutuhan. A. options -eskripsi &ang lebih detail dari set tombol &ang digunakan dialog. 9ilai &ang laDim adalah sebuah arra& *tring berisi te8t &ang akan ditampilkan di setiap tombol. 9amun Eb,ect lain ,uga dapat diterima+ antara lain: a% #omponent #omponent akan diletakkan dalam baris tombol secara langsung. b% )con

KOMPONEN SWING | HALAMAN 41


*ebuah 6utton akan dibuat dan didekorasi dengan icon ini. c% other Eb,ect dengan tipe selainn&a akan dirubah ke dalam bentuk *tring dengan mengambil nilai kembalian dari method to*tring dari ob,ect tersebut. 5. icon )con &ang digunakan untuk mendekorasi dialog. ika icon ini didefinisikan maka akan menimpa icon default &ang didefinisikan oleh message.&pe. 7. title udul dari dialog &ang diletakkan di bagian paling atas dari dialog. F. initialValue 9ilai default dari pilihan &ang mungkin ada dalam dialog. (ntuk lebih ,elasn&a+ berikut ini beberapa contoh kode penggunaan Eption0ane beserta hasil tampilan&a : JOptionPane.showMessageDialog(null, "Simple plain dialog","Plain dialig", JOptionPane.PLAIN_MESSAGE);

.ampilan dialog sederhana

HALAMAN

42 | JAVA SWING
JOptionPane.showMessageDialog(null, "Your action was succeed, + you can proceed to next assigment", "Information dialog", JOptionPane.INFORMATION_MESSAGE);

.ampilan dialog dengan tipe dialog )nformation

JOptionPane.showMessageDialog(null, "You neet to be sure to do this action!", "Dialog Peringatan", JOptionPane.WARNING_MESSAGE);

-ialog dengan tipe ;arning

JOptionPane.showMessageDialog(null, "Something goes wrong and generate error message", "Error Dialog", JOptionPane.ERROR_MESSAGE);

-ialog dengan tipe 2rror

KOMPONEN SWING | HALAMAN 43


JOptionPane.showConfirmDialog(null, "Choose yes or no","Confirmation Dialog", JOptionPane.YES_NO_OPTION, JOptionPane.WARNING_MESSAGE);

Eption dialog dengan tipe )nformation dan pilihan ?2*N9E

JOptionPane.showConfirmDialog(null, "Choose yes, no or cancel","Confirmation Dialog", JOptionPane.YES_NO_CANCEL_OPTION, JOptionPane.PLAIN_MESSAGE);

Eption-ialog dengan tipe 0lain dan pilihan ?2*N9EN#49#2@

JOptionPane.showInputDialog(null, "Input your name here","Input Dialog", JOptionPane.INFORMATION_MESSAGE);

)nput-ialog dengan tipe message )nformation

HALAMAN

44 | JAVA SWING
String[] options = {"Apple","Mango","Grape","Guava"}; JOptionPane.showInputDialog(null, "Choose this one Option","Input dialog", JOptionPane.WARNING_MESSAGE,null,options,"Apple");

)nput-ialog dialog dengan tipe ;arning+ Eptions berupa arra& of *tring dan initialValue O 34pple3

Membuat JFileC'ooser
"ile#hooser digunakan untuk berna!igasi dalam file s&stem+ kemudian memilih satu atau lebih file atau folder dari list file dan folder. "ile#hooser pada dasarn&a adalah pengembangan dari dialog &ang dapat digunakan untuk memilih file. "ile#hooser dapat digunakan sebagai dialog untuk men&impan file atau untuk membuka file. "ile#hooser han&a memberikan fasilitas untuk memilih file atau folder+ sedangkan mekanisme untuk men&impan atau membuka file dilakukan sendiri menggunakan librar& )/E. 4plikasi berikut ini adalah contoh penggunaan "ile#hooser untuk membuka dan men&impan file.

#ontoh program menggunakan "ile#hooser .ampilan "ile#hooser ketika tombol open ditekan adalah seperti di

KOMPONEN SWING | HALAMAN 45


bawah ini :

.ampilan "ile#hooser (ntuk membuat aplikasi diatas lakukan langkah-langkah berikut ini : 1. =. 6uat class "rame "orm baru+ beri nama #hooser.,a!a /asukkan dua buah .e8t"ield : t8tEpen dan t8t*a!e+ dua buah button : btnEpen dan btn sa!e+ sebuah @abel : lbl*tatus. *esuaikan penataan komponen sesuai dengan gambar diatas. 3. .ambahkan sebuah ob,ect "ile#hooser sebagai field dari class #hooser+ beri nama chooser. public class Chooser{ JFileChooser chooser = new JFileChooser(); //kode lain di sini } >. "ile9ame28tention"ilter digunakan sebagai file filter dalam "ile#hooser. /etode filteringn&a adalah mencocokkan ekstensi file dalam file s&stem dengan ekstensi &ang ada dalam "ile9ame28tention"ilter. #ontoh kode di bawah ini akan men&ebabkan "ile#hooser mempun&ai pilihan : 02' "ile<+ dan ,ika pilihan tersebut dipilih+ maka file dengan ekstensi :,pg<+ :,peg<+< 0'< atau: 02'< sa,a &ang akan ditampilkan oleh

HALAMAN

46 | JAVA SWING
"ile#hooser. FileNameExtensionFilter JPEGFilter = new FileNameExtensionFilter( "JPEG File","jpg","jpeg",JPG,JPEG); chooser.addChoosableFileFilter(JPEGFilter); A. *et direktori &ang akan ditu,u oleh mengetahui dimana direktori aktif "ile#hooser. (ntuk aplikasi+ kita bisa

menggunakan s&stem propert& :user.dir<. 7ode berikut ini akan men&ebabkan "ile#hooser dibuka pada direktori aktif aplikasi : String dir = System.getProperty("user.dir"); chooser.setCurrentDirectory(new File(dir)); 5. /enghandle e!ent penekanan tombol btn*a!e. 7etika tombol btn*a!e ditekan+ chooser akan menampilkan dialog sa!e file+ kemudian mengambil nama file &ang dipilih dan menampilkann&a dalam t8t*a!e+ serta menampilkan&a dalam lbl*tatus. 6erikut ini koden&a : private void btnSaveActionPerformed(ActionEvent evt) { // TODO add your handling code here: int ret = chooser.showSaveDialog(this); if(ret == JFileChooser.APPROVE_OPTION){ File f = chooser.getSelectedFile(); lblStatus.setText("Status : saving file" + f.getAbsolutePath()); txtSave.setText(f.getAbsolutePath()); } } 7. /enghandle penekanan tombol btnEpen. 7ode untuk

menangani penekanan tombol btnEpen mirip dengan kode untuk menangani penenakan tombol btn*a!e+ perbedaan&a

KOMPONEN SWING | HALAMAN 47


adalah btnEpen akan menampilkan dialog open file+ berikit ini koden&a : private void btnBrowseActionPerformed(ActionEvent evt){ // TODO add your handling code here: int ret = chooser.showOpenDialog(this); if(ret == JFileChooser.APPROVE_OPTION){ File f = chooser.getSelectedFile(); lblStatus.setText("Status : opening file" + f.getAbsolutePath()); txtOpen.setText(f.getAbsolutePath()); } } F. #ompile dan ,alankan aplikasin&a dengan menekan tombol *1)". B "5 6eker,a dengan Eption0ane dan dengan "ile#hooser sangat

sederhana. 7eduan&a menggunakan modal dialog untuk mengambil input dari user. /odal dialog akan mencegah user mengakses bagian aplikasi lain sebelum dialog ditutup+ atau dalam hal ini memutuskan pilihan apa &ang diambil oleh user. /asih ban&ak lagi komponen swing &ang disediakan oleh -7+ anda tinggal melan,utkan membaca dari referensi &ang diberikan modul ini pada bagian akhir untuk melan,utkan pembela,aran anda tentang a!a desktop.

HALAMAN

48 | JAVA SWING

Konsep M3C
/V# adalah arsitektur aplikasi &ang memisahkan kode-kode aplikasi dalam tiga lapisan+ /odel+ View dan #ontrol. /V# termasuk dalam arsitektural design pattern &ang menghendaki organisasi kode &ang terstruktur dan tidak bercampur aduk. 7etika aplikasi sudah sangat besar dan menangani struktur data &ang kompleks+ harus ada pemisahan &ang ,elas antara domain model+ komponen !iew dan kontroler &ang mengatur penampilan model dalam !iew. 4rsitektur /V# ini memungkinkan adan&a perubahan dalam domain model tanpa harus mengubah code untuk menampilkan domain model tersebut. 1al ini sangat bermanfaat ketika aplikasi mempun&ai domain model dan !iew komponen sangat besar dan kompleks.

-iagram interaksi antar komponen dalam arsitektur /V# $;ikipedia.org% /odel adalah representasi dari ob,ect &ang sedang diolah oleh aplikasi+ dalam a!a+ model ini biasan&a direpresesentasikan sebagai a!a 6ean. a!a 6ean adalah class a!a biasa atau 0E E $0lain Eld a!a Eb,ect%. *&arat sebuah 0E E dianggap sebagai a!a 6ean adalah :

KONSEP MVC | HALAMAN 49


1. /empun&ai constructor default+ constructor &ang tidak

mempun&ai parameter. =. *emua field-field &ang bisa diakses dilengkapi dengan getter dan setter method. @ebih ,elasn&a lihat kode dari class #ustomer di bawah ini : public class Customer { private int id; private String nama, status, agama, jenisKelamin, pekerjaan; public Customer() { } public int getId() { return id; } public void setId(int id) { this.id = id; } public String getNama() { return nama; } public void setNama(String nama) { this.nama = nama;} //getter dan setter method untuk field lainnya di sini } 7ode diatas adalah representasi /odel dalam a!a untuk 2ntit&

#ustomer. 6eberapa orang terkadang salah mengartikan model ini sebagai data akses domain. -imana data dari sumber data+ misaln&a database+ diambil dan diolah. 0ada hakekatn&a /odel adalah representasi data dari ob,ect sebenarn&a+ bukan kumpulan kode untuk mengakses data dari database. 0endekatan terbaik adalah memisahkan kode untuk melakukan akses sumber data ke dalam lapisan tersendiri+ lapisan ini biasan&a disebut sebagai ser!ice. *er!ice diimplementasikan dalam bentuk class-class &ang disebut sebagai manager+ misaln&a *P@/anager+ 0rint/anager+ Ceport/anager+ L/@/anager+ ;eb*er!ice/anager dan seterusn&a. -engan begitu kode akan men,adi lebih rapi dan terstruktur. /anfaat paling terasa adalah kemudahan pencarian kesalahan dan penambahan modul-modul baru tidak harus

HALAMAN

50 | JAVA SWING
merombak seluruh struktur aplikasi. View adalah komponen untuk merepresentasikan /odel dalam bentuk !isual. *emisal komponen swing+ seperti : .able+ @ist+ #ombo6o8 dan sebagain&a. View ,uga bertanggung ,awab untuk menangkap interaksi user terhadap sistem+ semisal : klik mouse+ penekanan tombol ke&board+ barcode scanning dan sebagain&a. #ontroller sebenarn&a han&a sekumpulan kode-kode untuk

mensinkronisasi keadaan /odel dan View. ika ada perubahan data dari /odel+ #ontroller harus mengupdate tampilan View. -an sebalikn&a ,ika user memberikan e!ent terhadap View+ #ontroller harus mengupdate /odel sesuai dengan hasil interaksi user terhadap View.

Model dalam Komponen Swing


*ebagaian besar komponen swing mempun&ai model. 6utton Q apa ke&board mnemonicn&a+ apakah sedang dipilih atau tidak swing &ang mempun&ai lebih dari satu model. @ist/odel &ang memegang isi dari untuk mencatat item @ist &ang sedang dipilih. 0ada ban&ak kasus normal kita tidak perlu pusing memikirkan model ini. *emisal kita tidak perlu memikirkan model dari 6utton karena pada kasus umum kita tidak perlu memodifikasi model dari 6utton. @alu+ kenapa model komponen swing dibuatR 4lasan utaman&a adalah fleksibilitas untuk menentukan bagaimana data disimpan dan diambil dari komponen swing. /isaln&a kita mempun&ai aplikasi spreadsheet &ang menggunakan komponen .able+ karakteristik utama spreadsheet adalah ban&ak cell &ang kosong+ 6utton mempun&ai model &aitu 6utton/odel &ang memegang 3state3 dari 6utton tersebut @ist mempun&ai dan seterusn&a. 4da pula komponen @ist dan @ist*election/odel

KONSEP MVC | HALAMAN 51


dengan begitu kita bisa memilih model data &ang sesuai dengan karakteristik tersebut. #ontoh lainn&a adalah .able &ang digunakan untuk menampilkan data dari database dengan ,umlah baris luar biasa ban&ak. 7ita bisa mengatur agar tampilan .able dibuat halaman-per-halaman dalam menampilkan baris data+ tidak semua data ditampilkan dalam satu halaman+ hal ini ditu,ukan untuk efisiensi dan mempertahankan agar aplikasi tetap responsif walau beker,a dengan data &ang besar. /odel dalam komponen swing ,uga mempun&ai keuntungan lain+ &aitu tidak perlu ada dua data terpisah+ untuk struktur data aplikasi dan untuk komponen swing. 7egunaan /odel &ang cukup penting ,uga adalah adan&a konsep e!ent-listener+ dimana ,ika ter,adi e!ent perubahan data dalam model+ semua listener &ang terdaftar dalam model tersebut akan diberitahu dan tindakan &ang tepat dapat diambil untuk menangani e!ent &ang muncul. *ebagai contoh+ untuk menambahkan item dalam @ist kita bisa memanggil method add)tem dari @)st. 0enambahan item dalam @ist ini akan mengakibatkan @ist/odel memicu e!ent dalam @ist dan listener lainn&a. 7omponen swingS dalam hal ini @istSakan diupdate tampilan&a untuk merefleksikan perubahan item dalam @ist/odel. ;alaupun terkadang ban&ak &ang men&ebut arsetektur komponen swing sebagai /V#+ tetapi pada dasarn&a arsitektur komponen swing tidak sepenuhn&a /V#. 7omponen swing secara umum dibuat agar View dan #ontroller diletakkan dalam satu tempat $class% &aitu class () &ang disediakan oleh @ook-and-"eel. 4rsitektur komponen swing lebih tepat disebut sebagai :4rsitektur dengan /odel &ang terpisah<. *elan,utn&a kita akan membahas beberapa model &ang seringkali harus kita kustomisasi sesuai dengan kebutuhan. *edangkan model

HALAMAN

52 | JAVA SWING
&ang n&aris tidak pernah kita rubahS6utton/odelStidak dibahas dalam bagian ini.

TableModel
.able/odel adalah class model &ang paling sering dikustomisasi. 7arakteristik data dari dalam aplikasi. .able &ang berbentuk koleksi data dua dimensi membutuhkan perhatian khusus agar efisien digunakan ika kita tidak hati-hati+ maka aplikasi kita bisa men,adi sangat lambat dan tidak efisien. .able/odel adalah interface &ang digunakan oleh .able untuk

mendefinisikan ciri-ciri dari data tabular &ang akan ditampilkan oleh .able. /isaln&a : ,umlah kolom+ nama kolom+ class dari ob,ect dalam kolom+ ,umlah baris dan nilai setiap cell. -engan adan&a data-data ini .able dapat secara efisien menentukan bagaimana menampilkan data tersebut. 6erikut ini adalah kode untuk menampilkan koleksi ob,ect

#ustomer. #lass 4rra&@istT#ustomerU adalah implementasi dari generics+ konsep dalam a!a &ang digunakan untuk mendefinisikan isi dari koleksi. 4rra&@istT#ustomerU artin&a adalah membuat sebuah ob,ect koleksi 4rra&@ist &ang harus diisi oleh ob,ect #ustomer dan tidak bisa diisi oleh ob,ect lain&a+ misaln&a *tring. public class CustomerTableModel implements TableModel{ private ArrayList<Customer> customers = new ArrayList<Customer>(); private Set<TableModelListener> listeners = new HashSet<TableModelListener>(); public CustomerTableModel(List<Customer> cust){ customers.addAll(cust); }

KONSEP MVC | HALAMAN 53


public int getRowCount() { return customers.size();} public int getColumnCount() { return 6; } public String getColumnName(int columnIndex) { switch(columnIndex){ case 0 : return "Id"; case 1 : return "Nama"; case 2 : return "Status"; case 3 : return "Agama"; case 4 : return "Jenis Kelamin"; case 5 : return "Pekerjaan"; default : return ""; } } public Class getColumnClass(int columnIndex) { switch(columnIndex){ case 0 : return Integer.class; case 1 : return String.class; case 2 : return String.class; case 3 : return String.class; case 4 : return String.class; case 5 : return String.class; default : return String.class; } } public boolean isCellEditable(int rowIndex, int columnIndex) { return false; } public Object getValueAt(int rowIndex, int columnIndex) { Customer currentCustomer = customers.get(rowIndex);

HALAMAN

54 | JAVA SWING
switch(rowIndex){ case 0 : return currentCustomer.getId(); case 1 : return currentCustomer.getNama(); case 2 : return currentCustomer.getStatus(); case 3 : return currentCustomer.getAgama(); case 4 : return currentCustomer.getJenisKelamin(); case 5 : return currentCustomer.getPekerjaan(); default : return ""; } } public void setValueAt(Object aValue, int rowIndex, int columnIndex) { public void addTableModelListener( TableModelListener l) { listeners.add(l); } public void removeTableModelListener( TableModelListener l) { listeners.remove(l); } } .erlihat cukup repot bukanR untungn&a telah tersedia dua class &ang mengimplement interface .able/odel ini. 4bstract.able/odel telah mengimplementasi sebagaian besar abstract method dari interface .able/odel+ han&a tinggal tiga method sa,a &ang masih bersifat abstract &aitu : public int getRowCount(); public int getColumnCount(); public Object getValueAt(int row, int column); ?ang perlu diperhatikan bahwa dalam 4bstrac.able/odel+ method is#ell2ditable selalu mengembalikan nilai false+ artin&a semua cell tidak dapat diedit. 7emudian method setValue4t adalah method kosong belaka+ artin&a ,ika kita memanggil method ini tidak akan ter,adi apa-apa. }

KONSEP MVC | HALAMAN 55


#lass kedua adalah semua -efault.able/odel method abstract &ang dari telah interface

mengimplementasi .able/odel.

Cepresentasi data -efault.able/odel menggunakan

dua ,enis data tabular+ &aitu arra& dua dimensi+ Eb,ectIJIJ+ dan Vector dari Vector+ VectorTVectorTEb,ectUU. ika kita mempun&ai struktur data selain kedua ,enis tersebut kita harus melakukan kon!ersi data ke dalam salah satu bentuk struktur data tersebut. #ara &ang lebih cerdas adalah mendefinisikan sendiri class &ang mengimplement interface .able/odel seperti class #ustomer.able/odel diatas. *etelah .able/odel selesai didefinisikan kita tinggal memanggil method set.able/odel dari ob,ect .able+ atau membuat ob,ect .able baru menggunakan constructor &ang menerima argumen .able/odel. #ontohn&a seperti potongan kode di bawah ini : JTable table = new JTable(new DefaultTableModel()); JTable table1 = new JTable(); table1.setTableModel(new DefaultTableModel());

ListModel dan ListSelectionModel


@ist adalah komponen swing &ang mempun&ai dua model @ist. sekaligus+ @ist/odel dan @ist*election/odel. @ist/odel digunakan untuk mendefinisikan item/element &ang dikandung oleh *edangkan @ist*election/odel digunakan untuk mendefinisikan bagaimana representasi data ,ika ter,adi proses pemilihan di @ist. *eperti haln&a .able/odel+ @ist/odel mempun&ai dua class &ang mengimplement @ist/odel+ 4bstract@ist/odel dan -efault@ist/odel. 7ita bisa menggunakan salah satu dari tiga tipe tersebut untuk membuat ob,ect @ist/odel. #ara pertama dengan membuat class baru &ang mengimplement @ist/odel. #ara kedua dengan membuat class baru &ang mene8tends 4bstract@ist/odel

HALAMAN

56 | JAVA SWING
dan cara ketiga dengan langsung menggunakan -efault@ist/odel. *truktur data @ist tidak terlalu rumit seperti .able+ dan pada

umumn&a+ cukup han&a dengan menggunakan -efault@ist/odel sudah memenuhi sebagaian besar kebutuhan penggunaan @ist. 6erikut ini contoh bagaimana membuat @ist/odel untuk data customer+ contoh ini menggunakan cara kedua untuk membuat obe,ct @ist/odel+ &aitu dengan cara membuat class baru &ang menge8tends 4bstract@ist/odel : public class CustomerListModel extends AbstractListModel{ private ArrayList<Customer> customer = new ArrayList<Customer>(); public CustomerListModel(List<Customer> cust){ customers.addAll(cust); } public Object getValueAt(int index) { return customers.get(index); } public int getSize() { return customers.size(); } } )mplementasi @ist/odel sangat mudah dan tidak serumit

.able/odel+ namun implementasi dari @ist*election/odel sangat rumit+ karena kita harus mengimplementasi dua puluh buah method. @ebih baik menggunakan implementasi standard dari @ist*election/odel &aitu -efault@ist*election/odel.

MENANGANI EVENT | HALAMAN 57

Menangani /vent
2!ent dan @istener adalah implementasi dari pattern Ebser!er dalam a!a. 0attern Ebser!er sangat berguna digunakan untuk mendesign komunikasi &ang konsisten antara ob,ect &ang berdiri sendiri dan ob,ect-ob,ect &ang bergantung padan&a. Ebser!er design pattern melibatkan dua ob,ect utama+ ob,ect pertama berlaku sebgai *ub,ect dan ob,ect lain&a berlaku sebagai Ebser!er. Eb,ect *ub,ect merupakan pusat perhatian dari ob,ect Ebser!er+ perubahan keadaan dari ob,ect *ub,ect selalu dipantau oleh Ebser!er. Ebser!er dapat melakukan register-unregister terhadap *ub,ect. ika Ebser!er tertarik dengan perilaku dan keadaan dari *ub,ect+ Ebser!er dapat meregister dirin&a kepada *ub,ect. 6egitu ,uga sebalikn&a ,ika Ebser!er tidak tertarik terhadap keadaan atau perilaku *ub,ect+ Ebser!er tidak perlu melakukan resgistrasi atau kalau sudah terlan,ur reguister dapat melakukan unregister. *ub,ect mempun&ai ban&ak aspek perilaku dan keadaan &ang dapat dipantau oleh Ebser!er. (ntuk setiap aspek+ *ub,ect men&ediakan method untuk register-unregister dan men&ediakan interface &ang harus diimplement oleh Ebser!er &ang ingin memantau aspek tersebut. 0ada satu titik tertentu+ *ub,ect akan memberitahu $notif&% Ebser!er tentang perilaku atau keadaan&a. keadaan *ub,ect akan mengumpulkan informasi tentang atau perilakun&a

kemudian mengirimkan pesan kepada Ebser!er lewat interface &ang telah disepakati keduan&a+ pola ini dikenal ,uga sebgai 2!ent0assing.

HALAMAN

58 | JAVA SWING
0attern Ebser!er dimaksudkan untuk mengurangi ketergantungan satu ob,ect terhadap -engan ob,ect lain+ istilah kerenn&a adalah -ecoupling. mekanisme /ekanisme register-unregister+ notif& memudahkan Ebser!er *ub,ect

dapat secara lebih leluasa memutuskan untuk memantau *ub,ect tertentu atau tidak. sedang memantaun&a. -i bagian berikutn&a swing kita akan melihat bagaimana mekanisme pattern registermemberitahu keadaan dan perilakun&a kepada Ebser!er &ang

Ebser!er diimplementasikan dalam swing. 4kan di,elaskan pula bagaimana mengimplementasikan unregister dan notif& dalam menangani interaksi user terhadap komponen swing.

Event Listener dalam Swing


0attern Ebser!er melibatkan dua ob,ect *ub,ect dan Ebser!er+ dalam swing Ebser!er dikenal sebagai @istener. 7emudian+ ketika *ub,ect akan memberitahu $notif&% Ebser!er tentang apa &ang sedang ter,adi dalam ob,ect *ub,ect+ ada satu informasi &ang akan di-passing oleh *ub,ect ke Ebser!er+ informasi ini disebut sebagai 2!ent ob,ect. *edangkan ke,adian ketika *ub,ect melakukan notif& kepada Ebser!er disebut sebagai 2!ent triggering. 4gar pen,elasan diatas mudah dipahami+ kita akan membuat aplikasi sederhana &ang mengimplementasikan pattern Ebser!er. 4plikasi sederhana ini terdiri dari dua class utama &aitu *ub,ect dan Ebser!er. #lass *ub,ect akan men,alankan sebuah loop tanpa batas+ di dalam loop tersebut *ub,ect akan meminta input dari user berupa sebuah kata &ang diakhiri dengan penekanan enter. 7etika user menekan enter+ *ub,ect akan menotif& Ebser!er. -alam proses notifikasi tersebut+ *ub,ect mengumpulkan informasi tentang e!ent

MENANGANI EVENT | HALAMAN 59


pemasukan kata oleh user+ informasi tersebut berupa : kata apa &ang dimaksukkan dan ob,ect sub,ect dimana e!ent pemasukan kata tersebut ter,adi $source%. 7emudian Ebser!er akan menerima informasi dari *ub,ect dan mencetak informasi tersebut ke standard output. 6erikut ini tampilan dari aplikasi sederhana ini : type a word : ifnu print from observer : first observer event from : subject observed key presed is ifnu *ub,ect akan mencetak string :t&pe a word :< dan menunggu user untuk memasukkan satu kata dan menekan enter. /isaln&a dalam contoh diatas :ifnu<. 7emudian *ub,ect akan menghimpun informasi tentang sumber e!ent $*ub,ect itu sendiri% dan kata &ang diketikkan user $ifnu%. *etelah itu+ *ub,ect memberitahu $notif&% Ebser!er bahwa telah ter,adi e!ent pemasukan kata dengan men&ertakan informasi &ang telah dihimpun *ub,ect. Ebser!er menerima informasi dari *ub,ect bahwa telah ter,adi e!ent pemasukan kata oleh user+ selan,utn&a Ebser!er akan men,alankan tindakan-tindakan untuk menangani e!ent tersebut. .indakan tersebut adalah : mencetak informasi Ebser!er+ source+ dan kata &ang dimasukkan oleh user. -i dalam class *ub,ect terdapat field 1. =. 3. 7oleksi Ebser!er $listeners% 9ama $name% 7ata &ang dimasukkan user $word2ntered%

7emudian ada ,uga method : 1. #onstructor &ang menerima parameter *tring+ parameter ini digunakan sebagai pengenal $name% dari ob,ect *ub,ect.

HALAMAN

60 | JAVA SWING
=. Cegister-unregister remo!e@istener% 3. >. /ethod pri!ate untuk menotif& Ebser!er $trigger@istener% /ethod untuk menerima input kata dari user $run0rogram% Ebser!er $register@istener+

6erikut ini kode lengkapn&a :

MENANGANI EVENT | HALAMAN 61


public class Subject { private Set<KeyboardPressedListener> listeners = new HashSet<KeyboardPressedListener>(); private String wordEntered; private String name; public Subject(String subjectName){ name = subjectName; } public void runProgram(){ while(true){ Console c = System.console(); wordEntered = c.readLine("type a word if(wordEntered.equals("exit")) break; else triggerListener(); } } private void triggerListener(){ KeyboardPressedEvent event = new KeyboardPressedEvent(); event.setSource(this); event.setWord(wordEntered); for(KeyboardPressedListener l : listeners){ l.keyPressed(event); } } : ");

HALAMAN

62 | JAVA SWING
public void registerObserver( KeyboardPressedListener l){ listeners.add(l); } public void removeObserver( KeyboardPressedListener l){ listeners.remove(l); } public String toString(){ return name; } } )nterface 7e&board0ressed@istener digunakan sebagai :kontrak< antara *ub,ect dan Ebser!er. )nterface ini men,amin bahwa Ebser!er &ang akan memantau e!ent pemasukan kata dari user dalam *ub,ect mempun&ai method ke&0ressed. /ethod ke&0ressed ini nanti &ang akan dipanggil oleh *ub,ect ketika e!ent pemasukan kata oleh user ter,adi di *ub,ect. public interface KeyboardPressedListener { public void keyPressed(KeyboardPressedEvent e); } #lass Ebser!er mengimplement interface 7e&board0ressed@istener dan nantin&a akan didaftarkan ke sub,ect sebagai Ebser!er. /ethod ke&0ressed diimplementasikan dengan mencetak informasi &ang diperoleh dari *ub,ect ke standard output. public class Observer implements KeyboardPressedListener{ private String name; public Observer(String name){ this.name = name; } public void keyPressed(KeyboardPressedEvent e) { System.out.println("print from observer : " + name + "\n\tevent from : " + e.getSource() + "\n\tkey presed is " + e.getWord() );}} #lass 7e&board0ressed2!ent informasi adalah a!a 6ean kata biasa oleh &ang user+

men&impan

ke,adian

pemasukan

MENANGANI EVENT | HALAMAN 63


didalamn&a han&a ada field source dan word serta getter-setter method untuk kedua field tersebut. public class KeyboardPressedEvent private Object source; private String word; public Object getSource() { return source; } public void setSource(Object src) { source = src;} public String getWord() { return word; } public void setWord(String wrd) { word = wrd; } } *ampai disini+ class-class diatas masih berdiri sendiri dan belum ada class &ang mempun&ai method main. 9ah+ disinilah kode class /ain#lass untuk men&atukan semua ob,ect diatas men,adi aplikasi utuh. public class MainClass { public static void main(String[] str){ Subject subject = new Subject("subject observed"); Observer observer = new Observer("first observer"); subject.registerObserver(observer); subject.runProgram(); } } @angkah-langkah dalam menggunakan pattern Ebser!er ini adalah : 1. /embuat ob,ect sub,ect dari class *ub,ect {

Subject subject = new Subject("subject observed"); =. /embuat ob,ect obser!er dari class Ebser!er

HALAMAN

64 | JAVA SWING
Observer observer = new Observer("first observer"); 3. -aftarkan ob,ect obser!er ke ob,ect sub,ect

subject.registerObserver(observer); >. alankan program utaman&a

subject.runProgram(); 0attern Ebser!er ini digunakan secara intensif dalam komponen swing. .erutama untuk menangangi e!ent dari input peripheralS ke&board+ mouse+ barcode readerS&ang ter,adi di komponen swing S .e8t"ield+ swing. 6utton+ .ableS. -alam bagian-bagian selan,utn&a kita akan bela,ar bagaimana menangani e!ent pada komponen

ActionListener
4ction@istener digunakan untuk mendengarkan action dari e!ent : 7lik terhadap 6utton 0emilihan menu item 0enekanan tombol enter dalam .e8t"ield

/ethod dalam 4ction@istener han&a satu &aitu action0erformed &ang menerima argumen ob,ect 4ction2!ent. 4ction2!ent berisi informasi-informasi penting ketika 4ction e!ent ter,adi+ termasuk tombol modifiers apa &ang sedang ditekan. .ombol modifiers antara lain : #.C@+ 4@.+ /2.4 dan *1)".. /ethod untuk menentukan tombol modifiers apa &ang sedang aktif adalah get/odifiers. /ethod get4ction#ommand digunakan untuk mengambil command string &ang didefinisikan oleh 6utton. -i bagian sebelumn&a kita telah beker,a menggunakan komponen swing+ dan sudah berlatih bagaimana menangani e!ent klik mouse

MENANGANI EVENT | HALAMAN 65


terhadap 6utton. /ari kita lihat lagi aplikasi sederhana berikut :

#ontoh aplikasi sederhana &ang menangani e!ent action2!ent pada 6utton /enangani klik mouse pada 6utton dalam 9etbeans cukup dengan memilih 6utton di endela -esign kemudian klik kanan dan pilih menu : Events > Action > ActionPerformed *etelah itu anda akan dibawa ke ,endela kode dan baris berikut ini akan dibuat secara otomatis oleh 9etbeans : private void btnHitungActionPerformed( java.awt.event.ActionEvent evt) { // TODO add your handling code here: } 7emudian kita akan menempatkan kode untuk menangani

penekanan tombol di bagian bawah baris //.E-E. *ebenarn&a 9etbeans men-generate beberapa lagi kode di bagian &ang tidak dapat diedit+ berikut ini cuplikan&a : btnHitung.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent evt){ btnHitungActionPerformed(evt); } }); /ethod add4ction@isterner ini mempun&ai fungsi &ang sama

HALAMAN

66 | JAVA SWING
dengan method register@istener pada class *ub,ect &ang kita bahas di bagian sebelumn&a. add4ction@isterner berfungsi untuk mendaftarkan Ebser!er ke *ub,ect. 0erbedaan terbesar disini adalah 9etbeans tidak membuat public class Ebser!er baru untuk mengimplementasi 4ction@istener. 0erhatikan petikan kode berikut ini : new ActionListener() { public void actionPerformed(ActionEvent evt){ btnHitungActionPerformed(evt); } ?ang dilakukan oleh kode diatas sebenarn&a adalah: 1. =. /embuat #lass baru &ang tidak pun&a nama $anon&mous% #lass baru tersebut turunan dari Eb,ect dan mengimplement interface 4ction@istener 3. >. /engimplementasi method abstrac action0erformed /ethod action0erformed dari class tak bernama ini akan memanggil parentn&a. *ecara kerapian umum kode 9etbeans metode akan ini membuat bagus+ sebuah karena anon&mous 9etbeans method btn1itung4ction0erformed dari class interface 4ction@istener. .etapi 9etbeans membuat anon&mous innerclass &ang mengimplement interface

innerclass seperti diatas untuk setiap penanganan e!ent. -ari sisi sangat men&embun&ikan kerumitan kode untuk menangani e!ent seperti diatas. 7ita tidak perlu susah-susah membuat sebuah public class Ebser!er tersendiri untuk menangani e!ent. #ukup dengan anon&mous innerclass.

MENANGANI EVENT | HALAMAN 67

KeyListener
7e&@istener akan mendengarkan penekanan tombol oleh komponen &ang berada dalam keadaan fokus. *emua komponen swing dapat menerima 7e&@istener sebagai Ebser!er. 7e&@istener dapat mendengarkan tiga e!ent berbeda : penekanan tombol+ pelepasan tombol dan pengetikan tombol. 7etigan&a ditangani oleh method &ang berbeda-beda+ &aitu : ke&0ressed ke&board. ke&Celeased : dipanggil ketika tombol ke&board dilepaskan. ke&.&ped : dipanggil ketika tombol diketikkan+ alias ditekan kemudian dilepaskan. /ethod ini dipanggil ,ika tombol &ang ditekan mempun&ai representasi karakter unicode+ seperti tombol angka dan tombol huruf. *edangkan penekanan tombol modifiers seperti 4@.+ #.C@+ 4CCE;+ #40*@E#7+ 9(/@E#7+ )9* dan lainn&a tidak akan mengakibatkan method ini dipanggil. 7etiga method diatas menerima parameter 7e&2!ent. (ntuk mengetes tombol apakah &ang ditekan oleh user+ digunakan method get7e&#ode. 7emudian hasil kembalian method get7e&#ode dibandingkan dengan field static kepun&aan class 7e&2!ent &ang diawali dengan huruf V7+ seperti : V7N29.2C+ V7N4+ V7N6+ V7N1+ V7N@2".N4CCE; dan seterusn&a. /ethod get7e&#har digunakan untuk menentukan karakter apa &ang diwakili oleh tombol &ang ditekan. ika tombol &ang ditekan adalah tombol modifiers maka method get7e&#har akan mengembalikan karakter 7e&2!ent.#14CN(9-2")92-. : dipanggil ketika ter,adi penekanan tombol

HALAMAN

68 | JAVA SWING

4plikasi sederhana &ang menangani penekanan tombol ke&board (ntuk membuat aplikasi &ang mendengarkan penekanan tombol ke&board seperti diatas lakukan langkah-langkah berikut ini : 1. =. 6uat class "rame baru+ beri nama "rame7e&0ressed. .ambahkan lbl7e&.&ped. 3. lbl*tatus digunakan untuk menandakan adan&a e!ent dua buah @abel+ beri nama lbl*tatus dan

ke&0ressed dan ke&Celeased &ang ter,adi berurutan >. lbl7e&.&ped digunakan untuk menandakan adan&a tombol &ang diketik. A. 0ilih "rame di endela -esign+ klik kanan+ dan pilih menu :

Events > Key > keyPressed 5. endela #ode akan terbuka+ modifikasi method form7e&0ressed men,adi seperti berikut ini : private void formKeyPressed(KeyEvent evt) { // TODO add your handling code here: if(evt.getKeyChar() == lblStatus.setText( "Anda menekan tombol : CHAR_UNDEFINED"); else lblStatus.setText("Anda menekan tombol : " + KeyEvent.CHAR_UNDEFINED)

MENANGANI EVENT | HALAMAN 69


evt.getKeyChar()); } 7. 0ilih "rame di endela -esign+ klik kanan+ dan pilih menu :

Events > Key > keyReleased F. endela #ode akan terbuka+ modfikasi method form7e&Celeased men,adi seperti berikut ini : private void formKeyReleased(KeyEvent evt) { // TODO add your handling code here: if(evt.getKeyChar() == lblStatus.setText( "Anda melepaskan tombol : CHAR_UNDEFINED"); else lblStatus.setText("Anda melepaskan tombol : " + evt.getKeyChar()); } G. 0ilih "rame di endela -esign+ klik kanan+ dan pilih menu : KeyEvent.CHAR_UNDEFINED)

Events > Key > keyTyped 10. endela #ode akan terbuka+ modfikasi method form7e&.&ped men,adi seperti berikut ini : private void formKeyTyped(KeyEvent evt) { // TODO add your handling code here: lblKeyType.setText("Anda mengetikkan tombol : " + evt.getKeyChar()); }

MouseListener dan MouseMotionListener


/ouse@istener mendengarkan interaksi mouse terhadap komponen swing. /ouse@istener dapat didaftarkan pada semua komponen

HALAMAN

70 | JAVA SWING
swing. /ouse@istener mendengarkan e!ent : mouse0ressed : e!ent ini ter,adi ketika user menekan salah satu tombol mouse diatas komponen swing. mouseCeleased : setelah tombol ditekan+ komponen swing akan menerima pelepasan tombol mouse. .etapi ,ika tombol mouse dilepaskan pada saat pointer mouse tidak berada diatas komponen swing+ maka e!ent ini tidak akan ter,adi. mouse#licked : e!ent ini muncul ketika user melakukan click tombol mouse diatas komponen swing. mouse2ntered : ketika mouse memasuki area diatas komponen swing+ e!ent ini akan dipicu. mouse28ited : muncul ketika mouse akan meninggalkan area diatas komponen swing 7etika user menekan tombol mouse $click%+ e!ent mouse0ressed dibuat+ kemudian mouseCeleased dan akhirn&a mouse#licked muncul terakhir. /ouse/otion@istener ,uga dapat didaftarkan sebagai listener pada semua komponen swing. /ouse/otion@istener dipisahkan dari /ouse@istener karena penanganan e!ent mouse/o!e &ang lebih berat dan intensif. /ouse/otion@istener mendengarkan dua en!ent: mouse/o!ed : ter,adi ketika user menggerakkan mouse diatas komponen swing mouse-ragged : ter,adi ketika user menekan tombol mouse sekaligus menggerakkan&a diatas komponen swing *emua method diatas menerima argumen berupa class

/ouse2!ent. /ethod get#lick#ount digunakan untuk menentukan

MENANGANI EVENT | HALAMAN 71


,umlah click &ang ter,adi dalam waktu &ang berdekatan. /ethod get#lick#ount ,uga digunakan untuk menentukan apakah klik &ang ter,adi adalah single klik atau double klik. /ethod get6utton digunakan untuk menentukan tombol mana &ang ditekan oleh user. 0ada umumn&a mouse &ang tersedia di pasaran mempun&ai tiga timbol &ang dapat di klik+ tombol kiri+ tombol tengah dan tombol kanan. /ethod get6utton akan mengembalikan nilai /ouse2!ent.6(..E91 ,ika ,ika tombol tombol tengah kiri ditekan+ dan /ouse2!ent.6(..E9= ditekan

/ouse2!ent.6(..E93 ,ika tombol kanan ditekan. /ethod getL dan get? akan mengembalikan koordinat dimana /ouse2!ent ter,adi. 7oordinat &ang digunakan adalah koordinat relatif. 7oordinat $0+0% berada di po,ok kiri atas dari komponen swing+ semakin kebawah nilai ? semakin besar dan semakin ke kanan nilai L semakin besar. 9ilai koordinatn&a din&atakan dalam satuan pi8el. 4plikasi di bawah ini adalah sebuah @abel di dalamn&a. 7etika ter,adi mouse/o!e+ "rame &ang mempun&ai e!ent mouse#lick dan

@abel akan menampilkan dimana e!ent tersebut

ter,adi. ika e!ent klik &ang muncul+ maka te8t dari @abel akan berisi :clicked at $8+&%<+ sedangkan e!ent mo!e han&a akan memunculkan koordinat :$8+&%< sa,a.

#ontoh aplikasi sederhana &ang mengani /ouse2!ent @akukan langkah-langkah berikut ini untuk membuat aplikasi seperti diatas : 1. 6uat class "rame baru+ beri nama "rame/ouse/otion.

HALAMAN

72 | JAVA SWING
=. 3. @etakkan sebuah @abel baru+ beri nama lbl*tatus. 0ilih "rame di endela -esigner+ klik kanan dan pilih menu : Set Layout > Null Layout @angkah ini bertu,uan untuk membuat agar "rame

menggunakan null la&out. 7alau tidak menggunakan null la&out kita tidak bisa meletakkan @abel pada sembarang posisi. >. 0ilih kembali "rame+ klik kanan dan pilih menu Events > Mouse > mouseClicked A. modifikasi kode pada endela #ode &ang tampil men,adi seperti di bawah ini : private void formMouseClicked(MouseEvent evt) { // TODO add your handling code here: lblStatus.setText("clicked at (" + evt.getX() + "," + evt.getY() + ")"); lblStatus.setLocation(evt.getX(),evt.getY()); } 7ode diatas menangani penekanan tombol mouse+ kemudian mengubah te8t @abel dan memindahkan @abel ke posisi dimana e!ent mouse#licked ter,adi. 5. 0ilih "rame lagi di endela -esign+ klik kanan dan pilih menu : Events > MouseMotion > mouseMoved 7. /odifikasi kode &ang muncul pada seperti di bawah ini : private void formMouseMoved(MouseEvent evt) { // TODO add your handling code here: lblStatus.setText("(" + evt.getX() + "," + evt.getY() + ")"); endela #ode men,adi

MENANGANI EVENT | HALAMAN 73


lblStatus.setLocation(evt.getX(),evt.getY()); } F. #ompile dan ,alankan aplikasi di atas.

/asih ban&ak lagi 2!ent-@istener &ang disediakan oleh -7. -ari bab di atas kita sudah dapat mengerti dengan baik konsep 2!ent@istener dan pattern Ebser!er &ang mendasarin&a. -engan kemampuan ini kita bisa dengan mudah mengerti bagaimana e!ent-listener &ang lain beker,a. 2!ent-@istener ,uga dapat di,alankan terhadap a!a 6ean

menggunakan 0ropert&#hange@istener dan 0ropert&2!ent. 7onsep ini dapat digunakan untuk mengamati perubahan pada field a!a 6ean.

HALAMAN

74 | JAVA SWING

Koneksi Database Dengan JD+C


Mengenal JDBC
a!a -atabase #onnecti!it& adalah 40) &ang digunakan a!a untuk melakukan koneksi dengan aplikasi lain atau dengan berbagai macam database. aplikasi -6# memungkinkan kita untuk membuat a!a &ang melakukan tiga hal: konek ke sumber data+

mengirimkan Kuer& dan statement ke database+ menerima dan mengolah resultset &ang diperoleh dari database. -6# mempun&ai empat komponen : 1. -6# 40) -6# 40) men&ediakan metode akses &ang sederhana ke sumber data relational $C-6/*% menggunakan pemrograman a!a. dengan menggunakan -6# 40)+ kita bisa membuat program &ang dapat mengeksekusi *P@+ menerima hasil Cesult*et+ dan mengubah data dalam database. -6# 40) ,uga mempun&ai kemampuan untuk berinteraksi dengan lingkungan terdistribusi dari ,enis sumber data &ang berbeda-beda. -6# 40) adalah bagian dari a!a 0latform &ang disertakan

dalam librar& -7 maupun C2. -6# 40) sekarang ini sudah mencapai !ersi >.0 &ang disertakan dalan -7 5.0. -6# 40) >.0 dibagi dalam dua package &aitu : ,a!a.sKl dan ,a!a8.sKl. =. -6# -ri!er /anager #lass -ri!er/anager dari -6# bertugas untuk mendefisikan ob,ect-ob,ect &ang dapat digunakan untuk melakukan koneksi ke sebuah sumber data. *ecara tradisional -ri!er/anager

KONEKSI DATABASE DENGAN JDBC | HALAMAN 75


telah men,adi tulang punggung arsitektur -6#. 3. -6# .est *uite -6# .est *uite membantu kita untuk mencara dri!er mana &ang cocok digunakan untuk melakukan sebuah koneksi ke sumber data tertentu. .es &ang dilakukan tidak memerlukan resource besar ataupun tes &ang komprehensif+ namun cukup tes-tes sederhana &ang memastikan fitur-fitur penting dapat ber,alan dengan lancar. >. -6#-E-6# 6ridge 6rige ini men&ediakan fasilitas -6# untuk melakukan koneksi ke sumber data menggunakan E-6# $Epen -ata6ase #onnecti!it&% dri!er. *ebagai catatan+ anda perlu meload dri!er E-6# di setiap komputer client untuk dapat menggunakan bridge ini. *ebagai konsekuensin&a+ cara ini han&a cocok dilakukan di lingkungan intranet dimana isu instalasi tidak men,adi masalah. -engan keempat komponen &ang dipun&ain&a+ -6# men,adi tools &ang dapat diandalkan untuk melakukan koneksi+ mengambil data dan merubah data dari berbagai macam sumber data. /odul ini han&a akan membahas dua komponen pertama dari keempat komponen -atabase. &ang dipun&ai oleh -6#+ &aitu -6# 40) dan -ri!er/anager. *umber data &ang digunakan adalah Celational -6#

Database Driver
-6# memerlukan database dri!er untuk melakukan koneksi ke suatu sumber data. -atabase dri!er ini bersifat spesifik untuk setiap ,enis sumber data. -atabase dri!er biasan&a dibuat oleh pihak pembuat sumber datan&a+ namun tidak ,arang ,uga

HALAMAN

76 | JAVA SWING
komunitas atau pihak ketiga men&ediakan database dri!er untuk sebuah sumber data tertentu. 0erlu dipahami sekali lagi bahwa database dri!er bersifat spesifik untuk setiap ,enis sumber data. /isaln&a+ -atabase -ri!er /&*Kl han&a bisa digunakan untuk melakukan koneksi ke database /&*Kl dan begitu ,uga database dri!er untuk 0ostgre *P@ ,uga han&a bisa digunakan untuk melakukan koneksi ke database 0ostgre *P@. -atabase dri!er untuk setiap -6/* pada umumn&a dapat

didownload dari website pembuat -6/* tersebut. 6eberapa !endor -6/* men&ebut -atabase dri!er ini dengan sebutan a!a #onnector $ /#onnector%. -atabase dri!er biasan&a dibungkus dalam file &ang berekstensi ,ar. *etiap database dri!er harus mengimplement interface ,a!a.sKl.-ri!er.

Membuat Koneksi
/elakukan koneksi ke database melibatkan dua langkah: /eload dri!er dan membuat koneksi itu sendiri. #ara meload dri!er sangat mudah+ pertama letakkan file ,ar database dri!er ke dalam classpath. 7emudian load dri!er dengan menambahkan kode berikut ini: Class.forName(com.mysql.jdbc.Driver); 9ama class database dri!er untuk setiap -6/* berbeda+ anda bisa menemukan nama class tersebut dalam dokumentasi dri!er database &ang anda gunakan. -alam contoh ini+ nama class database dri!er dari /&*Kl adalah com.m&sKl.,dbc.-ri!er. /emanggil method #lass.for9ame secara otomatis membuat

instance dari database dri!er+ class -ri!er/anager secara otomatis ,uga dipanggil untuk mengelola class database dri!er ini. adi anda tidak perlu menggunakan statement new untuk membuat instance

KONEKSI DATABASE DENGAN JDBC | HALAMAN 77


dari class database dri!er tersebut. @angkah berikutn&a adalah membuat koneksi ke database

menggunakan database dri!er &ang sudah diload tadi. #lass -ri!er/anager beker,a sama dengan interface -ri!er untuk mengelola dri!er-dri!er &ang diload oleh aplikasi+ ,adi dalam satu sesi anda bisa meload beberapa database dri!er &ang berbeda. 7etika kita benar-benar melakukan koneksi+ -6# .est *uite akan melakukan serangkaian tes untuk menentukan dri!er mana &ang akan digunakan. 0arameter &ang digunakan untuk menentukan dri!er &ang sesuai adalah (C@. 4plikasi &ang akan melakukan koneksi ke database men&ediakan (C@ pengenal dari ser!er databse tersebut. *ebagai contoh adalah (C@ &ang digunakan untuk melakukan koneksi ke /&*Kl : jdbc:mysql://[host]:[port]/[schema] contoh konkritn&a : jdbc:mysql://localhost:3306/latihan *etiap !endor -6/* akan men&ertakan cara untuk menentukan (C@ ini di dalam dokumentasi. 4nda tinggal membaca dokumentasi tersebut tanpa harus khawatir tidak menemukan informasi &ang anda perlukan. /ethod -ri!er/anager.get#onnection bertugas untuk membuat koneksi: Connection conn = DriverManager.getConnection( jdbc:mysql://localhost:3306/latihan); -alam keban&akan kasus anda ,uga harus memasukkan parameter username dan password untuk dapat melakukan koneksi ke dalam database. /ethod get#onnection menerima (sername sebagai parameter kedua dan pasword sebagai parameter ketiga+ sehingga

HALAMAN

78 | JAVA SWING
kode diatas dapat dirubah men,adi : Connection conn = DriverManager.getConnection( jdbc:mysql://localhost:3306/latihan, root,); ika salah satu dari dri!er &ang diload berhasil digunakan untuk melakukan koneksi dengan (C@ tersebut+ maka koneksi ke database berhasil dilaksanakan. #lass #onnection akan memegang informasi koneksi ke database &ang didefinisikan oleh (C@ tersebut. *etelah sukses melakukan koneksi ke database+ kita dapat

mengambil data dari database menggunakan perintah Kuer& ataupun melakukan perubahan terhadap database. bagian berikut ini akan menerangkan bagaimana cara mengambil dan memanipulasi data dari database.

Mengambil dan Memanipulasi Data dari Database


0roses pengambilan data dari database memerlukan suatu class untuk menampung data &ang berhasil diambil+ class tersebut harus mengimplement interface Cesult*et. Eb,ect &ang bertipe Cesult*et dapat mempun&ai le!el

fungsionalitas

&ang berbeda+ hal ini tergantung dari tipe dari

result set. @e!el fungsionalitas dari setiap tipe result set dibedakan berdasarkan dua area: -engan cara bagaimana result set itu dapat dimanipulasi 6agaimana result set itu menangani perubahan data &ang dilakukan oleh proses lain secara bersamaan $concurrent%.

KONEKSI DATABASE DENGAN JDBC | HALAMAN 79


-6# men&ediakan tiga tipe result set untuk tu,uan berbeda: 1. .?02N"EC;4C-NE9@? : result set tersebut tidak bisa ber,alan mundur+ reslut set han&a bisa ber,alan ma,u dari baris pertama hingga baris terakhir. result set han&a menggambarkan keadaan data ketika Kuer& di,alankan atau ketika data diterima oleh resul set. ika setelah itu ada perubahan data dalam database+ result set tidak akan diupdate alias tidak ada perubahan dalam result set tipe ini. =. .?02N*#CE@@N)9*29*).)V2 : result set dapat ber,alan ma,u mundur. result set dapat ber,alan ma,u dari row pertama hingga terakhir atau bergerak bebas berdasarkan posisi relatif atau absolute. 3. .?02N*#CE@@N*29*).)V2 : result set dapat ber,alan ma,u mundur. result set dapat ber,alan ma,u dari row pertama hingga terakhir atau bergerak bebas berdasarkan posisi relatif atau absolute. )nstance dari ob,ect bertipe Cesult*et diperlukan untuk

menampung hasil kembalian data dari database. *ebelum kita bisa memperoleh instance dari Cesult*et+ kita harus membuat instance dari class *tatement. #lass *tatement mempun&ai method e8ecutePuer& &ang digunakan untuk men,alankan perintah Kuer& dalam database kemudian mengembalikan data hasil eksekusi Kuer& ke dalam ob,ect Cesult*et. 6erikut ini adalah contoh kode untuk membuat instance class *tatement+ kemudian men,alankan Kuer& untuk mengambil data dari database &ang hasiln&a dipegang oleh Cesult*et :

HALAMAN

80 | JAVA SWING
Statement statement = conn.createStatement( ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_READ_ONLY); ResulSet rs = statement.executeQuery(select * from Customers); Cesult*et akan meletakkan kursorn&a $posisi pembacaan baris% di sebuah posisi sebelum baris pertama. (ntuk menggerakkan kursor ma,u+ mundur+ ke suatu posisi relatif atau ke suatu posisi absolute tertentu+ gunakan method-method dari Cesult*et: ne8t$% -- mengarahkan kursor ma,u satu baris. pre!ious$% -- mengarahkan kursor mundur satu baris. first$% -- mengarahkan kursor ke baris pertama. last$% -- mengarahkan kursor ke baris terakhir. before"irst$% -- mengarahkan kursor ke sebelum baris pertama. after@ast$% -- mengarahkan kursor ke setelah baris terakhir. relati!e$int rows% -- mengarahkan kursor relatif dari posisin&a &ang sekarang. *et nilai rows dengan nilai positif untuk ma,u+ dan nilai negatif untuk mundur. absolute$int row9umber% Q mengarahkan kursor ke posisi tertentu sesuai dengan nilai row9umber+ dan tentu sa,a nilain&a harus positif. )nterface Cesult*et men&ediakan method getter untuk mengakses nilai dari setiap kolom dalam baris &ang sedang aktif. 0arameter fungsi getter bisa menerima nilai inde8 dari kolom ataupun nama kolomn&a. 9amun begitu+ penggunaan nilai inde8 lebih efisien dibanding menggunakan nama kolom.

KONEKSI DATABASE DENGAN JDBC | HALAMAN 81


9ilai inde8 dimulai dengan satu hingga ban&akn&a kolom.

0enggunaan nama kolom adalah case insensiti!e+ artin&a huruf kecil atau huruf besar tidak men,adi masalah. get*tring digunakan untuk mengambil kolom dengan tiper data char+ !archar atau tipe data string lain&a. get)nt digunakan untuk mengambil kolom dengan tipe data integer. 6erikut ini dalah contoh program lengkap dari melakukan koneksi hingga mengambil data dari database. Class.forName(com.mysql.jdbc.Driver); Connection conn = DriverManager.getConnection( jdbc:mysql://localhost:3306/latihan, root,); Statement statement = conn.createStatement( ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_READ_ONLY); ResulSet rs = statement.executeQuery(select * from Customers); while(rs.next()){ System.out.println(rs.getInt(id)); System.out.println(rs.getString(Nama)); } /ethod e8ecutePuer& han&a dapat men,alankan perintah *P@ select+ update gunakan dan method tidak e8ecute(pdate mengembalikan untuk result men,alankan set+ tetapi perintah insert+ update dan delete. 1asil dari eksekusi insert+ delete mengembalikan sebuah nilai integer &ang merepresentasikan status hasil eksekusi method e8ecute(pdate. 6erikut ini contoh insert+ update dan delete :

HALAMAN

82 | JAVA SWING
result = statement.executeUpdate( "update Customers set nama ='roby' where nama='andy'"); result = statement.executeUpdate( "delete Customers where nama='andy'"); /enggunakan e8ecutePuer& dan e8ecute(pdate sangat mudah dan fleksible+ namun sangat tidak efisien+ 0repared*tatement menawarkan keunggulan dalam bentuk efisiensi.

Menggunakan PreparedStatement
/emanggil method e8ecute(pdate berulang-ulang+ misaln&a melakukan insert ratusan atau ribuan baris+ sangat tidak efisien. 1al ini disebabkan karena -6/* harus memproses setiap Kuer& &ang dikirimkan dalam beberapa langkah: memparsing Kuer&+ mengcompile Kuer& dan kemudian baru mengeksekusi Kuer& tersebut. 0repared*tatement menawarkan solusi &ang lebih baik dalam menangani keadaan tersebut. 0repared*tatement men&aratkan Kuer& &ang akan dieksekusi didefinisikan terlebih dahulu ketika 0repared*tatement dibuat. 7emudian Kuer& tersebut dikirimkan ke dalam database untuk dicompile terlebih dahulu sebelum han&a perlu digunakan. 7etika 7onsekuensin&a+ 0repared*tatement di,alankan+ terhadap inilah -6/* Kuer& &ang bukan tidak

mempun&ai Kuer&+ tetapi mempun&ai Kuer& &ang sudah dicompile. 0repared*tatement kompilasi ulang 1al melakukan &ang di,alankan

0repared*tatement.

men&ebabkan

0repared*tatement ,auh lebih efisien dibandingkan menggunakan method *tatement.e8ecute(pdate. 6erikut ini contoh pembuatan 0repared*tatement menggunakan

class #onnection &ang telah dibuat sebelumn&a :

KONEKSI DATABASE DENGAN JDBC | HALAMAN 83


PreparedStatement ps = conn.prepareStatement( update Customers set nama = ? where nama = ?); 0erhatikan tanda R &ang ada dalam Kuer& diatas+ tanda R disebut sebagai parameter. 7ita bisa memberikan nilai &ang berbeda ke dalam parameter dalam setiap pemanggilan 0repared*tatement. /ethod set*tring+ set"loat+ set)nt dan beberapa method lain digunakan untuk memasukkan nilai dari setiap parameter. /ethod tersebut mempun&ai dua parameter+ parameter pertama adalah int &ang digunakan untuk menentukan parameter 0repared*tatement mana &ang akan diberi nilai. 0arameter kedua adalah nilai &ang akan dimasukkan ke dalam 0repared*tatement+ tipe data dari parameter kedua tergantung dari method &ang digunakan. 6erdasarkan kode diatas+ berikut ini contoh penggunaan method 0repared*tatement.set*tring : ps.setString(1,andy); ps.setString(2,rizal); 7ode diatas memberikan contoh bagaimana memasukkan nilai ke dalam parameter 0repared*tatement. 6aris pertama memasukkan *tring :and&< ke dalam parameter pertama dan baris kedua memasukkan *tring :riDal< ke parameter kedua. *ehingga pemanggilan Kuer& oleh 0repared*tatement berdasarkan kode diatas sama dengan Kuer& statement di bawah ini : update Customers set nama = 'andy' where nama = 'rizal' 6erikut ini contoh lengkap penggunaan 0repared*tatement untuk melakukan update dan insert data : PreparedStatement pInsert = conn.prepareStatement( "insert into Customer(nama) values(?)"); pInsert.setString(1,"dian"); pInsert.executeUpdate();

HALAMAN

84 | JAVA SWING
PreparedStatement pUpdate = conn.prepareStatement( "update Customer set nama=? where nama=?"); pUpdate.setString(1,"andry"); pUpdate.setString(2,"andri"); pUpdate.executeUpdate(); -alam contoh diatas+ insert dan update data han&a dilaksanakan sekali sa,a+ hal ini tidak memberikan gambaran &ang tepat untuk melihat keunggulan 0repared*tatement dibandingkan *tatement.e8ecute(pdate. /isaln&a kita ingin meng-insert seratus baris data dalam sebuah loop+ kita bisa menggunakan batch fasilitas batc e8ecution dari 0repared*tatement. e8ecution mengumpulkan semua

eksekusi program &ang akan dilaksanakan+ setelah semuan&a terkumpul batch e8ecution kemudian mengirimkan kumpulan eksekusi program secara bersamaan ke -6/* dalam satu kesatuan. /etode ini sangat efisien karena mengurangi o!erhead &ang diperlukan program untuk berkomunikasi dengan -6/*. -alam contoh di bawah ini kita akan menggunakan batch e8ecution untuk melakukan insert data seban&ak seratus kali. PreparedStatement pInsert = conn.prepareStatement( "insert into Customer(nama) values(?)"); for(int i=0;i<100;i++){ pInsert.setString(1,"user ke " + i); pInsert.addBatch(); } pInsert.executeBatch(); *etiap kali iterasi+ method set*tring dipanggil untuk mengisikan sebuah string ke dalam 0repared*tatement+ kemudian method add6atch dipanggil untuk mengumpulkan batch dalam satu wadah. *etelah iterasi selesai+ method e8ecute6atch dipanggil untuk

KONEKSI DATABASE DENGAN JDBC | HALAMAN 85


melaksanakan semua keseratus instruksi insert secara berurut

dengan sekali sa,a melaksanakan koneksi ke database. *etelah mengenal -6#+ &ang kita perlukan berikutn&a adalah

menampilkan data dalam komponen swing seperti .able dan @ist. komponen swing tersebut ,uga bertugas untuk mendapatkan interaksi dengan user. ika user men,alankan instruksi update+ insert atau delete melalui komponen swing+ maka data &ang ada dalam database ,uga harus berubah. 7ontrol dua arah akan sangat mudah ,ika dikelola dengan librar& databinding.

HALAMAN

86 | JAVA SWING

Data+inding Menggunakan Gla4ed(ists


-ata6inding adalah librar& &ang men&ederhanakan programmer dalam menampilkan /odel /odel ketika ke user dalam komponen swing dan mengupdate melakukan interaksi dengan

komponen swing. -alam pattern /V#+ /odel dan View terpisah+ sehingga ketika /odel berubah+ kita harus memberitahu View bahwa /odel telah berubah agar View memperbarui tampilan&a untuk merefleksikan perubahan &ang ter,adi. 6egitu ,uga ketika user berinteraksi dengan View+ kita harus mengupdate /odel. 0ola sinkronisasi data antar /odel dan View ini terkadang sangat pelik dan rentan menimbulkan bug. -ata6inding membantu programmer untuk mengelola sinkronisasi antar /odel dan View+ tidak sa,a membantu tetapi ,uga mengurangi waktu kita untuk mencari dan mengatasi bug &ang mungkin muncul. 'laDed@ists adalah salah satu ,enis librar& databinding &ang sangat mudah penggunaan&a. 'laDed@ists /engurangi ,umlah kode untuk mensinkronisasi antara /odel dan View secara sangat signifikan serta menambahkan kemampuan sorting dan filtering ke dalam komponen swing. -alam chapter sebelumn&a kita bela,ar bagaimana menggunakan /odel untuk menampilkan data dalam komponen swing. (ntuk menampilkan data dalam table kita harus membuat ob,ect &ang bertipe .able/odel+ begitu ,uga kita harus membuat ob,ect &ang bertipe @ist/odel untuk menampilkan data dalam @ist. -alam chapter ini kita akan membahas bagaimana caran&a menampilkan /odel dalam komponen swing sekaligus mengupdate model ketika

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 87


user berinteraksi dengan komponen swing menggunakan librar& databinding.

EventList
2!ent@ist adalah sebuah interface &ang meng-e8tends inteface ,a!a.util.@ist+ 4rra&@ist. dalam implementasin&a menggunakan 2!ent@ist 2!ent@ist menggunakan ini sebagai 'laDed@ists

collection &ang digunakan secara konsisten untuk semua tipe collection. 4bstract@ist adalah list &ang secara langsung mengimplement interface 2!ent@ist sedangkan 6asic2!ent@ist dan .ransformed@ist+ menege8tends 4bstract@ist. 2!ent@ist mempun&ai hubungan &ang erat dengan 2!ent@istener. 7etika ter,adi perubahan dalam 2!ent@ist+ misaln&a method add+ atau remo!e dipanggil+ 2!ent@ist akan memicu sebuah e!ent &ang kemudian akan ditangkap oleh 2!ent@istener &ang bertugas untuk mempertahankan /odel dalam komponen swing tetap up-to-date. *ecara umum 2!ent@ist sama dengan 4rra&@ist atau Vector+ namun 2!ent@ist mempun&ai beberapa feature tambahan+ antara lain: 2!ent @istener : 2!ent@ist akan memicu e!ent ,ika ter,adi perubahan dalamn&a+ sehingga model dari komponen *wing akan tetap up-to-date. #oncurrenc& : 2!ent@ist mempun&ai lock sehingga kita bisa membagi 2!ent@ist ke beberapa thread secara aman. *truktur class 'laDed@ists dimulai dengan class 4bstract2!ent@ist &ang mengimplement tidak 2!ent@ist. #lass konkret apa-apa+ dari han&a 4bstract2!ent@ist 6asic2!ent@ist adalah 6asic2!ent@ist dan mempun&ai kelebihan .ransformed@ist.

implementasi dasar dari 2!ent@ist+ sedangkan .ransformed@ist merupakan class &ang digunakan untuk mengubah-ubah wu,ud dari

HALAMAN

88 | JAVA SWING
2!ent@ist+ misaln&a melakukan sorting+ filtering dan kon!ert ob,ect dalam 2!ent@ist dari satu bentuk ke bentuk &ang lain. @ebih lan,ut tentang .ransformed@ist akan dibahas di bagian sorting dan filtering.

EventList dari Record-Record Database


-alam praktekn&a+ 2!ent@ist akan menampung koleksi dari ob,ect &ang merepresentasikan 0roduct.&pe sebuah 2ntit&+ misaln&a: *ehingga #ustomer+ ,ika kita 0roduct+ dan sebagain&a.

mempun&ai sebuah database &ang datan&a berbentuk tabular+ kita harus mempun&ai mekanisme untuk melakukan mapping sederhana antara table dan 2ntit&. 6erikut ini adalah contoh mapping sederhana table #(*.E/2C dengan sebuah 2ntit& class #ustomer: CREATE TABLE `CUSTOMERS` ( `Id` int(11) NOT NULL auto_increment, `Nama` varchar(100) NOT NULL default '', `jenisKelamin` varchar(50) NOT NULL default 'lakilaki', `agama` varchar(20) NOT NULL default 'islam', `status` varchar(20) NOT NULL default 'single', `pekerjaan` varchar(100) NOT NULL default 'Mahasiswa', PRIMARY KEY (`Id`) ) ENGINE=MyISAM AUTO_INCREMENT=18 DEFAULT CHARSET=latin1; -i bawah ini adalah class #ustomer &ang digunakan untuk menampung record-record dari table #ustomer di atas.

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 89


public class Customer { private int id; private String nama, status, agama, jenisKelamin, pekerjaan; //getter dan setter method di sini } (ntuk melakukan mapping antara table #(*.E/2C dan ob,ect #ustomer diperlukan sebuah class sederhana &ang akan mengambil record-record dari table #(*.E/2C dan membuat sebuah ob,ect #ustomer dari setiap record tersebut. 7ita namakan class ini misaln&a -64ccess+ koden&a : public class DBAccess { private static Connection c; private static Statement selectStatement; static{ try{ Class.forName("com.mysql.jdbc.Driver"); c = DriverManager.getConnection( "jdbc:mysql://localhost:3306/latihan", "root",""); selectStatement = c.createStatement( ResultSet.TYPE_SCROLL_SENSITIVE, ResultSet.CONCUR_READ_ONLY); } catch(ClassNotFoundException e){ e.printStackTrace(); } catch(SQLException e){ e.printStackTrace(); } }

HALAMAN

90 | JAVA SWING
public static EventList<Customer> getCustomers() throws SQLException{ EventList<Customer> list = new BasicEventList<Customer>(); ResultSet rs = selectStatement.executeQuery( "select * from CUSTOMERS"); while(rs.next()){ list.add(getCustomer(rs)); } return list; } public static Customer getCustomer(ResultSet rs) throws SQLException{ Customer customer = new Customer(); customer.setId(rs.getInt(1)); customer.setNama(rs.getString(2)); customer.setJenisKelamin(rs.getString(3)); customer.setAgama(rs.getString(4)); customer.setStatus(rs.getString(5)); customer.setPekerjaan(rs.getString(6)); return customer; } } #lass -64ccess akan melakukan koneksi ke database ketika diload+ hal ini ditandai dengan adan&a statement staticVW di dalam class -64ccess. *etelah sukses di load+ kita bisa menggunakan method get#ustomers untuk memperoleh sebuah ob,ect 2!ent@ist &ang sudah berisi semua record-record dari table #(*.E/2C* &ang telah dimapping ke dalam ob,ect #ustomer. /ethod get#ustomer digunakan untuk mengambil baris &ang sedang aktif dari sebuah Cesult*et kemudian membuat instant dari class customer dan

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 91


melakukan mapping record table #(*.E/2C ke dalam ob,ect #ustomer. *etelah 2!ent@ist sukses dibuat+ maka langkah selan,utn&a adalah membuat model dari komponen swing.

EventList dalam Model


.able+ #ombo6o8 dan @ist adalah komponen swing &ang masingmasing memiliki /odel. /odel dari ketiga komponen tersebut membutuhkan collection untuk men&impan data+ hal ini ,elas logis karena ketiga komponen tersebut menampilkan data &ang ,amak+ tidak data tunggal. @ibrar& 'laDed@ists men&ediakan class model &ang mengimplement masing-masing model dari ketiga komponen tersebut dan menggunakan 2!ent@ist sebagai collection dari model-model tersebut.

/vent(istModel
2!ent@ist/odel mengimplement interface @ist/odel dan menerima 2!ent@ist sebagai argumen dari komponen @ist. @ist menampilkan ob,ect-ob,ect di dalam model sebagai list satu dimensi+ sehingga diperlukan mekanisme untuk menampilkan sebuah ob,ect dalam sebuah *tring. /ekanisme ini disediakan oleh method to*tring dari class Eb,ect+ kita o!erride method to*tring dari class #ustomer diatas men,adi : public String toString() { return id + " " + nama + " " + jenisKelamin + " " + agama + " " + status + " " + pekerjaan; } *ekarang method to*tring dari class #ustomer akan constructorn&a. -engan mudah kita dapat menggunakan 2!ent@ist/odel sebagai model untuk

HALAMAN

92 | JAVA SWING
mengembalikan gabungan dari semua nilai dari field-field &ang dipun&ai oleh class #ustomer. 6erikut ini adalah sebuah program sederhana untuk menampilkan isi table #(*.E/2C ke dalam sebuah @ist menggunakan librar& 'laDed@ists. 7ita akan menggunakan class -64ccess &ang telah dibuat sebelumn&a.

4plikasi 'laDed@ists &ang menampilkan #ustomer dalam @ist (ntuk membuat aplikasi diatas lakukan langkah-langkah berikut : 1. =. 6uat sebuah class "rame+ beri nama #ustomers@ist.,a!a .ambahkan komponen @ist ke dalam #ustomers@ist+ beri nama list#ustomers. 3. 6ukalah endela #ode dan tambahkan baris kode ini ke dalam class constructor class #ustomers@ist di bagian bawah dari baris pemanggilan method init#omponent :

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 93


try { EventList<Customer> list = DBAccess.getCustomers(); EventListModel model = new EventListModel(list); listCustomers.setModel(model); } catch (SQLException ex) { ex.printStackTrace(); } >. #ompile dan ,alankan program diatas.

6isa kita lihat+ kode diatas sangat sederhana sekali. *etelah kita mempun&ai class &ang bertugas untuk melakukan mapping antara table #(*.E/2C dan class #ustomer+ 'laDed@ists akan mempermudah peker,aan kita menampilkann&a ke dalam @ist.

/ventCombo+o*Model
*eperti ,uga menggunakan @ist+ #ombo6o8 mempun&ai karakteristik untuk @ist+ #ombo6o8 sebagai to*tring dari sebuah class menampilkan koleksi data. *ama ,uga seperti method

representasi ob,ect tersebut dalam item combo6o8. 6erikut ini contoh aplikasi sederhana untuk menampilkan isi table #(*.E/2C dalam #ombo6o8./enampilkan data #ustomer dalam combo6o8 :

4plikasi sederhana menampilkan data customer di #ombo6o8 (ntuk membuat aplikasi diatas lakukan langkah-langkah berikut ini:

HALAMAN

94 | JAVA SWING
1. =. 6uat sebuah class "rame dan beri nama #ustomers#ombo @etakkan sebuah #ombo6o8 ke dalam class "rame tersebut+ beri nama cmb#ustomer. 3. .uliskan kode berikut ini di dalam konstruktor dari class #ustomers#ombo di bagian bawah dari baris pemanggilan method init#omponent. try { EventList<Customer> customers = DBAccess.getCustomers(); EventComboBoxModel model = new EventComboBoxModel(customers); cmbCustomers.setModel(model); cmbCustomers.setSelectedIndex(0); } catch(SQLException ex){ ex.printStackTrace(); } >. #ompile dan ,alankan programn&a. diatas sangat mirip dengan kode untuk menampilkan

7ode

2!ent@ist ke dalam komponen @ist+ hal ini karena karakteristik @ist dan #ombo6o8 &ang mirip+ &ang berbeda han&alah beha!iour dari keduan&a. #ombo6o8 han&a dapat memilih satu pilihan sedangkan @ist dapat memilih lebih dari satu pilihan. /enampilkan 2!ent@ist ke dalam .able berbeda dengan @ist dan #ombo6o8+ karena .able memiliki struktur data tabular dimana setiap baris dibagi-bagi dalam kolom.

/vent)ableModel
.able memiliki struktur data tabular dua dimensi+ sedangkan 2!ent@ist adalah list ob,ect satu dimensi. /emasukkan 2!ent@ist dalam 2!ent.able/odel memerlukan class &ang mengimplement

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 95


interface .able"ormat dari 'laDed@ists. )nterface .able"ormat digunakan untuk mendefinisikan beberapa hal &ang berhubungan dengan kolom dari .able+ antara lain: ,umlah kolom+ nama kolom+ dan nilai kolom. -engan class .able"ormat ini 2!ent@ist &ang han&a sebuah list dapat dipandang men,adi sebuah data tabular dua dimensi. (ntuk lebih ,elasn&a+ perhatikan class #ustomer.able"ormat

berikut ini : public class CustomerTableFormat implements TableFormat{ public CustomerTableFormat() { } public int getColumnCount() { return 6; } public String getColumnName(int column) { switch(column){ case 0: return "Id"; case 1: return "Nama"; case 2: return "Jenis Kelamin"; case 3: return "Agama"; case 4: return "Status"; case 5: return "Pekerjaan"; default: return ""; } } public Object getColumnValue(Object baseObject, int column) { Customer customer = (Customer) baseObject; switch(column){ case 0: return customer.getId(); case 1: return customer.getNama();

HALAMAN

96 | JAVA SWING
case 2: return customer.getJenisKelamin(); case 3: return customer.getAgama(); case 4: return customer.getStatus(); case 5: return customer.getPekerjaan(); default: return ""; } } } /ethod get#olumn#ount mengembalikan ,umlah kolom+ kemudian method get#olumn9ame mengembalikan nama kolom+ dan terakhir method get#olumnValue mengembalikan nilai kolom dari baseEb,ect. baseEb,ect ini sebenarn&a adalah 3baris3 atau dalam hal ini adalah ob,ect #ustomer. 7ita akan membuat sebuah aplikasi kecil untuk menampilkan #ustomer ke dalam suatu table dengan bantuan class #ustomer.able"ormat &ang telah kita buat sebelumn&a.

-ata #ustomer ditampilkan dalam .able (ntuk membuat aplikasi seperti di atas lakukan langkah-langkah berikut ini : 1. =. 6uat class "rame baru+ beri nama #ustomers.able @etakkan sebuah .able dalam class #ustomers.able+ beri nama tbl#ustomers 3. 7etik kode berikut ini di dalam constructor class

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 97


#ustomers.able di bagian bawah dari baris pemanggilan method init#omponent. try{ EventList<Customer> list = DBAccess.getCustomers(); EventTableModel model = new EventTableModel(sortedList, new CustomerTableFormat()); tblCustomers.setModel(model); } catch(SQLException e){ e.printStackTrace(); } >. #ompile dan ,alankan programn&a

6isa kita lihat bahwa proses menampilkan data dari database menggunakan bantuan 'laDed@ists sangat mudah dan mengurangi ban&ak sekali code &ang tidak perlu. 7ita ,uga tidak perlu membuat class &ang mengimplement .able/odel+ karena 'laDed@ists sudah men&ediakan 2!ent.able/odel. .etapi tetap sa,a kita memerlukan sebuah class &ang kolom mengimplement dari tabel+ .able"ormat untuk mendefinisikan untungn&a mengimplement

interface .able"ormat lebih mudah dan sederhana dibandingkan harus mengimplement .able/odel.

Satu /vent(ist untuk Semua Model


/enampilkan isi database ke dalam @ist+ #ombo6o8 maupun .able sangat sederhana dan &ang paling penting adalah ketigan&a dapat menerima 2!ent@ist dalam membentuk /odel untuk masingmasing komponen. "leksibilitas ini sangat berguna ,ika kita harus menampilkan sebuah data dalam beberapa format+ tidak ada lagi langkah-langkah untuk melakukan kon!ert dari @ist/odel ke #ombo/odel atau ke .able/odel+ semuan&a disederhanakan oleh

HALAMAN

98 | JAVA SWING
'laDed@ists dengan han&a menggunakan 2!ent@ist. #ermati contoh-contoh kode diatas+ maka anda akan melihat bahwa perbedaan koden&a terletak di dalam ,enis /odel &ang akan digunakan oleh setiap kontrol. -i bagian-bagian selan,utn&a kita akan membahas bagaiman 'laDed@ists membantu kita men&ederhanakan kode dan memudahkan kita dengan men&ediakan berbagai class untuk memanipulasi 2!ent@ist.

Pengurutan Tabel
*orted@ist *etiap maka adalah class turunan dari .ransformed@ist *orted@ist+ &ang akan dengan digunakan untuk menampilkan 2!ent@ist dalam keadaan terurut. .ransformed@ist .ransformed@ist termasuk ,uga ,uga mendengarkan e!ent dari 2!ent@ist. 7etika 2!ent@ist berubah berubah men&esuaikan 2!ent@ist. (ntuk membuat *orted@ist+ diperlukan class &ang mengimplement interface #omparator. #lass #omparator ini digunakan *orted@ist untuk menentukan urutan dari class &ang disimpan dalam 2!ent@ist+ dalam hal ini class #ustomer. adi kita harus membuat class baru &ang mengimplement interface #omparator untuk membandingkan antar ob,ect customer. -alam contoh ini kita menggunakan field nama sebagai parameter perbandingan. 6erikut ini adalah class #ustomer#omparator &ang digunakan untuk membandingkan satu ob,ect customer dengan dengan ob,ect customer lainn&a :

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 99


public class CustomerComparator implements Comparator{ public CustomerComparator() { } public int compare(Object a, Object b) { Customer custA = (Customer) a; Customer custB = (Customer) b; return custA.getNama().compareTo(custB.getNama()); } } *ekarang dengan menggunakan class ini kita bisa membandingkan apakah suatu ob,ect customer 3lebih besar3 dari ob,ect customer &ang lain. 0erhitungan&a didasarkan pada nilai dari field lama dalam ob,ect customer. /isaln&a ada ob,ect customer &ang nilai field nama-n&a adalah :robi< dan ada ob,ect customer &ang lain dimana nilai field nama-n&a adalah :ilham<. /aka ob,ect customer dengan nama :robi< 3lebih besar3 dibandingkan ob,ect customer dengan nama 3ilham3. -engan bantuan class #ustomer#omparator kita bisa dengan mudah mengurutkan 2!ent@ist dengan menggunakan *orted@ist. 6erikut ini contoh penggunaann&a: EventList customers = DBAccess.getCustomers(); SortedList sortedList = new SortedList(customers, new CustomerComparator())

Manual Sorting
*etelah 2!ent@ist diurutkan dalam *orted@ist+ kita bisa membuat 2!ent.able/odel kemudian &ang didalamn&a dimasukkan *orted@ist sebagai menggunakan 2!ent.able/odel tersebut

.able/odel dari suatu .able. *ecara otomatis .able tersebut akan terurut barisn&a berdasarkan naman&a+ lho kok bisaR hal ini dikarenakan kita menggunakan #ustomer#omparator &ang

HALAMAN

100 | JAVA SWING


membandingkan satu customer berdasarkan pada field nama. dengan customer lain&a han&a

-ata #ustiomer diurutkan dengan *orted@ist 0rogram diatas menampilkan .able &ang telah terurut

berdasarkan naman&a. )kuti langkah-langkah berikut ini untuk membuat aplikasi diatas : 1. =. 6uat sebuah class "rame+ beri nama #ustomer.able*orted. /asukkan satu buah .able ke dalam #ustomer.able*orted dan beri nama tbl#ustomers. 3. 6uka endela #ode dan ubah method constructor dari class

#ustomers.able*orted men,adi seperti di bawah ini : public CustomersTableSorted() { initComponents(); EventList<Customer> customers; try { customers = DBAccess.getCustomers(); SortedList sortedList = new SortedList(customers, new CustomerComparator()); EventTableModel model = new EventTableModel(sortedList, new CustomerTableFormat());

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 101


tblCustomer.setModel(model); }catch(SQLException ex){ex.printStackTrace();} } >. #ompile dan ,alankan program diatas.

0utomati" Sorting
*ekarang pertan&aan&a+ kalau misaln&a kita ingin melakukan sorting table berdasarkan idn&a+ apakah harus membuat class #ustomer#omparator lain&a &ang membandingkan satu customer dengan customer lainn&a berdasarkan idR ,awaban&a adalah tidak perlu. 'laDed@ists men&ediakan class .able#omparator#hooser &ang akan menambahkan komponen sorter &ang diletakkan di bagian header dari kolom .able. adi ketika kita melakukan double klik pada header kolom tersebut+ .able akan otomatis terurut berdasarkan kolom tersebut. 0erhatikan gambar di bawah ini :

.able#omparator#hooser mengurutkan data secara otomatis *ekarang table diatar terurut berdasarkan peker,aan+ karena header dari kolom peker,aan di klik dan sekarang terlihat ada tanda segitiga kecil menghadap keatas &ang artin&a baris table terurut ascendant $menaik% berdasarkan kolom peker,aan. *ekarang perhatikan lagi gambar di bawah ini :

HALAMAN

102 | JAVA SWING

#ascade sorting menggunakan .able#omparator#hooser .erlihat ,uga ada tanda segitiga kecil di header kolom nama+ artin&a bahwa table diatas diurutkan terlebih dahulu berdasarkan peker,aan kemudian diurutkan berdasarkan nama. 1al ini ter,adi karena tadi setelah header kolom peker,aan diklik+ kemudian header nama diklik secara berurutan. "asilitas ini disediakan oleh class .able#omparator#hooser. *ekarang ikuti langkah-langkah berikut ini untuk membuat

program seperti diaatas : 1. 6uat class "rame baru+ beri nama

#ustomers.able4utomatic*orted. =. 3. .ambahkan sebuah .able. /odifikasi method constructorn&a men,adi seperti berikut ini :

public CustomerTableAutomaticSorted() { initComponents(); EventList<Customer> customers; try { customers = DBAccess.getCustomers(); SortedList sortedList = new SortedList(customers, new CustomerComparator());

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 103


EventTableModel model = new EventTableModel(sortedList, new CustomerTableFormat()); tblCustomer.setModel(model); TableComparatorChooser chooser = new TableComparatorChooser( tblCustomer, sortedList, true); } catch (SQLException ex) {ex.printStackTrace();} } >. #ompile dan ,alankan programn&a.

ika kita perhatikan kode diatas+ han&a ada perbedaan kecil dengan program sebelumn&a. 0erbedaan&a terletak pada adan&a class .able#omparator#hooser.

Menyaring Text dalam Tabel


"asilitas filtering data didukung penuh oleh 'laDed@ists. /enggunakan fasilitas filtering di 'laDed@ists sama mudahn&a dengan fasilitas sorting. .e8t filtering didukung penuh oleh 'laDed@ists+ sedangkan filtering berdasarkan suatu kriteria tertentu harus dibuat sendiri.

)e*tFilterator
*ebelum melakukan filtering kita perlu memberitahu 'laDed@ists field apa sa,a dalam class #ustomer &ang digunakan sebagai basis filtering. /isaln&a kita menggunakan semua field sebagai basis filtering kecuali field id. (ntuk menentukan aturan tersebut harus dubuat sebuah class baru &ang mengimplement .e8t"ilterator. 6erikut ini class #ustomer"ilter &ang mengimplement

.e8t"ilterator:

HALAMAN

104 | JAVA SWING


public class CustomerFilter implements TextFilterator{ public CustomerFilter() { Object element) { Customer customer = (Customer) element; baseList.add(customer.getNama()); baseList.add(customer.getJenisKelamin()); baseList.add(customer.getAgama()); baseList.add(customer.getStatus()); baseList.add(customer.getPekerjaan()); } } /ethod get"ilter*trings digunakan untuk mendefinisikan field apa sa,a &ang akan digunakan sebagai basis filtering. -alam hal ini semua field+ kecuali field id digunakan sebagai basis filtering. } public void getFilterStrings(List baseList,

Mem&ilter Data Customer


0erhatikan aplikasi sederhana di bawah ini+ terdapat sebuah .able &ang menampung data #ustomer dan sebuah digunakan untuk mengisikan string filter. mengetikkan huruf dalam .e8t"ield+ .e8t4rea &ang kali user *etiap

.able di bawahn&a akan

terfilter berdasarkan te8t &ang dimasukkan dalam .e8t"ield.

/emfilter isi table menggunakan .e8t"ilterator (ntuk membuat aplikasi seperti di atas lakukan langkah-langkah

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 105


berikut ini : 1. =. 6uat class "rame baru+ beri nama #ustomers.able"ilter. /asukkan sebuah .able dengan nama tbl#ustomer+ .e8t"ield dengan nama t8t"ilter dan @abel dengan nama lbl"ilter. 3. /odifikasi method constructor dari class #ustomers.able"ilter men,adi seperti di bawah ini: public CustomersTableFilter() { initComponents(); EventList<Customer> list = DBAccess.getCustomers(); SortedList<Customer> sortedList = new SortedList<Customer>(list, new CustomerComparator()); FilterList filterList = new FilterList(sortedList, new TextComponentMatcherEditor(txtFilter, new CustomerFilter())); EventTableModel model = new EventTableModel(filterList, new CustomerTableFormat()); tblCustomers.setModel(model); } >. #ompile dan ,alankan aplikasin&a.

-alam kode diatas kita ada satu class lagi &ang berperan untuk men&aring te8t dari table &aitu sebelumn&a. .e8t#omponent/atcher2ditor. method #lass ini memerlukan class #ustomer"ilter &ang telah kita buat .e8t#omponent/atcher2ditor memerlukan get"ilter*trings dari class #ustomer"ilter untuk menentukan

apakah suatu baris terfilter atau tidak. #aran&a &aitu dengan mencari pola *tring dari t8t"ilter dalam class #ustomer+ method get"ilter*trings mendaftar semua field &ang digunakan sebagai

HALAMAN

106 | JAVA SWING


basis pen&aringan. *ebagai contohn&a+ dalam program kita diatas #ustomer"ilter mendefinisikan bahwa semua field kecuali field id akan digunakan sebagai basis pencarian. #lass .e8t#omponent/atcher2ditor akan mengambil *tring &ang dimasukkan dalam t8t"ilter+ &aitu huruf 3o3. 7emudian melihat baris-baris dalam tbl#ustomer dan melakukan filtering terhadap baris-baris tersebut+ &ang tersisa adalah barisbaris $atau ob,ect-ob,ect customer% &ang dalam field nama+ ,eniskelamin+ peker,aan dan agama terdapat huruf 3o3. #ontoh lain&a+ ,ika kita memasukkan angka 1+ maka semua baris dalam tbl#ustomer akan terfilter+ tidak tersisa satu baris pun. @ho kok bisaR bukan&a ada kolom id &ang mengandung angka 1R 9ah+ kita harus melihat lagi dalam class #ustomer"ilter+ apakah field id dimasukkan dalam basis pen&aringanR tern&ata tidak. *ehingga .e8t#omponent/atcher2ditor tidak melakukan pencarian angka 313 dari field id. 1asiln&a ,elas terlihat bahwa semua baris akan terfilter. "ilter@ist sangat berguna ,ika kita ban&ak membuat ,endela pencarian. 6aik full-te8t search ke semua kolom+ atau pencarian berdasarkan kriteria tertentu. "ilter@ist dan .e8t#omponent/atcher2ditor mengurangi kode secara signifikan. 6a&angkan anda harus membuat program seperti diatas tanpa librar& 'laDed@ists+ anda harus menghandle e!ent penekanan tombol pada t8t"ilter+ kemudian men&aring baris-baris tbl#ustomer dan merefresh !iew tbl#ustomer. 4nda akan memerlukan puluhan baris kode. -engan 'laDed@ists anda han&a memerlukan lima baris kode sa,a+ fantastisX. *ampai dengan disini kita sudah tahu mengenai bagaimana melakukan sorting dan filtering 2!ent@ist menggunakan class-class &ang meng-e8tends .ransformed@ist+ masih ada beberapa lagi

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 107


class-class &ang dapat kita gunakan memanipulasi 2!ent@ist dengan metode-metode &ang berbeda.

TransformedList dan UniqueList


.ransformed@ist pada umumn&a digunakan untuk melakukan manipulasi terhadap 2!ent@ist+ baik mensort atau memfilter. -i bagian sebelumn&a kita sudah mengenal *orted@ist dan "ilter@ist+ kedua @ist ini adalah turunan dari .ransformed@ist. -i bagaian ini kita akan membahas tentang (niKue@ist+ mirip dengan turunan lain dari &aitu .ransformed@ist. kriteria tertentu. (niKue@ist akan men&aring 2!ent@ist dan han&a men&isakan itemitem &ang 3uniKue3. (niKue@ist ini gunan&a semisal : mendaftar semua ,enis peker,aan+ daftar mengambil agama. daftar nama mahasiswa+ tersebut mendapatkan *emua kebutuhan (niKue@ist "ilter@ist+

men&aring 2!ent@ist dan men&isakan item-item &ang memenuhi

memerlukan nilai uniKue dari masing-masing kolom+ ,ika ada dua nilai &ang sama dalam satu kolom+ han&a perlu ditampilkan satu item sa,a. )nilah konsep 3uniKue3 dari (niKue@ist. 0ertan&aan&a adalah kriteria 3uniKue3 ini berdasarkan apaR

berdasarkan idR berdasarkan namaR atau berdasarkan kriteria &ang lainR. (ntuk men,awab pertan&aan tersebut kita memerlukan class &ang mentransform 2!ent@ist &ang berisi #ustomer men,adi han&a berisi salah satu field #ustomer sa,a. *emisal kita akan membutuhkan daftar peker,aan &ang ada dalam table #(*.E/2C+ &ang harus kita lakukan pertama-tama adalah membuat class .ransformed@ist &ang mengubah 2!ent@ist &ang berisi ob,ectob,ect customer seolah-olah berisi han&a field peker,aan sa,a. 6erikut ini koden&a :

HALAMAN

108 | JAVA SWING


public class CustomerJobTransformator extends TransformedList { public CustomerJobTransformator(EventList source) { super(source); source.addListEventListener(this); } public void listChanged(ListEvent listChanges) { updates.forwardEvent(listChanges); } public Object get(int index) { return ((Customer)source.get(index)) .getPekerjaan(); } } 0erhatikan bagian kode &ang dicetak miring+ method get digunakan untuk mengambil isi dari 2!ent@ist $source% pada inde8 ke-8. #lass #ustomer ob.ransformator meng-o!erride method get agar mengembalikan nilai field peker,aan bukann&a ob,ect customer itu sendiri. 1al ini men&ebabkan ketika diambil semua item dari class #ustomer ob.ransformator+ &ang dikeluarkan bukann&a ob,ectob,ect customer tetapi nilai field-field peker,aan dari setiap customer. @ist peker,aan. *etelah kita bisa mendapatkan semua nilai field peker,aan dengan menggunakan men&aring class #ustomer ob.ransformator+ kita tinggal peker,aan-peker,aan tersebut agar mempun&ai nilai -apat dikatakan bahwa+ class #ustomer ob.ransformator mentransform @ist #ustomer men,adi

uniKue. (ntuk lebih ,elasn&a perhatikan kode berikut ini :

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 109


EventList<Customer> list = DBAccess.getCustomers(); CustomerJobTransformator customerJobs = new CustomerJobTransformator(list); UniqueList uniqueCustomerJobs = new UniqueList(customerJobs); 6isa kita lihat diatas han&a ada tiga baris kode. 6aris pertama mengambil semua ob,ect customer dari table #(*.E/2C. 6aris kedua mentransform daftar customer men,adi daftar peker,aan. -an baris ketiga men&aring daftar peker,aan agar men,adi daftar peker,aan &ang uniKue. (niKue@ist ini salah satu kegunaan&a adalah untuk membuat daftar /aster--etail. 'ambaran singkat /aster--etail ini adalah kita mempun&ai suatu daftar /aster+ misaln&a peker,aan+ kemudian kita ,uga mempun&ai daftar data -etail+ misaln&a customer. 7emudian ketika kita memilih salah satu daftar /aster+ misaln&a peker,aan O 3/ahasiswa3 maka secara otomatis daftar -etail akan menampilkan customer dengan peker,aan /ahasiswa sa,a.

Model Master-Detail
/odel /aster--etail ini laDim terdapat dalam aplikasi-aplikasi pengolahan database. (ntuk lebih ,elasn&a perthatikan gambar berikut ini :

/odel /aster--etail peker,aan dan #ustomer 'ambar ini menampilkan sebuah class "rame &ang mempun&ai

HALAMAN

110 | JAVA SWING


sebuah @ist di sisi kiri dan .able di sisi kanan. @ist mempun&ai daftar uniKue peker,aan dari table #(*.E/2C dan .able memegang isi dari table #(*.E/2C. -alam hal ini @ist adalah /aster dan .able adalah -etail. 7etika user memilih satu atau lebih item peker,aan pada maka @ist+

.able akan difilter berdasarkan peker,aan dari setiap

customer. /isaln&a kita memilih peker,aan 3.echnical ;riter3+ maka han&a customer-customer &ang mempun&ai peker,aan 3.echnical ;riter3 sa,a &ang akan ditampilkan+ sisan&a difilter.

Filter(ist- Mat"'er dan Mat"'er/ditor


0ada bagian sebelumn&a kita sudah membahas bagaimana melakukan filtering sebuah table menggunakan .e8t"ilterator dan .e8t#omponent/atcher2ditor. /odel /aster--etail pada dasarn&a mirip dengan te8t filtering+ perbedaan&a ada pada kategori filtering dan basis filtering. .e8t filtering pada bagian sebelumn&a+ menggunakan sebuah .e8t"ield+ t8t"ilter+ sebagai kategori filtering dan .e8t"ilterator sebagai basis filtering. string #ara ker,an&a+ 'laDed@ists akan mencocokkan dari t8t"ilter di dalam field-field customer

&ang didefinisikan sebagai basis filtering oleh .e8t"ilterator. /odel /aster--etail mengambil kategori filtering dari oleh @ist. *eperti pada contoh gambar @ist dan @ist

basis filteringn&a sesuai dengan kategori filtering &ang ditampilkan sebelumn&a+ menampilkan daftar uniKue peker,aan customer+ maka basis filteringn&a adalah field peker,aan dari customer. /atcher adalah interface &ang digunakan 'laDed@ists untuk menentukan apakah sebuah item dalam 2!ent@ist cocok dengan kriteria tertentu atau tidak. ika cocok maka item tersebut akan dimasukkan ke dalam "ilter@ist. 9amun /atcher ini bersifat immutable+ artin&a kriteria pencocokan&a tidak dapat dirubah.

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 111


/isaln&a /atcher mempun&ai kriteria peker,aan 3/ahasiswa3+ maka kriteria tersebut tidak dapat dirubah men,adi 3.echnical ;riter3. 1al ini dilakukan untuk tu,uan keamanan menggunakan /atcher dalam lingkungan multithreading+ kita tidak akan membahas lebih lan,ut mengenai multithreading. /atcher2ditor digunakan ,ika nanti kriterian&a berubah model kriteria filtering berubah secara men,adi 3.echnical &ang ;riter3 dan

dinamis. /isaln&a sekarang kriterian&a 3/ahasiswa3 kemudian seterusn&a. *ehingga /aster--etail mempun&ai

kriteria filtering berubah-ubah harus dibuatkan /atcher2ditor-n&a. 6erikut ini class &ang mengimplement /atcher dan /atcher2ditor &ang akan digunakan dalam model /aster--etail. public class CustomerJobMatcher implements Matcher{ private Set customers = new HashSet(); public CustomerJobMatcher( Collection customerSelected) { customers.addAll(customerSelected); } public boolean matches(Object item) { if(item == null) return false; else if (customers.isEmpty()) return false; Customer cust = (Customer) item; return customers.contains(cust.getPekerjaan()); } } #ustomer ob/atcher2ditor digunakan untuk melakukan matching baris-baris table secara otomatis dan memfilter table berdasarkan peker,aan.

HALAMAN

112 | JAVA SWING


public class CustomerJobMatcherEditor extends AbstractMatcherEditor implements ListSelectionListener{ private EventList selectedCustomerJob; public CustomerJobMatcherEditor(JList jList, UniqueList uniqueCustomerJob) { EventListModel model = new EventListModel(uniqueCustomerJob); jList.setModel(model); EventSelectionModel selectionModel = new EventSelectionModel(uniqueCustomerJob); jList.setSelectionModel(selectionModel); selectedCustomerJob = selectionModel.getSelected(); jList.addListSelectionListener(this); } public void valueChanged( ListSelectionEvent listSelectionEvent) { Matcher matcher = new CustomerJobMatcher(selectedCustomerJob); fireChanged(matcher); } }

Membuat Model Master%Detail


/ari kita lihat sekali lagi gambar contoh aplikasi /aster--etail :

DATABINDING MENGGUNAKAN GLAZEDLISTS | HALAMAN 113

)mplementasi /aster--etail (ntuk membuat aplikasi seperti diatas lakukan langkah-langkah berikut ini : 1. =. 6uat class "rame baru+ beri nama #ustomers ob"ilter. .ambahkan sebuah .able dengan nama tbl#ustomer dan

sebuah @ist dengan nama lst0eker,aan. 3. 6uka endela #ode dan modifikasi mothod constructor dari

class #ustomers ob"ilter men,adi seperti berikut ini : public CustomersJobFilter() { initComponents(); EventList<Customer> customers = null; try { customers = DBAccess.getCustomers(); } catch (SQLException ex) { ex.printStackTrace(); } SortedList sortedList = new SortedList(customers, new CustomerComparator()); CustomerJobTransformator jobList = new CustomerJobTransformator(sortedList); UniqueList uniqueList = new UniqueList(jobList);

HALAMAN

114 | JAVA SWING


FilterList filterList = new FilterList(sortedList, new CustomerJobMatcherEditor( lstPekerjaan,uniqueList)); EventTableModel model = new EventTableModel(filterList, new CustomerTableFormat()); tblCustomer.setModel(model); TableComparatorChooser comparatorChooser = new TableComparatorChooser(tblCustomer, sortedList,true); } >. #ompile dan ,alankan programn&a. sangat mudah digunakan dan men&ederhanakan

'laDed@ists

ban&ak sekali peker,aan kita. .erutama pada penanganan e!ent dari komponen swing+ dari awal sampai akhir bab ini tidak ada satu pun baris kode untuk menangani e!ent dari komponen swing+ secara otomatis 'laDed@ists &ang menangani e!ent tersebut.

PENUTUP | HALAMAN 115

$enutup
-engan ilmu &ang sudah diperoleh dalam pelatihan ini+ anda sudah bisa mulai untuk membuat program a!a desktop sederhana. 0ada awaln&a pasti terasa sulit+ sikapi pantang men&erah dan selalu cari cara &ang lebih baik dalam membuat aplikasi. @angkah selan,utn&a anda bisa mulai aktif bertan&a atau men,awab hal-hal &ang berhubungan dengan a!a. /edia &ang bisa digunakan ban&ak sekali+ bisa forum mulis atau diskusi dengan teman. )ni cara terbaik untuk mengetes apakah pemahaman anda mengenai a!a sudah cukup lengkap atau anda masih perlu bela,ar lebih ban&ak lagi. *etelah &akin dengan kemampuan anda+ berfikirlah untuk

mengambil sertifikasi profesional a!a. 0elatihan untuk persiapan sertifikasi a!a ban&ak tersedia di lembaga pelatihan. 7alau anda merasa terlalu berat mengambil kursus persiapan sertifikasi+ berlatihlah sendiri menggunakan materi &ang ban&ak tersedia di internet. #ara bela,ar a!a &ang paling efektif adalah dengan melibatkan diri dalam pro,ect berbasis a!a. ika di perusahaan anda tidak memungkinkan+ di luar sana ban&ak sekali pro,ect opensource &ang memerlukan bantuan anda. 6erkun,unglah ke website-website open source pro,ect hosting seperti sourceforge.net atau de!.,a!a.net @earn+ .r& dan .each adalah a!a. formula untuk meningkatkan

pengetahuan anda tentang

ika sudah bela,ar dan sukses

mencoba+ tularkan ilmu anda pada orang disekeliling anda+ di,amin ilmun&a bakalan bertambah berlipat-lipat.

HALAMAN

116 | JAVA SWING

,e&erensi dan +a"aan (ebi' (anjut


1. =. 3. a!a .utorial : http://,a!a.sun.com/docs/books/tutorial/ a!a -ocumentation : http://,a!a.sun.com/,a!ase/5/docs/ 9etbeans )ndonesia : http://groups.&ahoo.com/group/9etbeansindonesia/ >. a!a (ser 'roup )ndonesia : http://groups.&ahoo.com/group/,ugindonesia/ A. 5. 7. F. G. 'laDed@ists : http://publicob,ect.com/glaDedlists/ a!a -esign 0attern : http://www.,a!acamp.org/design0attern/ a!a -esktop : http://www.,a!adesktop.org 'oodies : http://www.,goodies.com *wingL : http://www.swinglabs.org

Anda mungkin juga menyukai