B4J Tutorial [ABMaterial/ABMServer] Mini Template for absolute beginners (update 2024/05/17)

Hi all,

Since the lockdown everywhere, a lot of B4X users seem to want to learn ABM to make WebApps in B4J. That is great! :)

However, some seem to struggle a lot to get started. I understand, as even opening up the template can be quite overwhelming with those Cache, Root, Page etc classes thrown immediately at you.
Therefor, I've decided to wrap up a new 'TemplateMini' version that hopefully will be a lot clearer for all new beginners.

What I have done:
1. Next to the normal ABMaterial library, I created a new b4xlib library ABMServer (both will have to be loaded in your project). The ABMServer is similar to the BANanoServer, wrapping all cluttering of classes into a library.
2. The template does a simple thing: it shows an inputbox and a button. When pushing the button, a msgbox is shown.

NOTE: this 'Mini' version is also exactly what it is: Mini. Although it uses the full blown ABMaterial library, and you can use everything of it in the Mini, most of the fine-tuning of Caching and Filters is done in a fixed way and cannot be changed. But I guess for 80% of you, you wouldn't have bothered anyway. And if you find yourself familiar with Mini, you can always move on to the full Template.

GETTING STARTED:

Requirements:

B4J 10.00+

Installation:
1. Download the library and mini template: https://gorgeousapps.com/ABMMini240517.zip
2. Unzip
3. Copy all files from the /Library folder (NOT the /FilesForNewProjects subfolder) to your B4J Additional Libraries folder.
4. Open the template.b4j project in B4J and run
5. Open a browser and go to: localhost:51042/template

New project todos:
If you start a new project, copy the www folder from the /Library/FilesForNewProjects folder to your new projects /Objects folder so the path looks like:

/myProject/Objects/www
/myProject/Objects/www/js
/myProject/Objects/www/css
/myProject/Objects/www/font

NOTE: Always run your project at least once in Debug mode. This will generate the .needs files that you will need to copy next to your .jar file in release mode.

In the Modules Tab, you will notice there is very little in it :)

1588503728486.png


ABMCacheV3: ignore, do not change AND do NOT delete. This is needed to make ABMaterial believe you are running the full blown version of it.
Main: the main entry point to your B4J application
ABMPageTemplate: a template of an ABM Page that you can use to make new ones.

Things to study In Main and that are different from the 'normal' template:
1. Leave the ABM.SessionCacheControlV3 = "ABMCacheV3" ALWAYS in your project. Needed as stated above.
2. Initializing the Server (ABMServer), and there are some settings you can tune. The 'big' template does the same and more but those settings are more spread around the different source code files.
3. IMPORTANT is setting the first page the app should go to. In this example, it it the ABMPageTemplate page.
4. you build the theme directly in the Main class in BuildTheme(). For page specific themes, use the BuildPage() method in the page itself.
5. Add your pages to ABM, see further
6. Finally, the server is started

Snippet from Main:
B4X:
Sub AppStart (Args() As String)
    ' must be the first line in AppStart. DO NOT DELETE OR CHANGE!
    ' ------------------------------------------------------------
    ABM.SessionCacheControlV3 = "ABMCacheV3"
    ' ------------------------------------------------------------

    Dim DonatorKey As String = ""
    Server.Initialize("", DonatorKey, "template") ' Application = ' the handler that will be used in the url e.g. http://localhost:51042/template
    ' some parameters
    Server.Port = 51042
    ' the user needs to login, set to true. the CheckLogin() method will be called if one tries to login
    Server.NeedsAuthorization = False
    Server.StartPage = "ABMPageTemplate" ' the first page of your app
    Server.CacheScavengePeriodSeconds = 15 * 30 ' 15 minutes
    Server.SessionMaxInactiveIntervalSeconds = 30 * 60 ' 30 minutes
    Server.UploadFolder = "uploads"
    Server.UploadMaxSize = 1024 * 1024

    ' Build the Theme
    BuildTheme("mytheme")

    ' create the pages
    Dim myPage As ABMPageTemplate
    myPage.Initialize
    ' add the pages to the app
    Server.AddPage(myPage.page)
    ' do the same for your own pages: dim, initialize and Server.AddPage
    ' ...

    ' start the server
    If Server.PortSSL <> 0 Then
        Server.StartServerHTTP2("keystore.jks", "KeyStorePassword", "KeyManagerPassword")
    Else
        Server.StartServer
    End If

    ' redirect the output of the logs to a file if in release mode
    Server.RedirectOutput(File.DirApp, "logs.txt")
 
    Log("Open with:")
    LogError("localhost:" & Server.Port & "/template")
 
    StartMessageLoop
End Sub

