Cara Mengatur Layout Java Dengan Coding Tanpa Drag & Drop
Graphic User Interface merupakan suatu metode untuk antar muka komputer berbasis grafis. GUI dalam pembuatan kegiatan aplikasi dengan mempertimbangkan aspek keindahan tampilan dan kemudahaan penggunaan program(User Friendly).
GUI banyak dikenalkan kepada pelajar memakai bahasa pemrograman Java. Java menjadi pilihan lantaran Java menyediakan package yang berisi class - class untuk membangun sebuah GUI yaitu Java Swing. Selain itu Java merupakan bahasa pemrograman yang simpel untuk dipahami, umumnya pengenalan GUI ini juga dibarengi dengan pengenalan pemrograman berorientasi obyek.
Pada pembuatan GUI diharapkan kemampuan mengatur posisi komponen - komponen yang ada atau dikenal dengan “Layouting”. Walaupun pada beberapa IDE untuk pemrograman Java sudah menyediakan sajian untuk drag & drop komponen tentu masih banyak pengajar yang melarang pelajar memakai fitur tersebut dan meminta pelajar untuk layouting manual dengan menulis kegiatan (coding) supaya kemampuan dan pemahaman pelajar lebih terasah.
Java memiliki beberapa layout dasar yang sanggup dipakai yaitu GridLayout, FlowLayout, BorderLayout, dan NullLayout. Pada umumnya pelajar menentukan NullLayout karena dirasa paling simpel dipahami, padahal bila satu - satu komponen diatur posisinya dengan NullLayout akan memakan waktu yang cukup usang apalagi bila ketika ujian, bisa jadi waktu habis hanya untuk layouting saja.
Lalu bagaimana cara layouting yang simpel dengan coding? Jawabannya yakni dengan mengkombinasikan beberapa layout. Contoh yakni GUI dibawah ini.
Contoh GUI
Contoh GUI
Kira - kira layout apa saja yang dipakai untuk GUI diatas? Jawabannya yakni menggunakan NullLayout dan dipadukan dibawah ini.
Layout pada GUI
Jika seutuhnya menggunakan NullLayout maka kita butuh untuk mengatur posisi sekitar 13 komponen namun bila dipadukan dengan layout lain sekarang kita hanya perlu mengatur posisi 3 komponen saja dengan NullLayout, artinya sekitar 10 komponen sudah tereduksi. Tentu ini lebih irit waktu.
Pada pola GUI ini layout Dasarnya adalah NullLayout. Kemudian layout lain membantu untuk menciptakan posisi komponen - komponen didalamnya lebih rapi.
Langkah Pertama
masukan layout yang akan dipadukan dengan NullLayout pada sebuah panel dengan contoh code di bawah iniJPanel 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 yakni rata kiri. Karena bila tidak diberi nilai maka posisinya akan tidak beraturan. Maka kita buat beliau rata kiri.
Langkah Kedua
masukan panel pada GUI sehabis 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) bila ada kolom pada satu baris maka 2 masukan pertama ada dibaris pertama begitu pula selanjutnya. Lihat contoh code di bawah inisetLayout(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, lantaran menggunakan null layout maka mengatur posisi panel memakai setBounds. Bagi yang belum tau format setBounds, formatnya yakni 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);
PanelForm2.setBounds(185,80,80,90);
PanelTombol.setBounds(50,165, 300, 40);
Penjelasannya begini, panel pertama x,y bernilai 5,5 lantaran beliau di awal bergotong-royong bisa 0,0 namun bisa saja terlalu memojok pada batas luar GUI oleh lantaran itu perlu digeser agak ke dalam. Nilai 370 dipilih lantaran mempertimbangkan ukuran panjang GUI usahakan nilai dibawah ukuran panjang GUI lantaran terkadang ukurannya tidak tepat. Lebarnya 100 ini lantaran asumsi lebar komponen biasanya yakni 20, 20 dikali 4 yakni 80 namun lantaran ditambah ruang supaya tidak terlalu berdekatan maka anggap saja 80+20 jadi 100.
Panel Form kedua x bernilai 185 lantaran 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 kawasan yang sama atur dengan code dibawah inisetLocationRelativeTo(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.
ANTI COPY PASTE
CO-PAS MEMBUATMU TAK BERKEMBANG
TERIMAKASIH TELAH BERKUNJUNG
