JavaFX Shapes

Palette contains "JavaFX Shapes" category with most of the JavaFX Shapes available in JavaFX 1.2.3 SDK.

file: javafx-composer-palette-shapes.png

You may drag and drop them to your design and change their properties.

Advanced manipulation tools will be added in future releases, at the moment you can only move shapes and components around and properties such as startX,Y, endX,Y should be used to fine tune position and size. However, note two different modes:

If you move a shape or component using Mouse, layoutX and layoutY properties are changed which also causes changes in the whole layout and you can see in the image above that the panel and vbox got resized. Please bear in mind that layoutX and layoutY can be ignored when placed in a containers which layout the components themselves.

If you move the shape or component using Ctrl+Mouse, translateX and translateY are changed. These properties do NOT affect layout.

Animations on States

In Preview 1 release, there were possible to specify a simple animation to each property in each state. The animation is specified by an interpolator and a duration.

In Preview 2 release, there is animation inheritance introduce. Now each property have a simple inherited animation assigned by default. The inherited animation is specified by inherited interpolation and inherited duration.

file: javafx-composer-property-inherited-animation.png

If you specify a particular interpolator and duration it behaves exactly as before.

If it is specified as inherited then the animation is taken from default animation set for a particular state. The default animation for a state can be edited by pressing "Edit" button in the States list area in the design.

file: javafx-composer-state-edit-animation.png

You can see that the default animation for a particular state may inherit the animation. If specified so, it inherits the animation from the default animation specified for the whole state variable. You may edit it by opening "State Varible" list area in the design and press "Edit" button there.

file: javafx-composer-state-variable-edit-animation.png

Note that the default animation of a state variable is the top level and cannot be inherited.

The animation inheritance allows you to specify a specific animation once at the whole "currentState" state variable, so them you do not have to care about the animations anymore.

Note that the property animations is inherited for all properties by default. This included even "visible" or "mouseClicked" properties. But typically you want to modify these properties (usually discrete) properties immediately when you change a particular state. For that reason, open the "Details" properties view for the property, press "Select All" button to select all states and enter "0" into the duration field. This way you have overriden the duration to 0ms for setting values of the property in all states.

For details, see State Animation Tutorial.

Improved Data Support

Data Sources customizer as well as its API has been significantly improved.

Data Sources are able to work/parse XML data streams and properly visualize fetched data in the Data Source customizers.

JSON parser naturally maps to RecordSet (from an JSON Array), Record (from a JSON Object) and an attribute in a Record (from an key in a JSON Object).

LINES parser parses the stream as a RecordSet where each line is converted into a Record with a single attribute named ".lines" which value is the whole line.

XML parser is implemented the way that:

  • each XML element is converts to a single Record
  • XML attributes are converted to attributes in a particular Record
  • a Record has a special attribute named ".elements" which contains a RecordSet with Records for particular XML sub-elements
  • a Record has a special attribute name ".text" which value is the whole inner text of a particular element
  • a Record has a special attribute named ".name" that contains the local name of the XML element tag
  • a new Record.getXmlString() helper method has been added to simplify work with data coming from XML

file: javafx-composer-datasource-customer-parser-xml.png

HTTP Data Source handles even HTTP POST method. It works exactly the same as for GET method, just set HTTPDataSource.connectionMethod field to "POST".

the "SQL Query" dialog in the JDBC Data Source customizer has been improved:

file: javafx-composer-datasource-customer-jdbc-select.png

Added write support to JDBC Data Source. It can be performed using the following methods:

  • JDBCDataSource.execute (sql: String) - directly executes arbitrary SQL statement
  • JDBCDataSource.remove (table: String, whereClause: String) - removes rows from a table
  • JDBCDataSource.update (table: String, fields:[], whereClause: String) - updates rows in a table
  • JDBCDataSource.create(table: String, fields:[]) - inserts rows into a table

The FileDataSource is extended to support loading files from:

  • Local FileSystem - the path represents an absolute path
  • Resource - the path represents a path on a classpath
  • Storage - the path represents a resource path using Storage API

