Memakai CSS Di Aplikasi Desktop Dengan Griffon


Pembuat aplikasi web pasti setidaknya pernah mendengar atau memakai CSS untuk mengatur tampilan HTML.   Tapi teknologi tersebut ternyata tidak hanya ekslusif untuk developer aplikasi web.   Telah ada upaya untuk membawa CSS agar dapat dipakai di aplikasi desktop berbasis Swing.   Saya sedikit skeptic disini, karena CSS tidak secanggih seperti di web, hanya dipakai untuk mengatur tampilan komponen Swing.  Perannya mungkin hampir sama seperti CSS di JavaFX, yaitu untuk melakukan skinning.

Kali ini, saya tidak dapat memberikan perintah seperti berikut ini:

install-plugin css-builder

Karena saya memperoleh pesan kesalahan seperti berikut ini:

Some dependencies could not be resolved.
-= INSTALLED =-
. swing-1.1.0
-= MISSING =-
? swing-1.0.0 from griffon-local
Could not resolve plugin dependencies.

Plugin CSSBuilder membutuhkan swing-1.0.0 padahal saya sudah memiliki swing-1.1.0.   Oleh sebab itu, saya akan mencoba men-install CSSBuilder secara manual.

Saya mulai dengan membuka file BuildConfig.groovy, lalu menambahkan bagian berikut ini:

griffon.project.dependency.resolution = {

    ...
    repositories {

        griffonHome()
        mavenLocal()
        mavenCentral()
        mavenRepo "http://snapshots.repository.codehaus.org"
        mavenRepo "http://repository.codehaus.org"

    }

    dependencies {
        // specify dependencies here under either 'build', 'compile', 'runtime' or 'test' scopes eg.

        // runtime 'mysql:mysql-connector-java:5.1.5'
        runtime 'org.codehaus.griffon:cssbuilder:0.6'

    }
}

Setelah itu, saya membuka file Builder.groovy dan menambahkan baris berikut ini untuk mendaftarkan CSSBuilder di baris paling terakhir:

root.'griffon.builder.css.CSSBuilder'.view = '*'

Semua langkah-langkah di atas adalah apa yang dikerjakan secara otomatis pada saat saya meng-install plugin css-builder.

Sekarang, saya sudah bisa mulai coding.   Saya akan membuat sebuah file baru dengan nama style.css di folder griffon-app/resources, dengan isi seperti berikut ini:

* {
    color: #933da9;
    font-size: 20pt;
    font-weight: bold;
    swing-columns: 10;
}
#center {
    background-color: #4fa83d
}
#pageStart {
    background-color: #a22900
}
#pageEnd {
    background-color: #0079a2
}
#lineStart {
    background-color: #9de5ff
}
#lineEnd {
    background-color: #ffb59d
}
.info {
    font-size: 15pt;
    color: #3b0910;
}
jbutton {
    border-color: #a3e3ed; border-width: 4;
    color: #eeaaa4; background-color: #d7eea3;
}

Selector * akan berlaku untuk seluruh JComponent yang ada.

Selector yang diawali tanda pagar (#) akan berlaku untuk komponen dengan nama yang sesuai, misalnya #center akan berlaku untuk komponen dengan atribut name bernilai center; #pageStart akan berlaku untuk komponen dengan atribut name bernilai pageStart; dan seterusnya.

Selector yang diawali dengan tanda titik (.) akan berlaku untuk seluruh JComponent yang memiliki atribut cssClass dengan nilai yang sama. Untuk memberikan cssClass pada sebuah JComponent, saya perlu menggunakan atribut cssClass di node dimana komponen didefinisikan.

Bila selector berupaa nama class, seperti jbutton, maka CSS di dalam selector tersebut akan berlaku untuk seluruh instance class tersebut, misalnya dalam contoh ini adalah seluruh JButton yang ada.

Berikut adalah contoh kode program yang memakai CSS di atas:

import griffon.builder.css.CSSDecorator

application(title: 'latihan', id: 'mainFrame',
  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]) {

    borderLayout()
    panel(name: "pageStart", constraints: PAGE_START) {
        label("PAGE_START", cssClass: "info")
    }

    panel(name: "pageEnd", constraints: PAGE_END) {
        label("PAGE_END", cssClass: "info")
    }

    panel (name: "center", constraints: CENTER) {
        label("Nama:")
        textField()
        button("Submit", cssClass: "submit")
    }

    panel (name: "lineStart", constraints: LINE_START) {
        label("LINE_START", cssClass: "info")
    }

    panel (name: "lineEnd", constraints: LINE_END) {
        label("LINE_END", cssClass: "info")
    }
}

CSSDecorator.decorate("style", mainFrame)

Tampilannya akan terlihat seperti pada gambar berikut ini:

Tampilan Swing Yang Diformat Melalui CSS

Tampilan Swing Yang Diformat Melalui CSS

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: