B4X Booklets

B4XPages

Cross-platform projects

Last update: 2024.01.05

Table of content  2  B4X Cross-platform projects 
B4X platforms .............................................................................................................................. 4 
First steps ..................................................................................................................................... 5 
1  AdditionalLibraries folder structure ..................................................................................... 6 
B4XPages ..................................................................................................................................... 8 
1  What exactly does it solve? .................................................................................................. 8 
2  What is a B4XPage?............................................................................................................. 9 
3  New cross-platform B4XPages project .............................................................................. 10 
4  B4XPages project structure ................................................................................................ 13 
5  Code templates ................................................................................................................... 14 
6  B4XMainPage Code template ............................................................................................ 15 
6.1  B4XPage events ............................................................................................................. 16 
6.1.1  B4XPage_CloseRequest ........................................................................................ 17 
6.2  B4XPage methods .......................................................................................................... 18 
6.3  Launch the IDE of another platform .............................................................................. 19 
6.4  Generate a zip file for the project ................................................................................... 19 
Compatibilities  B4A  B4i  B4J  XUI ........................................................................................ 20 
Copy layouts, move views ......................................................................................................... 21 
1  Copy layouts ...................................................................................................................... 21 
2  Move views between pages ................................................................................................ 22 
Access objects from another Page.............................................................................................. 23 
B4X Templates........................................................................................................................... 24 
Project with 2 pages B4XPagesTwoPages ................................................................................. 27 
1  Steps to follow ................................................................................................................... 28 
2  Setup of a project ............................................................................................................... 30 
3  Modify the Package name in Build Configurations ........................................................... 31 
4  Add a new B4XPage to the project .................................................................................... 31 
4.1  Code of B4XMainPage .................................................................................................. 33 
4.2  Code of B4XPage1 ......................................................................................................... 35 
5  Create a B4XPages project zip file .................................................................................... 37 
B4XPages version of the SecondProgram project ..................................................................... 38 
1  Project structure ................................................................................................................. 38 
2  B4J code adaptation ........................................................................................................... 41 
3  B4A adaptation................................................................................................................... 43 
4  B4i adaptation .................................................................................................................... 43 
5  Conclusion ......................................................................................................................... 43 
B4XPages Navigation through pages and program flow ........................................................... 44 
B4XPagesNavBar ...................................................................................................................... 45 
Other projects in the forum ........................................................................................................ 47 
 
 
 
 
 

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 B4XPagesSourceCode folder.

You can download all the source codes from the forum on this link:

https://www.b4x.com/android/forum/threads/b4x-documentation-booklets.88985/#content

Updated for following versions:

B4A version 12.80

B4i version 8.50

B4J version 10.00

B4X Booklets:

B4X Getting Started

B4X Language

B4X IDE Integrated Development Environment

B4X Visual Designer

B4X Help tools

B4XPages Cross-platform projects

B4X CustomViews

B4X Graphics

B4X XUI B4X User Interface

B4X SQLite Database

B4X JavaObject NativeObject

B4R Example Projects

1 B4X platforms 4 B4X Cross-platform projects

1 B4X platforms

B4X is a suite of 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).

• B4XPages

B4XPages is an internal library for B4A, B4i and B4J allowing to develop easily cross-

platform programs.

B4XPages is explained in detail in the B4XPages Cross-platform projects booklet.

Even, if you want to develop only in one platform it is interesting to use the B4XPages

library it makes the program flow simpler especially for B4A.

2 First steps 5 B4X Cross-platform projects

2 First steps

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.

What does cross-platform project mean?

The main goal is to have most of the code the same for all three platforms.

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

1. Use the B4XPages cross-platform framework to manage pages.

2. Use as much as possible B4XViews, included in the standard XUI library.

These are oversets of the platform specific standard views.

3. Use as much as possible views from the XUI Views library.

These are cross-platform custom views.

4. Use as much as possible XUI CustomViews.

5. When you add a common module:

a. Copy it to the parent folder if it is a new module for the project.

b. Link it with a relative path if it is already in the parent folder.

c. Or link it with an absolute path for modules valid for other projects.

d. Do not copy it to the project folder, or only if it is specific to the platform.

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 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 (xxx.b4xlib files).

Folder for code Snippets, explained in the B4X Language booklet.

Folder for B4X libraries XML files.

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

In the B4X subfolder you may add a Snippet folder for your code Snippets.

When you install a new version of a B4X platform, all standard libraries are automatically updated,

but the additional libraries are not included. The advantage of the special folder is that you do not

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 considered by the

compiler.

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. The B4X Help Viewer is explained in the B4X Help tools booklet.

To get xml files from b4xlib libraries you can use this utility written by Erel:

[Tool] b4xlib - XML generation.

3 B4XPages 8 B4X Cross-platform projects

3 B4XPages

B4XPages is a library that serves two purposes:

1. Make it simple to develop B4A apps by solving almost all of the challenges involved with

Android complex activities life cycle.

B4XPages makes B4A behave more similar to B4J and B4i where the new "B4XPage"

element is a regular object that is never paused, never destroyed, can be accessed from

anywhere and easy to work with.

