Friday Apr 17, 2009

Bullet Graph - RIA + JavaFX !

Finally we are able to finish one more article on Data Representation. My special thanks to Stephen Few who has written the concept of Bullet Graph. An awesome way to represent lot of data in one screen. Basically used on Executive Dashboard to compare between predicted value and actual done.

In terms of Animation, this is different in comparison with other Data Rep. Articles. Here the data loading is sequential in nature. Actually if someone is making it for presentation purpose, the best way is to show the animation on Key hit, very similar to what we do in ODP or PPT presentations.Some small code of AppletExtension is also there, which will show you the power of JavaFX API. When you drag this applet out of Browser, you will not see the custom close button.

Feel free to comment or add anything you want in this.

Saturday Apr 11, 2009

Mixing Basic Shapes...JavaFX

Often we required some shapes which are not in the list of Basic Shapes available in JavaFX. I mean this is true with any language. A month back, I wanted to make a tube in JavaFX and Tube has very awesome cut at the top which can't be done with basic shapes. We can easily tackle these conditions by intersecting and  subtracting the shapes. Have a look :

Now, this is very easy to make. 1 subtraction and that's it. This is just 2 ellipses and 1 Shape subtraction ! Find the code :

Shapes.fx

Even in this, we can play more and make it as real as it is desired. If you see my tube closely, you will find a green color on the top which gives a feeling that the inside color or liquid inside the tube is green in color. Rotating this tube with 90 and removing the lower base can be helped in the simulation of Pipes. With this only, I had written one small code, showing how light travel in pipes. I will post that code as well in few days.

Point is JavaFX has a strong support for basic shapes but if your desired shape doesn't resides in the list. Use ShapeIntersect and ShapeSubtract for acheiving the desired result.

If you are interest in seeing the liquid filling in this tube, please visit this article.

Friday Mar 27, 2009

Some graphs - JavaFX + RIA

Finally we got this published too. Here is the new article on javafx.com :

http://javafx.com/docs/articles/barchart/

Special thanks to Nancy. She has written most of the articles on JavaFX Production Suite. Our basic idea for this article was to depict the way we can use JavaFX for RIA. One of the common features most of the website using these days are representing the data in graphical mode, very much data in the form of charts and bar graphs.

This one show how petrol cost varies across the globe. Just a fictious data. And another one

Show the usages of Programming languages by developers. For animation please visit the article section of javafx.com

In the previous article, we showed how to make Point-Line Graph with a simple example of temperature arcoss some of the major cities on the globe.

For techinical details, source code, animation and point to point tutorial visit the main site article section (javafx.com -> Overview -> Articles).

 

Friday Mar 20, 2009

Timelines - Ease to Use in JavaFX

JavaFX being an easy language, one complex part is to write proper timeline for animation. Though its quite easy but as beginner I feel problem sometime. And sometime as a Java Developer, we start demanding those things which are generally done by the concept of multi-threading in Java. Remember, JavaFX is single threaded application.

So, this is what I generally follow. Say, If I have a class Ball, which has a circle and every ball has a timeline for its own. Now, if you want One ball move after another ball, I write a master timeline in Main file and there we write something like this :

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:0s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:1s action: function(){ t2.t.playFromStart(); } },

    ]
}

Where there is an animation of 1s in t1.t.playFromStart(); So, the next timeline call goes at 1s, means finishing at first one. If you want some initial delay, you can write :

var t = Timeline {
    repeatCount: 1
    keyFrames: [
         KeyFrame { time:1s action: function(){ t1.t.playFromStart(); } },
         KeyFrame { time:2s action: function(){ t2.t.playFromStart(); } },

    ]
}

Means, dont do anything from 0s to 1s.

But, It is possible that you messed up after sometime. For that, you need to check the "javafx.animation.transition" package, one of the awesome packages in FX API's.

Though, example is everywhere in API Doc. I just show a small one, copied from the API' example itself. First car will fade, then move left and right, then rotate, then move again and then zoom.

Code for assistance :

1. Main for timeline problem.

2. Time class for timeline problem

3. Transitions Main Class.


Monday Mar 09, 2009

Spot Light at spot - JavaFX

There are lot of ways, you can use Lighting effects in JavaFX. All of them have its own use like Spot Light, Distant Light or Point Light. One small sample to show how Spot Light works.

Run the JNLP :

Here is the code :

