Revision as of 16:24, 22 April 2010 by Mryzl (Talk | contribs)

JavaFX Composer FXD Tutorial

In this tutorial you will learn how to create an application using existing resources. I will start with an existing NetBeans TV logo in eps format. Download the eps version here.


JavaFX Production Suite

I will use only the logo so I have to tweak the image a little bit in Adobe Illustrator. From Illustrator I can export the assets directly in a format (fxd/fxz) which is recognized by JavaFX. You'll need JavaFX Production Suite.[Download version 1.3 from the official JavaFX site].

I'll remove everything except the circle and three lines next to the circle. Next step is to create proper groups and assign them names. I'm going to manipulate all four components so I'm going to assign them names Circle, One, Two, Three.

Exact list of steps:

  • Click on the circle. Since the whole logo is on group, the circle and three lines next to it gets selected
  • Select | Inverse |
  • Click on the circle to select
  • Right click | Ungroup
  • Select only the group
  • Right click | Group
  • Double click the Circle group in the Layers view. It will display Options dialog where you can assign the component a name.
  • Give it name 'JFX:Circle'
  • Select the lines one by one (in facts they are paths) and give them names JFX:One, JFX:Two, JFX:Three
  • Select all (CTRL+A)
  • Object | Transform | Scale and scale the whole object to 20%
  • Item

(I don't know why the following text is strikethrough, looks like a bug in the wiki???)

It is better to scale the image down otherwise it would be too large on the scene.


Now, use File | Save for JavaFX (only with JavaFX Production Suite installed). A dialog will show up. Click on the preview button to see the result. Save it as nbtv.fxz to your NetBeans JavaFX Composer project.


The logo has been exported in the FXZ format and we will be able to manipulate all elements we have assigned names to.

Create the JavaFX application

We have to switch to NetBeans to finish the application. As soon as the exported fx files gets copied to the projects (under sources), it will also appear on the palette. Drag'n'drop it to the scene.


A dialog appears. Now select the elements you would like to use in the design. Then the graphics will be added to scene. Hint: You can always display the customizer by double-clicking on the graphics in the navigator or using the 'Customize button' in the property sheet.

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo