Tutorial : Penggunaan Form Layout bagian 2

Diposting oleh Unknown Minggu, 29 Mei 2011 14.47
Label: , , ,

Pada Tutorial : Penggunaan Form Layout bagian 1 saya telah memberikan contoh source code penggunaan FormLayout, untuk artikel kali ini saya akan membahas lebih lanjut mengenai isi yang ada pada source code tersebut. Seperti pada artikel saya sebelumnya bahwa FormLayout merupakan framework yang memang dirancang untuk mempermudah dan mempercepat dalam pembuatan tampilan berbentuk form.
Pada source code tersebut dapat kita pilah ada tiga bagian penting yang menjadi inti dari penggunaan FormLayout yaitu class FormLayout, DefaultFormBuilder, dan CellConstraints. Namun sebelumnya saya akan membahas terlebih dahulu konsep yang ada pada FormLayout. Konsep yang dipakai pada framework ini sebenarnya mirip dengan konsep yang terdapat pada Layout bawaan java yaitu GridBagLayout, dimana tampilan layar dibagi menjadi row dan column, pada layar komputer biasa kita menyebutnya dengan koordinat x dan koordinat y. Pada FormLayout ini menggunakan konfigurasi string untuk menentukan posisi dan ukuran komponen yang akan kita tempatkan pada layar. Mari kita lihat contoh berikut ini. 
//...
FormLayout layout = new FormLayout(
   "pref, 4dlu, 50dlu, 4dlu, min", // column
   "pref, 2dlu, pref, 2dlu, pref"); // row
//...
Konfigurasi string diatas untuk row berada pada bagian bawah sedangkan untuk column pada bagian atas dipisahkan oleh tanda koma. Pada kode diatas kita mempunyai konfigurasi untuk tampilan form  5 row dan 5 column. Kemudian apa yang dimaksud pref, 4dlu, 50dlu, min dsb ? Mari kita bahas lebih lanjut dan perhatikan rumus berikut ini.

columnSpec        ::= [columnAlignment:] size [:resizeBehavior]
rowSpec           ::= [rowAlignment :] size [:resizeBehavior]
columnAlignment   ::= LEFT | CENTER | RIGHT | FILL | L | C | R | F
rowAlignment      ::= TOP | CENTER | BOTTOM | FILL | T | C | B | F
size              ::= constantSize | componentSize | boundedSize
componentSize     ::= MIN | PREF | DEFAULT | M | P | D
constantSize      ::= <integer>integerUnit | <double>doubleUnit
integerUnit       ::= PX | PT | DLU
doubleUnit        ::= IN | MM | CM
boundedSize       ::= MIN(constantSize;componentSize)| MAX(constantSize;componentSize)
resizeBehavior    ::= NONE | GROW | GROW(<double>) | G(<double>)

Pada rumus umum diatas, kita dapat melihat columnSpec dan rowSpec.ColumnAlignment dan rowAligment merupakan cara meletakan komponen misalkan untuk column (karena dari kiri ke kanan) kita dapat menggunakan posisi LEFT, CENTER, RIGHT mapun FILL begitu juga dengan row(karena dari atas ke bawah) kita dapat menggunakan TOP, CENTER, BOTTOM maupun FILL. Dengan rumus FILL, komponen akan direntangkan sampai ada komponen berikutnya di kanan maupun di bawah komponen yang kita rentangkan. 
Sedangkan untuk ukuran komponen, kita dapat menggunakan salah satu dari constantSize, componentSize, atau boundedSize. Untuk componentSize kita dapat menggunakan Rumus MIN, PREF atau DEFAULT. PREF berarti ukuran komponen akan diletakan dilayar berdasarkan PreferedSize dari komponen tersebut, kemudian untuk MIN akan dilihat berdasarkan MinimumSize dari komponen tersebut sedangkan DEFAULT dilihat dari ukuran default dari komponen. Masing-masing komponen di bahasa pemogramman java mempunyai PreferedSize, MinimumSize dan Size, jadi kalian harus mendefinisikan masing-masing ukuran tersebut dengan cara setPreferedSize(integer size), setMinSize(integer size), setSize(integer size), jika memang kalian ingin mendefinisikan ukuran yang spesifik untuk masing-masing komponen yang kita letakan di layar.

Selain itu kita juga dapat menggunakan ukuran yang spesifik atau constantSize, menggunakan nilai integer maupun nilai double misalkan pada contoh kode diatas 4dlu, 5px, 0.5 dan lain sebagainya. DLU merupakan singkatan dari Dialog Units sedangkan untuk PX adalah singkatan dari Pixels. Dialog Unit didasarkan pada ukuran pixel dan font, ukuran ini akan membesar dan mengecil bergantung pada ukuran font. ConstantSize ini tidak akan berubah walaupun misalkan frame atau tampilan yang kalian buat di minimalkan atau di maximize.

BoundedSize dapat digunakan untuk mendefinisikan ukuran awal batas atas maupun batas bawah dari column maupun row sebelum direntangkan ataupun diletakan pada layar. BoundedSize juga dapat digunakan untuk memastikan ukuran lebar minimal atau maksimal dari column. Fasilitas ini tidak sering saya pergunakan, maka dari itu penjelasan mengenai BoundedSize ini tidak akan saya bahas terlalu dalam.

Kemudian resizeBehavior ini akan sangat berhubungan rumus columnAlignment dan rowAligment yaitu FILL. Karena resizeBehavior ini akan merentangkan ataupun tidak komponen yang kita letakan dilayar. Yang sering saya gunakan adalah GROW sedangkan untuk GROW(<double>) akan melakukan perentangan komponen dengan ukuran rentangan sebanyak nilai <double>. Coba kalian lihat pada source code di artikel saya sebelumnya, kalian akan menemukan tulisan “fill:default:grow”, ini artinya komponen yang kita letakan akan direntangkan dan akan tetap direntangkan walaupun komponen utamanya membesar atau mengecil.

Dari penjelasan saya diatas, maka dapat dipahami bahwa untuk source code tersebut dapat dipahami sebagai berikut. Tampilan layar kita bagi menjadi 5 column dan 5 row. Untuk column 1 sampai 5 didefinisikan ukuran PreferedSize, 4 dialog unit, 50 dialog unit, MinimumSize. Sedangkan untuk ukuran row didefinisikan PreferedSize, 2 dialog unit, PreferedSize, 2 dialog unit dan PreferedSize. Kemudian untuk souce code sebelumnya silahkan pelajari dan pahami sendiri oleh kalian.

Sekian penjelasan penggunaan Form Layout bagian 2, pada bagian lainnya saya akan menjelaskan bagaimana kita meletakan masing-masing komponen dan tentunya dengan penjelasan rinci lainnya. Jika penjelasan saya ini masih belum dimengerti silahkan beri komentar atau kirim email ke : wibawamw@gmail.com. Semoga tutorial kali bermanfaat dan sampai jumpa di tutorial saya lainnya.

Wassalam,
Muhamad Wibawa

Tablet Android Honeycomb Terbaik Murah