B4J Library [ABMaterial] Framework for WebApps

Discussion in 'B4J Libraries & Classes' started by alwaysbusy, Nov 5, 2015.

  1. alwaysbusy

    alwaysbusy Expert Licensed User

    TIP: Get started with 'ABMaterial For Dummies' by Harris here! (lessons)

    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:


    Just mail me at alain.bailleul@pandora.be for your login and password.

    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!

    Current extra goodies:


    Download the latest public version (4.30):
    ABMaterial is to big to upload to the forum, so you can get it via dropbox. Included is a README 4.30.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!

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

    Alain Bailleul
    Alwaysbusy's Corner
    Last edited: Jan 20, 2019
  2. Roberto P.

    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

    Attached Files:

  3. inakigarm

    inakigarm 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
    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 ?
  4. alwaysbusy

    alwaysbusy Expert Licensed User

    @Roberto P. That is normal what you see as template is a completely empty project ready to make your own apps. In the demo app this is described in the getting started section.

    @inakigarm what is the browser you are using? When seeing the aboutpage, can you use the navigation bar and go to another page?
  5. Roberto P.

    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?
  6. Enrique Gonzalez R

    Enrique Gonzalez R Well-Known Member Licensed User

    Ey Alain.

    I just make my small (=( sorry) Donation! thanks so much for this amazing work!
    alwaysbusy likes this.
  7. inakigarm

    inakigarm 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: Nov 5, 2015
  8. alwaysbusy

    alwaysbusy Expert 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:
    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: Nov 6, 2015
    joulongleu likes this.
  9. alwaysbusy

    alwaysbusy Expert 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.
    Last edited: Nov 6, 2015
    joulongleu and DonManfred like this.
  10. Roberto P.

    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
    joulongleu likes this.
  11. woniol

    woniol Active Member Licensed User

    Maybe this one will fit: http://fullcalendar.io/
    Harris and alwaysbusy like this.
  12. inakigarm

    inakigarm 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"
    alwaysbusy likes this.
  13. alwaysbusy

    alwaysbusy Expert 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.
    inakigarm likes this.
  14. Roberto P.

    Roberto P. Well-Known Member Licensed User

    exactly is he.It would be great to add to the framework.
  15. narek adonts

    narek adonts Well-Known Member Licensed User

    getting error

    java.lang.UnsupportedClassVersionError: com/ab/abmaterial/ABMComponent : Unsupported major.minor version 52.0
  16. johndb

    johndb Active Member Licensed User

    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 :)
  17. Cableguy

    Cableguy Expert 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: Nov 6, 2015
    alwaysbusy likes this.
  18. alwaysbusy

    alwaysbusy Expert Licensed User

    You cannot upload it to a normal webserver. Press run in b4a (you're starting the server). Then open your browser and go to http://localhost:51042/demo. Remember, b4j does not create websites. It creates webapps.
    Peter Simpson likes this.
  19. Cableguy

    Cableguy Expert Licensed 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?
    Peter Simpson and Erel like this.
  20. Cableguy

    Cableguy Expert Licensed User

    I guess someone will eventually create a tutorial on how to deploy the ABM created webapps on a Raspi!
    Peter Simpson, johndb and alwaysbusy like this.
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice