B4J Tutorial UI App (JavaFX) Tutorial

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

Similar threads

B4J Tutorial Pagination Container
B4J Tutorial Accordion container
B4J Tutorial SQL Tutorial
B4J Tutorial Customized ListView
B4J Tutorial Unhandled exceptions
B4J Tutorial Modal dialogs
  1. Erel

    Erel Administrator Staff Member Licensed User

    When you create a new UI project, the project starts with a single code module with the following code:
    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:
    Code:
    MainForm.RootPane.LoadLayout("Layout1")
    See more: http://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:
    Code:
    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:
    Code:
    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: http://www.b4x.com/android/forum/threads/ui-apps-packaging-self-contained-installers.56854/
    This is the simplest way to distribute UI apps.
     
    Last edited: Aug 2, 2015
    fredo, luke2012 and chuck3e like this.
  2. raphaelcno

    raphaelcno Active Member Licensed User

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

    agraham Expert Licensed User

    TIP 1

    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

    Code:
    java -jar <MyJarName>.jar
    You will then see the logs and errors appear in the command window.
     
    Last edited: Nov 28, 2013
    shashkiranr, Sytek, miquel and 3 others like this.
  4. Erel

    Erel Administrator Staff Member Licensed User

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

    agraham Expert Licensed User

    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.
     
  6. Erel

    Erel Administrator Staff Member Licensed User

    Are you referring to the values here:

    [​IMG]
    ?

    When I run the program the width is 1424.
    Code:
    #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
     
  7. agraham

    agraham Expert Licensed User

    Project and screenshot attached
     

    Attached Files:

  8. agraham

    agraham Expert Licensed User

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

    Erel Administrator Staff Member Licensed User

    Good catch!
     
  10. agraham

    agraham Expert Licensed User

    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.
     
    tsteward and stevel05 like this.
  11. Erel

    Erel Administrator Staff Member Licensed User

  12. margret

    margret Well-Known Member Licensed User

    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.
     
  13. avalle

    avalle Member Licensed User

    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.basic4ppc.com/android/b4j.html
    It's a very straightforward setup if you follow them right.
     
  14. rapblack

    rapblack Member Licensed User

    Are you have multimedia file ?
     
  15. Erel

    Erel Administrator Staff Member Licensed User

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

    rapblack Member Licensed User

    OK, I suggest as above example. Thank you.
     
  17. RKM904

    RKM904 Member Licensed User

    Great tips. Thank you very much.
     
  18. LucaMs

    LucaMs Expert Licensed User

    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 :)
     
  19. Erel

    Erel Administrator Staff Member Licensed User

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

    You can.

    Layouts are not compatible.
     
  20. LucaMs

    LucaMs Expert Licensed User


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

    Thanks for the reply.
     
Loading...