package lightingeffects;

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.light.SpotLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;

/\*\*
 \* @author Vaibhav Choudhary
 \*/

var distance = -20.0;
var t = Timeline {
    repeatCount: 200
    autoReverse: true
    keyFrames: [
        KeyFrame {
            time: 6s
            canSkip: true
            values: [
                distance => 200.0 tween Interpolator.LINEAR
            ]
        }
    ]
}
t.play();
Stage {
    title: "Lighting Effects"
    width: 240
    height: 250
    scene: Scene {
        fill: Color.BLACK
        content: [
            Group {
                var t: Text;
                content: [
                    Circle {
                        translateX: bind distance
                        centerX: 20,
                        centerY: 45
                        radius: 30
                        stroke: Color.RED
                        strokeWidth: 2
                        effect: GaussianBlur {
                            radius: 10
                        }
                    }
                    t = Text {
                        translateX: 10
                        translateY: 20
                        effect: Lighting {
                            light: SpotLight {
                                x: bind distance
                                y: 0
                                z: 100
                                pointsAtX: bind distance
                                pointsAtY: 0
                                pointsAtZ: 0
                                specularExponent: 4
                            }
                            surfaceScale: 3
                        }
                        textOrigin: TextOrigin.TOP
                        x: 10
                        y: 10
                        content: "SpotLight"
                        fill: Color.RED
                        font: Font.font(null, FontWeight.BOLD, 40);
                    }
                ]
            }
            Group {
                content: [
                    Circle {
                        translateX: bind distance
                        centerX: 20,
                        centerY: 145
                        radius: 30
                        stroke: Color.GREEN
                        strokeWidth: 2
                        effect: GaussianBlur {
                            radius: 10
                        }
                    }
                    Text {
                        translateX: 10
                        translateY: 120
                        effect: Lighting {
                            light: SpotLight {
                                x: bind distance
                                y: 0
                                z: 100
                                pointsAtX: bind distance
                                pointsAtY: 0
                                pointsAtZ: 0
                                specularExponent: 4
                            }
                            surfaceScale: 3
                        }
                        textOrigin: TextOrigin.TOP
                        x: 10
                        y: 10
                        content: "SpotLight"
                        fill: Color.GREEN
                        font: Font.font(null, FontWeight.BOLD, 40);⁞
                    }
                ]
            },
        ]
    }
}

Wednesday Feb 25, 2009

Easy to use - A Block of JavaFX !

Somewhere in someone blog, I read this "Complex thing should be doable and simple things should be simple" - this is what the power of a Language.

Many of us have seen lot of Samples in JavaFX and my favorites are those in which complex things are done quite easy, like PhotoFlip. http://www.javafx.com/samples/PhotoFlip/index.html. You can see how complex calculation goes for a perspective transform.

Using it in a simpler form, I tried to write Cascade transformed Frames, which looks something like this :



You can play with 2 buttons. Sorry for not making some flashy button, I simple used Swing Buttons.

By code is little buggy, so bear with it.

- Moving Mouse on any frame, will make it front.
- Close button will close that frame. (It is only possible in non-perspective mode).
- Top bar can be useful for dragging the frames(again good at non-perspective mode, in perspective mode, use the left most corner to  drag it, you can figure out why is so ? :) ).
- Text will be as clear as it was in original mode.
- Sharing common reason in case of toFront() make the effect little flckry.

(One problem solved, thanks for José Miguel in comment section - Code changed)

Its all in around 100-150 lines of code.  Feel free for suggestions. This can be used for multi-frame work like showing Car models, parts of engine.

Code :

Main.fx

package cascade;

import cascade.Frame;
import javafx.ext.swing.SwingButton;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;

/\*\*
 \* @author Vaibhav Choudhary
 \*/

var bt: Frame = Frame{ x: 20, y: 140 };
var bt1: Frame = Frame{ x: 100, y: 220};
var bt2: Frame = Frame{ x: 180, y: 300};

var gp = Group {
};
insert bt into gp.content;
insert bt1 into gp.content;
insert bt2 into gp.content;

