Sunday Aug 02, 2009

Progress Indicator - JavaFX !

Probably I missed something. But this is the way we can add indefinite progress indicator with any unpredictable events. Here I am just calling a Web service to show yahoo maps for NY city.

Here how progress indicator looks like : ..........

[Read More]

Thursday Jul 30, 2009

Use of ListView - UI Control

A simple example how ListView works in JavaFX 1.2. I guess it need more feature in next release. But it do basic stuff like providing scrollbar if list is long, selected item actions.Something like this :

Here is the simple code, in which I am adding text  ..........

[Read More]

Tuesday Jul 28, 2009

Simple example of Scroll Bar - JavaFX 1.2

ScrollBar - UI Control feature of JavaFX 1.2 .

It has been used in lot of samples but if you are finding it tough to grab out the code from sample to use. Here is a simple(simplest actually :) ) code to use scrollBar. I have create array of rectangle and associated scroll bar with it. Something like this  ..........

[Read More]

Saturday Jul 25, 2009

Hyperlink to URL

It's a long time being blogging. Actually not done anything new from long time :). Here is one simple concept which some guys asked me. We have provided hyperlink API in JavaFX 1.2 but some of us struggled to open a URL using hyperlink API.

Hmm, 2 ways to do it actually.

 No1 : Use the Desktop API of JDK6. It's simple to use. One example is here....

[Read More]

Tuesday Jun 30, 2009

Small code for PieChart...but !

As already discussed, JavaFX 1.2 provide API set for Charts and Graphs. Though I decided to put my hand dirty in writing one 3D piechart from my own. With mine, you will get additional feature of explode in and out feature :). Well, action can be written with the existing chart API and I guess explode feature will also come soon.


Making 3D Pie chart is nothing but layering of 2D Pie Chart and here goes a small code :

Slice.fx

package piechart3d;

import java.lang.Math;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
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.Arc;
import javafx.scene.shape.ArcType;

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

public class Slice extends CustomNode {

    public var color: Color;
    public var sAngle: Number = 0.0;
    public var len: Number = 0.0;
    public var xt = 0.0;
    public var yt = 0.0;


    function explodout():Boolean {
        var t = Timeline {

            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 0.25s
                    canSkip: true
                    values: [
                        xt =>
                        30 \* Math.cos(2  \*  Math.PI  \*  (sAngle  +  len  /  2)  /  360) tween Interpolator.EASEBOTH,
                        yt =>
                        -30 \* Math.sin(2  \*  Math.PI  \*  (sAngle  +  len  /  2)  /  360) tween Interpolator.EASEBOTH

                    ]
                }
            ]
        }
        t.play();
        return true
    }
    function explodein():Boolean {
        var t1 = Timeline {
            repeatCount: 1
            keyFrames: [
                KeyFrame {
                    time: 0.25s
                    canSkip: true
                    values: [
                        xt => 0,
                        yt => 0
                    ]
                }
            ]
        }
        t1.play();
        return true
    }

    public override function create(): Node {
        return Group {
            blocksMouse: true
            translateX: bind xt
            translateY: bind yt
            onMouseClicked: function( e: MouseEvent ):Void {
                if(xt == 0 and yt == 0) {
                    explodout();
                }
                            else
                explodein();
            }
            content: for(num in [0..25]) {[
                    Arc {
 
                        stroke: color
                        cache: true
                        fill: color
                        translateX: 0
                        translateY: (num + 1) \* 1
                        centerX: 250
                        centerY: 250
                        radiusX: 150
                        radiusY: 60
                        startAngle: bind sAngle
                        length: bind len
                        type: ArcType.ROUND
                    }
                    Arc {
                        cache: true
 
                        fill: LinearGradient {
                            startX: 0.3
                            startY: 0.3
                            endX: 1.0
                            endY: 1.0
                            stops: [
                                Stop {
                                    color: color
                                    offset: 0.0
                                },
                                Stop {
                                    color: Color.WHITE
                                    offset: 1.0
                                },

                            ]
                        }
 
                        centerX: 250
                        centerY: 250
                        radiusX: 150
                        radiusY: 60
                        startAngle: bind sAngle
                        length: bind len
                        type: ArcType.ROUND
                    },
                ]
            }

        };
    }
}


Main.fx:
package piechart3d;


import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;

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

var slice1: Slice = Slice{color: Color.YELLOWGREEN, sAngle:0, len: 45};
var slice2: Slice = Slice{color: Color.BLUEVIOLET, sAngle:45, len: 80 };
var slice3: Slice = Slice{color: Color.PALETURQUOISE, sAngle:125, len: 80 };
var slice4: Slice = Slice{color: Color.DARKORANGE, sAngle:205, len: 100 };
var slice5: Slice = Slice{color: Color.FIREBRICK, sAngle:305, len: 55};


Stage {
    title: "Pie Chart - 3D"
    width: 550
    height: 580
    scene: Scene {
        fill: Color.WHITE
        content:[
           slice2, slice1,slice5,slice3,slice4
        ]
     }
    }


Anything here can be made generic to any extend. There is a for loop of 0..25 in Slice.fx which speaks about the thickness of chart :) and some mathematics in timeline speaks about explode feature.

Now if you compare this with PieChart that comes in API, you will see this has some jerky corners + Color combination is not as soluble. How that has been made is secret :).

JNLP Run :



Thursday Jun 04, 2009

New Controls - Chart API in JavaFX 1.2

One of the most effective API's got introduced into the Marina(JavaFX 1.2) release are Control and Chart API's. As there are lot of questions on chart API, here is the small code for making some charts, it almost follow the same protocol with all chart API's.

We can do hell lot of things with it. I have just used the default and shown how action() can be written on slices. 

Source code : Here

Here goes the bubble chart, basic funda is same, insert the number array into BubbleChart.Data. Get all the Data into series and get that series into the Chart API. For more, please see the source Code.

More will be posted soon, or a jumbo one with all of it in one go ! You can download the latest SDK from here.

Wednesday Apr 15, 2009

JavaFX + Web Service + Maps + Navigation

Just a small demo of JavaFX + Web Services. From JavaFX, its quite easy to work on Web Services like maps, search, pictures .. There are lot of Web services demo in the sample space

Here I have contact list of person, which has name, email ID, phone no, address and thumbnail images. Everything has a different work but here we are willing to see the address work. On clicking contact list's, will show me his location in maps. Actually there are two ways to do that, fast way and good way. We can store the maps in Database and use it when required, other is we call the web service and take the map on demand from Yahoo or Google API, which will be slow. So, we will go with good way.

Considering only one contact.


Some fancy stuff, like clicking the + sign will open address option. Now, on clicking the address, we will call the yahoo maps API for showing the location of the person Joseph J.

Actually its a mobile application, and can be viewed in mobile as well(just that I am not putting image). So, in basic code of Map show, we did :

// in place of Sunnyvale and CA, it will be {city} and {state} which will be the variables and passed from main code.

var url = bind "http://local.yahooapis.com/MapsService/V1/mapImage?appid=GetApp;city=Sunnyvale&state=CA";

   var p: PullParser;
   var h: HttpRequest;
   init {
           if (url.length() > 0) {
           h = HttpRequest {
               location: url
                onException: function(exception: Exception) {
                }

                onInput: function(input) {

                   p = PullParser {
                       input: input
                       onEvent: function(event) {

                           if ((event.type == PullParser.END_ELEMENT)) {
                               if (event.qname.name == "Result") {
                                   location = event.text; //this will give a URL for image
                               }
                          }
                       }
                   };
                   p.parse();
                   p.input.close();
      .......

Lot of further code. Important of it is OnDone method where we have to write some code of cleaning or loading prev. data. I have also embed my long back code of navigation, which will help us into navigation in the map.

Ignore some minor mistakes, have a look at the jnlp:

Soon, I will post the whole application with code, but the basic idea is simple and can be doable. 

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 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.


Tuesday Mar 10, 2009

Combining Some motions...JavaFX

This is combination of my old examples. But here we can easily see how to delete, insert items from window at runtime. I have integrated 6 of the physics motion in one tree. Actually it makes things little complex, say we have colliding balls on one button and when I go somewhere and come back to colliding balls, it should colliding from begin. So, for some motion we need to restore initial position again. Run the JNLP here :

Jar file is little big, so it will take time.

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 29, 2009

Different text effects in JavaFX

Some of the way, we can make fancy text. There are lot of good way but these are few of them. If you really want to make it fancy then please do some R&D with these API's used in this code. Here is a small code:

  

package addingfontinstyle;

import javafx.scene.effect.DropShadow;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.light.SpotLight;
import javafx.scene.effect.Lighting;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.stage.Stage;

Stage {
    title: "Text In Style"
    width: 450
    height: 500
    scene: Scene {
        content: [
            Text {
                effect: DropShadow {
                    offsetX: -10
                    offsetY: -10
                }
                font: Font {
                    name: "Arial"
                    letterSpacing: 0.20
                    size: 50
                }
                fill: Color.YELLOWGREEN
                stroke: Color.GREEN,
                strokeWidth: 3
                x: 15,
                y: 80
                content: "Hello World"
            },
 
            Text {
                effect: Lighting {
                    light: DistantLight {
                        azimuth: -135
                        elevation: 30
                    }
                    surfaceScale: 5
                }
                x: 10
                y: 200
                content: "Hello World"
                fill: Color.RED
                font: Font {
                    name: "Arial Bold"
                    letterSpacing: 0.20
                    size: 50
                }
            },
            Text {
                effect: Lighting {
                    light: SpotLight {
                        x: 0
                        y: 100
                        z: 50
                        pointsAtX: 400
                        pointsAtY: 0
                        pointsAtZ: 0
                        specularExponent: 2
                    }
                    surfaceScale: 5
                }
                textOrigin: TextOrigin.TOP
                x: 10
                y: 300
                content: "Hello World"
                fill: Color.RED
                font: Font {
                    name: "Arial Bold"
                    letterSpacing: 0.20
                    size: 50
                }
            },
            Text {
                effect: GaussianBlur {
                }
                x: 10
                y: 400
                content: "Hello World"
                fill: Color.GREEN
                font: Font {
                    name: "Arial Bold"
                    letterSpacing: 0.20
                    size: 50
                }
            }
        ]
    }
}

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 :).

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