B4X Cross Platform Projects

Explains the steps needed to build cross platform projects with B4X.

1. B4X Booklets



























B4X Cross-platform projects














Copyright: © 2020 Anywhere Software Edition 1.8

Last update: 2020.05.15

2. Table of content 2 B4X Cross-platform projects
1 General information ..................................................................................................................... 4
1.1 B4X ...................................................................................................................................... 4
2 First steps ..................................................................................................................................... 5
2.1 AdditionalLibraries folder structure ..................................................................................... 6
2.2 Cross-platform project files folder ....................................................................................... 8
3 Compatibilities B4A B4i B4J XUI .......................................................................................... 9
4 Copy layouts .............................................................................................................................. 10
5 Project with 2 ‘screenss .............................................................................................................. 11
5.1 Project structure ................................................................................................................. 12
5.1.1 Product differences......................................................................................................... 12
5.2 Steps to follow ................................................................................................................... 13
5.2.1 Setup the project folder .................................................................................................. 14
5.2.2 Modify the Package name in Build Configurations ....................................................... 14
5.2.3 Add a Standard Class ..................................................................................................... 14
5.2.4 Add a Code module ........................................................................................................ 15
5.2.5 Remove a module ........................................................................................................... 15
5.2.6 Add an existing module ................................................................................................. 16
5.2.7 Code for B4J Main ......................................................................................................... 17
5.2.8 Code for B4X xMain ...................................................................................................... 18
5.2.9 Code for B4J Screen1..................................................................................................... 20
5.2.10 Code for B4X xScreen1 ............................................................................................. 21
5.2.11 Code for B4A Main .................................................................................................... 22
5.2.12 Code for B4A Screen1 ............................................................................................... 23
5.2.13 Code for B4i Main ..................................................................................................... 24
5.2.14 Code for B4i Screen1 ................................................................................................. 25
5.2.15 Conclusion ................................................................................................................. 26
6 B4X version of the SecondProgram project............................................................................... 27
6.1 Project structure ................................................................................................................. 27
6.2 B4A Base project ............................................................................................................... 27
6.3 Adapt the B4A project ....................................................................................................... 28
6.4 B4J project ......................................................................................................................... 32
6.5 B4i project .......................................................................................................................... 38
7 B4X_SQLiteLight2 project ........................................................................................................ 42
7.1 Structure ............................................................................................................................. 42

3. Table of content 3 B4X Cross-platform projects
Main contributors: Klaus Christl (klaus), Erel Uziel (Erel)

To search for a given word or sentence use the Search function in the Edit menu.

All the source code and files needed (layouts, images etc.) of the example projects in this guide are
included in the CrossPlatformSourceCode folder.

Updated for following versions:
B4A version 9.80
B4i version 6.50
B4J version 8.10

B4X Booklets:
B4X Getting Started
B4X Baisc Language
B4X IDE Integrated Development Environment
B4X Visual Designer
B4X Help tools

B4X CustomViews
B4X Graphics
B4X XUI B4X User Interface
B4X SQLite Database
B4X JavaObject NativeObject
B4X Cross-platform projects

B4R Example Projects

4. 1 General information 4 B4X Cross-platform projects
1 General information

This guide shows the best practices for developing cross-platform projects for B4A, B4i and B4J
with the goal to use as much as possible the same code.

1.1 B4X

B4X is a suite of BASIC programming languages for different platforms.

B4X suite supports more platforms than any other tool
ANDROID | IOS | WINDOWS | MAC | LINUX | ARDUINO | RASPBERRY PI | ESP8266 | AND
MORE...

• B4A Android

B4A is a 100% free development tool for Android applications, it includes all the features
needed to quickly develop any type of Android app.

• B4i iOS

B4i is a development tool for native iOS applications.
B4i follows the same concepts as B4A, allowing you to reuse most of the code and build
apps for both Android and iOS.

• B4J Java / Windows / Mac / Linux / Raspberry PI

B4J is a 100% free development tool for desktop, server and IoT solutions.
With B4J you can easily create desktop applications (UI), console programs (non-UI) and
server solutions.
The compiled apps can run on Windows, Mac, Linux and ARM boards (such as Raspberry
Pi).


• B4R Arduino / ESP8266

B4R is a 100% free development tool for native Arduino and ESP8266 programs.
B4R follows the same concepts of the other B4X tools, providing a simple and powerful
development tool.
B4R, B4A, B4J and B4i together make the best development solution for the Internet of
Things (IoT).

5. 2 First steps 5 B4X Cross-platform projects
2 First steps

What does cross-platform project mean?
The main goal is to have most of the code the same for all three products.

To develop cross-platform projects, some simple ‘rules’ should be followed.

1. Use as much as possible B4XViews, included in the standard XUI library.
These are oversets of the product specific standard views.
2. Use as much as possible views from the XUI Views library.
3. Use as much as possible XUI CustomViews.
4. When you add common modules, load them with a relative or absolute link, don’t copy
them to the project.



That way, when you modify a common module and save it, the code in the other IDEs is
automatically updated.

You should decide directly at the beginning which platforms you want use.
Even for single platform projects it is useful to follow the simple rules above. Because the
B4XViews have some properties not exposed directly in the corresponding platform and are cross-
platform.

For development, I prefer to start with B4J, because no device needed for testing, and then adapt for
the other platforms.

6. 2 First steps 6 B4X Cross-platform projects
2.1 AdditionalLibraries folder structure

You should setup the AdditionalLibraries folder structure like below, if not yet done.


Folder for B4A additional libraries.
Folder for B4i additional libraries.
Folder for B4J additional libraries.
Folder for B4R additional libraries.
Folder for B4X libraries.
Folder for B4X libraries XML files.

One subfolder for each product: B4A, B4i, B4J, B4R and another B4X for B4X libraries.

When you install a new version of a B4X product, all standard libraries are automatically updated,
but the additional libraries are not included. The advantage of the special folder is that you don't
need to care about them because this folder is not affected when you install the new version of B4X.

When the IDE starts, it looks first for the available libraries in the Libraries folder of the B4X
platform and only then in the additional libraries folders.


To setup the special additional libraries folder, click in
the IDE menu on Tools / Configure Paths.

In my case D:\B4X\AdditionalLibraries.
The subfolders are automatically taken into account by
the compiler.

7. 2 First steps 7 B4X Cross-platform projects

In my system, I added a B4XlibXMLFiles folder for XML help files.
The standard and additional libraries have an XML file. B4X Libraries not.

But, if you use the B4X Help Viewer you would be interested in having these help files if they are
available.

To get xml files from the b4xlib libraries you can use the utility written by Erel:
[Tool] b4xlib - XML generation.

8. 2 First steps 8 B4X Cross-platform projects
2.2 Cross-platform project files folder

For each cross-platform project, you should use the structure below.

Example with the GuessMyNumber project written by Erel, the source code is included in the
CrossPlatformSourceCode folder.

The project main folder, GuessMyNumber in our example.



The project main folder contains, one folder for each platform and a fourth folder for Shared Files.
All the shared modules are in the project main folder, only GuessMyNumber.bas in our example.



Each B4X platform folder contains, the usual files and the Files and Objects folders.


B4J B4A B4i

The folder is the ‘standard’ files folder containing mainly the layout files and maybe other
platform dependent files.

The folders and the GuessMyNumber.b4x.meta files are only added after compilation,
as usual.

The folder contains all the shared files like image or database files.
In our example only the file.
Be aware, Shared Files with a space.

Note:
All the files in the Shared Files folder are copied to the Files folders of the different platforms
during compilation.
If you make any change in these files, make the changes only in the files in the Shared Files
folder, the IDE updates automatically the other files.

9. 3 Compatibilities B4A B4i B4J XUI 9 B4X Cross-platform projects
3 Compatibilities B4A B4i B4J XUI

A list of current objects, which can be almost the same, or having different names with similar
functionalities and / or the B4XView equivalent or having an equivalent CusomView.

B4J B4A B4i XUI CustomView
Button Button Button B4XView ---
Canvas Canvas Canvas B4XCanvas ---
CheckBox CheckBox Switch --- B4XSwitch
ComboBox Spinner Picker --- B4XComboBox
ImageView ImageView ImageView B4XView ---
Image Bitmap Bitmap B4XBitmap ---
Label Label Label B4XView ---
ListView ListView --- --- xCustomListView
Pane Panel Panel B4XView
ProgressBar
ProgressIndicator
ProgressBar ProgressView B4XView ---
ScrollPane ScrollView
HorizontalScrollView
ScrollView B4XView ---
Slider SeekBar Slider --- B4XSeekbar
TextField EditText TextField B4XView ---
WebView WebView WebView --- ---

