B4J Tutorial Nodes / Views / Controls - Tips

Discussion in 'B4J Tutorials' started by Erel, Nov 27, 2013.

  1. Erel

    Erel Administrator Staff Member Licensed User

    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:

    [​IMG]

    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:

    [​IMG]
    Code:
    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.
     
    miquel, Sytek, psciga and 1 other person like this.
  2. Theera

    Theera Well-Known Member Licensed User

    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)
     
    rapblack likes this.
  3. Erel

    Erel Administrator Staff Member Licensed User

    Here is an example:
    Code:
    Dim tv As TableView
    tv.Initialize(
    "tv")
    MainForm.RootPane.AddNode(tv, 
    0000'values not important
    MainForm.RootPane.SetAnchors(tv, 0000'will fill the whole screen
     
    Phayao, jmon and Theera like this.
  4. FrenchDeveloper

    FrenchDeveloper Member Licensed User

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

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

    FrenchDeveloper Member Licensed User

  6. Mark Zraik

    Mark Zraik Member Licensed User

    Hi Everyone,
    After some research, I think I'm gonna end up working with a JavaObject.
    I'll keep searching and testing, and posting.
     
    Last edited: Mar 19, 2015
  7. Mark Zraik

    Mark Zraik Member Licensed User

    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.

    Code:
    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.

    Code:
    '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 http://www.b4x.com/android/forum/threads/using-javaobject-and-javafx-linechart.34777/
    and Erel's response in post http://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
     

    Attached Files:

    Last edited: Mar 19, 2015
    shubas likes this.
Loading...