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
import javax.swing.JFrame;
kemudian di method main, kita cukup membuat objek dari kelas ini, dan menjalankan method setVisible agar GUI-nya bisa terlihat.
public static void main(String[] args) {
TestGUI test = new TestGUI();
test.setVisible(true);
}
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
TestGUI() {
setSize(600, 400);
}
parameter pada method setSize adalah panjang dan lebar dari JFrame tersebut.
Jangan lupa menambahkan kode berikut
TestGUI() {
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?
TestGUI() {
setLocationRelativeTo(null);
}
Maka posisi Windows akan berada di tengah.
Kalau mau Windows-nya tidak bisa diubah-ubah ukurannya, gunakan kode berikut
TestGUI() {
setResizable(false);
}
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.
TestGUI() {
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
TestGUI() {
setLayout(false);
}
Berikutnya akan ditunjukkan bagaimana mengeset posisi komponen, misalnya sebuah textbox dan button
TestGUI() {
JTextField tf1 = new JTextField();
JButton btn1 = new JButton();
tf1.setBounds(50, 50, 100, 20);
btn1.setBounds(200, 50, 100, 20);
add(tf1);
add(btn1);
}
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
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JTextField;
public class TestGUI extends JFrame {
TestGUI() {
super("Graphical User Interface for Test");
setSize(600, 400);
setDefaultCloseOperation(EXIT_ON_CLOSE);
setResizable(false);
setLocationRelativeTo(null);
setLayout(null);
JTextField tf1 = new JTextField();
JButton btn1 = new JButton();
tf1.setBounds(50, 50, 100, 20);
btn1.setBounds(200, 50, 100, 20);
add(tf1);
add(btn1);
}
public static void main(String[] args) {
TestGUI test = new TestGUI();
test.setVisible(true);
}
}
Dan screenshot dari hasil akhir program
Selamat mencoba, semoga bermanfaat