xCustomListView is a standard library.
B4XSwitch, B4XComboBox and B4XSeekbar are included in the XUI Views.b4xlib library.

10. 4 Copy layouts 10 B4X Cross-platform projects
4 Copy layouts

You can copy layouts from one platform to another one.

The following types of views can be copied between the platforms:
• CheckBox / Switch
• Button
• Label
• Panel / Pane
• ToggleButton
• SeekBar / Slider
• Spinner / ComboBox / ChoiceBox (B4A and B4i only)
Better to use B4XComboBox from XUI Views.
• ImageView
• ProgressBar / ProgressView / ProgressIndicator
• RadioButton
• EditText / TextView / TextField / TextArea
• WebView
• Custom Views

Select the views to copy in the Designer of one platform and paste them into the Designer in
another platform.
Example from the B4X_SecondProgram project.



Source B4A Designer. Copy in the B4J Designer Copy in the B4i Designer.

It’s as simple as this !!!

Maybe you need some adjustments depending on the original dimensions or properties like colors.

11. 5 Project with 2 ‘screens’ 11 B4X Cross-platform projects
5 Project with 2 ‘screenss

This is a simple project to show how to handle projects with two or more Activities / Pages /Forms.

In this chapter I use the term ‘screen’ for Activity in B4A, Page in B4i and Form in B4J.

Project name: B4X_TwoScreens.

It’s a very simple project with two screens with:



Main screen: Screen 1:
A B4XComboBox for a selection. A Label to show the selection of Screen1.
A Label to show the selection of Screen1. A B4XComboBox for a selection.
A Button to show Screen1. This one will also be displayed in Main.
There is no Screen1 selection yet.

The two B4XComboBoes are used to make a selection in each screen.
These selections are displayed in the other screen just to show the interaction between the two
screens.

12. 5.1 Project structure 12 B4X Cross-platform projects
5.1 Project structure

We have 4 modules, Main, xMain, Screen1 and xScreen1.



One project specific module for each screen and one common code standard class for each screen:
• The Main module for each product.
• The xMain Standard Class module for the cross-platform common Main code.
• The second screen Code module Screen1.
• And the Standard Class module, xScreen1, for the cross-platform common Screen1 code.

If there were more than two screens then you would need add two modules for each additional
screen, one product specific and one common.

5.1.1 Product differences

The product specific modules are:
• Activity modules in B4A.
• Code modules in B4J and B4i.

The cross-platform modules are Standard Class modules.

You see the difference in the icons:
•
•
•

B4A IDE.

We see here the Starter
Service, we don’t use it in our
project, but I left it.






B4i IDE.

13. 5.2 Steps to follow 13 B4X Cross-platform projects
5.2 Steps to follow

These are the steps to follow when you design a cross-platform project:
1. Setup the project folder.
2. Run the B4J IDE, modify the Package name in Build Configurations.
Save the project in the B4J folder.
3. Add the xMain Standatd Class.
4. Add the Screen1 Code module.
5. Add the xScreen1 Standatd Class.
6. Copy xMain and xScreen1 from the B4J folder to the Project folder.
7. In the IDE remove xMain and xScreen1.
8. Add xMain as an Existing Module from the project folder with a relative link.
9. Add xScreen1 as an Existing Module from the project folder with a relative link.
10. Delete xMain and xScreen1 from the B4J folder.

Now the structure is ready.

11. Define the two layouts ‘Main’ and ‘Screen1’, not explained, they are very simple.

12. Code for B4J Main
13. Code for B4X xMain
14. Code for B4J Screen1
15. Code for B4X xScreen1

You can now run the B4J program.

16. Run the B4A IDE, modify the Package name in Build Configurations.
17. Modify the Application Label, #ApplicationLabel: B4X_TwoScreens.
18. Save the project in the B4A folder.
19. Copy the two layouts ‘Main’ and ‘Screen1’ from B4J to B4A, you need to adapt them for
colors.
20. Add the Screen1Activity module. Attention, it’s an Activity module.
21. Add xMain as an Existing Module from the project folder with a relative link.
22. Add xScreen1 as an Existing Module from the project folder with a relative link.
23. Code for B4A Main
24. Code for B4A Screen1

25. Run the B4i IDE
26. Modify the Application Label.
27. Modify the Package name in Build Configurations.
28. Save the project in the B4i folder.
29. Copy the two layouts ‘Main’ and ‘Screen1’ from B4J to B4i, you need to adapt them for
colors.
30. Add the Screen1 Code module.
31. Add xMain as an Existing Module from the project folder with a relative link.
32. Add xScreen1 as an Existing Module from the project folder with a relative link.

33. Code for B4i Main
34. Code for B4i Screen1

14. 5.2.1 Setup the project folder 14 B4X Cross-platform projects
5.2.1 Setup the project folder

The folder structure of the B4X_TwoScreens project:


One subfolder for each product.



One subfolder for shared files, common to all products.

5.2.2 Modify the Package name in Build Configurations




5.2.3 Add a Standard Class

15. 5.2.4 Add a Code module 15 B4X Cross-platform projects
5.2.4 Add a Code module





5.2.5 Remove a module



Select the module. Click on .

16. 5.2.6 Add an existing module 16 B4X Cross-platform projects
5.2.6 Add an existing module



In the Project menu click on .





You select different modes.

We use Link – relative path.

17. 5.2.7 Code for B4J Main 17 B4X Cross-platform projects
5.2.7 Code for B4J Main

The best way to start is to begin with the B4J project.

#Region Project Attributes
#MainFormWidth: 600
#MainFormHeight: 600
#End Region

Sub Process_Globals
Private MainForm As Form

Private xM As xMain 'reference to the xMain Class

Public SelectedIndex As Int 'selected index from the xMain B4XComboBox
Public SelectedItem As String 'selected item from the xMain B4XComboBox
End Sub

Sub AppStart (Form1 As Form, Args() As String)
MainForm = Form1
'We don't load the layout here, but in xMain
'MainForm.RootPane.LoadLayout("Layout1") 'Load the layout file.
MainForm.Title = "B4X_TwoScreens"
MainForm.Show

xM.Initialize(MainForm.RootPane)
End Sub

'Return true to allow the default exceptions handler to handle the uncaught exception.
Sub Application_Error (Error As Exception, StackTrace As String) As Boolean
Return True
End Sub

'This routine is used to show the Main screen via xMain.Show
Public Sub Show
xM.Show
End Sub


We add xM, SelectedIndex and SelectedItem in Process_Globals.
SelectedIndex is a public variable holding the Index of the selection in the B4XComboBox in
xMain.
SelectedItem is a public variable holding the Item of the selection in the B4XComboBox in xMain.

We initialize xM.Initialize(MainForm.RootPane) in AppStart, the parameter is the parent view for
xMain, which is the RootPane of MainForm: MainForm.RootPane
We don’t load the layout here, we load in xMain.

We add the Public Sub Show subroutine which calls the Show subroutine in xMain.

That’s all.

18. 5.2.8 Code for B4X xMain 18 B4X Cross-platform projects
5.2.8 Code for B4X xMain

The code is, I hope, enough self-explanatory.

Sub Class_Globals
#If B4J
Private fx As JFX
#End If

Private mParent As B4XView
Private lblScreen1 As B4XView
Private xcbxMain As B4XComboBox
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(Parent As B4XView)
mParent = Parent

mParent.LoadLayout("Main")
InitComboBox

Show
End Sub

'This routine updates the content of xMain, lblScreen1.Text
'Screen1.Selection is the selected item from Screen1
Public Sub Show
lblScreen1.Text = Screen1.SelectedItem
xcbxMain.SelectedIndex = Main.SelectedIndex
End Sub

'Initialize the B4XComboBox with Main & i
'Select the first item
Private Sub InitComboBox
Private i As Int
Private lst As List

lst.Initialize
For i = 0 To 10
lst.Add("Main " & i)
Next
xcbxMain.SetItems(lst)

xcbxMain.SelectedIndex = Main.SelectedIndex
End Sub

'Calls Screen1
Private Sub btnScreen1_Click
#If B4A
StartActivity(Screen1)
#Else
Screen1.Show
#End If
End Sub

Private Sub xcbxMain_SelectedIndexChanged (Index As Int)
Main.SelectedIndex = Index 'We memorize the index in the variable
Main.SelectedItem = xcbxMain.SelectedItem 'We memorize the index in the variable
End Sub

19. 5.2.8 Code for B4X xMain 19 B4X Cross-platform projects
We add the Parent parameter after Public Sub Initialize(Parent As B4XView).

#If B4J This is conditional compiling, even though the fx library, B4J only, is not needed in this
application. I left it to show that in some cases conditional compiling can be needed.

There is another conditional compiling code in this routine:
As the operating systems are different, we need to differentiate some methods.

'Calls Screen1
Private Sub btnScreen1_Click
#If B4A
StartActivity(Screen1)
#Else
Screen1.Show
#End If
End Sub

To display Screen1 we use:
• StartActivity(Screen1) For B4A
• Screen1.Show For B4J and B4i

20. 5.2.9 Code for B4J Screen1 20 B4X Cross-platform projects
5.2.9 Code for B4J Screen1

The code here is similar the code for Main.

'Static code module
Sub Process_Globals
Private frmScreen1 As Form
Private xS1 As xScreen1

Public SelectedIndex As Int 'selected index from the xScree1 B4XComboBox
Public SelectedItem As String 'selected item from the xScree1 B4XComboBox
End Sub

'This routine is used to show Screen1
Public Sub Show
'We check if the Form has already been initialized
'If no, we initialize it
If frmScreen1.IsInitialized = False Then
frmScreen1.Initialize("frmEdit", 600, 600)
frmScreen1.Title = "jSQLiteLight2 Edit"
frmScreen1.Title = "B4X_TwoScreens"

xS1.Initialize(frmScreen1.RootPane)
End If

frmScreen1.Show 'We need to show frmScreen1
xS1.Show 'We need to update Screen1
End Sub

'Event raised when the Form is closed
Private Sub frmEdit_Closed
frmScreen1.Close 'We close frmScree1
Main.Show 'We show the Main screen
End Sub

21. 5.2.10 Code for B4X xScreen1 21 B4X Cross-platform projects
5.2.10 Code for B4X xScreen1

The code in xScreen1 is almost the same as the code in xMain.

Sub Class_Globals
#If B4J
Private fx As JFX
#End If

Private mParent As B4XView
Private lblMain As B4XView
Private xcbxScreen1 As B4XComboBox
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(Parent As B4XView)
mParent = Parent

mParent.LoadLayout("Screen1")
InitComboBox

Show
End Sub

'This routine updates the content of xSceen1, the con tent of lblMain.Text
'Main.Selection is the selected item from Main
Public Sub Show
lblMain.Text = Main.Selection
End Sub

'Initialize the B4XComboBox with Main & i
'Select the first item
Private Sub InitComboBox
Private i As Int
Private lst As List

lst.Initialize
For i = 0 To 10
lst.Add("Screen " & i)
Next
xcbxScreen1.SetItems(lst)

xcbxScreen1.SelectedIndex = 0
End Sub

Private Sub xcbxScreen1_SelectedIndexChanged (Index As Int)
Screen1.SelectedIndex = Index
Screen1.SelectedItem = xcbxScreen1.SelectedItem 'We memorize the index in the
variable
End Sub

22. 5.2.11 Code for B4A Main 22 B4X Cross-platform projects
5.2.11 Code for B4A Main

The code is quite simple, just the management for xMain and self-explanatory.

Sub Process_Globals
Public SelectedIndex As Int 'selected index from the xMain B4XComboBox
Public SelectedItem As String 'selected item from the xMain B4XComboBox
End Sub

Sub Globals
Private xM As xMain
End Sub

Sub Activity_Create(FirstTime As Boolean)
'We don't load the layout here, but in xMain
' Activity.LoadLayout("Main")

If xM.IsInitialized = False Then
xM.Initialize(Activity)
End If
End Sub

Sub Activity_Resume
xM.Show
End Sub

23. 5.2.12 Code for B4A Screen1 23 B4X Cross-platform projects
5.2.12 Code for B4A Screen1

The code is quite simple, just the management for xScreen1 and self-explanatory.

Sub Process_Globals
Public SelectedIndex As Int 'selected index from the xScree1 B4XComboBox
Public Selection As String 'selected item from the xScree1 B4XComboBox
End Sub

Sub Globals
Private xS1 As xScreen1
End Sub

Sub Activity_Create(FirstTime As Boolean)
'We don't load the layout here, but in xScree1
'Activity.LoadLayout("Layout1")

If xS1.IsInitialized = False Then
xS1.Initialize(Activity)
End If

xS1.Show
End Sub

Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)
Activity.Finish
End Sub

