B4X Cross Platform Projects

B4X Booklets
B4X Cross-platform projects
Copyright: © 2020 Anywhere Software Edition 1.8
Last update: 2020.05.15

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

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

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).

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.

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:B4XAdditionalLibraries.
The subfolders are automatically taken into account by
the compiler.

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.

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.

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.

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.

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.

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.

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.
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.
33. Code for B4i Main
34. Code for B4i Screen1

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

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 .

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.

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.

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

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

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

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.
mParent = Parent
mParent.LoadLayout("Screen1")
InitComboBox
Show
End Sub
'This routine updates the content of xSceen1, the content 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

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
End Sub
Sub Globals
Private xM As xMain
End Sub
Sub Activity_Create(FirstTime As Boolean)
' Activity.LoadLayout("Main")
If xM.IsInitialized = False Then
xM.Initialize(Activity)
End If
End Sub
Sub Activity_Resume
xM.Show
End Sub

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
End Sub
'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

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
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

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
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
'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

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!

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_SecondProgramB4A folder.
Rename SecondProgram.b4a to B4X_SecondProgram.b4a
In the Files folder, we have the B4A main.bal layout file.

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

5. Create a new standard class module:
Name it xMain.
6. Modify the signature of the Initialize, add (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”).

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
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_SecondProgramB4A folder:
You see the xMain.bas file.
Copy it into the B4X_SecondProgram folder.

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.

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_SecondProgramB4J folder.
2. Modify the Package name in Build Configuration menu.
3. Modify the top to adjust the form size.
#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.

5. Open the B4A Designer.
Select all the views, right click and click on copy.
6. In the B4J Designer pate all the views.

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

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)

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.

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!

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_SecondProgramB4i folder.
2. Modify the code on top like this:
#ApplicationLabel: B4X_SecondProgram
3. Modify the Package Name in Build Configuration.
To something similar to this:
You need to enter your generic package name.

4. Open the B4A Designer.
Select all the views, right click and click on copy.
5. In the B4i Designer paste all the views.

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.

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.

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.

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!

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.

B4X Cross Platform Projects

More Related Content

Similar to B4X Cross Platform Projects (20)

More from B4X (16)

Recently uploaded (20)

B4X Cross Platform Projects