Tuesday Dec 15, 2009

Lightweight and Heavyweight components - Mess it !

So, if you are a Swing Developer, you have heard many stories where someone messed Lightweight component with Heavyweight component. In one line " A heavyweight component is one that is associated with its own  native screen resource (commonly known as a peer). A lightweight component is one that "borrows" the screen resource of an ancestor  (which means it has no native resource of its own -- so it's "lighter")."

 Now many times you have heard "Don't mix lightweight and heavyweight". What will happen ? Alright, here is a small code : ............

[Read More]

Wednesday Sep 23, 2009

shape intersection/subtraction result - JavaFX

A very simple example in JavaFX to show that shape intersection/subtraction  works so cool in JavaFX. Gradient comes out in a nice fashion and motion is also smooth. 

 Please see this link to view the sample: http://www.javafx.com/samples/SpeedoMeter/index.html The gradient in sample and here are different and that can be changed by changing 3-4 lines in code.

Its again a open code written. Personally I don't like too much of OOP's coding in JavaFX as it is not a language meant for it. But yes if sample size/application size is big, its always good to make things seperate.


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


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.

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

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.

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