2. Provide a cross platform layer above the navigation related APIs.

Before we start:

1. You are not forced to use B4XPages. All the current features behave exactly as before.

2. It does have some limitations. One notable limitation is that in B4A, the activity that

holds all the pages should be locked to a single orientation either portrait or landscape.

3. It is supported by the versions of B4A 10.0+, B4J 8.50+ and B4i 6.80+.

3.1 What exactly does it solve?

B4XPages makes many things simple and even trivial.

As Android developers, we are dealing with these challenges for many years now so it might take

us a while to understand how simple things can be.

The advantages of the cross-platform layer are clear. B4XPages hides many of the differences

between B4A activities, B4i pages and B4J forms. With B4XPages it is trivial to create a multiple

"pages" app where all of the code is shared (except of the template code which is just pasted to the

main module).

With activities, it requires creating an activity + shared class + page / form module for each page. A

lot of work.

The three most important things regarding the B4XPage classes are:

1. The page classes are 100% regular classes. They do not have a special life cycle and you can

do whatever you like with them. There are some B4XPages events, but they do not affect the

state of the class itself. This is not the case with activity modules.

2. The page classes are never paused. Nothing special happens when a page is no longer visible

or when the app moves to the background. Eventually of course, the whole process will be

killed when the app is in the background.

3. The page classes are never destroyed separately. The class global variables and views state

will never be reset (until the process is killed).

Even if you are only interested in B4A development, B4XPages can help you a lot. I will list

here all kinds of challenges that become simple with B4XPages.

Make sure to use B4A v10.0+, B4J v8.50+, B4i v6.80+.

3 B4XPages 9 B4X Cross-platform projects

The 3 points above make many things simple. Some of them are:

1. Events are never missed or queued.

2. Sleep calls are never cancelled. For example, no longer do we need to restart animations in

Activity_Resume.

3. The UI state is kept as long as the process lives.

4. In most cases we do not need to use the starter service, but we leave it. Do not remove it.

5. We can directly call public methods of other pages. No need to use CallSub or

CallSubDelayed.

6. We can directly access public global variables of other pages.

7. We can directly access and manipulate views of other pages.

8. We can decide whether to create the layouts immediately when a page is created

(B4XPages.AddPageAndCreate).

9. We can move views between pages.

10. No need to worry from cases where CallSubDelayed starts the previous activity

unexpectedly (usually happens with HttpJobs).

11. We can use the same page class to create many page instances.

12. A single place with a single and simple behavior for the global variables.

13. No need to think what should be initialized when FirstTime = True and what needs to be

initialized every time.

14. No need to handle cases where a different activity, other than Main, is started first.

15. Better control over the pages stack as it is implemented in B4X code.

16. Automatic handling of the up indicator. No need to use AppCompat library for this.

17. Quite simple and flexible way to handle the back key.

18. Background / Foreground events that are raised in all pages when the app moves to the

background and to the foreground (not so simple to get with activities and required in many

cases).

19. No distinguish between classes with "activity context" which must be declared in Globals to

other classes that can be declared in Process_Global.

20. No need to split the implementation between a stateless UI layer and a stateful non-UI layer.

With that said, no one is forced to switch to B4XPages. Everything will continue to work exactly as

before. It is too soon to rush and convert large working projects.

B4XPages also has some limitations, especially regarding to the locked orientation (in B4A only).

3.2 What is a B4XPage?

It differs between the three platforms:

B4J – Form

B4A - Panel in a single activity.

B4i - Page in a single NavBarController

3 B4XPages 10 B4X Cross-platform projects

3.3 New cross-platform B4XPages project

Tip: Begin a new cross-platform project with B4J, it is easier especially for debugging.

No need for a device or an emulator!

Open the IDE, everything is empty!

Click either on or on

Then you are asked what kind of project you want to create:

B4J B4A / B4i

B4XPages Cross-platform project.

B4XTurtle B4XTurtle project.

Default B4A or B4i standard project.

X2Game X2Game project.

Server B4J Server project

UI B4J Standard user interface project.

When you select one of the above project types you get a default project template.

3 B4XPages 11 B4X Cross-platform projects

Select B4XPages projects.

This form is shown:

By default, the cursor is positioned in the Project Name field, this is by purpose.

Enter the project name, MyProject in this example.

You see that the project name is automatically added at the end of the Project Folder field.

3 B4XPages 12 B4X Cross-platform projects

Enter the Project Folder name or use the button to select the project folder.

I use B4XPages as the generic B4XPages projects folder, this name is memorized for future

projects, but you can change it at any time.

Keep checked because we create a new project.

Click on .

Three projects with everything you need are created, one for each platform. Use it even if you are

only interested in a single platform.

You see the B4J B4XPages code template.

#Region Shared Files

#CustomBuildAction: folders ready, %WINDIR%\System32\Robocopy.exe,"..\..\Shared Files"

"..\Files"

'Ctrl + click to sync files:

ide://run?file=%WINDIR%\System32\Robocopy.exe&args=..\..\Shared+Files&args=..\Files&Fil

esSync=True

#End Region

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=Project.zip

Sub Class_Globals

Private Root As B4XView

Private xui As XUI

