B4J Tutorial Working with JavaFX Scene Builder

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

Thread Status:
Not open for further replies.
  1. Erel

    Erel Administrator Staff Member Licensed User

    JavaFX Scene Builder is a powerful visual designer. The scene builder works with FXML files.

    Oracle provides many tutorials about this tool: http://www.oracle.com/technetwork/java/javafx/tools/index.html

    This tutorial will only cover the aspects that are specific to B4J.

    Under the Designer menu you will find the options to create a new layout, edit an existing layout or generate members from a layout file.

    [​IMG]

    Choosing "Create new layout" or "Edit layout" will open the scene builder (as an external app). It takes a few seconds until the builder is visible.

    You can then use the builder to edit the layout. Don't forget to save changes before running your app. The IDE doesn't control the scene builder.

    The FXML file will be located in the Files folder. You should load it with Pane.LoadLayout.

    For example:
    Code:
    Sub AppStart (Form1 As Form, Args() As String)
       MainForm = Form1
       MainForm.RootPane.LoadLayout(
    "Layout1")

    [​IMG]

    If you want to reference a control (node) from your code or handle its events you must set the control Id. The Id field is located in the properties tab (under JavaFX CSS).
    This Id is both the node's variable name and event name.

    If for example we want to set the button text in our code we will need to create a variable named Button1 (to match the Id) and for the events we will need to create subs with the following pattern:
    Code:
    Sub Button1_Action

    Sub Button1_xxx
    You can use the generate members tool (under Designer menu) to add the required code:

    [​IMG]

    By default the Id field is empty. Note that you can set the same Id to multiple nodes. This will allow you to handle multiple nodes with the same events subs.

    Files
    Your layout may reference other files, such as images or CSS sheets. All the referenced files must be located in the same folder as the layout file and this folder should be the project Files folder. Otherwise it will not work in release mode.

    Note that the Files tab in the IDE includes a Sync button. The files list will be updated to match the files in the files folder.

    Tips
    - Scene Builder includes nodes types that do not have an equivalent type in B4J. You can still use most of these types. If you want to reference them then you can use a more general type. For example you can use a Pane variable to reference any Pane subtype.
    - Don't confuse the Id under Properties tab (the correct one) with the Id under the Code tab (the wrong one). The code tab should not be used at all.

    - (credit goes to Agraham) You can show the nodes ids in the nodes tree:

    [​IMG]
    This allows you to easily modify the ids. You can click on the id and change it directly.
     
    Last edited: Dec 1, 2013
  2. Jim Brown

    Jim Brown Active Member Licensed User

    Nice information Erel. This answers question I thought about earlier (the Id system).
    Can you explain the fundamental difference between _Action and _MouseClicked events?
    Is _Action the generic event to use when the user clicks the control via a mouse button?
     
  3. thedesolatesoul

    thedesolatesoul Expert Licensed User

    I tried putting a button in an accordion (container) and the event would not fire (both _Action and _MouseClicked).
    Am I doing something wrong?
     
  4. Erel

    Erel Administrator Staff Member Licensed User

    @Jim Brown please start a new thread for this question.

    The clicks are probably handled internally by the container.
     
  5. B4JExplorer

    B4JExplorer Active Member Licensed User

    Jim, did you ever get the answer to your question about _Action?
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    Yes. It can also be raised if the button is focused and the user presses on the Enter button.
     
  7. swissmade

    swissmade Active Member Licensed User

    Hi all,
    Generate Member is not showing al possible Events.

    I have TextFields in the Layout and give them a ID.
    When I generate Members, I miss some Events possible in the TextField.
    I only get Action and TextChange.
    Mouseclicked I don't see.
    Maybe we miss more events here.

    Is there a possibility that I miss something???
     
  8. Kintara

    Kintara Member Licensed User

    I just started using this today and had the same problem.
    Then I re-read Erels text
    "- Don't confuse the Id under Properties tab (the correct one) with the Id under the Code tab (the wrong one). The code tab should not be used at all."

    I removed any text I added to the Code tab and the controls showed up properly when I tried to generate the members.
    It may work for you as well

    Rob :cool:
     
  9. swissmade

    swissmade Active Member Licensed User

    Hi Rob,

    I don't use the Code tab .
    Only use the ID to set some names.
    all the Components are showing up but not all possible events.

    Cheers,
    Swissmade
     
  10. Erel

    Erel Administrator Staff Member Licensed User

    The generate members dialog shows all of the exposed events. By design TextField doesn't expose other events.

    I will add MouseClicked and FocusChanged (new event) to TextField and TextArea.
     
  11. swissmade

    swissmade Active Member Licensed User

    Thanks Erel.
    Good feature.
     
  12. Jaime Ramirez

    Jaime Ramirez Member Licensed User

    Erel:

    I am getting this error:

    javafx.fxml.LoadException: No controller specified.

    when running this code line:

    MainForm.RootPane.LoadLayout("My_Form") 'Load the layout file.

    My_Form is the name of the layout.

    Any ideas

    Jaime
     
  13. Erel

    Erel Administrator Staff Member Licensed User

    Make sure that there isn't any value the nodes Code page.
     
  14. maleche

    maleche Member Licensed User

    I added a Pane and would like to capture the Mouse X,Y position when holding down the left mouse button.

    It appears that B4J only captures the last action.

    pnlGeo is a Panel.

    I've tried:
    Sub pnlGeo_MouseMoved (EventData AsMouseEvent)

    Do while EventData.PrimaryButtonPressed
    Log("Mouse Dwn:" & EventData.X)
    Loop
    End Sub

    But it will not report the EventData.X

    Using plnGeo_MousePressed (EventData As MouseEvent) only captures X.

    How do I receive the mouse X,Y position while holding down the left mouse button?
    Is Panel the correct object?

    Thanks in advance.
    Doyle
     
  15. stevel05

    stevel05 Expert Licensed User

    You should use the MouseDragged event to capture this.
     
    Erel likes this.
  16. Erel

    Erel Administrator Staff Member Licensed User

    This thread is now closed. Please start new threads for new questions.
     
Thread Status:
Not open for further replies.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice