Javafx Flower

contoh sederhana program javafx yang kubuat malam ini:

flower for you :)
flower for you :)

ada satu konsep yang mungkin akan menarik, yaitu masalah z-order node pada javafx. untuk mengatur z-order sebuah node, javafx hanya punya dua fungsi yaitu “toFront()” dan “toBack()”. hal ini akan menjadi masalah karena toFront akan membuat node tersebut berada pada paling atas dari semua node yang ada di scene, dan sebaliknya toBack() akan menjadikannya berada pada order paling bawah.

untuk mengatasi permasalahan ini, cara yang saya gunakan adalah dengan memasukkan node tersebut ke dalam sequence dan kemudian mengatur urutannya dalam sequence tersebut. dan setelah urutannya sesuai maka bisa di attach ke Scene.

pada kasus bunga ini, yang saya lakukan adalah membalik isi sequence, sehingga urutan node – node (rectangle) nya semuanya menjadi terbalik.

perhatikan kode program berikut

/*
 * Main.fx
 *
 * Created on 25 Mar 09, 22:52:14
 */

package flower;

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.shape.Rectangle;
import javafx.ext.swing.SwingSlider;

/**
 * @author Hakim
 */
var width:Number = 600;
def stop1 = Stop {
    offset: 0.0
    color: Color.web("#EE7EF3");
}
def stop2 = Stop {
    color: Color.web("#C736DD");
    offset: 0.774
}
def stop3 = Stop {
    color: Color.web("#D025D7");
    offset: 0.566
}

def stop4 = Stop {
    offset: 1.0
    color: Color.web("#FFFFFF");
}
def stop5 = Stop {
    color: Color.web("#5CFF00", );
    offset: 0.21
}

var s = 0.0;
var r = 0;
var s3 = bind s*s*s;

def lg = LinearGradient{
    startX: 0.0
    startY: 0.5
    endX: 1.0
    endY: .5
    proportional: true
    stops: [ stop1, stop5, stop3/*, stop4,*/ stop2 ]
}

def flower = reverse [ for (i in [0..125]){
    s += 0.01;
    r += 27;
    Rectangle{
        translateX: bind (width - slider.value)/2,
        translateY: bind (width - slider.value)/2
        width: bind slider.value,
        height: bind slider.value
        fill: lg
        rotate: r
        scaleX: s3 + 0.1
        scaleY: s3 + 0.1;
        arcWidth: 20
        arcHeight: 20
    }
}];

def slider = SwingSlider {
    width: bind width*0.666
    translateX : bind width/6
    minimum: 20
    maximum: 200
    value: 100
    vertical: false
}

def group = Group{
    content: [slider, flower]
}
def scene:Scene = Scene {
        fill:Color.BLACK
        content: group
    };

Stage {
    title: "Flower"
    width: bind width with inverse
    height: bind width with inverse
    scene: scene
}

sekarang jika anda ingin mencoba menjalankan aplikasi tersebut, klik link berikut (pastikan java runtime versi 1.5 keatas telah terinstall):

setelah terdownload, klik file tersebut :)

have a nice holiday ya

One thought on “Javafx Flower

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

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