24. 5.2.13 Code for B4i Main 24 B4X Cross-platform projects
5.2.13 Code for B4i Main

The code is quite simple, just the management for xMain and self-explanatory.

Sub Process_Globals
Public App As Application
Public NavControl As NavigationController
Private Page1 As Page

Private xM As xMain

Public SelectedIndex As Int 'selected index from the xMain B4XComboBox
Public SelectedItem As String 'selected item from the xMain B4XComboBox
End Sub

Private Sub Application_Start (Nav As NavigationController)
'SetDebugAutoFlushLogs(True) 'Uncomment if program crashes before all logs are
printed.
NavControl = Nav
Page1.Initialize("Page1")
Page1.Title = "B4X_TwoScreens"
Page1.RootPanel.Color = Colors.White
NavControl.ShowPage(Page1)

If xM.IsInitialized = False Then
xM.Initialize(Page1.RootPanel)
End If

xM.Show
End Sub

Private Sub Page1_Resize(Width As Int, Height As Int)

End Sub

Private Sub Application_Background

End Sub

'This routine is used to show the Main screen via xMain.Show
Public Sub Show
xM.Show
End Sub

25. 5.2.14 Code for B4i Screen1 25 B4X Cross-platform projects
5.2.14 Code for B4i Screen1

The code is quite simple, just the management for xScreen1 and self-explanatory.

Sub Process_Globals
Private pageScreen1 As Page
Private xS1 As xScreen1

Public SelectedItem As String 'selected index from the xScree1 B4XComboBox
Public SelectedIndex As Int 'selected item from the xScree1 B4XComboBox
End Sub

'This routine is used to show Screen1
Public Sub Show
'We check if the Page has already been initialized
'If no, we initialize it
If pageScreen1.IsInitialized = False Then
pageScreen1.Initialize("pageScreen1")
pageScreen1.RootPanel.Color = Colors.White
'We don't load the layout here, but in xMain
'pageScreen1.RootPanel.LoadLayout("Screen1")

xS1.Initialize(pageScreen1.RootPanel)
End If
Main.NavControl.ShowPage(pageScreen1) 'We need to show frmScreen1
xS1.Show 'We need to update Screen1
End Sub

Private Sub pageScreen1_Disappear
Main.Show
End Sub

26. 5.2.15 B4X_TwoScreens Conclusion 26 B4X Cross-platform projects
5.2.15 Conclusion

We see that the platform specific code is reduced to a minimum.

We need at least two modules for each screen (Activity, Page, Form)
• One platform specific module, Main and Screen1 in our example:
o With all the relevant variable definitions platform specific and cross-platform.
o Initialization of the platform specific objects.
o Initialization of the cross-platform screen class module.
o Display the screen.
o Manage the screen change.
• One cross-platform class module with all the common code, xMain and xScreen1 in our
example. Here we:
o Load the layout.
o Update the display
o Handle the events.

If we want more screens, then we need to add two more modules for each screen!

27. 6 B4X version of the SecondProgram 27 B4X Cross-platform projects
6 B4X version of the SecondProgram project

This is a B4X project based on the SecondProgram project from the GettingStarted SourceCode.
B4X for cross-platform project.

6.1 Project structure

First, we define the project structure:

The main folder: B4X_SecondProgram


A subfolder for each platform.


6.2 B4A Base project

Then we copy the Files folder and the SecondProgram.b4a project from the GettingStarted
SourceCode into the B4X_SecondProgram\B4A folder.

Rename SecondProgram.b4a to B4X_SecondProgram.b4a



In the Files folder, we have the B4A main.bal layout file.

28. 6.3 B4X_SecondProgram B4A project 28 B4X Cross-platform projects
6.3 Adapt the B4A project

1. Open the B4A IDE and load the B4X_SecondProgram.b4a project.

2. Add the XUI library.

3. Modify the Application Label to B4X_SecondProgram.



4. Modify the Package name in Build Configurations

29. 6.3 B4X_SecondProgram B4A project 29 B4X Cross-platform projects
5. Create a new standard class module:



Name it xMain.





6. Modify the signature of the Initialize, add (Parent As B4XView):

Public Sub Initialize(Parent As B4XView)

End Sub

7. Move all the code from the Globals routine in the Main module into the Class_Global
routine in the xMain module.

