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.

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.

Thursday Apr 09, 2009

It's growing - JavaFX !

I just love to see the enthu towards JavaFX. Since technology is so vast, we always want to compare it with other and try to find out the interoperability with other language, basically the language which we know :-).

Developers are talking from small applications to vast applications. One of my friends was talking of a car race on Google earth road in JavaFX, which  looks like awesome work(if doable).  In our next release, the main focus is on RIA, because this is the only reason why JavaFX born.

JavaFX Communities are also growing rapidly. I remember, I made one Orkut community on JavaFX, 2 months back and now we have more than 140 members and quite an active one. Engineers are asking questions which are quite awesome. 

You must be interesting in seeing some of the valid questions and their answers. Rakesh has done a great post for that. Thanks !

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

 

Wednesday Mar 25, 2009

New Articles on JavaFX.com

So, finally we kicked off the new Article section on javafx.com. Go to the "Explore section". Hit "Overview", see "Overview and New Articles". We have 3 articles there right now.

1. Making a Point-Line Graph.

2. Write an app on Mobile.

3. Improve startup time for FX Apps.

and many more to come.

I don't know if there is a link where we can request for articles but you can definetely leave a comment here, we will take care of it :).


Monday Mar 23, 2009

Mega and Micro Challenges on the way ...FX'ing

Some great news for JavaFX developers. 

1.  JavaFX Coding Challenge starting from today, 23rd March.

For more please visit :  http://javafx.com/challenge/

Some eye catching stuff : Prizes, 25000, 10000, 5000, 1500, 100 $. Have a look !  

2. Another Challenge Josh has announced today on jfxstudio.org. Winners of JavaFX Application developer will get new upcoming book of JavaFX. Hava a look here as well.

So, its like writing one application and chance for getting lot of prizes :).

All the best to the competitors.

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

Play with Space - JavaFX

Spring season is about to come and one can feel the coldness in air. Last week, I went to my home and that week was quite good for my sample writing. Able to finish some of my pending job. 

Back to JavaFX Samples, last week I saw a nice sample written in flash about the ball motion in 3-D space. I try to implement that idea in JavaFX. Code is little dirty, so I will post it later. 

This is how it looks (animation is important) :

To watch the animation, please launch this JNLP.

I hope, you will enjoy it ! 

1. There are 4 polygon, which covers the space, looks like a cricket net practice place :).

2. Launch button will give motion to ball, since the motion is not restored, pressing it again will not work.

3. var scale = z0 / (z0 + z); Scaling with proper value will provide the Z-Camera.

4. Gaussian Blur for shadow, which translate in 2-D and with same timeline.

-- 

Change in Blog : Adding source code :

1. Main File

2. Ball Throw

 This will allow you to relaunch the animation.

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

http://jfxstudio.org - for you !

Today, we have launched a new site for JavaFX Application Development. You all are welcome to join http://jfxstudio.org with your FX application. My contribution is very little on this site but in future I am hoping to put more and more samples here. 

These are sample list till now :

JavaFX Magic 8 ball

JavaFX Prespective Transform

Sliced Image Effect

Dynamic Flow Layout

Tower of Hanoi

JavaFX - Swing Binding (this is very good and simple)

Visualizing Sub Prime Losses

A simple Digital Clock

Data Visualization From JavaFX

Towards a 3D Graphics Engine

Family Tree Visualization

Pie Chart

Experimenting with Form Factor

Dynamic Center Layout

Periodic Table

Snow Fall for your desktop

Pop Pop Bubble

Why you are waiting for :), add your sample in the list. Even if you have a half written or idea of some great sample please share with us, we will work on it further.

Sunday Feb 15, 2009

JavaFX Coding Contest

Hurry up, tomorrow is the last date.

For JavaFX Enthusiasts

Develop and contribute sample applications or games that demonstrate use of
JavaFX in creating rich internet applications and Win Exciting Prizes.
Code JavaFX Contest - http://in.sun.com/specials/codejavafx/index.jsp

Important Dates
16 February 2009 - Contest Starts. Register yourself.
1 March 2009        - Last day for registration
5 March 2009        - Last day for submission of proposal
31 March 2009     - Last date to submit your project. Contest Ends
15 April 2009        -  Winners Announced

Saturday Feb 14, 2009

Get ready for any mobile screen - JavaFX

Developers are ready for any mobile screen. What does it means when we say "any mobile screen". I will explain in a minute. Lets take a sample from javafx sample repository. For a while, I am taking my sample, Carousel. And I will show you how it works on mobile screen. 

We can see all things changed dynamically with change in orientation or screen size. The second is landscape mode which has a different mobile screen size. Images moved to the right position(center of the screen), lower bar adjusted its position according to screen size. 

Believe me, not more than 5 lines of code is required for these changes. This is what we call the power of binding. Components are so nicely binded with each other, that your idea is your implementation.

We have checked this sample on lot of mobile screen size and its running fine. In general, I can assure you, it will run fine on all screen(can be little problem on too small screen size, because there is no image resizing we have done in code. We can expect this behavior will  most of the application which will run on mobile.

 Thats why I said, developers are ready for any mobile devide and any mobile screen. Happy FX'ing.

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