Grid Container

Recently support for the experimental Grid container has been added. It is located in the "Containers" category in the palette.


You can drag and drop a Grid container into the design view. When the grid is in your design, you can add and delete rows and columns by clicking on the "+/-" buttons. You can d'n'd a existing node or a new one from the palette and place it in the Grid container.

The following drop locations are recognized:

  • Bottom edge of Grid container - extends the Grid with a new row and places the dragged node there
  • Right edge of Grid container - extends the Grid with a new column and places the dragged node there
  • Empty cell - places the dragged node in the cell
  • Cell with a node - moves the node in the targeted cell by one cell to the right and then places the dragged node in the targeted cell


Fragments Design

The application can now consist of multiple design files instead of only a single design file. The concept is to have zero or one Main design and multiple Fragments designs.

The Main design is a design with a scene included and can be created as usual using "JavaFX | JavaFX Desktop Design File" file template.

The Fragments design does not have a scene. It is created by the new "JavaFX | JavaFX Fragments Design File" file template. It represents a design with multiple independent nodes/controls/containers. These nodes are not placed in any node or scene directly and therefore you may place them wherever you want - including your own Scene or another Design file.


Note that the tool does not yet support the visual embedding of Design files and therefore you have to manually place the "independent" nodes.

For more details about this feature, see JavaFX Composer - Fragments Tutorial.

Additionally there is a new "Media View" sample project in the "JavaFX | Samples" category, which shows how to create an application which consists of one Main design and several Fragments designs.

State Variable - Do Not Animate Once

Let's consider a design with:

  • A Start state
  • The Start state has an interpolator/duration pair set
  • The design differs in the Master state and the Start state

When you run such an application, at the beginning your Scene is rendered in the Master state and an animation launches to change the Scene to the Start state.

This is the default behavior of the State Variable. Now there is a new property available in the State Variable editor.


In the dialog, there is a new check-box labeled "Skip initial animation to the start state".


If you select the check-box and confirm the dialog, the transition from the Master state to the Start state is quickly fast-forwarded to the end no matter what interpolar/duration is specified for the Start state.

When you run the application now, you can see that at the beginning the Scene is rendered in the Start state and there is no animation at all.

The whole fast-forwarding feature is controlled by a "doNotAnimateOnce" Boolean variable on the "DesignState" class. If the variable is set to true, then the animation of the next transition between old and new state is fast-forwarded. After the fast-forwarding, the variable is automatically reset to "false" value.


You can use this variable whenever you want to skip animation while switching to a new start state. Note that the "DesignState.doNotAnimateOnce" variable has to be set to "true" right before setting the "DesignState.actual" variable.


State Variable - On Transition Finished

We've added another new property in the State Variable editor. Open the editor as described in the section above. You can see the "On Transition Finished" field.


You can see a valid function name in the text field. When you modify it, the "Generate function on dialog close" check-box is automatically selected.

Confirming the dialog switches you to the source code editor and generates a skeleton of an onTransitionFinished function.

The function is called every time the transition from one state to another finishes or is interrupted by switching to another state during the animation.

If you modify the generated function to look like this one:


you have implemented a slide-show feature in your application.

Here's how it works. Whenever an state-transition animation is finished, the myOnTransitionFinished function is called with "finishedState" parameter set to the state index whose animation is finished. If the "finishedState" value is equal to the "currentState.actual" value, it means that the animation has been finished normally and you can call "" or use another way to switch to another state. If the values are not equal, then you know that the animation of the "finishedState" has been interrupted by a switch to another state before the "finishedState" animation finished completely.

Class Name Property

All components in a design including nodes and resources have a new property labeled "Use Class Name". The property is placed in the "Code" category in the Properties window.

If the property is set to a valid fully-qualified or simple class name, then it is used in the generated code as a type of the particular component.


Example: Let's say you have a mypackage.MySpecialButton class in your project. The class extends the javafx.scene.control.Button class. In this case you can d'n'd a Button from the Palette to the Design view and set the "Use Class Name" property value of the Button component to "mypackage.MySpecialButton". This way you can work with the component as if it is an ordinary Button but in the generated code it will use your MySpecialButton class instead.

This represents a way that you can morph a standard, supported component into a custom one. The drawback is that you cannot set or modify properties that are defined in your MySpecialButton class.


Note the tool still does not provide Custom Components support - it is planned for next releases.

Data Source - Tree Support

A new "org.netbeans.javafx.datasrc.UI.createTreeItem" bound method has been added. It takes a RecordSet and a name-of-the-root-item String and returns a TreeItemBase that represents a whole tree structure held by the RecordSet. The created TreeItemBase can be set as a root of a TreeView.

File System Data Source

The File System Data Source now produces DirectoryRecords with the following attributes:

  • children - If the isDirectory value is true, this indicates a RecordSet with files in the directory
  • name - the file name with an extension
  • extension - the file extension without the "." character
  • isDirectory - true, if the Record represents a directory; false, if it is a file
  • path - the absolute path
  • url - the URL string of the file
  • uri - the URI string of the file

Menu Customizer

We have improved the menu customizer, which is available on all MenuBar, Menu, PopupMenu and other menu container. The menu customizer now updates the structure incrementally.

You can open a customizer for a menu with an existing menu structure. You can edit the menu's structure in the customizer. When you press the "Update Structure" button, the menu structure is updated incrementally.

The update logic is:

  • Menu, Menu Item and Separator controls are matched by their text in the master state and required type.
  • If the "text" is the same as a newly required item and the type (i.e. MenuItem, Menu or Separator) matches, the control is used as it is. In other words, the application uses the control's specified instanceName, action and other properties.
  • Otherwise the control is created.
  • All controls that are not used anymore are deleted from the design.

Choice Box

The ChoiceBox control was missing in the Palette in the NetBeans 6.9 Beta release. Now it is there.

Grid Form

A new Form-like template has been added. The "Grid Form" template is similar to the "Desktop Form" template but:

  • It uses a single Grid container for both title and value Labels.
  • It organizes the Labels in the Grid.

Code Generator

The code generated in the read-only section of the source file does not use the "init" constructor at all. Therefore developers can use that init method freely to initiate their design class.

Selection Visualization

We have enhanced the selection visualization in the Design view. In addition to the selection rectangle around the boundary of a selected component, there is now a container-selection rectangle around the selected component's container. The container-selection rectangle highlights the placement of the component within its container.



We have added new samples:

  • RSS Reader - Demonstrates advanced features of Data Source support, such as filtering RecordSets or wiring List cells
  • Media View - Demonstrates how to create/design an application consisting of multiple design files
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