Memakai MigLayout Di Java Swing


Swing pada awalnya tercipta untuk di-coding secara manual tanpa visual editor.   Saat itu VB6 masih mendarah daging  di jiwa, dan saya bertanya kenapa tidak drag-n-drop seperti VB6?  Salah satu jawaban yang saya peroleh:  bila menggunakan posisi absolut seperti di VB6, saat form di-resize, maka posisi komponen GUI akan tetap fixed tidak mengisi layar.   Lalu bagaimana cara membuat form yang responsive (meminjam istilah responsive web design dari dunia web)?

Swing memakai layout manager yang  akan mengatur posisi, ukuran, serta berbagai peletakan komponen yang ada.  Tugas developer hanya memberitahu apa saja komponen yang perlu ditambahkan beserta hint sebagai acuan peletakan komponen tersebut.  Developer tidak perlu memberi tahu posisi X, posisi Y, width, atau height karena layout manager yang akan melakukan kalkulasi secara otomatis.

Layout manager pada dasarkan adalah sebuah class.  Halaman http://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html memperlihatkan seluruh layout manager yang disediakan oleh Java.  Bila tidak cukup, developer boleh membuat layout manager sendiri.  Yang paling gampang dipahami adalah FlowLayout.   Developer tinggal memanggil add() untuk menambah komponen; nantinya semua komponen yang ditambahkan akan berurut menyamping secara horizontal atau vertical (dapat diatur).  Yang paling sering saya pakai untuk membuat isi form sekaligus yang paling rumit adalah GridBagLayout.

Beruntungnya, sejak Java 6, terdapat layout manager baru yaitu GroupLayout dan SpringLayout.  Tapi saya sama sekali tidak berniat mempelajarinya sedikitpun saat menemukan keterangan: bahwa kedua layout manager tersebut “was developed for use by GUI builder tools“.  Yup, kedua layout manager baru tersebut dipakai oleh NetBeans Swing GUI Builder.  Gebrakan ini memungkinkan saya kembali merancang form secara drag-n-drop seperti saat saya memakai VB6 dulu.

Tapi entah kenapa, setelah mempelajari layout manager, saya jadi tidak begitu suka memakai Swing GUI Builder kecuali untuk kasus-kasus tertentu.  Bagaimana bila saya terpaksa harus kembali membuat tampilan melalu kode program, misalnya saat memakai Eclipse tanpa GUI Builder?  Layout manager apa yang harus saya pakai?

MigLayout adalah salah satu alternatif layout manager yang mudah dipakai dan tetap  fleksibel.  MigLayout bukanlah bagian dari Java 7.  Tetapi karena saking bergunanya, ada permintaan dari komunitas agar MigLayout disertakan sebagai bagian dari Java (dapat dilihat di http://bugs.sun.com/view_bug.do?bug_id=6530906).

Untuk memakai MigLayout, saya perlu men-download file miglayout-4.0-swing.jar di lokasi http://www.migcalendar.com/miglayout/versions/4.0/.  Setelah itu, saya perlu menambahkan lokasi file JAR ke proyek saya.  Bila saya memakai Eclipse, saya dapat men-klik kanan pada nama proyek, memilih properties.  Pada dialog yang muncul, saya memilih Java Build Path, Libraries, lalu men-klik tombol Add External JARs…  Saya akan memilih file miglayout-4.0-swing.jar dan men-klik tombol OK dua kali untuk menutup dialog.

Lalu, saya akan membuat sebuah class dengan men-klik kanan pada folder src, memilih New, Class.  Saya mengisi nama package dengan com.snake.latihan ; mengisi Name dengan LatihanMigLayout;  memberi centang pada public static void main(String[] args); dan men-klik tombol Finish.

Berikut adalah isi kode program yang saya buat:

package com.snake.latihan;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.JTextField;

import net.miginfocom.swing.MigLayout;

public class LatihanMigLayout extends JFrame {

	private static final long serialVersionUID = 3026608606257541648L;

	public LatihanMigLayout() {
		super("Latihan MigLayout");

		// kolom pertama align right; kolom kedua align left
		// kolom kedua juga akan men-fill space kosong bila tersedia
		setLayout(new MigLayout("","[right][left,grow]","[][][][grow][nogrid]"));

		add(new JLabel("NIM:"));
		add(new JTextField(10), "wrap"); // ganti baris

		add(new JLabel("Nama:"));
		add(new JTextField(30), "wrap, growx"); // ganti baris, fill space kosong bila ada

		// mengisi seluruh baris dan align left, beri jarak 20px di atas
		// bandingkan dengan CSS: "text-align: left; margin-top: 20px"
		add(new JLabel("Catatan:"), "span, align left, gaptop 20");

		add(new JScrollPane(new JTextArea(10,40)), "wrap,span,growx,growy"); // mengisi seluruh baris

		add (new JButton("Simpan"), "gaptop 20, gapbottom 10, flowx, align center");
		add (new JButton("Batal"), "flowx, align center");

		setSize(500,500);
		pack();
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
	}

	public static void main(String[] args) {
		new LatihanMigLayout().setVisible(true);
	}

}

Kode program ini benar-benar sangat sederhana bila dibandingkan dengan memakai GridBagLayout. Hal ini mungkin karena pengaturan GridBagLayout dilakukan melalui GridBagConstraints; sementara pada MigLayout, pengaturan dilakukan dengan String biasa (yang agak mirip dengan CSS).

Berikut ini adalah tampilan awal dari program di atas:

Tampilan Awal

Tampilan Awal

Berikut ini adalah tampilan program setelah di-resize:

Form Setelah Di Resize

Form Setelah Di Resize

Terlihat bahwa JTextArea akan mengisi layar karena memiliki constraint growx dan growy.   Sementara pada JTextField untuk Nama, akan mengisi secara horizontal karena memiliki constraint growx.  JTextField untuk NIM tidak akan pernah bertambah ukurannya karena ia tidak memiliki salah satu dari constraint growx maupun growy.

Bila diperhatikan secara garis besar, form di atas terdiri atas sebuah tabel 4×2 (4 baris dan 2 kolom).  Pada baris ketiga, ada constraints span sehingga kolom akan menyatu.  Begitu juga dengan baris keempat!

Lalu, bagaimana dengan baris terakhir?  Baris terakhir tidak memakai sistem grid atau tabel lagi.  Hal ini terlihat dari penggunaan constraints nogrid.  Dengan demikian perilakunya akan jadi mirip seperti penggunaan FlowLayout.

Sungguh sederhana sederhana dan mudah sekali.  Sekarang, saya jadi lebih optimis bisa merancang form secara cepat tanpa menggunakan visual editor.

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: