Biasanya kalau kita mau buat gui menggunakan Java, kita menggunakan
ide Netbeans yang mempunyai fitur untuk membuat GUI dengan fasilitas
drag and drop. Di satu sisi ini memudahkan penggunanya yang tidak ingin
terintimidasi dengan detil yang mengerikan. Namun di sisi lain hal ini
bisa dianggap overkill, apabila kita hanya ingin men-design GUI yang
sederhana dan tidak begitu kompleks. Bahaya lainnya adalah apabila file
.form yang digenerate oleh Netbeans hilang, kita tidak bisa mengubah GUI
secara visual dan untuk mengubahnya secara manual lewat kode juga susah
karena generated code untuk GUI dari Netbeans terkadang bloated dan
sulit untuk dimengerti.
Karena itu kita perlu juga mengetahui bagaimana menyusun GUI melalui
kode. Artikel berikut akan mencoba menjelaskan cara menyusun GUI yang
paling sederhana dan cocok untuk yang ingin membuat GUI yang sederhana
juga.
Ada dua cara untuk menyusun komponen GUI. Pertama dengan menggunakan
layout manager atau dengan absolute position. Netbeans juga menggunakan
layout manager untuk mendesain GUI-nya. Tapi yang akan dijelaskan di
post ini adalah dengan menggunakan absolute position. Menggunakan layout
manager memudahkan jika kita ingin menyusun GUI dengan praktis tanpa
perlu mengetahui posisi pasti komponen yang akan ditaruh. Selain itu
jika dilakukan resize terhadap komponen kontainernya, otomatis komponen
yang dikandung didalamnya akan menyesuaikan dengan ukuran yang baru.
Akan tetapi, jika kita ingin membuat GUI dengan ukuran yang sudah fixed,
absolute position bisa memudahkan kita dalam mengatur posisi komponen
dengan catatan kita harus sering mencoba untuk mendapatkan lokasi yang
pas.
Oke, langsung buka editor favoritmu (Scite, geany, notepad++, eclipse, dlllll)
Hal pertama yang harus dilakukan adalah membuat kelas yang meng-extend JFrame
public class TestGUI extends JFrame
Jangan lupa import kelas JFrame
1 | import javax.swing.JFrame; |
kemudian di method main, kita cukup membuat objek dari kelas ini, dan menjalankan method setVisible agar GUI-nya bisa terlihat.
1 | public static void main(String[] args) { |
2 | TestGUI test = new TestGUI(); |
Sampai saat ini, kita sudah membuat GUI yang fungsional, tapi begitu
dikompail dan dijalankan kok GUI-nya tidak keliatan? Itu karena kita
belum menspesifikasikan ukurannya. Jadi ukuran luasnya masih 0.
Inisialisasi ukuran GUI pada konstruktor
parameter pada method setSize adalah panjang dan lebar dari JFrame tersebut.
Jangan lupa menambahkan kode berikut
2 | setDefaultCloseOperation(EXIT_ON_CLOSE); |
agar ketika window-nya ditutup dengan menekan tombol x merah di pojok
kanan atas, programnya benar-benar tertutup dan dimatikan dari JVM.
Posisi window tadi terletak di pojok kiri atas, bagaimana jika posisinya ingin ditengah?
2 | setLocationRelativeTo( null ); |
Maka posisi Windows akan berada di tengah.
Kalau mau Windows-nya tidak bisa diubah-ubah ukurannya, gunakan kode berikut
Jika ingin memberi nama pada Windowsnya, panggil konstruktor parent
Class dengan method super yang disertai argumen nama dari Windows dengan
tipe String. Jangan lupa kalau super hanya bisa dipanggil di baris
pertama pada konstruktor.
2 | super ( "Graphical User Interface for Test" ); |
Setelah proses awal tersebut selesai, tahap berikutnya adalah tinggal
layout untuk komponen-komponen yang kita butuhkan. Ada dua cara untuk
layout dengan GUI di Java. Cara pertama adalah dengan menggunakan kelas
LayoutManager untuk mengatur tata letak dari GUI kita. Cara ini juga
yang dipakai oleh Netbeans untuk mendesain GUI. Kelebihan cara ini
adalah kita tidak perlu khawatir apabila ukuran GUI berubah-rubah.
Tampilan komponen akan mengikuti ukuran GUI yang sedang berlaku.
Kekurangannya adalah ini bisa-bisa menjadi overkill, terutama untuk
tampilan GUI sederhana dan tidak ada perubahan dari desain semula yang
sudah disusun misalnya di kertas.
Karena itu saya memilih cara kedua, yaitu dengan absolute
positioning. Dengan cara ini, desain awal yang sudah kita punya di
kertas bisa langsung diterjemahkan ke dalam kode karena kita memiliki
kuasa penuh terhadap letak dari komponen-komponennya.
Untuk memulai menggunakan absolute position, maka layout manager-nya harus di set null
Berikutnya akan ditunjukkan bagaimana mengeset posisi komponen, misalnya sebuah textbox dan button
02 | JTextField tf1 = new JTextField(); |
03 | JButton btn1 = new JButton(); |
05 | tf1.setBounds( 50 , 50 , 100 , 20 ); |
06 | btn1.setBounds( 200 , 50 , 100 , 20 ); |
Dua baris pertama adalah instansiasi komponen TextField dan Button. Dua
baris terakhir adalah cara menambahkan komponen ke dalam objek
kontainer, dalam hal ini JFrame-nya sendiri. Kode yang berguna untuk
mengatur letak adalah dua kode ditengah, yaitu method setBounds. Method
setBounds memiliki empat buah parameter, dua parameter di depan adalah
posisi secara sumbu x dan y untuk pojok kiri atas komponen yang
bersangkutan. Dan jangan lupa juga, kalau sumbu x dan y posisi 0,0 untuk
komputer juga dimulai dari pojok kiri atas. Dua parameter berikutnya
adalah untuk panjang dan lebar dari komponen ini.
Tada, selesai. Sekarang Anda telah bisa membuat GUi serumit apapun tanpa
membutuhkan bantuan dari Netbeans. Yang agak sulit dari pembuatan
manual ini adalah harus sering dikompail untuk melihat posisi aslinya,
karena ketika di code mungkin agak sulit untuk dibayangkannya.
Berikut potongan kode lengkapnya
01 | import javax.swing.JButton; |
02 | import javax.swing.JFrame; |
03 | import javax.swing.JTextField; |
05 | public class TestGUI extends JFrame { |
08 | super ( "Graphical User Interface for Test" ); |
10 | setDefaultCloseOperation(EXIT_ON_CLOSE); |
12 | setLocationRelativeTo( null ); |
16 | JTextField tf1 = new JTextField(); |
17 | JButton btn1 = new JButton(); |
19 | tf1.setBounds( 50 , 50 , 100 , 20 ); |
20 | btn1.setBounds( 200 , 50 , 100 , 20 ); |
26 | public static void main(String[] args) { |
27 | TestGUI test = new TestGUI(); |
28 | test.setVisible( true ); |
Dan screenshot dari hasil akhir program
Selamat mencoba, semoga bermanfaat