B4J Tutorial Working with JavaFX Scene Builder

JavaFX Scene Builder is a powerful visual designer. The scene builder works with FXML files.

Oracle provides many tutorials about this tool: http://www.oracle.com/technetwork/java/javafx/tools/index.html

This tutorial will only cover the aspects that are specific to B4J.

Under the Designer menu you will find the options to create a new layout, edit an existing layout or generate members from a layout file.



Choosing "Create new layout" or "Edit layout" will open the scene builder (as an external app). It takes a few seconds until the builder is visible.

You can then use the builder to edit the layout. Don't forget to save changes before running your app. The IDE doesn't control the scene builder.

The FXML file will be located in the Files folder. You should load it with Pane.LoadLayout.

For example:

Code:

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.RootPane.LoadLayout("Layout1")

If you want to reference a control (node) from your code or handle its events you must set the control Id. The Id field is located in the properties tab (under JavaFX CSS).
This Id is both the node's variable name and event name.

If for example we want to set the button text in our code we will need to create a variable named Button1 (to match the Id) and for the events we will need to create subs with the following pattern:

Code:

Sub Button1_Action

Sub Button1_xxx

You can use the generate members tool (under Designer menu) to add the required code:



By default the Id field is empty. Note that you can set the same Id to multiple nodes. This will allow you to handle multiple nodes with the same events subs.

Files
Your layout may reference other files, such as images or CSS sheets. All the referenced files must be located in the same folder as the layout file and this folder should be the project Files folder. Otherwise it will not work in release mode.

Note that the Files tab in the IDE includes a Sync button. The files list will be updated to match the files in the files folder.

Tips
- Scene Builder includes nodes types that do not have an equivalent type in B4J. You can still use most of these types. If you want to reference them then you can use a more general type. For example you can use a Pane variable to reference any Pane subtype.
- Don't confuse the Id under Properties tab (the correct one) with the Id under the Code tab (the wrong one). The code tab should not be used at all.

- (credit goes to Agraham) You can show the nodes ids in the nodes tree:


This allows you to easily modify the ids. You can click on the id and change it directly.

 

@Jim Brown please start a new thread for this question.

The clicks are probably handled internally by the container.

 

Yes. It can also be raised if the button is focused and the user presses on the Enter button.

 

The generate members dialog shows all of the exposed events. By design TextField doesn't expose other events.

I will add MouseClicked and FocusChanged (new event) to TextField and TextArea.

 

Make sure that there isn't any value the nodes Code page.

 

This thread is now closed. Please start new threads for new questions.