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:
B4X:
#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:
B4X:
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:
B4X:
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:
B4X:
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.
 
Last edited:

Toley

Active Member
Licensed User
Longtime User
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.
Is there any information on how to create an executable for Linux ? Especially for the Raspberry Pi ? Thanks
 

Toley

Active Member
Licensed User
Longtime User
Hi Erel, this is exactly what I do (the command line) I have the message "Program started." but nothing else happens.
It can be seen in the picture. The java task slowly decrease but I never see anything appear in the screen. Also when I do java -version I can see I have java 1.8.0 installed.
 

Attachments

  • GuessMyNumber.png
    GuessMyNumber.png
    33.6 KB · Views: 751
Last edited:

Toley

Active Member
Licensed User
Longtime User
No should I ?

Edit : Thanks Erel it works at the HDMI output, but very very slowly. I think I will stick to non UI applications.
 
Last edited:

ratinho7adrs

New Member
I already know how to do it...

B4X:
Sub Process_Globals
    Private fx As JFX
    Private MainForm As Form
    Private SubForm As Form
End Sub
...And...
B4X:
Sub AppStart (Form1 As Form, Args() As String)
    'MainForm
    MainForm = Form1
    MainForm.RootPane.LoadLayout("Main")
    MainForm.Show
    'SubForm
    SubForm.Initialize("SubForm", -1, -1)
    SubForm.RootPane.LoadLayout("Resultados")
    SubForm.Show
End Sub

But with this, the code of the two forms is the main code module and will be a mess.

Choose to use a module for each form.
See this topic http://www.b4x.com/android/forum/threads/two-forms-where-does-the-code-go.35564.
 

DarylSpitfire

New Member
I just downloaded & installed everything (6/16/2014). It all comes up and looks correct. Then I tried your several B4J Tutorials. I followed and did [Designer][Create New Layout], it takes me to the
JavaFX Scene Builder 2.0, Build Information:Version: 2.0-b20, Changeset: 5cac093e5c1f
Date: 2014-03-21 09:29. That seems to work ok. I could drag items (controls, etc.) into position and [Save] the file. Then in B4J I tried [Designer]{trial2}[Generate Members] but the resulting dialog is always empty, blank, no views or events listed; none! I've also tried numerous variations, filenames, locations of the fxml, and nothing works. So I cannot get past this point. The photo attached shows all 3 windows running. This is very frustrating not; not even to get to 1st base. What's going on?
 

Attachments

  • b4j-blank.jpg
    b4j-blank.jpg
    282.3 KB · Views: 595

DarylSpitfire

New Member
Thanks, I had not scrolled down far enough in JFX to find the ID field. :confused:Sorry, my mistake.

BTW: I've been programming a long time in many languages (I started with Fortran in '71), but Java is a new one to me. Frankly I had gone to both the Oracle & AOSP websites to look at their tools. [I am writing code for some automation in my off-grid home since I'm now retired and I'm mounting an Android tablet on the wall to display data from my LAN coming from numerous distributed processors (mostly Arduinos with ethernets and a couple of PC's) around the place. I downloaded the new Android Studio tools and spent a day starting [trying] to go through their tutorials. But theirs were written for the older Eclipse-based IDE and were only partially converted for the new AS SDK. Consequently their tutorial occasionally mismatched the tools. It would have been better if it grossly mismatched, then I would have not wasted my time. It was very frustrating trying to follow faithfully yet adapt on the fly to the differences. So, I'm sorry but that's the mindset that I was in when I discovered Anywhere Software and B4J. I downloaded B4A and it worked fine. But I used VB1 thru VB6 & .NET for many years and so B4A was easy. I was (still am) hung up on learning Java and so I'm looking for alternatives to the Eclipse/JDK & AS SDK tools. I'll give B4J another few days tryout (to test myself more-so than your tools) and if the learning curve is still too steep for me (retirement is supposed to be easy, :cool:right?) I'll probably go with B4A. If the Java works out I'll rewrite my present Python code (30K lines with Qt4) by years-end too. Maybe I can shoe-horn Linux onto my tablet by then too.

Thanks for your prompt & helpful (I tried it, it works:D) reply!,
Daryl
 

coslad

Well-Known Member
Licensed User
Longtime User
HI

I have installed JavaFX Scene Builder 2.0 but it doesn't look fine , it is attached a screenshot .

Any idea ?

Solved !!!!

I tried to run Java Fx into a vmware virtual machine , to solve the issue you need to disabe 3d accelerate flag.
 

Attachments

  • Image1.jpg
    Image1.jpg
    21.4 KB · Views: 544
Last edited:

fabero

Member
Licensed User
Longtime User
Someone know a way to change the layout dimension, based on the OS Version? In my tests, the windows layout is slightly different to mac osx.
 
I had one problem...

In my, javaFX Scene Builder... put in no one imageview there put in 9 (nine) imageview (named (id): Ifoto, in each one). Who am I will write in code (array... imageview...?)?

Thanks for your response
 
Top