JavaFX Composer Profiles Tutorial


The goal is to learn about profiles and scren sizes.


It is enough to have NetBeans IDE with JavaFX composer plugins installed.

Project Creation

Creating a JavaFX application can be done using one of the following project templates:

  • JavaFX Script Application - the regular JavaFX project which runs the application using command-line javafx executable
  • JavaFX Desktop Business Application - based on the "JavaFX Script Application" template - using "Standard Execution" mode, additionally creates a design file with pre-set Desktop profile and "480x320" screen-size.
  • JavaFX Mobile Business Application - based on the "JavaFX Script Application" template but additionally creates a design file with pre-set Mobile profile and "240x320" screen-size.

file: javafx-composer-profiles-project-templates.png

Project Execution Mode

Let's create a new project using "JavaFX | JavaFX Desktop Business Application". When created, invoke "Properties" popup menu action on the project node in the Projects view. In dialog, select "Run" category.

file: javafx-composer-profiles-project-properties.png

Here you can see that the project has the execution mode is set to "Standard Execution".

Scene Size

Now close the dialog and look at the editor of the design file. There select the "scene [Scene]" node in Navigator or click on the design background. In the "Properties" window, you can see the "Width" and "Height" properties.

file: javafx-composer-project-scene-size.png

According to the JavaFX Documentation of the [[1]] class, the "width" and "height" fields behaves as:

  • If Scene-size is specified then the Stage is taking the Scene size and renders it. Some Stages e.g. on Mobile phones are fixed to the device-size.
  • If Scene-size is not specified then the Scene is calculated from the minimal encapsulation boundary of the components in the Scene. This is a default behavior.

By default, the Scene in the design that is created from the "JavaFX Desktop Business Application" project template is having the Scene-size set to the "480x320" pixels as is visible on the image above.

If you want the default JavaFX behavior, choose "Unspecified" value in the combo-box of the "Width" and "Height" property editor.

Design Profiles

Now let's add a "List View" component just in the middle of your scene.

At the top of the design, you have a "Design Toolbar". The toolbar allows you to specify:

  • screen-size e.g. "Mobile 240x320"
  • synchronize screen-size to screen-size - selected by default
  • clip the design by screen-size - not selected by default

file: javafx-composer-profiles-design-toolbar.png

The screen-size is a simulated target device viewport. It is not related neither to the "Execution Mode" in the "Project Properties" nor a particular device.

If the "Synchronize screen-size" button is selected, then an change of the screen-size is automatically propagated to the scene-size.

If the "Clip the design" button is selected then the design will be clipped to the screen-size.

For example, let's:

  • select "Mobile 240x320" screen-size - the List View should be partly out of the screen-size
  • unselect "Synchronize" button - nothing visible happens
  • select the design background and change Scene "Width" and "Height" property to "200" - the white background collapsed to area smaller to the screen-size
  • select "Clip" button - the List View should be cut so just the area in the screen-size is visible

Now your design should look like this:

file: javafx-composer-profiles-design-area.png

The white color represent the Scene - especially is size. The dashed line represents the simulated screen-size. The List View is clipped. The selection rectangle encapsulate the whole List View including its invisible part.

You can try to run such application using "Standard Execution" or in "Mobile Emulator" to see the difference. You can try to modify the Scene-size to "unspecified".

There is one more screen-size in the "Screen-size" combo-box called "Desktop infinite". It represents a infinite pane. When selected the scene-size is synchronized to "unspecified". This automatically leads to default behavior of a JavaFX Scene.

Run File

By default the design file creates all designed components as well as the Scene instance. You can obtain the Scene instance by calling "getDesignScene()" method on your class instance. This Scene instance can be placed to a Stage and shown on a screen or device.

file: javafx-composer-profiles-scene-included.png

You can see that used in the "Main_run.fx" script file in your project.

Design Component Repository

Additionally to the previous use-case, you may edit and use your design as a repository of the design. In that case, the Scene instance must not be used. To do so, you must:

  • select the Scene node in Navigator of click on the design background
  • in Properties window, toggle "Code" categoory
  • set the "Generate Scene" property to "False"

file: javafx-composer-profiles-generate-scene.png

Setting this will change the generated code to move the Scene instance creation from the "init" of the class to the "getDesignScene()" method itself.

Now you should not use "getDesignScene()" method anymore. Instead access the field in your design class. They should contain particular initialized components in your design.

Note that design structure is initialized as well. Therefore only root-level components (the ones that are added directly to the Scene in the design) can be added into external i.e. non-designed containers. You may call "getDesignRootNodes()" method to get a sequence of all designed root-level nodes.

file: javafx-composer-profiles-scene-excluded.png

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