Memakai JIDE Common Layer Di Griffon


JIDE Common Layer (JCL) adalah komponen tampilan GUI untuk aplikasi desktop di Java.   Proyek ini merupakan bagian dari JIDE Components yang sengaja dijadikan dan gratis.  Yup! Komponen yang ada di JCL (versi gratis) tentunya tidak selengkap yang ada di JIDE Components (versi berbayar).   JIDE Software juga mengembangkan produk lain seperti JIDE Desktop Application Framework (JDAF) dan JIDE Action Framework, tapi karena semuanya adalah solusi berbayar, saya tidak akan menyentuhnya🙂

Griffon telah menyediakan dukungan komponen JIDE melalui JideBuilder.   Builder ini hanya mendukungan komponen yang ada di dalam JIDE Common Layer (JCL) yang bersifat open-source.

Untuk memakai JideBuilder, saya akan meng-install plugin Griffon dengan memberikan perintah seperti berikut ini:

griffon install-plugin jide-builder

Salah satu komponen menarik yang disediakan oleh JCL adalah JideTabbedPane yang merupakan turunan dari JTabbedPane. Kelebihan yang ditawarkan oleh JideTabbedPane adalah pengaturan shape dan warna dari tab-tab secara mudah, seperti yang diperlihatkan oleh kode program Griffon berikut ini:

import com.jidesoft.icons.IconsFactory
import com.jidesoft.plaf.LookAndFeelFactory
import com.jidesoft.swing.JideTabbedPane

LookAndFeelFactory.installJideExtension(LookAndFeelFactory.EXTENSION_STYLE_OFFICE2003)
application(title: 'latihan',
  preferredSize: [320, 240],
  pack: true,
  //location: [50,50],
  locationByPlatform:true,
  iconImage: imageIcon('/griffon-icon-48x48.png').image,
  iconImages: [imageIcon('/griffon-icon-48x48.png').image,
               imageIcon('/griffon-icon-32x32.png').image,
               imageIcon('/griffon-icon-16x16.png').image]) {

    jideTabbedPane(colorTheme: JideTabbedPane.COLOR_THEME_OFFICE2003,
            tabShape: JideTabbedPane.SHAPE_EXCEL,
            boldActiveTab: true) {
        panel(title: "Tab Pertama",
              tabIcon: IconsFactory.getImageIcon(LatihanView, "/com/jidesoft/icons/jide/file_java.png") ) {
            label("Ini isi tab pertama!")
        }
        panel(title: "Tab Kedua",
              tabIcon: IconsFactory.getImageIcon(LatihanView, "/com/jidesoft/icons/jide/file_html.png")) {
            label("Ini isi tab kedua!")
        }
        panel(title: "Tab Ketiga",
              tabIcon: IconsFactory.getImageIcon(LatihanView, "/com/jidesoft/icons/jide/file_text.png")) {
            label("Ini isi tab ketiga!")
        }
    }

}

Hasil dari kode program di atas akan terlihat seperti pada gambar berikut ini:

JideTabbedPane

JideTabbedPane

Komponen lainnya yang menarik adalah CheckBoxList. Turunan dari JList ini akan menampilkan pilihan dalam sebuah list box dimana pada setiap pilihan akan terdapat sebuah JCheckBox. Hal ini akan mempermudah pengguna dalam memilih lebih dari satu pilihan (tanpa CheckBoxList, pengguna harus menekan tombol Control di keyboard untuk memilih lebih dari satu pilihan di JList). Berikut ini adalah contoh kode program yang menggunakan CheckBoxList:

import com.jidesoft.swing.MarqueePane
import java.awt.*

def data = (1..20).collect {"Pilihan $it"}

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

    borderLayout()
    scrollPane(constraints: CENTER) {
        checkBoxList(listData: data, id: "checkBoxList")
            .getCheckBoxListSelectionModel().valueChanged = { e ->
                if (!e.getValueIsAdjusting()) {
                    output.setText(checkBoxList.getCheckBoxListSelectedIndices()
                        .collect { data[it] }.join('\n'))
                }
            }
    }
    panel(constraints: PAGE_END) {
        widget(new MarqueePane(multilineLabel(id: "output", background: Color.BLACK,
                foreground: Color.WHITE, opaque: true)),
            scrollDirection: MarqueePane.SCROLL_DIRECTION_UP,
            stayDelay: 1000, border: etchedBorder(),
            preferredSize: [300,40])
    }

}

Kode program di atas akan menampilkan apa yang dipilih di CheckBoxList ke dalam sebuah MarqueuePane yang memberikan animasi pergerakan, seperti yang terlihat gambar animasi GIF berikut ini:

CheckBoxList

CheckBoxList

JCL juga menyertakan sebuah komponen yang sejak lama sudah ada di SWT tetapi belum ada di Swing, yaitu FolderChooser.   Swing memang punya JFileChooser; tapi akan sulit ‘mewajibkan’ pengguna untuk hanya memilih folder saja dengan JFileChooser. Berikut adalah contoh kode program yang menampilkan FolderChooser:

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

    flowLayout()
    button("Pilih Sebuah Folder", actionPerformed: {
        folderChooser().showOpenDialog(null)
    })
}

Tampilan dari kode program di atas akan terlihat seperti berikut ini:

FolderChooser

FolderChooser

JCL juga memiliki IntelliHints untuk menampilkan pilihan dalam bentuk JList pada saat pengguna mengetik di sebuah JTextComponent, seperti yang diperlihatkan pada contoh kode program berikut ini:

import com.jidesoft.hints.ListDataIntelliHints

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

    flowLayout()
    textField(columns: 10, id: "txtNama")
    new ListDataIntelliHints(txtNama, ["Solid", "Snake", "Sorrido", "Suneku"])
}

Tampilan dari kode program di atas akan terlihat seperti berikut ini:

IntelliHints

IntelliHints

JCL juga memiliki fitur overlay, misalnya dapat saya pakai untuk memberikan icon “kesalahan” pada sebuah JTextField seperti yang terlihat di kode program berikut ini:

import com.jidesoft.swing.DefaultOverlayable
import com.jidesoft.swing.OverlayableIconsFactory
import com.jidesoft.swing.OverlayableUtils

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

    flowLayout()
    widget(new DefaultOverlayable(overlayTextField(columns: 10),
        label(icon: OverlayableUtils.getPredefinedOverlayIcon(OverlayableIconsFactory.ERROR)),
        DefaultOverlayable.SOUTH_EAST))

}

Tampilan dari kode program di atas akan terlihta sepeti pada gambar berikut ini:

Memakai Overlay

Memakai Overlay

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: