Introduction

To celebrate the JavaFX contest JFXStudio created a micro challenge or a mini contest. The challenge was to create something that is related to the word “Orange”.  I really wanted to play around with JavaFX and the Production Suite and currently didn’t have access to the latest Adobe Photoshop and Illustrator products which have the Save-As FXZ extension so I turned to open source. I used Inkscape to create an orange tree and saved it as plain SVG file.  I then used the Production Suite to convert svg file to a FXZ. This is nice because I can simply use the shapes as nodes in JavaFX.

My orange entry is reminiscent of a kid show that I grew up with called “H.R. Pufnstuf”. I know its very dated, and I’m not proud of it. So, back to the fun. Please click on approximately nine oranges and a magic button will appear. (Pressing it is safe). enjoy! If button doesn’t work cut and paste text to browser.

Update!

The surprise was a Youtube video of an episode of the “H.R. Pufnstuf” TV show. The poster of the video was in violation of copy right. Exerpt from Youtube: “This video is no longer available due to a copyright claim by DashGo/Audiobee”.

So, the demo still works just the scary and disturbing Witchy Poo video won’t be shown. My intent was to create an JavaFX RSS feed reader that would launch the browser if needed and Web page to be display.

Problem

How to do the “Designer / Developer workflow in JavaFX”?

Solution

1. Use SVG designer tool (Illustrator, Photoshop, Inkscape)
2. Use Production Suite to convert SVG files to FXZ files.
3. Use NetBeans 6.5.1 to view and manipulate FXZs.
4. Create a JavaFX project and use nodes from FXZ content.

Code:

Obtaining Graphical Assets

// obtain group from fxd id='orangeTree'
var fxdContent = FXDLoader.loadContent("{__DIR__}orangetree2plain.fxz");
var orangeTree = fxdContent.getGroup("orangeTree");

var allOranges:Node[] = [];
// get each individual oranges. id=orange1, id=orange2, etc.
for (i in [1..10]) insert fxdContent.getNode(“orange{i}”) into allOranges ;

Code: Displaying Group and other Nodes


Stage {
title: "Oranges! Oranges!"
width: 500
height: 500
scene: Scene {
content: [Text {
font : Font {
size : 16
}
x: 10, y: 30
content: "Oranges Smoranges"
},
orangeTree, youTubeLocation, witchyPoo
]
}
}