Custom Components

Recently we do support a basic support for a custom component. It allows you to define a custom component, its properties and include such components into your design.

Creating Custom Components

Have a JavaFX project with a design file called e.g. Main.fx. You can have a new class in your project that would extend from sub-class of the javafx.scene.Node class. E.g.:

public class MyCustomComponent extends CustomNode {

    public var myText: String;

    override function create (): Node {
        Button {
            text: bind myText


The MyCustomComponent class represents your custom component that you would like to use in your design. To do so, you have to create a descriptor for it.

Invoke "Tools | Add to JavaFX Composer Palette" popup menu action on the MyCustomComponent.fx file in the Projects window. Then a dialog open where you can specify your custom-component class.

For correct specification of a custom component, you have to:

  • enter its fully-qualified class name into the "Class Name" field,
  • choose the closest class in the "Known Super Class Name" field from which your class extends,
  • using Add, Move Up, Move Down and Remove and editing the cells in the table, you have to specify fields that your class contains.

Note that the table has two columns:

  • the first column should contain a name of your field
  • the second column should contain a fully-qualified class name of your field.

Note that based on the specified field type a particular property editor will be used. Currently there are the following property editors recognized/avaiable:

  • java.lang.Boolean - a Boolean editor,
  • java.lang.String - a String editor,
  • java.lang.Number - a Number editor,
  • java.lang.Integer - a Integer editor,
  • javafx.geometry.HPos - HPos enum editor,
  • javafx.geometry.VPos - VPos enum editor,
  • javafx.scene.paint.Paint - Paint editor,
  • javafx.scene.paint.Color - Color editor,
  • javafx.scene.text.Font - Font editor,
  • otherwise a dummy property editor is used i.e. you can only bind its value or set its value as a custom code.

The result for our custom component should look like this:


Press OK and a descriptor for your custom component should be created as a file with the same name and .fxcc file extension. This file is automatically recognized by the JavaFX Composer tool.

Now the file structure of your project should look like this:


Adding Custom Component

Now we can open the Main.fx design file. Since we have a valid description of our custom component, the description is recognized in our project and automatically available in the Palette under "Project Files - Custom Classes" category.


You can drag and drop it to your design. See that a new component instance is added to your design. It is rendered similarly as the specified known component i.e. in our case it is a Custom Node which is rendered using a place-holder icon rounded into a rectangle.


At the same time a "Customize Custom Class" dialog is shown since you have used your custom component for the first time in the design file.

The dialog looks like this:


The dialog allows you to choose custom-component descriptor stored within your design file that is going to be used for your custom-component instance. For now just confirm the dialog by pressing OK button.

Look at the Navigator, right now your design should contains the following structure:


The "Custom Classes | MyCustomComponent" node represents a copy of your custom-component description. The copy is stored directly in your design so. Note right now you do not need the .fxcc file to open and work the your custom-component within your design file.

The "scene | customNode [MyCustomComponent]" represents an instance of your custom-component in the design which is rendered in the Design view as a placeholder icon as described above.

Editing Custom Component

Based on the custom-component description, the tool provides you ability to set/control values for the properties of your custom-component instance.

Select the "scene | customNode" component and look at the Properties window. It should look like this:


There is a new "Custom" properties category represented as an icon in the toolbar of the Properties window. In the "Custom" properties category, there is a "Custom Class" property which just shows which custom-component description is used for the component. The value is just read-only.

Additionally the "Custom" category contains property editors for each field that your have specified in the "Add Custom Component to JavaFX Composer" dialog. In our case, it contains the "myText" property only. Note that you can work with this property freely as with any other String property e.g. specify as a text, set it a custom code or bind with a bind code.

Updating Custom Component

Now it is time to upgrade our custom component. Let's say we will add a new "myStrong" field into our custom component class.

public class MyCustomComponent extends CustomNode {

    public var myText: String;
    public var myStrong: Boolean;

    override function create (): Node {
        Button {
            text: bind myText
            strong: bind myStrong


We have updated code and we have to update the custom-component description as well. For that you have to repeat the creation of a custom-component description by invoking "Tools | Add to JavaFX Composer Palette" popup menu action on the MyCustomComponent.fx node in the Projects window. In the "Add Custom Component..." dialog, you have to describe your custom component again. It should look like this:


Press OK and the MyCustomComponent.fxcc description is updated.

Now switch to the design file. Note that the Palette still contains the "My Custom Component" item which now refers to the new version of the custom component description.

Note if you drag and drop this item into your Design view, then a new customNode2 is created as well as a new copy of the custom-component description named "My Custom Component 2". For our tutorial, do NOT do it.

Finally we have to update the copy of the description within our design file. Therefore select the "Custom Class | My Custom Component" item in the Navigator and invoke "Customize..." popup menu action on the item.

A "Customize Custom Class - MyCustomComponent" dialog appear and allow you to update the selected item i.e. the copy of the description. In the "Update from compatible descriptor" combo-box, select the "MyCustomComponent" item that represents the newest description stored in your MyCustomComponent.fxcc file.

See the report in the text-area which tells you what properties you have described in your custom component description in the design file and what will be the new properties. The "Customize Custom Class..." dialog should look like this:


Press OK and your custom component instances are updated. Select the "scene | customNode" component in Navigator and see the Properties window. There are two "myText" and "myStrong" properties which you can freely use.


Persistent Metadata in Design Time

Data Source customizer has been enhanced to gather a general meta-data which can be used while you designing your design.

Open any Data Source customizer and enter valid parameters and press Fetch Data. The structure is shown in the customizer. Newly names of all attribute of all Records in the root-level RecordSet are gathers and stored internally. Press OK to store it in the design file. Now the meta-data may be used while creating a Form.

To demostrate the feature, have a design. Drag and drop a HTTP Data Source to it. In its customizer, fill the "URL" field as "" and select the "Data Format" as JSON. Press Fetch Data and wait to the result. Press "Add" button, specify "projects" expression in the dialog and confirm the dialog. Select the "projects" Data Source on the left side of the customizer and expand any Record on the rigth side. See that each Record that represents a project has some properties e.g. name, display_name, web_url... The customizer should look like this:


Press OK button in the customizer.

Now you have a HTTP Data Source and a "projects" filtered data source. Drag and drop a "Desktop Form" component from Palette to the Design view. In the "Form Customizer", select the "httpDataSource["projects"]" item in the "Data Source" field. Note that the "Fetch" button is enabled now. Press the "Fetch" button. Now the fields in the table in the Form customizer is automatically pre-filled with all recognized attributes that you have seen in the HTTPDataSource customizer.


Non-resizable Components

There are various components that are non-resizable e.g. Shapes. In JavaFX, various properties in LayoutInfo class has been ignored if such LayoutInfo instance has been assigned to a non-resizable component.

Based on that almost all properties in LayoutInfo properties category has been removed for non-resizable components. Only the following properties are available:

  • Horizontal Position (hpos)
  • Vertical Position (vpos)
  • Horizontal Grow (hgrow)
  • Vertical Grow (vgrow)
  • Margin (margin)

Resizeable Property Details Window

The Details properties window can be moved and resized. Drag the border of the window (green area) to resize it. Drag the window anywhere else (red area) and it is moved.


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