Friday Dec 19, 2008

Designer + Developer + JavaFX

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

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

 Basic Requirement to do :

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

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

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

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

Alright, so work started : 

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

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

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

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

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

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

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

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

package psfx;

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

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

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

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

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

    content: []


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

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

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

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

Monday Aug 11, 2008

Need more than Preview Mode - JavaFX

JavaFX Preview SDK came up somewhere in the middle of last month. It is no doubt one of the important thing required. But still the preview is not enough to remove the tiny complexity. I don't do lot of JavaFX coding, but whatever I do, most of the time I spend in putting the circle at right place, adjusting the rectangle corners, making the polygon of the correct shape, where to put the image and many more. Because the preview generates a code which need a lot of modification(why not builder makes it for me). 

Here how it works :

When I drag the line on my code part, it will write something like :

Line {
                startX: 10, startY: 10
                endX: 230, endY: 100
                strokeWidth: 1
                stroke: Color.BLACK

Which is my partial requirement. I want my line to go in the position where it is required in the output window, not a default one. Would love to see Screen View or Output View or Image View where I can draw the objects like Circle, Line, Polygon, Image and drop at a point where it is required in the Output Window. I mean, simply how it happens in Flash or happens in Paint. When I drag say Circle, it comes into editable mode, I can do operation on it, I can increase its radius, I can change the center, I can fill the color and many more and finally settle down at the right position.

If I am not wrong, then we all invest(waste) 20-30 percent of the time still in putting stuff at right position. Talking about the complex drawing, say like making a face, it will take more than 40 percent of time. Why not we can have a View which do that for us. It is just my personal opinion, for rest JavaFX preview is simple and sober. I am damn sure, FX Engineers are working on this. Say if all this is done, poor developer like me can put more brain on writing logic code like Mouse Movement, Key Events, Binding calls(even binding should be done by Builder) and more.


Vaibhav Hi, I am Vaibhav Choudhary working in Oracle with JDK team. This blog is all about simple concept of Java, JVM and JavaFX.


« June 2016