How to create a new Page in your App:
1. Take a copy of the ABMPageTemplate and give the class a new name: e.g. MyNewPage
2. IMPORTANT: you MUST match the Name property EXACTLY to the name of you new class. In case of this example:
B4X:
Public Name As String = "MyNewPage"  '<-------------------------------------------------------- IMPORTANT
3. for EVERY page you make, you MUST let ABM know it exists. This is done by the following lines in AppStart in Main:
B4X:
' initialize your new page
Dim myNewPage As MyNewPage ' which is a copy of the ABMPageTemplate
myNewPage.Initialize
' add the pages to the app
Server.AddPage(myNewPage.page)
4. I've put as much code as possible in ABMServer so you would not be confused by it. e.g. The WebSocket_Connected/Disconnected and ParseEvent are reduced to this:
B4X:
#Region Always needed, no need to change anything at them
Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    Log("Connected")
    ws = WebSocket1
    ABMPageId = ABM.GetPageID(page, Name,ws)

    Main.Server.Connected(Me, ws, page, ABMPageId)

    Log(ABMPageId)
End Sub

Private Sub WebSocket_Disconnected
    Log("Disconnected")
    Main.Server.Disconnected(ws)
End Sub

Sub Page_ParseEvent(Params As Map)
    Main.Server.Page_ParseEvent(Me, page, ABMPageId, Params)
End Sub
#end region
5. Your actual design and logic of you page is done in the following methods:
a. BuildPage
Here you design your grid (see the forum on how the grid works)
b. ConnectPage
Here you add your components to the grid previously made
c. Well and then the logic of your page of course.

NOTE: If you want your page to appear in the Navigation Bar on the left, you must also add it to the ConnectNavigationBar method in Main, just like the ABMPageTemplate example in there.

If the project is running, open your browser and go to http://localhost:51042/template

You should see this:

1588522443414.png


I hope this will get most of you started. I'm afraid I really can't make it any simpler than that.

Alwaysbusy
 

Attachments

  • 1588503676773.png
    1588503676773.png
    8.3 KB · Views: 4,423
  • 1588532671395.png
    1588532671395.png
    15 KB · Views: 4,353
Last edited:

saeed10051

Active Member
Licensed User
Longtime User
Hi I am getting the error unknown type abmserver.
which shows that it is not able to fine the abmserver library that i have put in the additional libraries folder.
I have placed this abmserver library in both the abmaterial4.3 library folder and also outside of it but not working
 

j_o_h_n

Active Member
Licensed User
Have you added abmserver inside the ide? By selecting the library tab from the tabs on the bottom right side of the IDE and then selecting ABMServer in the list that appears above that?
 

saeed10051

Active Member
Licensed User
Longtime User
it is not appearing in the library tab. while abmaterial 4.3 is showing, which i have added to the ide
I have closed the app and restarted that .
Now it is appearing
 

Toley

Active Member
Licensed User
Longtime User
Hi Alain, thank you very much for this great work. It is clearly simpler to get started for us beginners. Just a little thing, your logo is missing in the template (v4.3) but it is really not a big deal.
 

ilan

Expert
Licensed User
Longtime User
i really would like to use this lib but i have a very stupid question.
the b4j template is creating the website but putting the website on my server and calling the page just show the loading animation.

do i also need to put the jar file on my server? what is the procedure to upload your site to the server after you build the website?
 

OliverA

Expert
Licensed User
Longtime User
the b4j template is creating the website but putting the website on my server and calling the page just show the loading animation.
The www folder needs to be used in correspondence with the produced .jar file. That folder is not meant to be used with another type of web server (Apache, lighttpt, nginx, etc). For example, you could create a folder called mysite at the root folder. In that folder, you place the .jar file and the www directory. You then run the .jar file and access your site via the ipaddress|hostname:port#/applicationname . The build in server (jServer) of the .jar file will handle the .html/.css/.js/etc files located under the www folder.

Edit: markup fix to keep :p from showing up as :p
 

ilan

Expert
Licensed User
Longtime User
The www folder needs to be used in correspondence with the produced .jar file. That folder is not meant to be used with another type of web server (Apache, lighttpt, nginx, etc). For example, you could create a folder called mysite at the root folder. In that folder, you place the .jar file and the www directory. You then run the .jar file and access your site via the ipaddress|hostname:port#/applicationname. The build in server (jServer) of the .jar file will handle the .html/.css/.js/etc files located under the www folder.

and how can i make this site public?
what do i need to upload it to the world?
 

OliverA

Expert
Licensed User
Longtime User
and how can i make this site public?
This may need to be a new thread. Part of it depends on what you plan to run this (windows/linux/etc, real hardware/virtual, etc) and from where (from home, server farm, etc.)
 

ilan

Expert
Licensed User
Longtime User
This may need to be a new thread. Part of it depends on what you plan to run this (windows/linux/etc, real hardware/virtual, etc) and from where (from home, server farm, etc.)

ok thanx for your answer, it seems to be too complicated for me. will look for a different solution. thanx
 

xmtotti

Member
Licensed User
Hi,I will change checklogin into chinese,but I can't find where I can change the text on login screen,thanks!
 

FabioRome

Member
Licensed User
Longtime User
Good evening, with the mini template abmaterial 5.0 you don't see the burger menu. how can it be solved?
 

Attachments

  • screen.png
    screen.png
    11.4 KB · Views: 193
Top