Stage {
    title: "Application title"
    width: 550
    height: 580
    scene: Scene {
        fill: Color.GRAY
        content: [
            gp
            SwingButton {
                translateX: 10
                translateY: 10
                text: "Transform"
                action: function() {
                    bt1.t.playFromStart();
                    bt.t.playFromStart();
                    bt2.t.playFromStart();
                }
            }
            SwingButton {
                translateX: 100
                translateY: 10
                text: "Normal"
            action: function() {
                bt1.t.rate = -1;    bt1.t.play();
                bt2.t.rate = -1;    bt2.t.play();
                bt.t.rate = -1;     bt.t.play();
            }
            }
        ]
    }
}
Frame.fx
package cascade;

import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.effect.PerspectiveTransform;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

/\*\*
 \* @author Vaibhav Choudhary
 \*/


public class Frame extends CustomNode {
    public var startx: Number;
    public var starty: Number;
    public var x: Number;
    public var y: Number;
    var distX: Number;
    var distY: Number ;

    public var clip_ = 0.0;
    public var t = Timeline {
        repeatCount: 1
        keyFrames: [
            KeyFrame {
                time: 1s
                canSkip: true
                values: [
                    clip_ => -150.0 tween Interpolator.LINEAR
                ]
            }
        ]
    }
    public var t_rev = Timeline {
        repeatCount: 1
        keyFrames: [
            KeyFrame {
                time: 1s
                canSkip: true
                values: [
                    clip_ => 0.0 tween Interpolator.LINEAR
                ]
            }
        ]
    }
    public override function create(): Node {
        return Group {
             effect: PerspectiveTransform {
                ulx: 0
                uly: 0
                urx: 300
                ury: bind clip_
                lrx: 300
                lry: bind clip_ + 150
                llx: 0
                lly: 150
            }
            cache: true
            translateX: bind x + startx
            translateY: bind y + starty
            content: [
                Rectangle {
                    x: 0,
                    y: 0
                    opacity: 0.6
                    width: 300
                    height: 150
                    fill: Color.BLACK
 
                    onMouseMoved: function( e: MouseEvent ):Void {
                        this.toFront();
                    }
                },
                Text {
                    fill: Color.WHITE
                    font: Font {
                        size: 14
                        name: "Arial Bold"
                    }
                    x: 10,
                    y: 40
                    content: "I am living on a 3D Frame. You can \\n  transform me using the Transform \\n Button at the top, "
                    "you can set \\n me normal using normal button "
                }
                Rectangle {
                    x: 1,
                    y: 1
                    width: 299,
                    height: 20
                    opacity: 0.8
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 0.0
                        endY: 1.0
                        stops: [
                            Stop {
                                color: Color.GRAY
                                offset: 0.0
                            },
                            Stop {
                                color: Color.BLACK
                                offset: 1.0
                            },
 
                        ]
                    }
               onMousePressed: function (e:MouseEvent) : Void{
                      distX = startx;
                      distY = starty;
                }
                onMouseDragged: function( e: MouseEvent ):Void {
                      startx =distX  + e.dragX;
                      starty =distY  + e.dragY;
                }
                },
                Rectangle {
                    x: 280,
                    y: 3
                    width: 15,
                    height: 15
                    opacity: 0.7
                    onMouseClicked: function( e: MouseEvent ):Void {
                        this.visible = false;
                    }
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0
                        endX: 0.0
                        endY: 1.0
                        stops: [
                            Stop {
                                color: Color.ORANGE
                                offset: 0.0
                            },
                            Stop {
                                color: Color.DARKRED
                                offset: 0.5
                            },
                            Stop {
                                color: Color.ORANGE
                                offset: 1.0
                            },

                        ]
                    }
                    arcHeight: 5
                    arcWidth: 5
                },
                Text {
                    font: Font {
                        size: 20
                    }
                    x: 283,
                    y: 17
                    content: "x"
                }

            ]
        };
    }
}
View the JNLP here :)

Monday Feb 09, 2009

Flexible writing - JavaFX

Writing flexible code is always good. Though I myself write lot of hard coded stuff but nothing wrong in giving good lecture :D. Weeks back I planned to make flexible template in JavaFX, so that we all can use it by just writing one line of code and that is making an instance of that template in our main file. In general the code we write comes with OS frame like on Windows XP it will come with blue frame and close button, min/max buttons, but for good graphics its between to use own template :) and off course it will work on mobile too.

Here are some examples : 


So, I have just created a close button on which we call FX.exit(), nothing else. If we can customize the close button, say hmm to save the data or to save the position of the application. Most of the time it happens, we want the application to open at same position where we dragged it last time.

