B4J Tutorial UI App (JavaFX) Tutorial

When you create a new UI project, the project starts with a single code module with the following code:

Code:

#Region  Project Attributes
   #MainFormWidth: 500
   #MainFormHeight: 500
#End Region

Sub Process_Globals
   Private fx As JFX
   Private MainForm As Form
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.SetFormStyle("UNIFIED")
   'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
   MainForm.Show
End Sub

The program will start from the AppStart sub. The first parameter is the first form that will be created automatically. In most cases you will want to assign it to a global variable as done in the template code.
The second parameter is an array that holds the command line arguments.

Forms

A Form is an object that represents a UI window. Forms are not tied to a code module or class module. You can have any number of forms in the same module. The event subs and nodes variables are tied to the module that initialized the form (or nodes).
Note that each form combines three Java components: Stage, Scene and an AnchorPane.

The size of the main form is set with the following modules attributes: #MainFormWidth and #MainFormHeight.

You can access the form's root pane with the RootPane property. You can add and remove nodes through this property.

The RootPane is an AnchorPane. This pane is quite simple to work with. It allows you to specify the child positions and it allows you to "anchor" one or more of the nodes boundaries so the anchored distance will always stay the same.

The recommended way to design a layout is with the internal designer.
Layouts are loaded to panes. For example:

Code:

MainForm.RootPane.LoadLayout("Layout1")

See more: http://www.b4x.com/android/forum/threads/internal-visual-designer.56661/

The MainForm EventName parameter is set to MainForm. For example to handle the MouseClicked event you need to write:

Code:

Sub MainForm_MouseClicked (EventData As MouseEvent)

End Sub

JFX type

JFX is a helper type that includes all kinds of methods and constants that are specific to UI apps.
These methods cannot be part of the core library as the core library doesn't reference the JavaFX framework.

For example to set the form's background color:

Code:

MainForm.BackColor = fx.Colors.Magenta

Distributable

When you compile the app in Release mode the compiled code, libraries and assets files are packaged as an executable jar file. You will find the jar under the Objects folder.
If Java is configured correctly then you can double click on the jar file to run the app. On Linux you will need to first make the file executable.
You can create an installer with an embedded Java runtime: http://www.b4x.com/android/forum/threads/ui-apps-packaging-self-contained-installers.56854/
This is the simplest way to distribute UI apps.

 

Are you sure about the first point? I get different results here.

 

Are you referring to the values here:


?

When I run the program the width is 1424.

Code:

#Region  Project Attributes
   #MainFormWidth: -1
   #MainFormHeight: -1
#End Region

Sub Process_Globals
   Private fx As JFX
   Private MainForm As Form
End Sub

Sub AppStart (Form1 As Form, Args() As String)
   MainForm = Form1
   MainForm.Show
   MainForm.RootPane.LoadLayout("1")
   Log(MainForm.RootPane.Width)
   Log(MainForm.Width)
End Sub

 

Good catch!

 

Not sure what you mean (it is also better to start a new thread for a new question).

 

It is still a global variable. It is just private to the current module.

You can.

Layouts are not compatible.