B4J Library [ABMaterial] Framework for WebApps

TIP: For absolute beginners with ABM, Get started with the Mini Template
TIP: Get started with 'ABMaterial For Dummies' by Harris here! (lessons)
My mini course on Youtube by MichalK73

ABMaterial is a framework combining a tuned Materialize CSS with the free programming tool B4J. It allows creating WebApps that not only look great thanks to Googles Material Design, but can be programmed with the powerful free tool from Anywhere Software without any knowledge of HTML, CSS or Javascript.


ABMaterial has over 45 themeable controls and some useful helpers.


  • ABMActionButton
  • ABMAudioPlayer (1.08)
  • ABMBadge
  • ABMButton
  • ABMCanvas
  • ABMCalendar
  • ABMCard
  • ABMChart (Plugin support 2.00)
  • ABMChat (2.50)
  • ABMCheckbox
  • ABMChronologyList (2.00)
  • ABMCombo
  • ABMCustomControl (1.05)
  • ABMChip
  • ABMCodeLabel
  • ABMDivider
  • ABMDateTimeScroller (1.06)
  • ABMDateTimePicker (1.06)
  • ABMEditor (1.07)
  • ABMFileInput (1.20+)
  • ABMGoogleMap
  • ABMLabel
  • ABMList
  • ABMImage
  • ABMImageSlider
  • ABMInputField
  • ABMRadioGroup
  • ABMPagination (1.04)
  • ABMPatternLock (1.20+)
  • ABMPDFViewer (1.08)
  • ABMPercentSlider (2.50)
  • ABMPlanner (2.50)
  • ABMPivotTable (1.08)
  • ABMRange (1.05)
  • ABMSignaturePad
  • ABMTimeLine (1.10, depreciated in 4.00)
  • ABMSlider (1.05)
  • ABMSmartWizard (3.00)
  • ABMSocialShare (1.07)
  • ABMSocialOAuth
  • ABMSVGSurface (1.20+)
  • ABMSwitch
  • ABMTabs
  • ABMTreeTable (1.04)
  • ABMUpload
  • ABMVideo

  • ABMContainer
  • ABMFlexWall (1.10)
  • ABMGenerator (1.07)
  • ABMModalSheet
  • ABMNavigationBar
  • ABMPage
  • ABMParallax
  • ABMSideBar (2.00)
  • ABMTable
  • ABMTableMutable (1.20+)
  • Firebase Auth (1.20+)
  • Firebase Storage (1.20+)
  • Configurable App and Content folders (2.00)
  • Lorem Ipsum Generator (2.00)
  • Grid Builder (2.00+)
The Grid Builder:
With the Grid Builder you can build the responsive framework very easy. This has been the most difficult part for beginners to understand. But now with the builder, you have no reason to not use ABMaterial :)


Included is a extensive Demo application demonstrating a lot of the functionality of ABMaterial. In itself, the app is also some kind of tutorial. I suggest you start the app in B4J, open your browser and go to http://localhost:51042/demo. You can browse the objects and test them out, but when you want to start to program I suggest you start at 'Getting Started' and follow the guidelines through the chapters suggested at the end of each page.

There is also an online demo at http://abmaterial.com
Alternative url: http://prd.one-two.com:51042/demo/

Don't forget: Everyone (not only donators!) can use the feedback app:

NEW: You can now support BANano and ABMaterial here too: https://www.patreon.com/alwaysbusy

This means it is free to use, but consider this: it took me already thousands of hours to program ABMaterial, all done in my free time early in the morning and deep into the night. Not only will a donation push me to continue developing ABMaterial , remember, you'll get a warm and fuzzy feeling doing it!

Donators get the latest versions in their mailbox a couple of weeks before the public, and an extra goodie now and then...

Current extra goodies:


IMPORTANT NOTE: MyMaterial.Show / ABMaterial.Show/ Pen&Paper / MashPlugins is in no way affiliated with the ABMaterial library and I will not give support for it nor for what it generates as it has violates the ABM LICENSE AGREEMENT.

