Cara Mengatur Layout Java dengan Coding Tanpa Drag & Drop

Graphic User Interface merupakan suatu metode untuk antar muka komputer berbasis grafis. GUI dalam pembuatan program aplikasi dengan mempertimbangkan aspek keindahan tampilan dan kemudahaan penggunaan program(User Friendly).

GUI banyak dikenalkan kepada pelajar menggunakan bahasa pemrograman Java. Java menjadi pilihan karena Java menyediakan package yang berisi class - class untuk membangun sebuah GUI yaitu Java Swing. Selain itu Java merupakan bahasa pemrograman yang mudah untuk dipahami, umumnya pengenalan GUI ini juga dibarengi dengan pengenalan pemrograman berorientasi obyek.

Pada pembuatan GUI diperlukan kemampuan mengatur posisi komponen - komponen yang ada atau dikenal dengan “Layouting”. Walaupun pada beberapa IDE untuk pemrograman Java sudah menyediakan menu untuk drag & drop komponen tentu masih banyak pengajar yang melarang pelajar menggunakan fitur tersebut dan meminta pelajar untuk layouting manual dengan menulis program (coding) agar kemampuan dan pemahaman pelajar lebih terasah.

Java memiliki beberapa layout dasar yang dapat digunakan yaitu GridLayout, FlowLayout, BorderLayout, dan NullLayout. Pada umumnya pelajar memilih NullLayout karena dirasa paling gampang dipahami, padahal jika satu - satu komponen diatur posisinya dengan NullLayout akan memakan waktu yang cukup lama apalagi jika saat ujian, bisa jadi waktu habis hanya untuk layouting saja.

Lalu bagaimana cara layouting yang mudah dengan coding? Jawabannya adalah dengan mengkombinasikan beberapa layout. Contoh adalah GUI dibawah ini.

Contoh GUI

Kira - kira layout apa saja yang digunakan untuk GUI diatas? Jawabannya adalah menggunakan NullLayout dan dipadukan dibawah ini.

Layout pada GUI

Jika seutuhnya menggunakan NullLayout maka kita butuh untuk mengatur posisi sekitar 13 komponen namun jika dipadukan dengan layout lain kini kita hanya perlu mengatur posisi 3 komponen saja dengan NullLayout, artinya sekitar 10 komponen sudah tereduksi. Tentu ini lebih hemat waktu.

Pada contoh GUI ini layout Dasarnya adalah NullLayout. Kemudian layout lain membantu untuk membuat posisi komponen - komponen didalamnya lebih rapi.

Langkah Pertama

masukan layout yang akan dipadukan dengan NullLayout pada sebuah panel dengan contoh code di bawah ini

JPanel PanelForm = new JPanel(new GridLayout(4,2));
JPanel PanelForm2 = new JPanel(new FlowLayout(LEFT));
JPanel PanelTombol = new JPanel(new FlowLayout());

Pada FlowLayout terdapat tambahan LEFT yang artinya adalah rata kiri. Karena jika tidak diberi nilai maka posisinya akan tidak beraturan. Maka kita buat dia rata kiri.

Langkah Kedua

masukan panel pada GUI setelah itu masukan komponen pada masing - masing panel tadi. Pada layout Grid dan Flow urutan pemasukan akan menentukan posisinya pada layout. Pada grid akan diselesaikan berbaris(row/record) jika ada kolom pada satu baris maka 2 masukan pertama ada dibaris pertama begitu pula selanjutnya. Lihat contoh code di bawah ini

setLayout(null);

add(PanelTombol);add(PanelForm2);add(PanelForm);

PanelForm.add(LNama);PanelForm.add(TFNama);
PanelForm.add(LNIM);PanelForm.add(TFNIM);
PanelForm.add(LKelamin);PanelForm.add(CBKelamin);
PanelForm.add(LHobi);

PanelForm2.add(ChBgame); PanelForm2.add(ChBmakan); PanelForm2.add(ChBtidur);

PanelTombol.add(BSimpan);PanelTombol.add(BReset);PanelTombol.add(BKeluar);

Langkah Ketiga

atur posisi panel, karena menggunakan null layout maka mengatur posisi panel menggunakan setBounds. Bagi yang belum tau format setBounds, formatnya adalah x, y, panjang dan lebar. Lebih jelasnya lihat gambar dibawah ini.

Format Bounds Java

Contoh code dibawah ini

PanelForm.setBounds(5,5,370,100);
PanelForm2.setBounds(185,80,80,90);
PanelTombol.setBounds(50,165, 300, 40);

Penjelasannya begini, panel pertama x,y bernilai 5,5 karena dia di awal sebetulnya bisa 0,0 namun bisa saja terlalu memojok pada batas luar GUI oleh sebab itu perlu digeser agak ke dalam. Nilai 370 dipilih karena mempertimbangkan ukuran panjang GUI usahakan nilai dibawah ukuran panjang GUI karena terkadang ukurannya tidak tepat. Lebarnya 100 ini karena perkiraan lebar komponen biasanya adalah 20, 20 dikali 4 adalah 80 namun karena ditambah ruang agar tidak terlalu berdekatan maka anggap saja 80+20 jadi 100.
Panel Form kedua x bernilai 185 karena akan diletakan setengah dari form pertama yang panjangnya 370, untuk panel tombol silahkan dipelajari sendiri.

Experiment

Coba rubah rubah urutan penambahan panel dan pelajari apa yang terjadi.

add(PanelTombol);add(PanelForm2);add(PanelForm);e>

Tambahan

untuk mengatur letak muncul GUI selalu pada tempat yang sama atur dengan code dibawah ini

setLocationRelativeTo(null);

Nilai parameter null berarti GUI akan selalu muncul di tengah layar monitor, untuk posisi lain? Silahkan bereksperimen dan pelajari sendiri.

Apakah bisa jika layout dasarnya bukan null layout? Tentu saja bisa, namun silahkan pelajari dan eksperimen sendiri. Karena kurang lebih hanya sama dengan cara ini. Jika ingin bertanya dan konsultasi atau yang lainnya bisa hubungi admin melalui akun facebook atau instagram yang ada pada widget.

Cari Blog Ini

Blog Download