End Sub

Public Sub Initialize

End Sub

'This event will be called once, before the page becomes visible.

Private Sub B4XPage_Created (Root1 As B4XView)

Root = Root1

Root.LoadLayout("MainPage")

End Sub

'You can see the list of page related events in the B4XPagesManager object. The event

name is B4XPage.

Sub Button1_Click

xui.MsgboxAsync("Hello world!", "B4X")

End Sub

It is worth to add the three lines described in chapter Launch the IDE from another platform.

3 B4XPages 13 B4X Cross-platform projects

3.4 B4XPages project structure

When you create a new B4XPages project the structure below is automatically created.

Example with MyProject.

The MyProject project folder is in the B4XPages generic folder.

Insides of the MyProject folder we have the structure below:

One folder for each platform.

A fourth folder for Shared Files.

And the B4XMainPage.bas file.

Each B4A, B4i and B4J platform folder contains, the usual files and the Files and Objects folders.

B4A B4i B4J

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

platform dependent files.

The folders are added after compilation, as usual.

The folder contains all the files shared between the platforms like image or database

files.

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 them automatically in the platform specific File folders.

3 B4XPages 14 B4X Cross-platform projects

3.5 Code templates

The code templates for all three platforms have following modules:

• Main the standard platform specific Main module.

It contains platform specific code to interface with the B4XMainPage.

Do not modify any code in the Main module !!!

• B4XMainPage this is the mandatory cross-platform main page.

It contains all cross-platform code and manages the different pages if there are more than

one.

When you run the IDE it shows, by default, directly the code in the B4XMainPage module.

3 B4XPages 15 B4X Cross-platform projects

3.6 B4XMainPage Code template

B4xMainPage Code template:

#Region Shared Files

#CustomBuildAction: folders ready, %WINDIR%\System32\Robocopy.exe,"..\..\Shared Files"

"..\Files"

'Ctrl + click to sync files:

ide://run?file=%WINDIR%\System32\Robocopy.exe&args=..\..\Shared+Files&args=..\Files&Fil

esSync=True

#End Region

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=Project.zip

Sub Class_Globals

Private Root As B4XView

Private xui As XUI

End Sub

Public Sub Initialize

End Sub

'This event will be called once, before the page becomes visible.

Private Sub B4XPage_Created (Root1 As B4XView)

Root = Root1

Root.LoadLayout("MainPage")

End Sub

'You can see the list of page related events in the B4XPagesManager object. The event

name is B4XPage.

Sub Button1_Click

xui.MsgboxAsync("Hello world!", "B4X")

End Sub

This line:

#CustomBuildAction: folders ready, %WINDIR%\System32\Robocopy.exe,"..\..\Shared Files"

"..\Files"

Copies the all the files contained in the Shared Files folder to the product specific Files folder.

This line allows, with Ctrl + click, to synchronize the Shared Files folder with the product specific

Files folder.

'Ctrl + click to sync files:

ide://run?file=%WINDIR%\System32\Robocopy.exe&args=..\..\Shared+Files&args=..\Files&Fil

esSync=True

This line allows, with Ctrl + click, to generate a zip file of the whole B4XPages project.

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=Project.zip

You may modify this line with your project name.

Replace Project by your project name, MyProject in the example.

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=MyProject.zip

The Button1_Click event routine is only shown as an example, you should remove it.

3 B4XPages 16 B4X Cross-platform projects

3.6.1 B4XPage events

Summary of possible B4XPage event routines which can be used in B4XMainPage.

B4XPage_Created - Called once when the page is created. This will happen before the page

becomes visible or after a call to B4XPages.AddPageAndCreate.

B4XPage_Appear - Called whenever the page becomes visible.

B4XPage_Disappear - Called whenever a visible page disappears.

B4XPage_Background - Called when the app is moved to the background. This event will be

raised in all pages that implement this sub, not just the top event. This is a good place to save

anything that needs to be save as the process might be killed later. Note that in B4J it is raised when

the last page is closed.

B4XPage_Foreground - Called when the app moved to the foreground.

B4XPage_Resize (B4J / B4i) - Called when the page is resized.

B4XPage_CloseRequest (B4J / B4A) - In B4A it is called when the user clicks on the back key or

on the up indicator. In B4J it is called when the user clicks on the close button.

B4XPage_MenuClick - Called when a menu item or BarButton in B4i is clicked.

B4XPage_KeyboardStateChanged (B4i) - Called when the keyboard state changes.

B4XPage_IconifiedChanged (B4J) - Called when a page is minimized or restored.

B4XPage_PermissionResult (B4A) - Raised after a call to rp.CheckAndRequest.

rp = RuntimePermissions, the B4A RuntimePermissions library.

To define these routines, use the IDE internal method:

Write Private Sub or Sub plus a space and you

will see this, and Press Tab:

Select .

Select the event routine you want and enter B4XPage for the EventName.

The displayed event list depends on the platform.

3 B4XPages 17 B4X Cross-platform projects

3.6.1.1 B4XPage_CloseRequest

In B4A and B4J you can handle the CloseRequest event and cancel the request if needed.

Example:

'Return True to close, False to cancel