Read this if you are planning to use any of the above mentioned tools:

Download the latest version (4.51):
ABMaterial is to big to upload to the forum, so you can get it via dropbox. Included is a README 4.51.TXT files. IMPORTANT INFO on this release is in there so read carefully!

Note: You'll also need the PDFJet library from the B4X Forum and jServer 2.75+.

IMPORTANT: If you use B4J 5.80+ you have to make this change: https://www.b4x.com/android/forum/threads/abmaterial-important-change-for-b4j-5-80.81595/

Just unzip the file and you'll find several folders: Demos, Library, Template. Start the demo and all the rest is explained in the Getting Started section.

I hope you enjoy it as much as I did creating it and I look forward to see the killer apps you will make with ABMaterial!

Also consider BANano if you are planning to write Websites/Apps in B4J!

Alain Bailleul
Alwaysbusy's Corner
Last edited:

Roberto P.

Well-Known Member
Licensed User
hello big Alain
congratulations for your commitment and good work done. I think it's good and it will have good results. They'll certainly good results.

I managed to run the demo but not "template.
What's wrong?

Thank you


  • Schermata 2015-11-05 alle 23.32.53.png
    Schermata 2015-11-05 alle 23.32.53.png
    215.9 KB · Views: 1,767


Well-Known Member
Licensed User
Awesome work Alain !!

