B4J Tutorial Nodes / Views / Controls - Tips

I'll try to collect tips related to the UI elements in this thread.

In B4J (and JavaFX) the main UI element is named Node. It is similar to Basic4android View or Basic4ppc (.Net) Control.

B4J Pane is similar to B4A Panel. It is a node that contains other nodes. There are all kinds of Panes in JavaFX. The default one is AnchorPane.

AnchorPane allows you to "anchor" one or more of the node edges in relation to its parent.

You can set the anchor constraints in the code or with the builder:

If all 4 anchors are set then the node will increase or decrease its size together with the form.

Note that not all type of nodes can be resized automatically. ImageView and Canvas nodes will not be affected by these constraints. You will need to manually resize them. All the other types will resize automatically.

The Scene Builder is a powerful designer. You should use it as the main tool for building the layout.

See this tutorial: Working with JavaFX Scene Builder

There are some "generic" node types that you can use to hold other types (subclasses types).
For example a Node variable allows you to hold any type of node.

Pane allows you to hold any type of Pane.

Tooltips - You can add tooltips to all of the nodes:

btnCheckNow.TooltipText = "Click to check for new messages."

You can also add context menus to most nodes (either with Scene Builder or in your code).

Nodes can be declared Public and accessed from other nodes. There are no restriction like in Basic4android.

Mouse events - Most nodes support the following mouse events: MouseClicked, MouseMoved, MouseDragged, MousePressed, MouseReleased.

The difference between MouseDragged and MouseMoved is that MouseDragged happens when one of the mouse buttons is pressed.

All of the events pass a MouseEvent object. This object holds more information about the event.

 

[Olaan]

Hi Erel,
How to anchorpane constraints by coding? I need to see. I'm translating your tutorial to be Thai Lessons in my website. (Learning Programing & English)

 

[Erel]

Here is an example:

Dim tv As TableView
tv.Initialize("tv")
MainForm.RootPane.AddNode(tv, 0, 0, 0, 0) 'values not important
MainForm.RootPane.SetAnchors(tv, 0, 0, 0, 0) 'will fill the whole screen

 

[FrenchDeveloper]

Here is an example:

Dim tv As TableView
tv.Initialize("tv")
MainForm.RootPane.AddNode(tv, 0, 0, 0, 0) 'values not important
MainForm.RootPane.SetAnchors(tv, 0, 0, 0, 0) 'will fill the whole screen

Hello Erel,
In an event raised by this object, how to know the index of node to reach it's properties ?

Sub tv_MouseMoved (EventData As MouseEvent)
' what is the index of this object to reach its tag ?
End Sub

 

[FrenchDeveloper]

The reply to my own question is there : Tick-Tack-Toe: working with arrays of views

 

[Mark Zraik]

Hi Everyone,

Using a PasswordField, which is a Node, How do I get the Text value in order to save it to a database?
Seems like a silly question, but I have never had to deal with digging down a Node.

Mark

Maybe an example of traversing a node could be shown.??

https://docs.oracle.com/javafx/2/ui_controls/password-field.htm
Annotated from the above link - It's Java, not Basic4J

Example 23-2 Implementing the Authentication Logic

final Label message = new Label("");

VBox vb = new VBox();
vb.setPadding(new Insets(10, 0, 0, 10));
vb.setSpacing(10);
HBox hb = new HBox();
hb.setSpacing(10);
hb.setAlignment(Pos.CENTER_LEFT);

Label label = new Label("Password");
final PasswordField pb = new PasswordField();

pb.setOnAction(new EventHandler<ActionEvent>() {
@override public void handle(ActionEvent e) {
if (!pb.getText().equals("T2f$Ay!")) {
message.setText("Your password is incorrect!");
message.setTextFill(Color.rgb(210, 39, 30));
} else {
message.setText("Your password has been confirmed");
message.setTextFill(Color.rgb(21, 117, 84));
}
pb.clear();
}
});

hb.getChildren().addAll(label, pb);
vb.getChildren().addAll(hb, message);

After some research, I think I'm gonna end up working with a JavaObject.
I'll keep searching and testing, and posting.

 

[Mark Zraik]

Hi Everyone,

I figured it out...
Using a JavaObject, I was able to equate the Node to it.
Then, searching through the Oracle site, I found that 'getText' was a reachable method.
So, I coded the following and walla!, I had the text value I was looking for and still maintained the password stars for obscurity.

Dim jo As JavaObject
jo = smtp_pass1 ' the node
Log("JO: " & jo)'just a check
Log("PWD: " &jo.RunMethod("getText", Null))'confirm the extraction
'now that we have it, save it to the db table.
Dim LOM As List
LOM.Initialize
    Dim m As Map
    m.Initialize
    m.Put("smtpserver", smtp_server1.Text)
    m.Put("port", smtp_port1.Text)
    m.Put("username", smtp_userid1.Text)
    m.Put("password", jo.RunMethod("getText", Null))'extract the text value
    m.Put("usessl", use_ssl1.Checked)
    m.Put("usetcls", use_tcls1.Checked)
    m.put("prefix", smtp_pref1.Text)
LOM.Add(m)
DBUtils.InsertMaps(RMSQL, "smtp", LOM)

Then, get it from the db and fill the PasswordField on a refresh, or when the
program opens.

'JavaObject
Dim jo As JavaObject
jo = password_box 'initializes 
'run the method
jo.RunMethod("setText", Array As Object(txt))
'switch it back
password_box = jo

Thanks to Steve05's post https://www.b4x.com/android/forum/threads/using-javaobject-and-javafx-linechart.34777/
and Erel's response in post https://www.b4x.com/android/forum/threads/create-a-password-field-by-code.50414/ - I was able to figure it out with some digging on the Oracle site.
An example is attatched

I hope this will help others.
Mark