Guide to JavaFX Composer Templates
The goal of this tutorial is to learn about all component templates provided by the tool.
Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template. It should also open an empty design.
Some parts of complex designs may contain similar patterns.
E.g. if you want to navigate through a list of records, then you have Previous and Next buttons which are moving the cursor/index in the list of records. Similarly in case you have a wizard you would like to have Back and Next button to navigate through the pages of the wizard.
For that purpose, the tool offers a set of pre-defined templates placed in "Templates" category in the Palette. Drag and dropping these templates to a design allows you to create a complex structures.
In the next sections we will describe each provided template.
This template creates container with a set of buttons i.e. Cancel, Back, Next, Finish. The template just create the buttons and modifies their "Text".
This template creates a container with "Previous" and "Next" buttons.
Immediately after d'n'd-ing the template to a design, a customizer is shown to allow you to specify additional data.
The most important is the "Indexed Component" field which allows you to choose components that provide indexing ability:
- State Variable - if chosen (e.g. "currentState") then the buttons will switch the actual state ordered by the designed order of states
- List View - if chosen then the buttons move the selectedIndex in the list view
- Data Source - if chosen (e.g. "jdbcDataSource") then it moves with the internal cursor (i.e. "current()") within the !RecordSet returned provided by the Data Source. This is commonly used together with e.g. "Desktop Form" for listing through records of a database.
The rest of the customizer fields are advanced options providing you ability to specify another instances of Buttons that the "Index Buttons" template should modify e.g. when you want to use another container for the Buttons.
When you press "OK" button in the dialog the change is propagated to the specified Buttons. The change is done just once. The instance of the template is visible in the Navigator under "Templates" node. You can invoke the customizer by invoking "Customize..." popup menu action on the template node in the Navigator.
Let's have the following design where you are creating a Wizard. The scene will contain the "Index Buttons" as described above. The template will use the "currentState" state-variable. The "currentState" state-varible will have the following states: "Intro", "License", "Progress", "Summary". Now we want to create the pages of the wizard.
You can create the pages by selecting a particular state, adding a new Panel to the scene so the Panel will automatically be visible only that particular state. Then design the content of the Panel. Similarly to the other states.
This is exactly what this template allows you. When the template is D'n'D-ed to a scene, a customizer is shown to allow you to specify the following fields:
- State Variable - the state variable with would control the actual wizard page
- Container - the container which will hold set of exclusively visible Panels - each Panel will be visible just in a specific state
- Create States for Redundant Components - this will be described later
- Create Panels for Redundant States - if check, then the customizer will automatically create missing Panel in the container to match the number of states to the number of the Panels in the container
- The other fields has been added in Preview 2 release and will be described later.
Note this template is creating empty Panels therefore it is visualize in the design as a small selection rectangle without any content. Due to this it is better to add the first sub-component using Navigator.
The template instance is added to the Navigator under "Templates" category. Similarly as before you can show the customizer again using "Customize" popup menu action on the template node in Navigator.
If you create additional Panels, you can open the customizer again and check "Create States for Redundant Components" field to synchronize the number of states with the number of Panels by creating new states for them.
There are an additional fields added to the "Exclusively Visible" template:
- Type - allows to choose how the exclusivity should to animated:
- "Visibility only" - the original animation, the "visible" property is controlled only, represents Replace-Content transition
- "Visibility and opacity" - newly added in Preview 2, the "visible" and "opacity" properties are controlled/animated when changing states, represents a Fade-Out/Fade-In transition
- Interpolator - the animation interpolator for the controlled properties
- Duration - the animation duration for the controlled properties
By default, the animation is inherited. For details, see State Animation Tutorial.
This template create a structure Form-like read-only visualization of data in a current Record in a !RecordSet provided by a specified data source.
The customizer is shown after the template is D'n'D-ed to the design and allows:
- Data Source - the data source which provides !RecordSet will current Record which data are going to be visualized
- Title Container - this is an advanced option which allows to specify another container for "title" components
- Value Container - this is an advanced option which allows to specify another container for "value" components
- Title Font - the font that is assigned to the "title" Labels
- Value Font - the font that is assigned to the "value" Labels
- Entries - edited in the table, each entry has a field name and a title
The structure created by the "Desktop Form" consists of a HBox container with two VBox containers. One used as a "title" container and one as "value" container. For each entry, it creates two Labels. One is used as a title of the entry and is added to the "title" container. The second is used for a value of the entry and is added to the "value" container.
The template instance is added to the Navigator under "Templates" category. Similarly as before you can open the customizer again using "Customize" popup menu action on the template node in Navigator.
Note that the pressing the "Ok" button in the customizer will delete all components in the specified "title" and "value" containers. After that it creates all the necessary Labels.
Note that this Form visualization creates read-only view on data in the data source.
This template is similar to the "Desktop Form" template except that it creates a single "VBox" container which is used as "title" and "value" container. This creates similar structure but all Labels are placed vertically which is useful in Mobile environment.