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]

Wednesday Jun 03, 2009

JavaFX 1.2 : RIA + You

So, finally sweat materialized into product. JavaOne announced the new release of JavaFX 1.2. You are welcome to visit the new cool site of javafx.com.

Also visit the sample section, fully loaded with new samples.

JavaFX 1.2 release is loaded with enormous features. Detailed list  here.

Little bit what I know, let me speak about the changes and the corresponding samples.

1. Set of new UI Controls : Buttons, Sliders, Texts ... bla bla... many more. Please figure out in this nice sample :

ProjectManager. Other new samples are also using it like FXAddressBook, StockQuote

2. Chart API : LineChart, AreaChart, BarChart(2D,3D), PieChart(2D,3D), Bubble Chart and many more. Please see the detail in Chart API doc.

Samples : Shopping Mashup, Weather Forecasting

3. Persistence Storage: Resource and Storage class has been added.

Samples: StickyNotes

4. Start-up performance has been increased around 40 percent. No Sample for it :) or we can saw all sample for it :).

5. Lot of changes in Graphics API's

6. O yes, adding of Asynchronous Operations, last time I was struggling running process in Parallel in JavaFX as it is a single threaded application.

Some more things you would like to see :

2 FullScreen Games has been added into samples repo, Reversi Game and SnakesLadders.

IMPORTANT POINT : Many times I talk about RIA, and now if you see the sample repo, there are only few samples which are not using any Web Services. Most of it, are taking Data dynamically from Web Services.

More things to come ....

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

Thursday Feb 12, 2009

JavaFX + Mobile

So, its a short wait. JavaFX for mobile is here. I have tried quite a good number of application on FX Mobile and its running smooth. But why to take my words, download and give a try

New sample section is updated too + some nice new samples like Calculator, Ripple Effect and many more...

For Student, Developer, Coder or in one word for Learner(we all come in this section), have a look at JavaFX with Passion

Some of the industrial leader committed to FX, have a look : http://www.javafx.com/partners/

So, "The most pervasive and powerful mobile platform is now the most expressive" - Feel it :).




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

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. 

Friday Dec 26, 2008

Colliding Balls + JavaFX

Here is an example of one more physics system - Colliding Balls. This is one of the most common examples we find everywhere. I have written this on transparent window. And so, if we increase the width and height of the stage + width, height variable in MotionBall.fx, it will give us a feeling like FlyingSaucer which keep on running all the way on Desktop. Here it looks on top of my code :D.

So, the netbeans window on back and application is running on top of it. Actually dragged out of the browser and running. Just for adding information, we can run an application from netbeans on browser by Properties -> Run -> Run in Browser. Remeber to set the size of applet correct else the application display will not full.

Initially position in this application has been generated randomly + Damping motion has been applied. So, in sometime all the balls will settle down on base. These all parameters can be adjusted in the file. Ball Effect has been generated as usual by Gradient Effect. Some variable may be unused because of future plan :D.

Here goes the code:

MotionBall.fx :

package collidingballs; import java.lang.\*; import javafx.scene.CustomNode; import javafx.scene.Group; import javafx.scene.Node; import javafx.scene.paint.\*; import javafx.scene.shape.\*; var spring : Number = 0.05; var gravity : Number = 0.05; var width : Number = 240; var height: Number = 320; var start: Number = 0; public class MotionBall extends CustomNode {     public var x: Number;     public var y: Number;     public var velocityX: Number;     public var velocityY: Number;     public var mass: Number;     public var radius: Number;     public var color: Color;     public function collision( balls: MotionBall[]) {         for(ball in balls) {             var dx : Number = ball.x - x;             var dy : Number = ball.y - y;             var distance : Number = Math.sqrt( dx \* dx + dy \* dy );             var minDist : Number = ball.radius + radius;             if( distance < minDist ) {                 var angle : Number = Math.atan2( dy, dx );                 var tx : Number = x + Math.cos( angle ) \* minDist;                 var ty : Number = y + Math.sin( angle ) \* minDist;                 var ax : Number = ( tx - ball.x ) \* spring;                 var ay : Number = ( ty - ball.y ) \* spring;                 velocityX -= ax;                 velocityY -= ay;                 ball.velocityX += ax;                 ball.velocityY += ay;             }         }     }     public function move(balls: MotionBall[]) {         velocityY += gravity;         x += velocityX;         y += velocityY;         if( x + radius >= width ) {             x = width + start - radius;             velocityX \*= - 0.9;         }         if( x - radius <= start ) {             x = start + radius;             velocityX \*= -0.9;         }         if( y + radius >= height ) {             y = height - radius;             velocityY \*= -0.9;         }         if( y - radius <= 40 ) {             y = 40 + radius;             velocityY \*= -0.9;         }     }     public override function create(): Node {         return Group {             content: [                 Circle {                     centerX: bind x,                     centerY: bind y,                     radius: bind radius                     fill: bind RadialGradient {                         centerX: 0.25                         centerY: 0.25                         proportional: true                         stops: [                             Stop {                                 offset: 0.0                                 color: color },                             Stop {                                 offset: 1.0                                 color: Color.BLACK },                         ]                     }                 }             ]         };     }



Main.fx :

package collidingballs; import collidingballs.MotionBall; import java.util.Random; import javafx.animation.KeyFrame; import javafx.animation.Timeline; import javafx.scene.paint.Color; import javafx.scene.Scene; import javafx.stage.Stage; import javafx.stage.StageStyle;

var balls: MotionBall[]; var rnd : Random = new Random(); for( i in [1..5] ) {     insert MotionBall {         x: rnd.nextInt( 240 ),         y: rnd.nextInt( 320 ),         radius: 30         color: Color.rgb(rnd.nextInt(255),rnd.nextInt(255),rnd.nextInt(255))     } into balls; } // timeline for colliding balls var t_collide = Timeline {     repeatCount: Timeline.INDEFINITE     keyFrames: [         KeyFrame {             time: 30ms             action: function() {                 for(ball in balls) {                     ball.collision(balls);                     ball.move(balls);                 }             }         }     ] } t_collide.play(); Stage {     title: "Collding Balls"     style: StageStyle.TRANSPARENT     width: 240     height: 320     scene: Scene {         fill: Color.TRANSPARENT         content: [             balls         ]     } }

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 14, 2008

https://javafxexamples.dev.java.net/

If you are in JavaFX and looking for more samples, please visit : https://javafxexamples.dev.java.net/

You can see nice projects like RSSReader, GameScreenFlow and many more. Welcome to the party :).


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