Button Tabs with effects in JavaFX !

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
 
 
                }
            ]
        }
    }
}
Comments:

Isn't java way to slow for navigation? Don't you think you are better off just to use xhtml / css ?

Posted by Jan Smit on August 19, 2008 at 07:53 AM IST #

ya true somewhat. but see this site : http://www.teslamotors.com/. Its written in JavaFX and I guess running pretty fine :)

Posted by Vaibhav on August 19, 2008 at 08:25 AM IST #

As far as I know, Vaibhav, Chris Olivier implemented a version of Tesla motors on JavaFX. The actual website is still in HTML. As far as performance goes, try animating a 300x400 rectangle with a DropShadow effect and prepare to be disappointed with the frame rates.

Posted by Chui on August 20, 2008 at 02:01 AM IST #

I have seen the source view of tesla site and it seems that there is some fx file calling from JS. I don't know the exact implementation, even the tesla site simulated with javafx is good. Speed is a fact and we need to work on it continuously :-). Speed is always a caring issue with Java. I have tried on lot of motions, the result is not so disappointed, i will surely check with DrapShadow effect, thanks for the concern.

Posted by Vaibhav Choudhary on August 20, 2008 at 02:46 AM IST #

777

Posted by guest on January 28, 2010 at 07:54 PM IST #

Post a Comment:
Comments are closed for this entry.
About

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

Archives
« July 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  
       
Today