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:

#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:

MainForm.RootPane.LoadLayout("Layout1")

See more: https://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:

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:

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: https://www.b4x.com/android/forum/threads/ui-apps-packaging-self-contained-installers.56854/
This is the simplest way to distribute UI apps.

 

[raphaelcno]

@Erel : I suggest that you make this thread sticky.
Thank you

 

[agraham]

TIP 1

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

These seem to override the dimensions in the xml file which can be a bit of a pain. However if you set these to -1 then you get the client area size for the Form that you set for the Anchor pane in Scene Builder.

TIP 2

If you have perhaps given a compiled jar to someone else and they are having problems it would be nice to be able to see the logs. On Windows you can do this by opening a command window in the folder of the jar and invoking

java -jar <MyJarName>.jar

You will then see the logs and errors appear in the command window.

 

[Erel]

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

 

[agraham]

Yes, it works fine here. I tested just before posting and I just tested again. Strictly it's the client area size that is defined in Scene Builder not the overall windows size.

 

[Erel]

Are you referring to the values here:

?

When I run the program the width is 1424.

#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

 

[agraham]

Project and screenshot attached

 

[agraham]

You are showing the Form before loading the layout! That's the problem.

 

[Erel]

Good catch!

 

[agraham]

Tips 1 and 2 in post #3 above

TIP 3

To easily name each control so it will show up in B4J click the Down Arrow at the top right of the Hierarchy pane. Select the bottom entry "Show Node Id". You can then double click to the right of any control in the Hierarchy pane and enter the name directly.

 

[Erel]

 

[margret]

When I click to create a layout, it says no app found. Do I need to download JavaFX? And if so, which version. I am using Java Version 6.

 

[avalle]

Yes you need JavaFX and Java 7 as well. JavaFX is co-bundled with JDK 7, and the best is to get JavaFX Scene Builder 1.1 which does the magics for layout editing in a very nice graphic environment.
Have a look at the instructions here: http://www.b4x.com/android/b4j.html
It's a very straightforward setup if you follow them right.

 

[rapblack]

Are you have multimedia file ?

 

[Erel]

Are you have multimedia file ?

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

 

[rapblack]

OK, I suggest as above example. Thank you.

 

[RKM904]

Tips 1 and 2 in post #3 above

TIP 3

To easily name each control so it will show up in B4J click the Down Arrow at the top right of the Hierarchy pane. Select the bottom entry "Show Node Id". You can then double click to the right of any control in the Hierarchy pane and enter the name directly.

Great tips. Thank you very much.

 

[LucaMs]

Erel, I write in this thread, even if I could choose another dealing with B4J, because just now I do not understand something probably very simple, and I would not want to get mixed up myself in a never-ending project.

I was thinking of re-use part of my app in a B4J project to test a data alignment via Bluetooth (since I do not have two Android devices, except for one fault ).

But, as I said, I probably would find in big trouble, because it seems strange to me already this simple phrase (first post):

... "In most cases you will want to assign it to a global variable as done in the template code." ...

but the MainForm is declared as Private!?!?

I also read a tutorial in which you write that you have "translate" B4A projects in B4J without too much difficulty, and in some cases without changing anything.
I do not think you can open the file .bas in B4J ... perhaps with copy and paste and various modifications by "hand"?
There is a minimum of compatibility between the layout and B4J those B4A? Moreover they have the XML in common.

Too many questions, I know ... do not answer me hard, that I am sensible and suscptible

 

[Erel]

but the MainForm is declared as Private!?!?

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

I do not think you can open the file .bas in B4J

You can.

There is a minimum of compatibility between the layout and B4J those B4A?

Layouts are not compatible.

 

[LucaMs]

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


You can.


Layouts are not compatible.

Have you seen? I'm wrong three times, then I'd be wasting months for that hypothetical project (or ? ).

Thanks for the reply.