Memakai SwingXBuilder Di Griffon: Part 1


Bila komponen di Swing dirasa belum cukup “canggih”, maka salah satu alternatif yang dapat dipakai adalah SwingX. Sayangnya, dokumentasi resmi-nya di http://swingx.java.net/documentation terasa sangat sederhana dan tanpa screenshot!   Oleh sebab itu, untuk mengetahui bagaimana tampilan dan cara pakai setiap komponen yang ada, saya akan mencoba menjalankannya di Griffon (framework untuk bahasa pemograman Groovy).

Untuk memakai SwingX, saya akan meng-install plugin SwingXBuilder dengan memberikan perintah berikut:

griffon install-plugin swingx-builder

Perintah di atas juga akan men-download dan menyertakan library SwingX terbaru yang dibutuhkan.   Pada kasus saya, versi SwingX yang dipakai adalah versi 1.6.4.

Node application() di Griffon secara otomatis akan memakai JXFrame bila terdapat SwingX; bila tidak terdapat SwingX, node tersebut akan memakai JFrame dari Swing.

JXBusyLabel

Komponen ini pada dasarnya adalah sebuah label yang dilengkapi dengan animasi ‘sedang diproses’. Untuk mengaktifkan animasi, method setBusy() harus dipanggil dengan nilai true. Berikut ini adalah contoh kode program yang memakai JXBusyLabel:

application(title: 'Komponen SwingX',
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

  	flowLayout()
  	jxbusyLabel(text: 'Permintaan Anda sedang diproses!', busy: true)

}

Tampilannya akan terlihat seperti pada gambar berikut ini:

Tampilan JXBusyLabel

Tampilan JXBusyLabel

JXCollapsiblePane

JXCollapsiblePane adalah turunan dari JXPanel yang juga merupakan turunan dari JPanel. Isi dari JXCollapsiblePane dapat disembunyikan dan dimunculkan (dilengkapi animasi fade-in dan fade-out) dengan memanggil method setCollapsed() atau TOGGLE_ACTION yang disediakan. Berikut ini adalah contoh kode program yang memakai JXCollapsiblePane:

import javax.swing.border.TitledBorder
import org.jdesktop.swingx.JXCollapsiblePane

application(title: 'Komponen SwingX',
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    borderLayout()
    jxcollapsiblePane (id: "cp", border: new TitledBorder("JXCollapsiblePane"), constraints: CENTER) {		
	label("Ini isi JXCollapsiblePane")
    }

    button(cp.getActionMap().get(JXCollapsiblePane.TOGGLE_ACTION), 
	constraints: PAGE_START, text: "Tampil/Sembunyikan")

}

Tampilan program diatas akan terlihat seperti pada gambar berikut ini:

JXCollapsiblePane

JXCollapsiblePane

JXColorSelectionButton

Ini adalah sebuah tombol yang bisa dipakai untuk memilih warna, seperti yang diperlihatkan dalam kode program berikut ini:

application(title: 'Komponen SwingX',  
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    flowLayout()		
    jxcolorSelectionButton(id: "colorSelection")
    label(text: "Periksa Warna Tulisan Ini", foreground: 
    bind(source: colorSelection, sourceProperty: "background"))
}

Tab pada dialog yang dimunculkan oleh JXColorSelectionButton sedikit lebih banyak bila dibandingkan dengan JColorChooser milik Swing, seperti yang terlihat pada gambar berikut ini:

JXColorSelectionButton

JXColorSelectionButton

JXDatePicker

JXDatePicker adalah sebuah combo box yang menampilkan pilihan tanggal. Berikut ini adalah contoh kode program yang memakai JXDatePicker:

import java.text.SimpleDateFormat;

SimpleDateFormat dateFormat = new SimpleDateFormat("dd/MM/yyyy")

application(title: 'Komponen SwingX',  
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    flowLayout()		
    jxdatePicker(id: "datePicker")
    label("Anda memilih tanggal: ")
    label(text: bind(source: datePicker, sourceProperty: "date", 
	converter: { v -> dateFormat.format(v) }))
}

Tampilannya akan terlihat seperti pada gambar berikut ini:

JXDatePicker

JXDatePicker

JXErrorPane

JXErrorPane mirip seperti JOptionPane tetapi dirancang khusus untuk menampilkan pesan kesalahan. Berikut ini adalah contoh kode program yang memakai JXErrorPane:

import org.jdesktop.swingx.JXErrorPane;

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    flowLayout()		
	button(text: "Klik Disini!", actionPerformed: {
	try {
	  throw new RuntimeException("Oh tidak! Saya mengalami kesalahan!!")
	} catch (Exception ex) {				
	  JXErrorPane.showDialog(ex)
	}
    })  	
}

Tampilannya akan terlihat seperti pada gambar berikut ini:

JXErrorPane

JXErrorPane

JXFindBar

Komponen ini merupakan sebuah JXFindPanel yang dilengkapi implementasi untuk pencarian incremental. Berikut ini adalah contoh kode program yang memakai JXFindBar:

import java.awt.BorderLayout;
import javax.swing.BorderFactory;
import org.jdesktop.swingx.JXFindBar;

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    borderLayout()
    jxeditorPane(id: 'editorPane', constraints: BorderLayout.CENTER,
 	border: BorderFactory.createEtchedBorder())
    jxfindBar(new JXFindBar(editorPane.getSearchable()), 
	constraints: BorderLayout.PAGE_START)			
}

Tampilannya akan terlihat seperti pada gambar berikut ini:

JXFindBar

JXFindBar

JXGradientChooser

Komponen ini adalah sebuah JXPanel yang dirancang khusus untuk memilih gradien warna, seperti yang diperlihatkan oleh kode program berikut ini:

import java.awt.BorderLayout;

application(title: 'Komponen SwingX',  
  id: 'frameUtama',
  preferredSize: [320, 240],
  pack: true,
  locationByPlatform:true,    
  iconImage: imageIcon('/griffon-icon-48x48.png').image) {

    borderLayout()
    jxgradientChooser(constraints: BorderLayout.CENTER)    	  

}

Tampilannya akan terlihat seperti pada gambar berikut ini:

JXGradientChooser

JXGradientChooser

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: