Jim has posted 66 posts at DZone. You can read more from them at their website. View Full User Profile

Getting Decked: Another JavaFX Custom Node

07.29.2008
| 17408 views |
  • submit to reddit

In the Rolling Your Own JavaFX "Custom Nodes": A Graphical Menu Example post, I began showing you how to create your own UI controls in JavaFX.  I also said that the JFX Custom Nodes category has been started in this blog in which custom nodes that you and I create will be featured.

Today's example features a simple custom node, named DeckNode, that I developed as a way to store a set of Node instances and display one of these nodes at a time.  It is being used to augment the graphical menu example by showing the Node that pertains to a given menu button.  Note that the concept is very similar to the Java CardLayout, so I wouldn't be surprised to see a similar class appear in the javafx.scene.layout package at some point.  Just for grins, I provided the ability to specify a fade-in duration for the node being displayed.  Here's a screenshot of the example application, with one of the nodes in the "deck" being displayed as the splash page: 

Decknodeexample_5  

One of the goals of JavaFX is for graphics designers and developers to be able to work together effectively in creating great looking applications.  To demonstrate this, Mark Dingman (the User eXperience director at Malden Labs) created some graphical mock-ups for the fictitious CD application shown above.  Future blog posts will turn these mock-ups into functioning pages using a combination of UI controls from the JavaFX SDK and custom nodes that we create in this blog.  Here's an example mocked-up page in the form of a graphic that is being displayed as a result of pressing the Play button:

Decknodeexample_play

By the way, Malden Labs, under CTO Thom Theriault's technical leadership, has made a strong commitment to using JavaFX for some pretty exciting systems in the works.  Anyway, if you would like to try today's example out, click on this Java Web Start link, keeping in mind that you'll need at least JRE 5.  Also, installing Java SE 6 update 10 will give you faster deployment time.

Webstartsmall2

Here's the code for the DeckNode class, contained in a file named DeckNode.fx:

/*
* DeckNode.fx -
* A node that shows a deck of nodes one at a time.
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to demonstrate how to create custom nodes in JavaFX
*/

package com.javafxpert.custom_node;

import javafx.animation.*;
import javafx.lang.*;
import javafx.scene.*;

/**
* A node that shows a deck of nodes one at a time. When the
* visibleNodeId attribute is assigned a value, the Node whose
* id is the same as the name becomes visible. Note that the
* the id attribute of each Node must be assigned a unique name.
* This class also has an attribute in which a fade-in duration
* may be specified.
*/
public class DeckNode extends CustomNode {
/**
* A sequence that contains the Node instances in this "deck"
*/
public attribute content:Node[];

/**
* The id of the node that is to be visible
*/
public attribute visibleNodeId on replace {
var nodes = for (node in content where node.id == visibleNodeId) node;
visibleNodeRef = if (sizeof nodes > 0) nodes[0] else null;
fadeTimeline.start();
}

/**
* The amount of time to fade-in the new Node
*/
public attribute fadeInDur:Duration = 1ms;

/**
* This attribute is interpolated by a Timeline, and the opacity
* attribute of this DeckNode class is bound to it. This helps
* enable the fade-in effect.
*/
private attribute opa:Number;

/**
* Override the opacity attribute so that it can be bound to the
* opa attribute that is interpolated by a Timeline
*/
override attribute opacity = bind opa;

/**
* A Timeline to control the fade-in behavior
*/
private attribute fadeTimeline =
Timeline {
keyFrames: [
KeyFrame {
time: bind fadeInDur
values: [
opa => 1.0 tween Interpolator.LINEAR,
]
}
]
};

/**
* A reference to the Node in the Node instances that is visible
*/
private attribute visibleNodeRef:Node;

/**
* Create the Node
*/
public function create():Node {
Group {
content: bind visibleNodeRef
};
}
}

Shown below is the main script for this program, in a file named DeckNodeExampleMain.fx:

/*
* DeckNodeExampleMain.fx -
* An example of using the DeckNode custom node. It also demostrates
* the MenuNode and ButtonNode custom nodes
*
* Developed 2008 by James L. Weaver (jim.weaver at lat-inc.com)
* to demonstrate how to create custom nodes in JavaFX
*/
package com.javafxpert.deck_node_example.ui;

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.geometry.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.scene.transform.*;
import java.lang.System;
import com.javafxpert.custom_node.*;

var deckRef:DeckNode;

Frame {
var stageRef:Stage;
var menuRef:MenuNode;
title: "DeckNode Example"
width: 500
height: 400
visible: true
stage:
stageRef = Stage {
fill: Color.BLACK
content: [
deckRef = DeckNode {
fadeInDur: 700ms
content: [
Group {
var vboxRef:VBox;
var splashFont =
Font {
name: "Sans serif"
style: FontStyle.BOLD
size: 12
};
id: "Splash"
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/splashpage.png"
}
},
vboxRef = VBox {
translateX: bind stageRef.width - vboxRef.getWidth() - 10
translateY: 215
spacing: 1
content: [
Text {
content: "A Fictitious Audio Application that Demonstrates"
fill: Color.WHITE
font: splashFont
},
Text {
content: "Creating JavaFX Custom Nodes"
fill: Color.WHITE
font: splashFont
},
Text {
content: "Application Developer: Jim Weaver"
fill: Color.WHITE
font: splashFont
},
Text {
content: "Graphics Designer: Mark Dingman"
fill: Color.WHITE
font: splashFont
},
]
}
]
},
Group {
id: "Play"
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/playlist.png"
}
}
]
},
Group {
id: "Burn"
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/burning.png"
}
}
]
},
Group {
id: "Config"
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/config.png"
}
}
]
},
Group {
id: "Help"
content: [
ImageView {
image:
Image {
url: "{__DIR__}images/help.png"
}
}
]
}
]
},
menuRef = MenuNode {
translateX: bind stageRef.width / 2 - menuRef.getWidth() / 2
translateY: bind stageRef.height - menuRef.getHeight()
buttons: [
ButtonNode {
title: "Play"
imageURL: "{__DIR__}icons/play.png"
action:
function():Void {
deckRef.visibleNodeId = "Play";
}
},
ButtonNode {
title: "Burn"
imageURL: "{__DIR__}icons/burn.png"
action:
function():Void {
deckRef.visibleNodeId = "Burn";
}
},
ButtonNode {
title: "Config"
imageURL: "{__DIR__}icons/config.png"
action:
function():Void {
deckRef.visibleNodeId = "Config";
}
},
ButtonNode {
title: "Help"
imageURL: "{__DIR__}icons/help.png"
action:
function():Void {
deckRef.visibleNodeId = "Help";
}
},
]
}
]
}
}

deckRef.visibleNodeId = "Splash";

 

Please notice the last line of the listing above is what causes the node that we named "Splash" to be displayed when the application starts. 

The code for the other custom nodes used in this program (ButtonNode.fx and MenuNode.fx) are in the Rolling Your Own JavaFX "Custom Nodes": A Graphical Menu Example post, so you may want to visit that post.  At some point I'll put these custom nodes in a JAR file if developers find them useful.  As always, please leave a comment if you have any questions of comments!

Thanks,
Jim Weaver

Published at DZone with permission of its author, Jim Weaver.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags:

Comments

Jose Jeria replied on Tue, 2008/07/29 - 4:10am

I asked the same in your other post and will ask again, since I am very interested in getting an answer.

The above example is 2.2 MB big. Isn't this a bit too big to be able to compete with for example Flash? As an application, sure, but for the web? Way too big.

ff aaa replied on Tue, 2008/07/29 - 6:01am in response to: Jose Jeria

i think it is loading the whole javafx runtime. thats why it is big. i am guessing javafx will be part of JRE so size will be rather small.

However there is one thing i dont like in javafx code in this exapmle. There is terrible code duplication all over.

Roland Carlsson replied on Tue, 2008/07/29 - 6:10am

Now, if all examples of JavaFX (would not hurt java too) could be this good looking I think a lot of resistance would blow away. Sun engineers, learn from this example, you need a graphical designer to get good looking examples that impress, not just works.

Kevin Daly replied on Tue, 2008/07/29 - 9:42am

I recently posted a very positive JavaFX post... Now for something negative...

When is the SDK going to be released? Does anyone know,  July is almost over and it was promised by July. I know it's being built in the open, but there are no answers to the issue of Video, examples & tools on OpenJFX.. 

Many commercial developers won't even look at something until there is an official release, so I'm really looking forward to seeing and evaluating the sdk. If Sun doesn't get moving on this thing then the "too little, too late" camp will definitely be right in their predictions of doom and failure for FX.

Jim Weaver replied on Tue, 2008/07/29 - 9:46am in response to: Jose Jeria

I asked the same in your other post and will ask again, since I am very interested in getting an answer.

The above example is 2.2 MB big. Isn't this a bit too big to be able to compete with for example Flash? As an application, sure, but for the web? Way too big.

Pepejeria,

I ran out of time yesterday to reply to your comment, but intended to.  Yes, I agree that download size, and therefore time, has always been an issue for rich-client Java, especially in the context of a browser.  Of the 2.2 MB that you quoted (on your Mac, I think), let me break down the sizes, and at the end I'll tell why I believe that JavaFX will beat the deployment speed issues that have plagued rich-client Java apps.  Here's the breakdown for the application in this "Getting Decked" post.  Please note that the column on the far right contains the sizes in Pack200 format, which requires Java SE 6 Update 10 (which Apple unfortunately hasn't implemented *yet*).

JARs:

  JAR file (in KBs) Pack200 Format (in KBs)
 Scenario.jar (Scenegraph graphics library)  474122
 javafxgui.jar (GUI library) 772 147
 javafxrt.jar (JavaFX runtime library)
 532 127
 DeckNodeExample.jar 255 194
   
 Totals 2033 590
  

 

By the way, since I'm using graphical mockups in this example app (PNG files to be specific), it is a little heavy in the graphics files department.  At the end of this comment are four screenshots of the files in the DeckNodeExample.jar file (not in Pack200 format) that comprise the class files and graphic files.

The main thing that causes me to believe that JavaFX is going to fly even in the context of the web from a deployment point of view is Java SE 6 update 10, which solves not only Java JRE deployment issues (like automatic JRE updating, and slicing up the kernel), but will also solve the JavaFX library deployment issue that you and I are concerned about.  This is because at some point, the JavaFX libraries will be sliced up and included with the JRE.  Looking at the CLASS files sizes below, JavaFX applications are not that big and will deploy quickly.

Sorry for the long answer, but your question is a good one and is deserving of a thoughtful answer.  Thanks Pepejeria!

 

 

 

 

 

 

 

 

 

Jim Weaver replied on Tue, 2008/07/29 - 9:54am in response to: Kevin Daly

I recently posted a very positive JavaFX post... Now for something negative...

When is the SDK going to be released? Does anyone know,  July is almost over and it was promised by July. I know it's being built in the open, but there are no answers to the issue of Video, examples & tools on OpenJFX.. 

Many commercial developers won't even look at something until there is an official release, so I'm really looking forward to seeing and evaluating the sdk. If Sun doesn't get moving on this thing then the "too little, too late" camp will definitely be right in their predictions of doom and failure for FX.

 

Kevin,

I read, and appreciated, you very positive post.  At JavaOne, I heard (and saw on Sun slides), two conflicting months in which the JavaFX SDK Technology Preview would be released. One was by the end of June 2008, and one was by the end of July 2008.  According to a recent post by Josh Marinacci of Sun, it will be release by the end of this month (July 2008).

Jose Jeria replied on Tue, 2008/07/29 - 9:55am

Thank you very much for taking the time to answer me Jim Weaver!

The JavaFX website seems to be updated at this very moment. They have details on what is included in the preview SDK. Download link seems to be broken at this moment though, will re-check later.

Kevin Daly replied on Tue, 2008/07/29 - 10:00am in response to: Jim Weaver

Thanks Jim, I'm looking forward to JavaFX.. By the way, do you work for Sun, or are you just an independant champion of JavaFX.

Thom Theriault replied on Tue, 2008/07/29 - 10:02am in response to: Kevin Daly

Hey Kevin,

I think the preview will be worth the wait. Keep the faith.

Thom

 

Jim Weaver replied on Tue, 2008/07/29 - 10:06am in response to: ff aaa

i think it is loading the whole javafx runtime. thats why it is big. i am guessing javafx will be part of JRE so size will be rather small. However there is one thing i dont like in javafx code in this exapmle. There is terrible code duplication all over.

Thanks for pointing out that JavaFX will at some point be part of the JRE.  Regarding the code duplication in my example(s), I'm trying to err on the side of readability for JavaFX beginners in these tutorial-style posts.  There is one place where I felt comfortable in reducing duplication in this example:  I created a Font instance:

var splashFont =  
Font {
name: "Sans serif"
style: FontStyle.BOLD
size: 12
};

...and then I used that Font instance in several Text instances such as this one:

Text {  
content: "Creating JavaFX Custom Nodes"
fill: Color.WHITE
font: splashFont
},

Thanks!

Kevin Daly replied on Tue, 2008/07/29 - 10:12am in response to: Thom Theriault

Except there is no Linux version now! I honestly don't have a Windows machine at home or a Mac, so it's going to be difficult to play with for me. All of the developers here are on OpenSuse, so prototyping a sample applicaiton will be a little bit of a challenge as well.

I hate Irony, after I post that cross platform compatibility is the core strength of FX, the preview SDK is only released for Mac & Windows :)

Jim Weaver replied on Tue, 2008/07/29 - 10:22am in response to: Kevin Daly

Thanks Jim, I'm looking forward to JavaFX.. By the way, do you work for Sun, or are you just an independant champion of JavaFX.

I am an independent champion of JavaFX.  I'm sure that I have often been a real pain to Sun as I've provided  unsolicited advice on JavaFX :-)

My passion for JavaFX is articulated in my October 2007 blog post entitled Putting My CTO Hat On - Our Company's Plans for Using JavaFX Script.

Thanks Kevin!

Jim Weaver

Jim Weaver replied on Tue, 2008/07/29 - 12:07pm in response to: Kevin Daly

Except there is no Linux version now! I honestly don't have a Windows machine at home or a Mac, so it's going to be difficult to play with for me. All of the developers here are on OpenSuse, so prototyping a sample applicaiton will be a little bit of a challenge as well.

I hate Irony, after I post that cross platform compatibility is the core strength of FX, the preview SDK is only released for Mac & Windows :)

 

The JavaFX SDK Technology Preview 1 branch runs on Linux, so I don't know why the actual Technology Preview release wouldn't.  Lots of people have been using Linux with that branch.

Can someone from Sun please address this?

Kevin Daly replied on Tue, 2008/07/29 - 12:09pm in response to: Jim Weaver

Click on the downloads button on the JavaFX.com site and read the system requirements XP+ and Mac only. Could this be because of codecs etc etc?

Mark Unknown replied on Tue, 2008/07/29 - 2:20pm

I am not sure i can do much until tooling comes out. I am not by any means a graphic artist. I started a small project recently with hopes of using JavaFx.  I even bought Jim's book.  I dropped JavaFx and went with straight Swing.  Maybe in the next version of the product.

Jim Weaver replied on Tue, 2008/07/29 - 2:41pm in response to: Mark Unknown

I am not sure i can do much until tooling comes out. I am not by any means a graphic artist. I started a small project recently with hopes of using JavaFx.  I even bought Jim's book.  I dropped JavaFx and went with straight Swing.  Maybe in the next version of the product.

Mark,

That's why I like the idea of partnering with a graphics designer, because I was not born with that particular gene.  The JavaFX SDK Technology Preview will be out in a couple of days, according to Josh Marinacci of Sun.  Please try it out and drop me a line if you have any difficulties getting started.

Mark Unknown replied on Tue, 2008/07/29 - 3:23pm

I will. I do plan to try it.  I can't use Flex because I need to use existing Java APIs/Widgets.  And i would rather use all Java anyway.

 How do you deal with the animation stuff. I look at that and just scratch my head. Can someone who knows Flash understand JavaFX animation?  I am sure I can if there were good, real world tutorials.  I have a flash/graphics person. The opposite problem is getting him to understand the rest of the stuff. :)

Jim Weaver replied on Tue, 2008/07/29 - 3:49pm in response to: Mark Unknown

I will. I do plan to try it.  I can't use Flex because I need to use existing Java APIs/Widgets.  And i would rather use all Java anyway.

 How do you deal with the animation stuff. I look at that and just scratch my head. Can someone who knows Flash understand JavaFX animation?  I am sure I can if there were good, real world tutorials.  I have a flash/graphics person. The opposite problem is getting him to understand the rest of the stuff. :)

Mark,

Regardiing understanding animation, please take a look at the Reading 'tween the Lines - Simplified JavaFX Script Animation Syntax post.  The UI classes in that example use the older, java.ui packages but the animation code is still current. Please let me know if you have any questions on that example.  I do plan to rewrite some of my blog examples to work with the JavaFX SDK Technology Preview, so if you'd like me to make that particular post a priority, please let me know.

Thanks,

Jim Weaver

Mark Unknown replied on Tue, 2008/07/29 - 5:34pm in response to: Jim Weaver

Thanks Jim, I will check it out. By the way, the link didn't work. Well, it did enough for me to find it via google :)

Mark Unknown replied on Tue, 2008/07/29 - 9:45pm in response to: Jose Jeria

[quote=Pepejeria]

 

The JavaFX website seems to be updated at this very moment. They have details on what is included in the preview SDK. Download link seems to be broken at this moment though, will re-check later.

[/quote]

I don't think it was meant to be published.  It seems to be gone now.  I had a browser open to the page and it was showing the SDK info. Now that is not working either.  My cached content must have expired.  Just refreshed the page and it is back to JavaOne content.

Mike P(Okidoky) replied on Wed, 2008/07/30 - 2:21am

JavaFX is really interesting, but what's most interesting I think is simply the fact of having Java2D.

JavaFX remains a weird bizarre unexplained rogue language, that Sun expects us to arbitrarily embrace like it's one of those things we come across as part of our daily research.

It's weird, it's bizarre, it's cumbersome, it's not Java at all, and none of the demos so far are impressive in my opinion.  Too much wacky code needed to make it do small stuff.  Try turning this into a visual designer tool of sorts, which is way off, because it's too source code oriented.

It's hard to explain, but I really don't think this is "it".  We need a whole new fresh approach.

Mike Gionfriddo replied on Wed, 2008/07/30 - 3:28am

Jim/Kevin -

From the JavaFX perspective, when we talk about cross platform, its simply not across desktop platforms, but across a range of consumer platforms including mobile and television devices.  As we discussed at JavaOne, we are actively developing both a desktop and mobile release.

Now what's up with Linux? The JavaFX preview release will only be supported on Windows and Mac OS-X.  These two platforms are widely used for the designer/scripter community JavaFX is attempting to reach and we wanted to get feedback from that audience as quickly as possible.  We do plan on supporting Linux in future releases and as Jim points out, you are able to run with the technology preview branch, but Caveat Emptor.

Best Regards,

Mike 

 

Monica Walker replied on Wed, 2009/06/03 - 4:03am in response to: Mark Unknown

Does making it a node make it easier to skin than a component? If you're considering blog posts, may I suggest skinning? It is a major part of the other RIA platforms but I haven't seen much on it for JavaFX yet.. maybe because most controls are components and not nodes so far?

Current account developer

Scoot Tim replied on Fri, 2009/05/15 - 3:25pm

Thanks. Java SE 6 update 10, which solves not only Java JRE deployment issues (like automatic JRE updating, and slicing up the kernel), but will also solve the JavaFX library deployment issue that you and I are concerned about. This is because at some point, the JavaFX libraries will be sliced up and included with...

sdf ghj replied on Thu, 2009/07/23 - 10:38am

thanks for your post.perhaps you will like .

Benameur Reda replied on Tue, 2010/05/18 - 9:32am in response to: Jim Weaver

very good project can i use it

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.