B4J Library [Web][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)
TIP:
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.

ABMDragonfly4.00.png


ABMaterial has over 45 themeable controls and some useful helpers.

Components:

  • 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

Helpers:
  • ABMContainer
  • ABMFlexWall (1.10)
  • ABMGenerator (1.07)
  • ABMModalSheet
  • ABMNavigationBar
  • ABMPage
  • ABMParallax
  • ABMSideBar (2.00)
  • ABMTable
  • ABMTableMutable (1.20+)
Other:
  • 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 :)

gridbuilder1.png


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

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!

Download version 5.12 - for jServer 4.00 (open source, library only):

ALWAYS TAKE A BACKUP BEFORE USING A NEW VERSION!


ABMaterial 5.12 is now available on github and is open sourced :cool: (AS IS)! This version has been in heavy use (development and production) within our company for over a year now without major alterations, so I consider it very stable and ready to be open sourced.

I trust no one here will publish a clone or take credit for my work and I would consider it common courtesy if you find a bug/fix/new feature, you report back to me so I can make the same changes in the official library and everyone can benefit from it.


Note: next to downloading the library, you need also to download the accompanying www zip files from the same github (releases) containing the latest javascript/css/font files.

The procedure from Github for 5.12:

1. Download https://github.com/RealAlwaysbusy/A...eleases/download/v5.12/ABMaterial5.12-bin.zip
2. Download https://github.com/RealAlwaysbusy/A...r4.00/releases/download/v5.12-www/www5.12.zip
3. Unzip ABMaterial5.12-bin.zip and copy all .xml and .jar files to you B4J Libraries folder
4. Unzip www5.12.zip
5. In the projects you are working on (e.g. a for Dummies project) delete the following folders in \www
  • css
  • font
  • js
6. Copy from the unzipped www5.12.zip the 3 folder (css/font/js) to the \www folder where you just deleted these 3 folders.

Additional Resources:

Demo source code (for v4.51, not yet updated for 5.12, but still usefull to learn ABM): https://gorgeousapps.com/ABMExtras4.51.zip

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
Longtime 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
Roberto
 

Attachments

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

inakigarm

Well-Known Member
Licensed User
Longtime 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
HTTP ERROR: 404
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
Longtime 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?
 

inakigarm

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

B4X:
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}{0.0.0.0:51042}
2015-11-06 00:19:07.276:INFO:oejs.Server:main: Started @23204ms
Connected
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
Disconnected
Disconnected
Connected

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

alwaysbusy

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

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

with this code:

B4X:
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:

B4X:
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:

alwaysbusy

Expert
Licensed User
Longtime 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
Longtime 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
 

woniol

Active Member
Licensed User
Longtime 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/
 

inakigarm

Well-Known Member
Licensed User
Longtime 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"
 

alwaysbusy

Expert
Licensed User
Longtime 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:

B4X:
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.
 

johndb

Active Member
Licensed User
Longtime User
getting error

java.lang.UnsupportedClassVersionError: com/ab/abmaterial/ABMComponent : Unsupported major.minor version 52.0
I had the same problem at the start. Change your Java version in the path's configuration to: "C:\Program Files\Java\jdk1.8.0_51\bin\javac.exe". Assuming that you have that version installed as well.
Worked for me :)
 

Cableguy

Expert
Licensed User
Longtime 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:

Cableguy

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

Just AMAZING!!!
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?
 
Top