8. Move the code from the Activity_Create routine from the Main module into the Initialize
routine of the xMain class module.
Modify Activity.LoadLayout(“Main”) to Parent.LoadLayout(“Main”).

30. 6.3 B4X_SecondProgram B4A project 30 B4X Cross-platform projects
9. Move all the code beginning from Sub NewProblem routine from the Main module into the
xMain module below the Initialize routine.
Don’t worry about all the red lines.

10. In the main module add the code below:

Sub Globals
Private xM As xMain
End Sub

Sub Activity_Create(FirstTime As Boolean)
xM.Initialize(Activity)
End Sub

The red lines have disappeared.

11. That’s it. Now RUN the program.
It runs as the original project.

12. Open the B4X_SecondProgram\B4A folder:



You see the xMain.bas file.
Copy it into the B4X_SecondProgram folder.

31. 6.3 B4X_SecondProgram B4A project 31 B4X Cross-platform projects
13. In the B4A IDE remove the xMain module.



Then add it again as an existing module.



Add it again, but from the B4X_SeconProgram folder, with a relative link.




14. Run the program, it works as before!

15. Remove the xMain.bas file from the B4A subfolder.

32. 6.4 B4X_SecondProgram B4J project 32 B4X Cross-platform projects
6.4 B4J project

1. Open the B4J IDE and save the project as B4X_SecondProgram in the
B4X_SecondProgram\B4J folder.

2. Modify the Package name in Build Configuration menu.





3. Modify the top to adjust the form size.

#Region Project Attributes
#MainFormWidth: 400
#MainFormHeight: 600
#End Region

4. Open the B4J Designer.
Define a new 400 x 600 Variant and remove the original 600 x 600 one.

33. 6.4 B4X_SecondProgram B4J project 33 B4X Cross-platform projects
5. Open the B4A Designer.
Select all the views, right click and click on copy.




6. In the B4J Designer pate all the views.

34. 6.4 B4X_SecondProgram B4J project 34 B4X Cross-platform projects
7. Copy all the code, without the AutoScaleAll line, from the B4A Script General window
into the B4J General Script window.

8. In the B4J IDE, add the jXUI library




9. In the B4J IDE, add the xMain class module from the B4X_SecondProgram folder.







And add it with a relative link.





10. We see a few red lines.



The Colors keyword is not supported in B4J, so we need to change it.
To set cross-platform colors, we use the XUI library.
For this we add a reference to it in the Class_Global routine in the xMain module

Sub Class_Globals
Private xui As XUI

35. 6.4 B4X_SecondProgram B4J project 35 B4X Cross-platform projects
Now, we replace:
Colors.RGB(255,235,128) by xui.Colors_RGB(255,235,128)

We see that there is no red word anymore in the line, but the line is underlined in red.
Hovering over the different components of the line we see that the Color property of the
Label is not supported.



To overcome this problem, we use B4XViews instead of the original views.
We replace all Label and Button words by B4XView.



We see now that line 26 is no more underlined!

11. Replace the two other Color.RGB keywords.

12. We have still MsgBoxAsync in red.
We add xui, in front of it.



And line 34 is no more underlined.

13. Now we need to adapt the Main module code.
We declare xM As xMain and add xM.Initialize(MainForm.RootPanel)

36. 6.4 B4X_SecondProgram B4J project 36 B4X Cross-platform projects
14. We run the program.
And get this message, because we haven’t saved the layout file yet.



We save it with Main.


15. And the result.



Playing with the program, we see that the layout is not optimal.
So we rearrange it. Move the keyboard panel downwards, increase the height of the
message box and add some more space between the views.

37. 6.4 B4X_SecondProgram B4J project 37 B4X Cross-platform projects
16. And the final result!



Conclusion:
1. We ported an existing B4A project to B4J.
2. We have copied the entire layout from B4A to B4J, no need to redefine the layout.
We made just a few adjustments.
3. We could reuse almost all the original code with a few adaptations to make it cross-
platform.

If you still have the B4A IDE open, look at the xMain module code.
You’ll see that all the changes we have made in the B4J IDE, are automatically updated in the B4A
IDE, without any intervention from our part!

38. 6.5 B4X_SecondProgram B4i project 38 B4X Cross-platform projects
6.5 B4i project

1. Open the B4J IDE and save the project as B4X_SecondProgram in the
B4X_SecondProgram\B4i folder.

