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
Click to expand...

ABMaterial is DonationWare.

Click here if you like to donate
Click to expand...

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.15 - for jServer 4.00 (open source, library only):

ALWAYS TAKE A BACKUP BEFORE USING A NEW VERSION!

ABMaterial 5.15 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.

Github (source + binary release 5.14): https://github.com/RealAlwaysbusy/ABMaterial-Source-jServer4.00
Click to expand...

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

1. Download https://github.com/RealAlwaysbusy/A...eleases/download/v5.15/ABMaterial5.15-bin.zip
2. Download https://github.com/RealAlwaysbusy/A...r4.00/releases/download/v5.15-www/www5.15.zip
3. Unzip ABMaterial5.14-bin.zip and copy all .xml and .jar files to you B4J Libraries folder
4. Unzip www5.14.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.
Click to expand...

ALTERNATIVE DOWNLOAD: Download the ABMMini project where everything is included (Library, www and a Template project):

[ABMaterial/ABMServer] Mini Template for absolute beginners (update 2024/05/17)

Hi all, Since the lockdown everywhere, a lot of B4X users seem to want to learn ABM to make WebApps in B4J. That is great! :) However, some seem to struggle a lot to get started. I understand, as even opening up the template can be quite overwhelming with those Cache, Root, Page etc classes...
www.b4x.com www.b4x.com

Additional Resources:

ABMGridBuilder (with source code): https://github.com/RealAlwaysbusy/A...nload/v4.00-ABMGridBuilder/ABMGridBuilder.zip
Click to expand...
Demo source code (for v4.51, not yet updated for 5.15, but still usefull to learn ABM): https://gorgeousapps.com/ABMExtras4.51.zip
Click to expand...

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!
Click to expand...

Alain Bailleul
Alwaysbusy's Corner
 
Last edited:
Click to expand...
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
@Cableguy Yes. The next update will have a property on the page 'ShowGridInfo=true' to show the grid. Even more, it will help you to code the component in the right cell giving you an indication in the cell top left corner.

Note: Because of the many questions/suggestions I can hardly follow, from now on only stable versions will be released on the first page. However, donators will receive an email with a download link to my betas so they can start playing with the new features/components and bug fixes a lot earlier.

gridinfo.png
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Can't wait to check my inbox
 
Gabino A. de la Gala

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User
Hello!!! First of all, congratulations for your great job!!!

I've found a anomalus behaviour in the new login form. Only appears the first time I access each time I restart the server.

This problem only appears using Chrome. Explorer and Firefox works fine always.
 
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
@Gabino A. de la Gala I see what you mean. Unforunately this is not something I can do about it I'm afraid. Chrome does not seem to lose the WebSocket connection fast enough (if you check the taskmanager, there are always a lot of chrome apps running, so maybe this has something to do with it). You could alsways make a 'logoff' button in the app. In the button code, just set

B4X: 
ws.Session.SetAttribute("IsAuthorized", "")
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Taking the firsts steps in your framework, I took the time to print out all the code modules in the demo, and the start tips of the webapp.
Just followed them and my folder tree is created as described, but I'm getting a few weird logs, and nothing shows up in the browser but an occasional "404" or a "Not Connected" message...

here's my log:
B4X: 
Program started.
java.lang.NullPointerException
 at com.ab.abmaterial.ABMPage.WritePageToDisk(Unknown Source)
 at com.ab.abmaterial.ABMaterial.WritePageToDisk(Unknown Source)
 at com.ab.abmaterial.ABMaterial.WriteAppLauchPageToDisk(Unknown Source)
 at net.lusufibra.abmapplication._startserver(abmapplication.java:103)
 at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
 at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
 at java.lang.reflect.Method.invoke(Method.java:497)
 at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:593)
 at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:225)
 at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:158)
 at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
 at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
 at java.lang.reflect.Method.invoke(Method.java:497)
 at anywheresoftware.b4a.BA.raiseEvent2(BA.java:93)
 at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:90)
 at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
 at net.lusufibra.main.main(main.java:29)
java.lang.NullPointerException
 at com.ab.abmaterial.ABMPage.WritePageToDisk(Unknown Source)
 at com.ab.abmaterial.ABMaterial.WritePageToDisk(Unknown Source)
 at com.ab.abmaterial.ABMaterial.WriteAppLauchPageToDisk(Unknown Source)
 at net.lusufibra.abmapplication._startserver(abmapplication.java:103)
 at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
 at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
 at java.lang.reflect.Method.invoke(Method.java:497)
 at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:593)
 at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:225)
 at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:158)
 at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
 at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
 at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
 at java.lang.reflect.Method.invoke(Method.java:497)
 at anywheresoftware.b4a.BA.raiseEvent2(BA.java:93)
 at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:90)
 at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
 at net.lusufibra.main.main(main.java:29)
2015-11-10 19:40:01.328:INFO::main: Logging initialized @1347ms
2015-11-10 19:40:01.522:INFO:oejs.Server:main: jetty-9.1.z-SNAPSHOT
2015-11-10 19:40:01.574:WARN:oejh.MimeTypes:main: java.util.MissingResourceException: Can't find bundle for base name org/eclipse/jetty/http/encoding, locale en_GB
2015-11-10 19:40:01.640:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@babb1{/,file:/D:/B4X/ABMaterialBeta0.99/LusoFibra/Objects/www/,AVAILABLE}
2015-11-10 19:40:01.646:INFO:oejs.AbstractNCSARequestLog:main: Opened D:\B4X\ABMaterialBeta0.99\LusoFibra\Objects\logs\b4j-2015_11_10.request.log
2015-11-10 19:40:01.792:INFO:oejs.ServerConnector:main: Started ServerConnector@1b6d4ae{HTTP/1.1}{0.0.0.0:51042}
2015-11-10 19:40:01.793:INFO:oejs.Server:main: Started @1880ms
Emulated network latency: 100ms

am I missing something?
 
Gabino A. de la Gala

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User
alwaysbusy said:
@Gabino A. de la Gala I see what you mean. Unforunately this is not something I can do about it I'm afraid. Chrome does not seem to lose the WebSocket connection fast enough (if you check the taskmanager, there are always a lot of chrome apps running, so maybe this has something to do with it). You could alsways make a 'logoff' button in the app. In the button code, just set

B4X: 
ws.Session.SetAttribute("IsAuthorized", "")
Click to expand...

I think I found a "relative solution"... Uncheck the option "execute applications in background with Google Chrome is close". In configuration/system
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Yes I did, and did all the Nx stuff...

I will try to Franken the demo until it breaks, lol
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Frankening is way too laborious...

Could your template be executable right out of the box? Like 1 empty page with 1 navbar item?
 
Last edited:
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
@Cableguy Damn last minute changes :confused:. Just add the line BuildPage to the ABMApplication Initialize method so it looks like:

B4X: 
Public Sub Initialize
    Pages.Initialize  
    PageNeedsUpload.Initialize
    ' add your icons
    ' ABM.AddAppleTouchIcon("", "")
    ' ABM.AddMSTileIcon("", "")
    ' ABM.AddFavorityIcon("", "")  
    ' build the local structure IMPORTANT!
    BuildPage
End Sub

Note: I see in the template folder i've also messed up where I've put the .js files. Just to be sure you have the latest versions, move all the .js files from the /Template folder to the /Template/Objects/www/js/ folder.

Sorry for the mess, must've been the fatigue...

I make sure this is remedied in the next update. (I've also uploaded the corrected version on the first page)
 
Last edited:
Cableguy

Cableguy

Expert
Licensed User
Longtime User
@alwaysbusy ,

Hi Alan, the template is indeed corrected and after the first settings it compiles without any errors.
I now am having the same "unknown source" type of errors with the navbar.
here's my logs:
B4X: 
Program started.
java.lang.NullPointerException
    at com.ab.abmaterial.ABMNavigationBar.BuildBody(Unknown Source)
    at com.ab.abmaterial.ABMNavigationBar.Build(Unknown Source)
    at com.ab.abmaterial.ABMPage.WritePageToDisk(Unknown Source)
    at com.ab.abmaterial.ABMaterial.WritePageToDisk(Unknown Source)
    at LusoFibra.net.abmapplication._addpage(abmapplication.java:85)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:497)
    at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:593)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:225)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:158)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:497)
    at anywheresoftware.b4a.BA.raiseEvent2(BA.java:93)
    at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:90)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
    at LusoFibra.net.main.main(main.java:29)
