Button Tabs with effects in JavaFX !

Tuesday Aug 19, 2008

It looks good, so I decided to put before the completion of work. I was trying to simulate some fancy effects on button, so that I can embed it somewhere in some site. Here what is the class for Button:

public class Button extends CustomNode {

    public attribute x: Number;
    public attribute y: Number;
    public attribute text: Text;
    public attribute rectangle: Rectangle;
    public attribute content: String;
 
    public function create(): Node {

Now, the buttons will look like: 

 If you move the focus on any of the button, it will shine like this :

 or like this :

This simple 2 line animation is achieved by playing with the opacity code. Though I am not able to fit my text inside the button which currently I am trying to bind out. But simple flashy buttons are easy to achieve. Here is the code:

package flashybutton;

import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.text.*;
import javafx.scene.geometry.*;
import javafx.scene.paint.Color;
import javafx.application.Frame;
import javafx.application.Stage;
import javafx.ext.swing.TextField;
import javafx.scene.Font;
import javafx.scene.FontStyle;
import javafx.scene.paint.*;
import javafx.input.MouseEvent;


var x: Number = 100;
var y: Number = 100;
var color: Color;
var buttons:Button[]; 
var text: Text;
var content: String;
var width: Number = 100;
var height: Number = 40;
var arcWidth:Number = 10;
var arcHeight: Number = 10;
var opacity: Number = 0.6;

for( i in [1..5] ) {
    insert Button {
        x:100 + 100 * i,
        y:100,
        content: "HelloWorld" + i,
        opacity: 0.6
    } into buttons;
}     
Frame {
    title: "MyApplication"
    width: 1000
    height: 200
    closeAction: function() { java.lang.System.exit( 0 ); 
    }
    visible: true

    stage: Stage {
        fill: Color.BLACK
        content: [ 
            buttons
        ]
    }
}

public class Button extends CustomNode {

    public attribute x: Number;
    public attribute y: Number;
    public attribute text: Text;
    public attribute rectangle: Rectangle;
    public attribute content: String;
 
    public function create(): Node {
        return Group {
            content: [
                Rectangle {    
                    x : bind x,
                    y : bind y, 
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 1.0
                        endY: 0.0
                        proportional: true
                        stops: [
                 //   Stop { offset: 0.0 color: Color.BLACK },
                            Stop { offset: 0.0 color: Color.BLACK },
                            Stop { offset: 0.5 color: Color.GOLD },
                            Stop { offset: 1.0 color: Color.BLACK }
                        ]
                    },
                    width: 100
                    height: 40
                    arcWidth: 10
                    arcHeight: 10
                    opacity: bind opacity
                    onMouseMoved: function( e: MouseEvent ):Void {
                        opacity = 1.0;
                    }
                    onMouseExited: function( e: MouseEvent ):Void {
                        opacity = 0.6;
                    }
                },
                Text {
                    x: bind x + 10,
                    y: bind y + height / 2 + arcHeight / 2;
                    content: bind content
 
 
                }
            ]
        }
    }
}

Like this post? | | | |

Posted at 02:56AM Aug 19, 2008 by vaibhavc in Java
Tags: code effect java javafx