Setup

In the ABMaterial folder you'll find three folders: Library, Demo and Template. Demo is the source code of this app and a great resource to get started with ABMaterial.

First, copy both ABMaterial.jar and ABMaterial.xml from the Library folder to your B4J libraries folder. Congratulations, you've successfully installed ABMaterial for B4J!

Next, make a copy of the Templates folder and rename it to the name of your new app. Go into the folder and rename both Template.b4j and Template.b4j.meta to your apps name. e.g. Template.b4j -> MyApp.b4j and Template.b4j.meta -> MyApp.b4j.meta. Now you are ready to write your ABMaterial Web App!

First things to do in B4J when you start a new App

The first things you want to do is personalize your app. There are a couple of things that are needed (Nx), and some optional (Ox).

(N1): In B4J, Go to Project -> Build Configurations and change the package name.

(N2): In ABMApplication change the variables Title and Description to describe your app. They are the ones that will be shown in the browsers tab.

(N3): Change the variable AppName to the name of your app (case sensitive!). Go into the ABMPageTemplate class and set the AppName variable to EXACTLY the same.

(N4): Create a new class: Project -> Add New Module -> Class Module -> Server WebSocket and name it (e.g. 'MyFirstPage'). Copy all the code from ABMTemplatePage into your newly created class and change the Name variable to the name you gave the new class. In our example 'MyFirstPage' (case sensitive!).

(O1): You can optionally set some Application icons with different sizes in the Initialize method of ABMApplication. Check the demo app for some examples.

(N6): So all we have to do now is adding the new page to the App. In the Main module, create an instance of your new page, initialize it and add it to the app. (you can remove the example code lines talking about ABMPageTemplate).

// create the pages
Dim myPage As MyFirstPage
myFirst.Initialize	
	
// add the pages to the app
myApp.AddPage(myFirst.Page)

(O2): It is best to run the program now for the first time. All needed folders will be created for you in the www folder. E.g. the images folder where you can put all your images needed in your pages. Open up your file explorer and check the folder structure and files it created to get familiar with how ABMaterial apps are build. Note there is a file called donotdelete.conn. Well, do not delete this file. It's an empty file that is used to check your connection from the browser to your server. If there is no connection (it cannot download this file), then the app can react in a more user friendly way.

That is it. You can start creating ABMaterial WebApps! For every new page you want to make, just repeat steps (N4) through (N6). I explained this procedure in depth, but you will see this will come very naturally to do when you are building your own app.

Next, read the Themes section to get a basic understanding of how you can use themes to uniformize your WebApp!