Private Sub B4XPage_CloseRequest As ResumableSub

Dim sf As Object = xui.Msgbox2Async("Close?", "Title", "Yes", "Cancel", "No", Null)

Wait For (sf) Msgbox_Result (Result As Int)

If Result = xui.DialogResponse_Positive Then

Return True

End If

Return False

End Sub

3 B4XPages 18 B4X Cross-platform projects

3.6.2 B4XPage methods

• AddPage (Id As String, B4XPage As Object) Adds a new page.

Private Page1 As B4XPage1

Page1.Initialize

B4XPages.AddPage("Page 1", Page1)

Each page is identified with a case insensitive string id. "Page 1 in the example.

The main page id is "MainPage".

• ShowPage (Id As String) Shows a page. In cases where the page is already in the stack

B4XPages.ShowPage("Page 1")

B4A - The page will be moved to the top of the stack.

B4i - Pages above this page will be removed.

B4J - Not relevant as multiple pages can be displayed.

• ClosePage (B4XPage As Object) Closes the page. The page is not destroyed.

B4XPages.ClosePage(Me)

Use Me in the current Page.

In B4i, only the top page can be closed.

• SetTitle (B4XPage As Object, Title As Object) Sets the page title. Can be CSBuilder in B4A.

B4XPages.SetTitle(Me, "My title")

Use Me in the current Page.

The first parameter is the Page object, not the Page id!

• GetPage (Id As String) Returns the page instance.

Private MP As B4XMainPage

MP =B4XPages.GetPage("MainPage")

Another example:

Private Page2 As B4XPage2

Page2 = B4XPages.GetPage("Page 2")