Important thing to notice is the upper rectangle I mean the title bar adjust the length from its own. So, even the landspace(90 degree rotating the mobile) will give us the correct template form(title bar). I agree, it should be small in case of mobile, and even that can be manageable with code(I have not done in this example). 

How to do this can be understandable in 3 basics steps :

1. Define scene as an instance and use that inside stage like this :

public var s = Scene {
    height: 200
    width: 200
    fill: Color.GRAY
    content: [
        Text {
            font: Font {
                size: 20
            }
            x: 10,
            y: 100
            content: "Application content"
        }
    ]
};

and then:

Stage {
        title: "Flexible Themes"
        style: StageStyle.TRANSPARENT
        width: 240
        height: 320
        scene: s

......

2. Everything will be effected with scene width and height. So, take this in a var. like :

public var width = bind s.width;
public var height = bind s.height;

Now, every component, like rectangle, arc, circle will be properly bind with width and height. Changes width and height will change all the component in relative term. So, rectangle(border line) is :

Rectangle {
                    x: 0,
                    y: 0
                    width: bind sceneWidth - 1
                    height: bind sceneHeight - 1
                    fill: Color.TRANSPARENT
                    stroke: Color.BLACK
                    strokeWidth: 2
                },

 where,

var sceneWidth = bind Main.width;
var sceneHeight = bind Main.height;

This code is written in different file so you need to take width and height from main file.

This is title bar rectangle(the blue and the green) :

Rectangle {
                    x: 1,
                    y: 1
                    width: bind sceneWidth - 1,
                    height: 30
                    opacity: 0.8
                    fill: LinearGradient {
                        startX: 0.0
                        startY: 0.0....

So, height is hard coded here but it should vary according to the size of window. For small window like mobile screen we need to reduce it with some factor.

3. Since Main is used as many place, the compiler will confuse with the entry point, so write the main stage code in function run(). Like:

function run() {
    var s1 = Stage {
        title: "Flexible Themes"
        style: StageStyle.TRANSPARENT
        width: 240
        height: 320
        scene: s
    }
}

Here are the files :

Main File (Please rename this file to Main.fx, else you will get some problem)

Blue Theme, Green Theme

 There can be lot to do with Themes, like adding min/max button, giving drag option which is default in OS Frames or save option as we already mentioned.  Please let me know if I missed something :).

Thanks to Josh for making it possible for all screen.

Thursday Jan 08, 2009

JavaFX - Samples + Usages.

Ah, finally I got JNLP working on my blog, thanks to Sergey and Vikram. I am posting some of my samples with JNLP as we can use as repository for JavaFX samples :). These all are old samples but just with JNLP, so that we can run and see the effect. 

1. Spring Motion : We can create n no. of instance of Spring class. Detail is here. This example deals with Motion, Gradient and Physics Equations.

2. 3D Button Effect:  This example is about PressButton and 3D shadow effect. Detail is here. Basic deals with Shadow Effect, Gradient, and Animation.

3. Glowing Stars in Sky: This example I have created with JavaFX Production Suite. So, we made a home in Photoshop and imported that in JavaFX and then star animation is written in JavaFX. Detail is here. This sample deals with JavaFX Production Suite, Animation, Timelines and Shapes.

4. Colliding Balls: This we have blogged some 4-5 days back. This is again a physics motion with a transparent window. Detail is here. Sample deals with Motion, Equation, Timelines and Gradient. Initial positions and colors are random, so can be wired at sometime + style: StageStyle.TRANSPARENT has been used, so we will not see any frame and so close button will be missing, please press Ctrl + F4 to close the application :). I guess, the good practice is to write esc. key event and call FX.exit().

5. Image Depth support in JavaFX:  Image depth setting or in some language we call it Z-Ordering is supported in JavaFX too. Last to last blog is about that, so here is detail. This sample basically deals with toFront and toBack API of Node and Animation(nothing cool in terms of Animation :D). 

6. Pendulum Motion with Gravity Controller: This is just the last blog. Detail is here. This sample deals with Motion, Gradient and Complex Equations, Binding Feature. I have changed the code little from the prev. blog. Now, it is transparent, so it will give us a better look :)

Feel free to share your experience. I hope all JNLP should work, if not please let me know. Some more I will add soon, actually all these are older samples, just tried to make repoistory, so that easy to find :).

Wednesday Jan 07, 2009

Pendulum Motion with controller in JavaFX

So, here goes one more Motion sample in JavaFX :). I have added Slider to control the value of "g" in Pendulum motion(just a thought, anything can be controlled like mass, length of pendulum). Pendulum do a complex calculation(Square root, Cosine, Sine) and I guess render is great in FX. Sorry again, as I am not able to post the applet. 

But here how it looks : 

The progress bar has been stolen from Chris Blog.

Here is the source code :

Main file, Pendulum.fx, Slider.fx.

Have a look and feel free to share your views.

Tuesday Jan 06, 2009

Managing Java Process from Java Code

Back to Java :). Here is a small blog on how to manage Java Process from Java itself.

Long back, I had written one blog on how to list Java Process running on System by Java Code. But with the new features of JDK6, you can not only see the list but can manage the other running Java Process. This is possible using class LocalVirtualMachine. This class has a list of methods :

connectorAddress,
displayName,
getAllVirtualMachines,
getLocalVirtualMachine,
isAttachable,
isManageable,
startManagementAgent,
toString,
vmid

Here I am just showing a simple code, which will again tell you all the running Java Process.

import sun.tools.jconsole.\*;
import java.util.\*;
public class Main {

public static void main(String[] args) {
Map map = LocalVirtualMachine.getAllVirtualMachines();
Iterator iter = map.values().iterator();
LocalVirtualMachine vm = null;
while (iter.hasNext()) {
vm = (LocalVirtualMachine)iter.next();
System.out.println(vm.displayName());
}
}
}

A very very small code :). Note that this class is not in rt.jar so we need to add jconsole.jar and tools.jar in the classpath section.
So, for running we need to use :

D:/Program Files/Java/jdk1.6.0_11/bin/ControlJavaApp>../javac -cp "D:/Program Fi
les/Java/jdk1.6.0_11/lib/jconsole.jar" Main.java

D:/Program Files/Java/jdk1.6.0_11/bin/ControlJavaApp>../java -cp .;"D:/Program F
iles/Java/jdk1.6.0_11/libjconsole.jar";"D:Program Files/Java/jdk1.6.0_11/lib/t
ools.jar" Main

Or we can modify classpath in Env. Variables.

Right now, in my system it is displaying:

Main
org/netbeans/modules/javafx/preview/Main 1
That means, this code itself and Netbeans is running as a java process.

In next blog, we will try to see how to manage(not listing) other running java code from a java code. I am not able to find too much of doc from net, so things are slow :).

Monday Dec 29, 2008

Image Depth - Z Ordering in JavaFX

While writing some of the samples in which we have to play with images, we sometimes has to manage the depth of the images. Like for the Carousel example, every image has a depth. In that example, actually images are not overlapping with each other, so we never need to write the Z-Order concept. But if someone want to write a Carousel or some application in which Images are residing over other images, we need to set the Z-order of Images. Z-Order in literal term means depth-ness of images. JavaFX gracefully provide API's to set the Z-order of images. With a simple call, you can set the images toFront or toBack features.

In this example, I have taken 3 images and try to set the depth-ness of images on the event of Buttons. 

                 First Image on Top                             Second Image on Top

      Third Image on Top

Here is the code to set the Z-Order : 

package zorder;

import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.ext.swing.SwingButton;

var im1 = ImageView {
    x: 100
    y: 100
    image: Image {
        url: "{__DIR__}im1.PNG"
    }
    opacity: 0.8
        };

var im2 = ImageView {
    x: 130
    y: 130
    image: Image {
        url: "{__DIR__}im2.PNG"
    }
    opacity: 0.8
        };

var im3 = ImageView {
    x: 160
    y: 160
    image: Image {
        url: "{__DIR__}im3.PNG"
    }
    opacity: 0.8
        };

var gp = Group {
    content:[
        im1, im2,im3
    ]

}
Stage {
    title: "Application title"
    width: 400
    height: 400
    scene: Scene {
        fill: Color.BLACK
        content: [
            gp,
            SwingButton {
                translateX: 10
                translateY: 10
                text: "Image 1"
                action: function() {
                    im1.toFront();
                }
            }
            SwingButton {
                translateX: 90
                translateY: 10
                text: "Image 2"
                action: function() {
                    im2.toFront();
                }
            }
            SwingButton {
                translateX: 170
                translateY: 10
                text: "Image 3"
                action: function() {
                    im3.toFront();
                }
            }
        ]
    }
}

