B4J Library [ABMaterial] Framework for WebApps


Licensed User
Chartist.js is the library I've picked to make charts. The main objective of ABMaterial is that the user does not have to write any HTML, Javascript or CSS.

Before I start to make changes, and if it is only a div you'll need, you can try the following:

0. in you app create an empty row with one cell
1. Run your app
2. Open the html in an text editor like notepad++ (while your app running!)
3. Find the row and col you've created and add you div in it

<div class="container">
<div id="r18" class="row transparent   " style="margin-top: 0px; margin-bottom: 20px">
<div name="page.cell(18,1)" id="r18c1" class="col s12 m12 l12 offset-s0 offset-m0 offset-l0 transparent   " style="position: relative ;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px" >
<div></div>   <--------------------------------------- this is your div
4. press F5 in the browser
5. check if everything is as you expected
6. Mail me with a feature request to add a div and I see if it can add it to the framework


Active Member
Licensed User
Hi AlwaysBusy,
i have made as you write..
it is not necessary to add other div.
i can use one of your...ex r2c1

so if in the buildpage i add

and in WebSocket_Connected
chart.Initialize(ws, "r2c1","Grafico", "'label': 'Paolo','value': '18000','color': '#f8bd19'", "'label': 'Arianna','value': '20000','color': '#h8bd19'")
chart.Resize(10, 10, 600, 500)

i'm able to add all i want.

Private chart As UAPPlusChart
is made so:

'Class module
Sub Class_Globals
    Private mID As String
    Private mWS As WebSocket
Private mData As List

End Sub

Public Sub Initialize(WS As WebSocket,ID As String,Titolo As String,  d1 As String,d2 As String)

    mWS = WS
    mID = ID.ToLowerCase

    Dim Script As String   

    Script = "var lineChart2 = new HeroCharts({ " & _
                "'chart': {'type':'3dpie','chartcontainer':'" & mID &"','heading':'" & Titolo &"', 'width': 600," & _
                "'height': 500,'originx': 0," & _
                "'originy': 80," & _
                "'colors': ['#33bdda', '#ff5904','#6baa01']," & _
                "'legendposition': 'bottom'," & _
                "'legendbox': true," & _
                "'startingangle': '125',}, 'series': [ " & _
                "{" & d1 & "}," & _
                 "{" & d2 & "}]," & _
                "});" & _
                " lineChart2.draw();"

    mWS.Eval(Script, Array As Object(mID))

End Sub

Sub GetID() As String
    Return mID
End Sub

' ###

Sub AddEvent(EventName As String, PreventDefault As Boolean)
    EventName = EventName.ToLowerCase
    mWS.RunFunction("b4j_addEvent", Array As Object("#" & mID, EventName, mID & "_" & EventName, PreventDefault))
End Sub

Sub RemoveEvent(EventName As String)
    EventName = EventName.ToLowerCase
    mWS.Eval("$(arguments[0]).off('" & EventName & "', $(arguments[1]))", Array As Object("#" & mID))
End Sub

Sub SetEventObjectName(EventObjectName As String, EventName As String, PreventDefault As Boolean)
    EventObjectName = EventObjectName.ToLowerCase
    EventName = EventName.ToLowerCase
    mWS.RunFunction("b4j_addEvent", Array As Object("#" & mID, EventName, EventObjectName & "_" & EventName, PreventDefault))
End Sub

' ###

Sub AppendTo(ElementID As String)
    mWS.Eval("$(arguments[0]).appendTo($(arguments[1]))", Array As Object("#" & mID, "#" & ElementID.ToLowerCase))
End Sub

Sub Remove()
    mWS.Eval("$(arguments[0]).remove()", Array As Object("#" & mID))
End Sub

Sub Resize(Left As String, Top As String, Width As String, Height As String)

    Dim CSS As String

    CSS = "$(arguments[0]).css({"
    If Left   <> -1 Then CSS = CSS & "'left':'" & Left & "px',"
    If Top    <> -1 Then CSS = CSS & "'top':'" & Top & "px',"
    If Width  <> -1 Then CSS = CSS & "'width':'" & Width & "px',"
    If Height <> -1 Then CSS = CSS & "'height':'" & Height & "px',"
    If CSS.EndsWith(",") Then
        CSS = CSS.SubString2(0, CSS.Length - 1)
        CSS = CSS & "});"
        mWS.Eval(CSS, Array As Object("#" & mID))
    End If
End Sub
with this solution you can use all jquery ui objects and all javascript components if you like!
i hope that is usefull for you!.
regards Paolo



Staff member
Licensed User
<off topic>
The smart strings literal was implemented exactly for this use case:
Dim script As String = $"
    var lineChart2 = new HeroCharts({
     'chart': {'type':'3dpie','chartcontainer':'${mID}','${heading}':'${Titolo}', 'width': 600,{
     'height': 500,'originx': 0,
     'originy': 80,
     'colors': ['#33bdda', '#ff5904','#6baa01'],
     'legendposition': 'bottom',
     'legendbox': true,"
     'startingangle': '125',}, 'series': [
Note that you can use $xml{SomeVariable} to escape the 5 xml entities.

Gabino A. de la Gala

Active Member
Licensed User
Is there any way to activate one of the default options in a ABMCombo at runtime?

How Can I know which option of a combo is selected in any time (not when it is clicked)?

Gabino A. de la Gala

Active Member
Licensed User
log it! create a set of flags for the properties you need to know the state of, and log them!
Yes, thanks. This is I'm doing. You can use Text property too.

The problem I have now is I can't refresh and I can't "initialize" it with no one option selected in run time.

Javier Lovay

Licensed User
Hello, your work is excellent.
Can use your framework in B4A? I am developing an web app in B4A that run on a android server.
Thanks and congratulations!
Last edited:


Well-Known Member
Licensed User
Hello AB,

Just spent the past few days exploring the ABMaterial concept of web site creation.
Looks great to date! Your examples work well with static data (with very small issues - see my next post...).

Anyone considering avoiding the normal learning curve of JavaScript, HTML(5) and JQuery (to some extent), PHP (- not covered here...) and understands B4X shall find this most welcoming, as I have.

I know enough about each to completely bury myself in a never ending spiral of frustration!
I have explored many different frameworks only to realize that I cannot possibly learn (in short order) what it takes to create what my app demands.
I have also had to HACK into generated code to make it function as I wanted (ie. introduce a filter).

We need a B4C (client) and B4S (server). Or a B4J_CS (covers both).

However complicated it may first appear, following your well defined examples and tutorial makes it easier.
Without this knowledge of how to properly construct a (page, table, etc) one could get way off tract in short order...
Thankfully you have taken the effort to point this out.

I think now is the time to connect it to a DB (MySQL) and introduce those complexities.
A simple CRUD example (using canvas to extend table as you have mentioned) would be most helpful.
Reading and experimenting with all your wonderful stuff, I am still too stupid (novice) to piece this together...

Hopefully you shall find the time soon (or some other contributor).

In my opinion, it only lacks the CRUD functionality (ie. a CRUD framework).
When one examines other offerings from various suppliers, this is not as easy one might expect.
Many technicalities to overcome (INSERT, UPDATE, DELETE, etc.)
I understand this from other suppliers who generate this PHP code to handle these functions.




Well-Known Member
Licensed User
I added more TopMenuItems than the default Contact.
Works great until sized to small...

EDIT: SORRY! Helps do read the documentation!!!
Set Param to make topmenu NOT show on small screens!


Small (phone).
Top doesn't conform to wrap menu items...

Last edited:

Bladimir Carrillo

Licensed User
Dear Alain,

I've been testing the framework and is excellent. I plan to use it to migrate to a large web environment, which at the moment is a windows desktop application system.
Right now I'm testing with access to a MySQL database showing data in a ABMtable and works well.
Now I have an error when I try to run the JAR file (generated when running the application in Release mode):

'Error: A JNI error has occurreed, please chek your installation and try again"

Additionally, the JAR file generated just have 47 KB, so I think it does not contain server components internally.

I would appreciate your valuable assistance to solve this error and continue my testing and development.

Best regards.



Well-Known Member
Licensed User
Right now I'm testing with access to a MySQL database showing data in a ABMtable and works well.
Would it be possible to provide a code snip-it of how you accomplished this? I am curious how you populate rows and cells with database table records.



Well-Known Member
Licensed User

The link above shows the Alain's demo running on my VPS located in Dallas, Texas, USA.

Try it out!

It is a Linux Ubuntu 12.04 LTS VPS. Just one of my test servers provided by WeLoveServers (19 bucks per year).

I installed the Demo.jar in the var directory (after much experimenting and updating java to 1.8).

When I ran it ( nohup java -jar Demo.jar ), it created the folders in the www dir with all files required - except for the /images folder (which was empty).
I copied the images to the folder and everything seems to work as expected...

It is working great on my tablet (Samsung Active 8.0) and desktop (Win 8.1) - both Chrome Browser with much the same performance as my localhost!

I think now I can relax because I have found a framework where (we) can create a stable and functional backend without all the extreme learning curve involved with website technologies. Sure, there will be some hoops, where we need to inject some JavaScript, php and such, but far less than what I have already dealt with (I expect).

Thanks alwaysbusy, I have sent a small donation... My next shall be larger as your wonderful project progresses.

Mike "Harris" Whetmore


Licensed User
Hi all,

Sorry for my absence the last few days, but I was in the hospital having some gallstones removed. They were killing me :-(
So I'm little short of a week behind on my release schedule.

I will carefully go through the last posts and see what can be done. I'm very happy some of you are willing to take over some of the work by creating little demo apps to help each other out.

First thing on the agenda is getting v1.02 out to the public. It has a great deal of fixes for little problems and makes it easier to design the 'grid'. Expect this later today.

Next, I'll try to finish up the next beta for the donators with the ABMCalendar and the ABMSocialOauth control. Check your mail in the next few days.

I'm aware some of the controls lack some functionality but I'm afraid it is part of the deal. It is not that easy to find a good balance between 'easy to use' and 'extended functionality'. But it will grow in time. First versions of B4A were alo missing some things. I love billyrudis example on 'adding' a new chart control. Maybe some amongst you could share more of these 'extra controls'?

Cheers and happy programming!

Bladimir Carrillo

Licensed User
Hi all,
Sorry for my absence the last few days, but I was in the hospital having some gallstones removed. They were killing me :-(
Hi Alain,
I'm glad you're safe from your gallstones and I hope you recover soon.

I'm trying to handle a data table (ABMTable) and have trouble when updating content has been edited or deleted records from the database.
Is there any way to remove data from the table (ABMTable) to load and view the updated data?
Now only the data it is updated when I stop and run the application again.
These days I will make my donation. Your work is very important to me.

Best regards