B4XPages.SetTitle(Page2, "This is page 2"

Page2.btnPage3.Text = "Page 3"

You should cast it to the correct type.

• GetPageId (B4XPage As Object) Returns the page id from the page object.

Private Page3ID As String

Page3ID = B4XPages.GetPageId(Page3)

Returns: String

3 B4XPages 19 B4X Cross-platform projects

3.6.3 Launch the IDE of another platform

You can add the three lines below on top of the B4XMainPage module if you want to open the IDE

of another platform directly from one project.

'B4A ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4A\ProjectName.b4a

'B4i ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4i\ProjectName.b4i

'B4J ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4J\ProjectName.b4j

Replace ProjectName by your project name.

Then, when you hover over these lines with the Ctrl key pressed the line is highlighted in blue.

Click on it to run the selected IDE.

If you have the lines above, you should replace them by these lines:

'B4A ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4A\%PROJECT_NAME%.b4a

'B4i ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4i\%PROJECT_NAME%.b4i

'B4J ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4J\%PROJECT_NAME%.b4j

Replace \ProjectName. by \%PROJECT_NAME%. at the end.

%PROJECT_NAME% is a reserved key word which represents the project name.

To make a new template look at chapter B4X Templates.

3.6.4 Generate a zip file for the project

You may see this line on top in the IDE:

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=Project.zip

When you select it, it generates a zip file for the entire project.

One suggestion is to replace Project.zip by like below.

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=\%PROJECT_NAME%.zip

%PROJECT_NAME% is a reserved word for the current project name.

To make a new template look at chapter B4X Templates.

4 Compatibilities B4A B4i B4J XUI 20 B4X Cross-platform projects

4 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 CustomView.

B4J

B4A

B4i

XUI

CustomView

Button

B4XView

---

Canvas

B4XCanvas

---

CheckBox

Switch

---

B4XSwitch

ComboBox

Spinner

Picker

---

B4XComboBox

ImageView

B4XView

---

Image

Bitmap

B4XBitmap

---

Label

B4XView

---

ListView

---

xCustomListView

Pane

Panel

B4XView

ProgressBar

ProgressIndicator

ProgressBar

ProgressView

B4XView

---

ScrollPane

ScrollView

HorizontalScrollView

ScrollView

B4XView

---

Slider

SeekBar

Slider

---

B4XSeekbar

TextField

EditText

TextField

B4XView

---

WebView

---

xCustomListView is a standard library.

B4XSwitch, B4XComboBox and B4XSeekbar are included in the XUI Views.b4xlib library, which

is also a standard library.

5 Copy layouts. Move views 21 B4X Cross-platform projects

5 Copy layouts, move views

5.1 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 is as simple as this !!!

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

Note: If you copy CustomViews, make sure that you have checked the needed libraries before

you copy. Otherwise, you will lose them!

5 Copy layouts. Move views 22 B4X Cross-platform projects

5.2 Move views between pages

You can move views between pages with the code below.

Dim v As B4XView = SomeOtherPage.View1

v.RemoveFromParent

Root.Add(v, 10dip, 10dip, 100dip, 100dip)

6 Access objects form another Page 23 B4X Cross-platform projects

6 Access objects from another Page

Sometimes it is useful to access an object from another page.

This can easily be done with the code below:

The example below is demonstrated in the B4XPagesNavBar project.

The object must be declared as Public or with Dim in its module, Page2 in the example.

Public lblTest As B4XView 'used to show how to access an object in another Page.

The lblTest object is accessed from Page3 with this code:

'to show how to access an object in another Page.

Public Page2 As B4XPage2 = B4XPages.GetPage("Page 2")

Page2.lblTest.Text = "Page 3 was displayed."

In B4XPages.GetPage("Page 2") the parameter in quotes is the page ID, the first parameter, you

gave when you initialized the page in the B4XMainPage module:

B4XPages.AddPage("Page 2", Page2)

7 B4X Templates 24 B4X Cross-platform projects

7 B4X Templates

This is a very simple and useful feature. When you create a new project, the project is created based

on the chosen template.

It is especially important for cross platform projects where a new project creates three platform

specific projects, with the recommended structure and shared code.

The templates are simple zip files, with the b4xtemplate extension. The template files should be in

the internal or additional libraries folders.

Files with $APPNAME$ in their name will be replaced with the project name.

Two templates are currently shipped with the B4X platforms, the files are in the internal libraries

folders:

• B4XPages.b4xtemplate

• B4XTurtle.b4xtemplate

To be able to zip a cross-platform project with the correct name and to open the IDE of another

platform directly from the B4XMainPage module I made my own B4XPages Template with the

modifications below, to do this:

Copy the B4XPages.b4xtemplate file, from the internal libraries folder, into a new folder and unzip

it.

You get the structure below:

One folder for each platform.

The Shared Files folder.

The B4XMainPage.bas file.

The original zip file.

7 B4X Templates 25 B4X Cross-platform projects

Open the B4J folder, you get the structure below:

The Files folder.

The .b4j file.

The .b4j.meta file.

You see that the name of the .b4j file and the .b4j.meta file is the reserved word: $APPNAME$.

The Files folder contains the MainPage.bjl file, the B4J default layout.

Open the B4J project.

You get the code below on top of the B4XMainPage module:

I replaced jar&Args=ProjectName.zip by jar&Args=\%PROJECT_NAME%.zip.

And I added the three lines below:

'B4A ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4A\%PROJECT_NAME%.b4a

'B4i ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4i\%PROJECT_NAME%.b4i

'B4J ide://run?file=%WINDIR%\System32\cmd.exe&Args=/c&Args=start&Args=..\..\B4J\%PROJECT_NAME%.b4j

These lines allow you to launch the project of another platform directly from the B4XMainPage.

Save the project and leave the IDE.

Zip the entire structure with a new name, B4XPagesKC in my case, and with the b4xtemplate

extension.

Then copy the B4XPagesKC.b4xtemplate file into the AdditionalLibraries\B4X folder.

The same folder where you copy B4X Library files.

7 B4X Templates 26 B4X Cross-platform projects

When you now open the IDE, select New in the File menu, you will see the new B4XPagesKC

template.

Create a new project, I used the name DemoNew as an example:

You get the new template with the modifications.

And you can check the new project. The project folder and the files have the correct name.

You can make any other template with the same principle.

8 Project with 2 ‘pages’ 27 B4X Cross-platform projects

8 Project with 2 pages B4XPagesTwoPages

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

The term ‘page’ stays for Activity in B4A, Page in B4i and Form in B4J.

Project name: B4XPagesTwoPages.

It is a quite simple project containing two pages with:

Main Page: Page 1:

A B4XComboBox for a selection. A Label to show the selection of MainPage.

A Label to show the selection of Page1. A B4XComboBox for a selection.

A Button to show Page1. This one will also be displayed in MainPage.

There is no Page1 selection yet.

The two B4XComboBoes are used to make a selection in each page.

These selections are displayed in the other page just to show the interaction between the two pages.

8.1 Steps to follow 28 B4X Cross-platform projects

8.1 Steps to follow

These are the steps to follow to design the B4XPagesTwoPages cross-platform project:

1. Run the B4J IDE and setup the project.

The structure of the whole project is ready for all three platforms.

2. Modify the Package name in Build Configurations.

3. Add Page1 as a B4XPage, save it to the parent folder, for it is a cross-platform module.

4. Define the two layouts ‘MainPage’ and ‘Page1’, not explained, they are quite simple.

We need to check the XUI-Views library because we use a B4XCombobox.

5. Code for B4XMainPage

6. Code for Page1

You can now run the B4J program.

7. Run the B4A IDE, modify the Package name in Build Configurations.

8. Modify the Application Label, #ApplicationLabel: B4XPagesTwoPages.

In the IDE we see some lines in red, why?

The XUI Views library is missing, so we must check it, some of the red lines are now OK.

And we need to add the B4XPage1 class module to the project.

9. Add B4xPage1 as an Existing Module from the project folder with a relative link.

10. Copy the two layouts ‘MainPage’ and ‘Page1’ from B4J to B4A.

You need to adapt them for the sizes and perhaps for colors.

If you do not see the B4XCombobox view when you copy the layout, this means that you

have not checked the XUI Views library!

No code to change !!!

You can now run the B4A program.

The layouts may need some fine tuning.

8.1 Steps to follow 29 B4X Cross-platform projects

11. Run the B4i IDE

The following steps are the same as for B4A.

12. Modify the Application Label.

13. Modify the Package name in Build Configurations.

14. Copy the two layouts ‘MainPage’ and ‘Page1’ from B4A to B4i.

It is better to copy the layouts from B4A to B4i because the screen sizes are similar.

You may need to adapt them for sizes or colors.

15. Add B4XPage1 as an Existing Module from the project folder with a relative link.

No code to change !!!

You can now run the B4i program.

The layouts may need some fine tuning.

16. Conclusion.

We see that, in this simple example, all the code written in the B4J project is reused in B4A

and B4i without any change nor adaptation.

If you have two or the three platform IDEs open and you change the code in any one of

them and save the project the code in the cross-platform modules is automatically updated.

Only the layouts need some adaptations.

8.2 Setup of the project 30 B4X Cross-platform projects

8.2 Setup of a project

To create a new project, we run the B4J IDE:

Enter the Project Folder: D:\B4XPages, in my case, enter the project name, B4XPagesTwoPages in

the example, check Create New Folder, and click on :

We arrive directly in the B4XMainPage.

8.3 Modify the Package name 31 B4X Cross-platform projects

8.3 Modify the Package name in Build Configurations

As usual, I change the Package name in Build Configuration directly at the beginning:

8.4 Add a new B4XPage to the project

Click Project / Add New Module / Class Module / B4XPage.

Enter the page name in the window below, B4XPage1 in our example.

Check

because B4XPage1 is a cross-platform

module.

Now, we see the B4XPage1 module in the IDE and we can see that the B4XPage1.bas file is added

in the B4XPagesTwoPages folder.

8.5 Add an existing page 32 B4X Cross-platform projects

8.5 Add an existing page

When you already have generated a B4XPage in one platform and switch to another one you need

to add this page to the project.

The B4XPages are not added automatically.

Click Project / Add Existing Module / Class Module / B4XPage.

Select the file in the Files Explorer and add it as a relative link.

8.6 Code of B4XMainPage 33 B4X Cross-platform projects

8.6 Code of B4XMainPage

In Class_Globals we:

• Declare Page1.

• Declare the views.

• Declare two public variables for the selection.

Sub Class_Globals

Private Root As B4XView

Private xui As XUI

Private Page1 As B4XPage1

Private lblPage1 As B4XView

Private xcbxMainPage As B4XComboBox

Public SelectedIndex As Int 'Selected index from the xMain B4XComboBox

Public SelectedItem As String 'selected item from the xMain B4XComboBox

End Sub

Note: Do not use a same name for the Page and the module like, Private Page1 As Page1.

Because in B4i it is not allowed to use a variable name the same as a module name.

In B4J and B4A it would work with a warning, in B4i it throughs an error !

In B4XPage_Created we:

• load the layout, initialize, and add Page1.

• Fill the B4XCombobox.

'This event will be called once, before the page becomes visible.

Private Sub B4XPage_Created (Root1 As B4XView)

Root = Root1

Root.LoadLayout("MainPage")

Page1.Initialize 'initializes Page1

B4XPages.AddPage("Page 1", Page1) 'adds Page1 to the B4XPages list

FillComboBox

End Sub

8.6 Code of B4XMainPage 34 B4X Cross-platform projects

And then, we have:

• FillCombobox, fills the combobox.

• btnPage1_Click, button click event to show Screen1.

• xcbxMainPage_SelectedIndexChanged, the B4XCombobox event.

'Initialize the B4XComboBox

'Select the first item

Private Sub FillComboBox

Private i As Int

Private lst As List

lst.Initialize

For i = 0 To 10

lst.Add("Main " & i)

xcbxMainPage.SetItems(lst)

xcbxMainPage.SelectedIndex = SelectedIndex

SelectedItem = xcbxMainPage.SelectedItem 'We memorize the index in the variable

End Sub

'Display Page1

Private Sub btnPage1_Click

B4XPages.ShowPage("Page 1")

End Sub

Private Sub xcbxMainPage_SelectedIndexChanged (Index As Int)

SelectedIndex = Index 'We memorize the index in the variable

SelectedItem = xcbxMainPage.SelectedItem 'We memorize the index in the variable

End Sub

We add a last public routine to Update the MainPage:

'Updates the MainPage

Public Sub Update

lblPage1.Text = Page1.SelectedItem

End Sub

This routine is called from Page 1 to update the display of the MainPage.

8.7 Code of B4XPage1 35 B4X Cross-platform projects

8.7 Code of B4XPage1

In Class_Globals we:

• Declare the two views.

• Declare two global variables for the selection.

Sub Class_Globals

Private Root As B4XView 'ignore

Private xui As XUI 'ignore

Private lblMain As B4XView

Private xcbxPage1 As B4XComboBox

Public SelectedIndex As Int

Public SelectedItem As String

End Sub

In B4xPage_Create we:

• Load the layout

• Fill the B4XCombobox

Private Sub B4XPage_Created (Root1 As B4XView)

Root = Root1

Root.LoadLayout("Page1")

FillComboBox

End Sub

In B4XPage_Appear we:

• Update the display of the MainPage selection.

Private Sub B4XPage_Appear

lblMain.Text = B4XPages.MainPage.SelectedItem

End Sub

In B4XPage_Disappear we:

• Call the Update routine of MainPage to update the display of the selection in Page1.

Private Sub B4XPage_Disappear

B4XPages.MainPage.Update

End Sub

8.7 Code of B4XPage1 36 B4X Cross-platform projects

Then we have:

• FillComobox, fills the B4XCombobox.

• xcbxPage1_SelectionIndexChanged, the B4XCombobox event.

'Initialize the B4XComboBox with Page1 & i

'Select the first item

Private Sub FillComboBox

Private i As Int

Private lst As List

lst.Initialize

For i = 0 To 10

lst.Add("Page1 " & i)

xcbxPage1.SetItems(lst)

xcbxPage1.SelectedIndex = 0 'We memorize the Index in the variable

SelectedItem = xcbxPage1.SelectedItem 'We memorize the Item in the variable

End Sub

Private Sub xcbxPage1_SelectedIndexChanged (Index As Int)

SelectedIndex = Index 'We memorize the Index in the variable

SelectedItem = xcbxPage1.SelectedItem 'We memorize the Item in the variable

End Sub

These are almost the same as in B4XMainPage.

8.8 Create a B4XPages project zip file 37 B4X Cross-platform projects

8.8 Create a B4XPages project zip file

To create a zip file for the complete project including all files we use feature in included in line 6 on

top of the B4XMainPage code:

By default, the name of the zip file is Project.zip.

To get the name of our project, B4XTwoPages in our example, we can change Project.zip into

B4xTwoPages.zip.

If you have this line, which I recommend:

'Ctrl + click to export as zip: ide://run?File=%B4X%\Zipper.jar&Args=\%PROJECT_NAME%.zip

You get directly the correct project name !

When you press on Ctrl and hover over the line, the right part is highlighted.

To create the zip file, simply press on Ctrl + Mouse click.

You will get the project zip file.

And its content.

9 B4XPages version of SecondProgram 38 B4X Cross-platform projects

9 B4XPages version of the SecondProgram project

The goal of this chapter is to show how to modify three simple platform specific projects into one

B4XPages cross-platform project.

The source code can be found in the SourceCode\B4XPagesSourceCode folder.

You can download all the source codes from the forum on this link:

https://www.b4x.com/android/forum/threads/b4x-documentation-booklets.88985/#content

We use the three SecondProgram projects from the GettingStarted SourceCode.

9.1 Project structure

First, we create a new project.

Open the B4J IDE and select New.

And select .

Enter B4XPagesSecondProgram in the Project Name field.

Check to create a new folder.

9 B4XPages version of SecondProgram 39 B4X Cross-platform projects

In the IDE click on .

Enter b4j.B4xPagesSecondProgram in the Package field.

And we have the project structure.

As we already have made the layout, we load Main.bjl from the SecondProgram project in the

GettingStarted source code folder.

9 B4XPages version of SecondProgram 40 B4X Cross-platform projects

We now have the layout file in the project.

We can remove the default MainPage.bjl layout file.

Click on the MainPage.bjl file .

And click on .

If you open the Designer, you will see the layout.

In the IDE Change the layout file name from MainPage to Main.

Remove the Button1_Click event routine.

Now you should have this:

9 B4XPages version of SecondProgram 41 B4X Cross-platform projects

9.2 B4J code adaptation

Modify on top in the Main module the value of #MainFormWidth: from 600 to 400.

Open a second instance of the B4J IDE and open the SecondProgram B4J project, located in the

GettingStarted folder.

Copy lines 9 to 15

Into Class_Globals in the B4XMainPage module and change Button and Label into B4XView.

We use XUI views instead of platform specific views.

Then, in B4XPage_Created we add the call to NewProblem.

9 B4XPages version of SecondProgram 42 B4X Cross-platform projects

From the SecondProgram code, copy all the code beginning with Sub btnAction_MouseClicked to

the B4XPagesSecondProgram project.

Now we must modify the B4J specific code to make it cross-platform.

Change these two lines:

Private Sub btnAction_MouseClicked (EventData As MouseEvent)

Private Sub btnEvent_MouseClicked (EventData As MouseEvent)

Into these:

Private Sub btnAction_Click

Private Sub btnEvent_Click

We need to replace the B4J specific MouseClicked event by the cross-platform Click event without

any parameters.

We need to change the B4J specific MsgBox call into the cross-platform MsgBox call:

We replace this

fx.Msgbox(Null, "No result entered", "E R R O R")

By this:

xui.MsgboxAsync("No result entered", "E R R O R")

We need to modify the three B4J specific color setting calls into cross-platform settings.

Replace these:lines

CSSUtils.SetBackgroundColor(lblComments, fx.Colors.RGB(255,235,128))' yellow color

CSSUtils.SetBackgroundColor(lblComments, fx.Colors.RGB(128,255,128))' light green color

CSSUtils.SetBackgroundColor(lblComments, fx.Colors.RGB(255,128,128))' light red color

By these:

lblComments.Color = xui.Color_RGB(255,235,128) ' yellow color

lblComments.Color = xui.Color_RGB(128,255,128) ' light green color

lblComments.Color = xui.Color_RGB(255,128,128) ' light red color

That is ALL!

9 B4XPages version of SecondProgram 43 B4X Cross-platform projects

9.3 B4A adaptation

As for B4J, we need to copy the Main.bal file from the B4A SecondProgram project.

Remove the MainPage.bal file.

Modify the #ApplicationLabel: on top of the Main module.

Modify the Package in Build Configurations.

All the code in B4XMainPage has already been made cross-platform, therefore ne change needed.

This is ALL!

9.4 B4i adaptation

Copy the Main.bil file and remove the MainPage.bil file.

Modify the #ApplicationLabel: on top of the Main module, the same as for B4A.

Modify the Package in Build Configurations, the same as for B4A.

This is ALL!

9.5 Conclusion

It was quite easy to make this project cross-platform. The layout files did already exist, nothing to

do. The B4J code did need some modification to replace B4J specific code into cross-platform code.

The platform specific views (nodes) declaration had to be changed into B4XView in their

declaration.

10 Navigation through pages 44 B4X Cross-platform projects

10 B4XPages Navigation through pages and program flow

The B4XPagesThreePages project shows different ways to navigate through the different pages.

It shows also, in the Logs, the program flow and which event is raised.

The source code can be found in the SourceCode\B4XPagesSourceCode folder.

You can download all the source codes from the forum on this link:

https://www.b4x.com/android/forum/threads/b4x-documentation-booklets.88985/#content

The project has three pages:

• MainPage has two Buttons one for each Page.

• Page2 has one Button for Page3.

• Page3 no Button.

Navigation possibilities:

• 1 > 2 > 3 > 2 > 1

When we go from Page2 to Page3 and then close Page3 we come back to Page2.

And go from MainPage to Page 2 and back, or go from MainPage to Page 3 and back.

• 1 > 2 > 3 > 1

When we go from Page2 to Page3 and then close Page3 we go directly back to MainPage.

Unfortunately, this mode does not work in B4i.

For this we add B4XPages.ClosePage(Me) in the btnPage3_Click routine after

B4XPages.ShowPage("Page 3"). This removes Page2 from the stack list.

Sub btnPage3_Click

B4XPages.ShowPage("Page 3")

If MP.NavigationIndex = 1 Then '1 > 2 > 3 > 1

B4XPages.ClosePage(Me) 'this does not work in B4i !!!

End If

End Sub

• 1 > 2 > 1 1 > 3 > 1

We can only go from MainPage to Page 2 and back or go from MainPage to Page 3 and

back.

For this, we set btnPage3.Visible = False.

In a ‘normal’ case there should not be any button in the layout of Page2.

I added it to show the different methods.

Just test it and play a bit with it.

11 B4XPagesNavBar 45 B4X Cross-platform projects

11 B4XPagesNavBar

This project contains four pages and a NavBar class, displayed at the bottom of each page, and used

to navigate between the different pages.

The source code can be found in the SourceCode\B4XPagesSourceCode folder.

You can download all the source codes from the forum on this link:

https://www.b4x.com/android/forum/threads/b4x-documentation-booklets.88985/#content

The NavBar has four buttons, one for each page.

The NavBar is initialized the B4XPage_Created routine of each page with;

NavBar1.Initialize(Root)

In B4XMainPage we define a global variable holding the current active page.

Public CurrentPage As Object

11 B4XPagesNavBar 46 B4X Cross-platform projects

Code of the NavBar class.

In the Initialize routine we transmit the Parent view.

Set the variable MP for the B4XMainPage

And load the NavBar layout onto the parent view.

Close the current Page, if it is not the MainPage, when a new one is opened.

Public Sub Initialize(Parent As B4XView)

pnlParent = Parent

MP = B4XPages.MainPage

pnlParent.LoadLayout("NavBar")

End Sub

Code for the button events.

Private Sub btnNavBar_Click

Private btn As B4XView

Private Index As Int

btn = Sender

Index = btn.Tag

If MP.CurrentPage <> MP Then

B4XPages.ClosePage(MP.CurrentPage)

End If

Select Index

Case 1

MP.CurrentPage = MP

B4XPages.ShowPage("MainPage")

Case 2

MP.CurrentPage = MP.Page2

B4XPages.ShowPage("Page 2")

Case 3

MP.CurrentPage = MP.Page3

B4XPages.ShowPage("Page 3")

Case 4

MP.CurrentPage = MP.Page4

B4XPages.ShowPage("Page 4")

End Select

End Sub

The project includes the access of an object from another page explained in chapter:

Access objects from another Page.

12 Other projects in the forum 47 B4X Cross-platform projects

12 Other projects in the forum

Below a small list of available projects in the forum:

• [B4X] ThreePagesExample

A basic example.

• [B4X] B4XPages + B4XDrawer

Creates a B4XPages example using B4XDrawer.

• [B4X] [B4XPages] Splash Screen

B4A, B4i and B4J splash screen implementation. The implementation is different in each

platform.

• [B4X] [B4XPages] Pleroma / Mastodon Client

Roughly speaking, Mastodon is an open source, distributed, social network a bit similar to

Twitter.

To find other B4XPages projects in the forum, type [B4X] [B4XPages] in the search field and you

get a list of projects.