Introduction: Develop Cross Platform Apps using B4X

Hello there, here we are going to create a simple Hello World Java Application that can run on Windows, Linux and MacOS.

B4X is a programming tool that is developed by Anywhere Software that uses Visual Basic like syntax so that anyone who wants to, can create apps. The developed apps are able to run on Windows, Linux and Mac. The family product we will use here is called b4j i.e. Basic4Java.

The other family products within the B4X namespace, also enable one to create apps for Android using b4a, iOS using b4i and Arduino using b4r. All these products use the same methodology to produce native applications.

Getting Ready

To be able to start developing using B4X, we need the b4j IDE (Integrated Development Environment. This at the moment only runs on a Windows PC. One also needs the Java SDK. Figure 1 below depicts how the B4X IDE looks like. We have a menus, a toolbar, the coding area and a module listing area, to mention the few.

Figure 1

Downloading and installing B4J

1. Head over to Anywhere Software Website and download b4j. You can click here to do that.
2. Click on Download B4J Full Version Button. After you download, ensure you install the application.
3. On the download page there are instructions on other dependencies you need like Java JDK. Please ensure that you download and install the recommended package.

Do not forget Paths Configuration

After installing the IDE, the paths configuration is important because it tells the B4J IDE where to get the Java JDK compilers, your additional libraries and also shared modules. To execute this step, do the following:

1. Open B4J
2. Click Tools
3. Click Configure Paths

Figure 2

For the Additional Libraries, I created a folder within my computer drive and pointed the IDE there by using the relevant Browse button. The same was also done with the Shared Modules. A folder was created to store all the shared modules that I create and using the relevant Browse button, a link was made.

B4J comes with internal libraries, these are marked ‘Internal’ below. One is also able to create their own libraries. These will be classified as ‘Additional’ in the Libraries Manager within the IDE as depicted in Figure 3below.

Figure 3

Its time to create your first App

To create our app, we need to create a B4J project. One needs to perform the following steps as depicted on Figure 4.

1. Open B4J
2. Click File in the Menu
3. Click New
4. Click UI i.e User Interface

Figure 4

This will prompt you for a project name as depicted in Figure 5. Type in the project name and click Ok.

Figure 5

What appears next is the coding area where you will write your code. You will notice that there is some skeleton code that is already written for us. Figure 6 shows this.

Figure 6

The entry of your application is the Main Module. On execution this will run AppStart sub-routine first. From the look of this there is a layout that needs to be loaded and also a button1_click event that gets fired.

What is a layout?

A layout is basically the View part of your app. It contains all the user interface components that you use like buttons, selects, radios, textboxes etc. One is able to create these using the inbuilt designer. The designer is accessible from the main menu in the IDE as depicted in Figure 7.

Figure 7

Each layout needs to have a unique name as from the code we saw the layout being loaded is called ‘Layout1’. To view and update this layout, one has to do the following:

1. In the menu, click Designer
2. Click Open Internal Designer and the Designer Appears as depicted in Figure 8.

Figure 8

Currently this shows a button with a Click Me label. One can close the top screen to show the underlying design of the layout.

Figure 9

Figure 9 shows the Abstract Designer. One is able to use the handles in each control placed to reside and set it to their hearts content. One is also able to change the properties of each component like Visibility, apply extra css directly from the Properties box.

From the code in Figure 6, we saw a section called Process_Globals. This is used to define globally available variables for our application. The button that is created via the Abstract Designer is available during the execution of the application and we can change it during runtime too.

Generating Members

After placing components on the abstract designer, one needs to generate them as the abstract designer is just a representation and not the real component. Generating Members updates the source code with the component declarations and also adds the event signatures. The component declaration goes to Process_Globals, whilst event signatures are added to the code module.

This process generates the component names and its events depending on your selection. To do this, from the Designer tool,

1. Click Tools
2. Click Generate Members

Figure 10

This then makes available to you all the components you put on the designer and you can select each and its events as depicted below.

Figure 11

One needs to check each of the components including the events they want to generate.

How do we add more components?

You can create your User Interface by adding more components to your layour via the Add View menu item of the Designer. These include CheckBoxes, ComboBoxes, DatePickers etc, each having its own properties that can be set both at design and run time.

Figure 12

Running the Application

To run the application, one selects the Run button from the menu. This then compiles the app and checks for any coding errors and if successful, your app shows the layout that was assigned to be starting.

Figure 11

Figure 12

Figure 13

Running the app and clicking the Click Me button indeed shows the message box that was assigned to the Button1_click event.

We will run the application to see this, see Figure 13.1

Figure 13.1

Distributing your App

After one finishes developing their app, this can be distributed. The resulting file will reside on the Objects folder of the project folder as depicted below in Figure 14.

Figure 14.

Also from the Project menu item, one is able to create a library or generate a standalone package.

What’s Next

There is a lot of helpful learner material from the B4X forum. This includes free learning videos, free ebooks that one can explore. Also this opens opportunities to create apps for Android, iOS and Arduino using the same principles of this article.

Enjoy and have fun!