Note that FileDataSource works only on Desktop profile. and the "Fetch Data" feature works for "Local FileSystem" type only.

file: javafx-composer-datasource-customer-file.png

JavaFX Effects

Palette contains "JavaFX Effects" category with all effects available in JavaFX 1.2.3 SDK.

file: javafx-composer-palette-effects.png

You may drag and drop them to your design and change their properties.

Similarly you may drag and drop them to a node directly, then they are even automatically assigned to the target node. This way you may directly set e.g. Reflection to your !ImageView.

Similarly you may open "Details" property view for any effect property and choose to reuse an existing effect or press "Add" button to create and assign a new effect. "Edit" button select the particular effect so its properties can be edited.

Note the float map for the !DiplacementMap effect has to be coded manually.


You may design colors, linear gradients and radial gradients.

There is no longer just a Color value. Instead they can be drag and dropped into a design as Resources from "JavaFX Resources" category within the palette.

file: javafx-composer-palette-paints.png

Many Paint-based properties has some non-null default value set e.g. "Fill" property of "Scene" component. Since a design does not have these default values presented as resources, the particular property value is specified with a custom-code.

file: javafx-composer-property-paint-default-custom-code.png

You may specify your own value by opening the Details panel. There you can select "Use specific value:" radio-button and select existing Paint resource or create a new one by pressing "Add" button and choosing an appropriate Paint type.

file: javafx-composer-property-paint-details.png


The "Exclusively Visible" template has new options for choosing a transition type i.e. whether to change

  • the visibility only or
  • the visibility and opacity

of the panels while switching between particular states.

Additionally you may change specify an interpolator and a duration for the visibility and the opacity transitions.

file: javafx-composer-template-exclusively-visible-opacity.png

For more, see Templates Tutorial in JavaFX Component Preview 2.

Charts (experimental)

Palette contains "JavaFX Charts (experimental)" and "JavaFX Chart Resources (experimental) categories with all JavaFX Charts available in JavaFX 1.2.3 SDK.

file: javafx-composer-palette-charts.png

You may drag and drop them to your design and change their properties. There are many properties that may be set. The important ones are always visible in the Properties windows. The rest of Chart-related properties are placed in the "Chart" category.

file: javafx-composer-property-chart.png

Charts are not live-visualized in the design view. Instead they are presented as a chart icon rounded by a boundary rectangle.

Note that for proper function of Chart components:

  • You have to specify both axis - by default both are created and assigned together with creation of the chart.
  • You have to define correct bounds of Number Axis and categories in the Category Axis.
  • All charts except for Pie Charts are using Data Series. See the "Data" property of a particular chart. In its Details property view you may specify/add/reuse data-series that should be visualized.
  • Particular Data Series and Pie Charts has "Data" property which represents a sequence of data to be visualized. The data is represented by an encapsulation object. To simplify the static data you may use a build-in simple data editor.

file: javafx-composer-property-chart-series.png

file: javafx-composer-property-chart-series-data.png

For more, see JavaFX Composer Chart Tutorial in Preview 2


A design is continuously check for various issue that it may contain and reports them to user.

The analyzer results are displayed as a button in the toolbar of the design editor. If you press it, a popup menu will show all reports. If you click on them, they usually select a problematic component.

file: javafx-composer-analyzer-button.png

New Samples

There are new samples bundled with the tool. You may create a open them by invoking "File | New Project..." main menu item and selecting "Samples | JavaFX" category.

The list of new and modified samples:

  • Google Image Search - uses Google Image Search API for searching images. Click here to see live demo.
  • Google Search - uses Google Web Search API for searching for web-pages
  • Hello World - animation improved
  • JDBC Address Book - uses new write support in JDBCDataSource API in CRUD-based Address Book application - note it requires JavaDB libraries with in-memory-DB feature.
  • Magic Label - improved for more states and graphics. Click here to see live demo.
  • NetBeans Project Browser - replacement for Kenai Project Browser
  • Twitter - simple twitter client. Click here to see live demo.
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