From next blog, I will use applet or JNLP in place of images, as suggested by Dmitry in last blog. Pictures make it bulky and uneasy to load. But I was getting some problem in deploying the application on Sun blog which will be rectified soon. 

Tuesday Dec 23, 2008

JavaFX ToolTip - A rough idea

I tried to write a very rough Tool Tip feature. Actually in JavaFX, we can write our own cool Tool tip. But in the meantime, we need to take care of boundary conditions of Tool tip. Here how it looks :

 A shadow effect.

Right now its just a bad code, we will make it good in next post :D. Here it is :

package tooltip;

import javafx.scene.CustomNode;
import javafx.scene.effect.DropShadow;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.ShapeIntersect;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class ToolTip extends CustomNode {

    public var x: Number;
    public var y: Number;
    //useless - content should decide
    public var width: Number = 100;
    public var height: Number = 50;
    //useless-Tooltip instance should be 
    //added dynamically 
    public var op: Number = 0.0;
    public var content: String;
 
    public override function create(): Node {
        return Group {
            content: [
                ShapeIntersect {
                    effect: DropShadow {
                        offsetY: -5
                        offsetX: -5
                        color: Color.color(0.4, 0.4, 0.4)

                    };
                    translateX: bind x
                    translateY: bind y
                    opacity: bind op
                    stroke: Color.GRAY
                    strokeWidth: 2
                    fill: Color.GREEN
 
                    a: [
                        Rectangle {
                            arcHeight:10
                            arcWidth:10
                            x: 0
                            y: 0
                            width: bind width
                            height: bind height
                        }
                        Rectangle {
                            rotate: 45
                            x: 40
                            y: 40
                            width: bind width / 5
                            height: bind 2 \* height / 5
                        }
                    ]
                },
                Text {
                    font: Font {
                        size: 14
                    }
                    translateX: bind x
                    translateY: bind y
                    opacity: bind op
                    x: 10,
                    y: 12
                    content: bind content
                }
            ]
        };
    }
} 

Main Code for this example :

package tooltip;

import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.stage.Stage;
import tooltip.ToolTip;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.input.MouseEvent;


var tt = new ToolTip;

var rect = Rectangle {
            x: 10,
            y: 10
            width: 180,
            height: 70
            stroke: Color.WHITE
            strokeWidth: 4
            fill: Color.YELLOWGREEN
            opacity: 0.8
        };

var text = Text {
            font: Font {
                size: 14
                name: "Arial"
            }
            x: 14,
            y: 30
            content: "HelloWorld - Beginning of a \\nnew technology always say\\n          - Hello World "
        };
var gp = Group {
    translateX: 60
    translateY: 260
    onMouseMoved: function( e: MouseEvent ):Void {
        tt.x = rect.x + tt.width;
        tt.y = rect.y - tt.height - 20;
        tt.op = 0.8;
        tt.content = "You can see \\n the help of \\nHelloWorld !";
    }
    onMouseExited: function( e: MouseEvent ):Void {
        tt.op = 0.0;
    }
    content: [
        rect, text,tt
    ]
}

Stage {
    title: "Tool-Tip"
    width: 450
    height: 480
    scene: Scene {
        fill:Color.BLACK
        content:[
            gp
        ]

    }
}⁞ 

If you are writing a generic tool tip take care of :

1. Scene size - it should not go off screen.

2. Height and Width of tool tip - Most of the tool tip has unit height but it depends on us, we can set it.

Sunday Dec 21, 2008

JavaFX Production Suite - Example.

One more example of JavaFX production Suite. Though the complete thing can be done in Photoshop alone but I am just giving an example. I have made a house in Photoshop, which is not very good :(, but fair enough. And I animated the star effect in JavaFX. 

So, here is my home in photoshop :

Actually this is funny, I was following a tutorial to make house and in temptation, I made shadow as well, but there is no meaning of shadow in night :). Now, I filled star sparking effect in this from JavaFX.


Filling star effect need same which we have written for sparkling glasses. Just some changes here and there. In the last blog we have already discussed how to import work from Photoshop.

Here are the things to download:

1. House in fxz format .

2. Code (Main.fx, Star.fx)

Lot many things can be done. But I don't know Photoshop.

Friday Dec 19, 2008

Designer + Developer + JavaFX