One question (I don't know if is a configuration problem of my PC or Jetty); when I run the demo with B4j, and open the page on localhost, the result is not found
Problem accessing /demo/AboutPage. Reason:

Not Found

Powered by Jetty://

It can't find index.html and I must manually complete the link with index.html to display the page correctly. Any clue about it ?

Roberto P.

Well-Known Member
Licensed User
Hi Alain,
I understand. I'll try to do a little app.
thank you

P.S. do you think you manage to put the control calendar?


Well-Known Member
Licensed User
Tried with Internet Explorer 11, firefox and Chrome with no luck (windows 8.1) :confused:

2015-11-06 00:18:56.243:INFO::main: Logging initialized @12016ms
2015-11-06 00:18:58.207:INFO:oejs.Server:main: jetty-9.1.z-SNAPSHOT
2015-11-06 00:18:58.400:WARN:oejh.MimeTypes:main: java.util.MissingResourceException: Can't find bundle for base name org/eclipse/jetty/http/encoding, locale es_ES
2015-11-06 00:18:59.984:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@9629756{/,file:/C:/Users/I%C3%B1aki/Desktop/Programacion/b4j/ABmaterial/Demo/Objects/www/,AVAILABLE}
2015-11-06 00:19:00.296:INFO:oejs.AbstractNCSARequestLog:main: Opened C:\Users\Iñaki\Desktop\Programacion\b4j\ABmaterial\Demo\Objects\logs\b4j-2015_11_05.request.log
2015-11-06 00:19:07.275:INFO:oejs.ServerConnector:main: Started ServerConnector@5702b3b1{HTTP/1.1}{}
2015-11-06 00:19:07.276:INFO:oejs.Server:main: Started @23204ms
java.lang.RuntimeException: org.eclipse.jetty.websocket.api.WebSocketException: RemoteEndpoint unavailable, current state [CLOSED], expecting [OPEN or CONNECTED]
    at anywheresoftware.b4j.object.WebSocket.setEvents(WebSocket.java:378)
    at anywheresoftware.b4j.object.WebSocketModule$Adapter$ThreadHandler.run(WebSocketModule.java:190)
    at java.util.concurrent.Executors$RunnableAdapter.call(Executors.java:511)
    at java.util.concurrent.FutureTask.run(FutureTask.java:266)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
    at java.lang.Thread.run(Thread.java:745)
Caused by: org.eclipse.jetty.websocket.api.WebSocketException: RemoteEndpoint unavailable, current state [CLOSED], expecting [OPEN or CONNECTED]
    at org.eclipse.jetty.websocket.common.WebSocketSession.getRemote(WebSocketSession.java:245)
    at anywheresoftware.b4j.object.WebSocket.sendText(WebSocket.java:107)
    at anywheresoftware.b4j.object.WebSocket.setEvents(WebSocket.java:375)
    ... 6 more

The last "Connected" Log state is when I attach manually "index.html" to the URL
(I can't go to another page)
Last edited:


Licensed User
@inakigarm Can you try it when you replace the following code in b4j_ws.js (demo/objects/www/js/) around line 80:

b4j_ws = new ReconnectingWebSocket(fullpath, null, {reconnectDecay: 1});

with this code:

b4j_ws = new ReconnectingWebSocket(fullpath, null, {debug: true, reconnectInterval: 3000,reconnectDecay: 1});

Maybe I'm trying to reconnect to fast.

Maybe try it in Chrome and press F12 to open up the Console. There should be some debug lines in it looking like this:

ReconnectingWebSocket attempt-connect ws://localhost:51042/ws/demo/AboutPage
ReconnectingWebSocket onopen ws://localhost:51042/ws/demo/AboutPage
ReconnectingWebSocket onmessage ws://localhost:51042/ws/demo/AboutPage {"data":[],"etype":"setAutomaticEvents"}

[EDIT] I just noticed you unzipped the file directly onto your desktop. Can you try to unzip it in your file explorer somwhere else on your drive? Maybe some user rights are the cause it cannot find index.html?
Last edited:


Licensed User
@Roberto P.
do you think you manage to put the control calendar?
The next controls I want to write would be ABMDatePicker and ABMTimePicker.

If you know of a nice existing calendar control out there, I can look if I can make an ABMaterial control out of it.

The existing control should meet two conditions:
1. It must be free
2. It should have a modern Google Material Design look-and-feel so it fits into the existing framework.
Last edited:

Roberto P.

Well-Known Member
Licensed User
great for the two controls date \ time.

There are two controls that can not fail to create applications: grid and calendar, google calendar type that should be made with the right technology materials


Active Member
Licensed User
@Roberto P.
The next controls I want to write would be ABMDatePicker and ABMTimePicker.

If you know of a nice existing calendar control out there, I can look if I can make an ABMaterial control out of it.

The existing control should meet two conditions:
1. It must be free
2. It should have a modern Google Material Design look-and-feel so it fits into the existing framework.

Maybe this one will fit: http://fullcalendar.io/


Well-Known Member
Licensed User
Solved !!

I've searched about default page of jetty server, about configuring static parameters about jetty server, copying to another Pc folder under my User folder and nothing...

At last, I've thought if my user name folder (my name has an n with tilde character on it) could be the reason
Description Character Code

Small N with tilde ñ ñ

And gotcha !! that was !!

It seems that jetty server (suppose) doesn't like utf-8/ISO characters in paths folders; I moved the folder to a "normal character writable folder"


Licensed User
@inakigarm Glad you found it! I had my suspicion that was the problem. That was why I added the [edit] to my post but I should've explained why it liked you to test it in a different folder. It was this line in your log that did ring a bell:

2015-11-06 00:18:59.984:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@9629756{/,file:/C:/Users/I%C3%B1aki/Desktop/Programacion/b4j/ABmaterial/Demo/Objects/www/,AVAILABLE}

I really did not like 'I%C3%B1aki' in that line.


Licensed User
can any of you GURUS explain how I can run the demo without actually uploading it to a webserver?

[EDIT] Do like Nirvana.... NEVER MIND!
Last edited:


Licensed User
Just tried the AMAZING demo that comes with your framework.

Just two small points... Apart some very minor spelling mistakes, like "to" when "too" was meant, or "tow" instead of "two"...
The name Slider Control had me believe it was just that... a slider, like the custom Eric slider thingy... I would consider changing it to something more "Slide Show" related, like "ImageSlider"...
The Navigation Bar, if the Active item (I was on the controls navigation) is in the "must scroll to see it" region, then at each item in that area you have to scroll the nav bar to be able to select another control... Is there a way to make the active selected item to stay in the "visible" area of the page?