2015-11-11 10:36:08.695:INFO::main: Logging initialized @903ms
2015-11-11 10:36:08.903:INFO:oejs.Server:main: jetty-9.1.z-SNAPSHOT
2015-11-11 10:36:08.950:WARN:oejh.MimeTypes:main: java.util.MissingResourceException: Can't find bundle for base name org/eclipse/jetty/http/encoding, locale en_GB
2015-11-11 10:36:09.013:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@1bbe5e8{/,file:/D:/B4X/ABMaterialBeta0.99/LusoFibra/Objects/www/,AVAILABLE}
2015-11-11 10:36:09.019:INFO:oejs.AbstractNCSARequestLog:main: Opened D:\B4X\ABMaterialBeta0.99\LusoFibra\Objects\logs\b4j-2015_11_11.request.log
2015-11-11 10:36:09.156:INFO:oejs.ServerConnector:main: Started ServerConnector@61f5df{HTTP/1.1}{0.0.0.0:51042}
2015-11-11 10:36:09.157:INFO:oejs.Server:main: Started @1416ms
Emulated network latency: 100ms

[EDIT] browsing the demo, I see the SideNavBar being created in the shared module, so why do we have the navbar props/methods on the pagetemplate? where should a navbar be created?

[EDIT2] I managed to figure it out! at the end, its all a matter of logic!
 
Last edited:
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Hi Alain,

two questions:
Q1 - Is it possible to set a sidenavbar without the topbar?
Q2.1 - if Q1 is yes, what would be the best and easiest way to place a fixed header?
Q2.2 - if Q1 is NO, is it possible to change the bar height and to add a text overlay to it?
 
Last edited:
alwaysbusy

alwaysbusy

Expert
Licensed User
Longtime User
No, a sidebar cannot exist without a topbar. Reason is for mobile devices, where the sidebar disappears and the user can use the 'hamburger' icon in the topbar to open the side menu. If you do not use it on mobile devices, you may try to set the backcolor nd forecolor of the topbar transparent + set the top bar to floating. Not tested, and I do not advice this even if it works because it should be possible to open your app on a mobile device. Without a topbar, the menu cannot be opened on all devices.
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
Roberto P.

Roberto P.

Well-Known Member
Licensed User
Longtime User
hello congratulations for the improvements to the framework. At this point it would be interesting example that exchanges data between the controls and frameworks, and a database on the server.
Thank you
best regards
 
Cableguy

Cableguy

Expert
Licensed User
Longtime User
It's not wrong, just way to small to be considered as a Logo on its own... I can live with that
 
Roberto P.

Roberto P.

Well-Known Member
Licensed User
Longtime User
that version releases? I see that you can download the 0.99! That the donation amount?
 
You must log in or register to reply here.

Similar Threads

ivanomonti
  • Question
B4J Question ABMaterial Framework for WebApps
Replies
3
Views
874
MichalK73
MichalK73
alwaysbusy
  • Article
B4J Tutorial [ABMaterial/ABMServer] Mini Template for absolute beginners (update 2024/05/17)
2 3
Replies
46
Views
22K
alwaysbusy
alwaysbusy
Mashiane
  • Article
Share My Creation [ABMaterial] Project.Show
Replies
6
Views
3K
MathiasM
M
alwaysbusy
  • Article
B4J Library [ABMaterial] New in 2.00 preview
Replies
11
Views
3K
alwaysbusy
alwaysbusy
alwaysbusy
  • Article
B4J Tutorial [ABMaterial] New component ABMPDFViewer in 1.08
Replies
0
Views
3K
alwaysbusy
alwaysbusy
Top