2. Modify the code on top like this:
#Region Project Attributes
#ApplicationLabel: B4X_SecondProgram

3. Modify the Package Name in Build Configuration.



To something similar to this:



You need to enter your generic package name.

39. 6.5 B4X_SecondProgram B4i project 39 B4X Cross-platform projects
4. Open the B4A Designer.

Select all the views, right click and click on copy.




5. In the B4i Designer paste all the views.

40. 6.5 B4X_SecondProgram B4i project 40 B4X Cross-platform projects
6. Copy all the code from the B4A Script General window into the B4i General Script window.

7. Save the layout file, with Main file name.



8. In the B4i IDE, add the iXUI library:



9. In the B4i IDE, add the xMain class module from the CPP_SecondProgram folder.







Add it with a relative link.






10. All is OK! Not like when we copied it into the B4J project.
The reason is that we have already modified the xMain class module in the B4J project to
make it cross-platform.

41. 6.5 B4X_SecondProgram B4i project 41 B4X Cross-platform projects
11. Now we need to adapt the Main module code.
We declare xM As xMain and add xM.Initialize(Page1.RootPanel).




12. We run the program, and the result.
The program works!
But, the layout doesn’t look like we expect it.
We need to make a few changes in the layout.

We set the background color, the Border width and the Corner radius like below.



We also need to set the TextColor to black for btnAction.
And the result.

42. 7.3 B4X_SQLiteLight2 B4A project 42 B4X Cross-platform projects
7 B4X_SQLiteLight2 project

This project is almost the same as the SQLiteLight2 project from the B4X SQLite database booklet.
But this one is cross-platform using as much as possible common code, XUI Views and, of course
the XUI library.
The WebView Table has been replaced by the B4XTable view from the XUI Views library.

The project has three ‘screens’. A screen is an Activity in B4A, a Form in B4J and a Page in B4i.

7.1 Structure

The project structure contains:
• The project folder: B4X_SQLiteLight2.
• One inner folder for each product: B4X, B4i and B4J.
• One for all the shared files: Shared Files.



The project contains following modules with their types.

Module B4J B4A B4i Common
Starter Service
Main Form Activity Page
xMain Standard Class
Edit Form Activity Page
xEdit Standard Class
Filter Form Activity Page
xFilter Standard Class

The Starter module is B4A only, not used, nor really needed in our case.

The Main, Edit and Filter modules are platform specific and needed, they contain only platform
specific code.
The xMain, xEdit and xFilter modules are the cross-platform complements to each platform specific
module and contain all the common code.

I don’t show nor explain all the steps to make this project, these were explained in the previous
chapter.
Nor do I explain in detail all the code here, I hope it’s enough self-explanatory.

43. 7.3 B4X_SQLiteLight2 B4A project 43 B4X Cross-platform projects
The final project structure:



We have the four structure folders.



And the three xModule files.





In the B4A folder we have, the B4J and B4i folder content is similar:




The content is a standard content with
all the product specific files.

The layout file is, as usual, in the Files
folder.




In the Shared Files folder, we have the SQLite database persons.db file



This file will be copied into the Files folder of
each product during the compilation.

If you need to make any modification to any of
the files in this folder you must do it here.
Don’t do it in the platform specific folders!
These will be updated automatically!

44. 7.3 B4X_SQLiteLight2 B4A project 44 B4X Cross-platform projects
I explain only this more specific code to quit the Filter screen.

We can quit the Filer screen with the standard method to leave a screen, like a Cancel method.
But, when we press the Filter button, we setup the Filter.Query variable, set the
Filter.flagFilterActive flag to True, memorize the indexes of the selected items and quit the
screen, this is done in the btnFilter_Click event routine.

Private Sub btnFilter_Click
Filter.Query = GetFilterQuery

'set the filter to active
Filter.flagFilterActive = True

'memorize the selected indexes of the Spinners
Filter.SelectedFirstName = cbxFirstName.SelectedIndex
Filter.SelectedLastName = cbxLastName.SelectedIndex
Filter.SelectedCity = cbxCity.SelectedIndex

'quit the calling object, returns to the Main object
#If B4J
CallSub(mCallBack, "frmSetFilter_Closed")
#Else If B4A
CallSub(mCallBack, "Close")
#Else If B4i
CallSub(mCallBack, "pageEdit_Disappear")
#End If
End Sub

At the end of the routine we have platform specific code to quit the Filer screen.