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%
(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.
Next, we'll create two states - Init and Rotate
and add code which makes the application to switch to Rotate state whenever the mouse enters the circle, switch back to Init whenever the mouse leaves the circle.
To add the code, click on the Circle component to select, enable Event properties in the Properties View, click the pen icon next to the property On Mouse Entered and select Generate: Go to state name. It will generate the command handler and will switch you to the source editor. Press tab to switch to second field (state name) and type Rotate as a name of state to switch to. Repeat for On Mouse Exited, just use Init as a name of state to switch to.
Now, we can customize the individual states. In the Init state, we'd like only circle to be visible therefore we have to move the three lines out of the visible area. Switch to the Init state, select first line and drag it outside of visible area while holding the CTRL key. Repeat for all lines.
Next, switch to Rotate state, select Circle component and set its Rotate property to 1080.
Last step would be to add animation. To make it easier, we don't have to set animations on all properties individually (via property customizers) but we'll set default animation on the Rotate state. Click on the state, then on the settings icon next to it and select Ease Out as a default interpolator and type 800ms as default duration.
It is time to start the application. See live application here.