Here is the little discussion on Designer + Developer workflow in JavaFX. Powered with Project Nile, we can export data from PhotoShop or Illustrator. Actually the complete production suite is awesome and provide developer and designer to work in parallel. Here how it is :

So, Developer can work on the business logic and till that time designer can design the actually content for developer. Finally it will merge in a great style. 

 Basic Requirement to do :

1. JavaFX Production Suite : Download from the start section of javafx.com.

2. For Designer : Any tool, either PhotoShop CS3 or Illustrator CS3. Officially CS3 is the supported platform but it works for CS4 as well.

3. For Developer : Java FX SDK: Download from the start section of javafx.com

Now, I am going ahead with PhotoShop. Copy the plugin from JavaFX production suite to PhotoShop. Run the PhotoShop, in export it will give you a save option in JavaFX, which basically saves the file in fxz format(a new format, why Sun need a new format, there is a lot of discussion and Jeet has pointed some reason in his blog).

Alright, so work started : 

I was watching the batman movie, so decide to take his awesome car, which is here :


In photoshop, I have changed the hue and exported all in fxz format.

Then I made a Netbeans Project, Copy the fxz file into the project space. We can now click on fxz file, we can see the preview and code as well. Right now, if we put some of the complex features of PhotoShop, I am afaird to say JavaFX will not catch those changes.

So, my fxz file(JavaFX.fxz) looks like this :

  /\*
 \* Generated by JavaFX plugin for Adobe Photoshop.
 \* Created on Fri Dec 19 19:17:33 2008
 \*/
//@version 1.0

Group {
    clip: Rectangle { x:0 y:0 width:576 height:432 }
    content: [
        ImageView {
            opacity: 1.0
            x: 0
            y: 0
            image: Image {
                url: "{__DIR__}Background.png"
            },
        },
    ]
}

Actually in my case there was nothing, so it generated a simple code :).

Now, I have made another file, calling it CarRotate.fx :

package psfx;

import java.lang.\*;
import javafx.fxd.FXDLoader;
import javafx.scene.\*;
import javafx.scene.input.\*;
import javafx.scene.paint.Color;
import javafx.scene.shape.\*;
import javafx.stage.\*;


var group = Group {
    content: []
};
var fxdContent = FXDLoader.load("{__DIR__}JavaFX.fxz"); // loads the content
insert fxdContent into group.content; // inserts the fxd content into the group


Stage {
    title: "JavaFX Invaders"
    resizable: true
    width: 700
    height: 700
    onClose: function() { 
        System.exit (0);

    }
    scene: Scene {
        content: [
            group
            Rectangle {
                x: 330,
                y: 500
                width: 60,
                height: 30
                fill: Color.GRAY
                onMouseClicked: function( e: MouseEvent ):Void {
                    fxdContent.rotate = 90;
                }
            }
        ]
    }
};


Some part of the code is point of interest :
  var group = Group {

    content: []

};

var fxdContent = FXDLoader.load("{__DIR__}JavaFX.fxz"); // loads the content

insert fxdContent into group.content; // inserts the fxd content into the group

Here I have loaded the .fxz file into var fxdContent which is a node and node means things are in our hand. I have simply written a rotate equation on a button click which is working nicely.

We can see the rotated car and hue which is the asset of PhotoShop in Green color. Huh, finally its done. Sorry, for posting bad example.

Wednesday Dec 17, 2008

Playing with Color in JavaFX

JavaFX provide a rich API for playing with colors for an image or object. The best depicted in this sample but I will show you very quickly how to change the color of a car on JSlider. I have taken this nice car from Path Animation Sample and on JSlider, I will reproduce lot of Car color like this :

Actually this is very small but some one who want to develop car race required lot of car colors(it can be done at runtime)

Code here :

package carcolors;

import javafx.scene.effect.ColorAdjust;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.animation.Interpolator;
import javafx.ext.swing.SwingSlider;

var hue = 0;
var s = SwingSlider {
                minimum: -100
                maximum: 100
                value: hue
                vertical: false
            };
Stage {
    title: "Application title"
    width: 250
    height: 280
    scene: Scene {
        content: [
            s,
            ImageView {
                x: 100
                y: 100
                image: Image {
                    url: "{__DIR__}car.png"
                }
                effect: ColorAdjust {
                    hue: bind s.value/100.0
                }
            },
         ]

    }
}
About

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

Search

Archives
« April 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
   
       
Today