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.

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

There is an online demo http://prd.one-two.com:51042/demo/

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

ABMaterial is DonationWare.

Click here if you like to donate

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 (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

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.

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

Additional Resources:

ABMGridBuilder (with source code): https://github.com/RealAlwaysbusy/A...nload/v4.00-ABMGridBuilder/ABMGridBuilder.zip

Demo source code (for v4.51, not yet updated for 5.15, 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

 

[cimperia]

I did some work on this. Have a look at this thread and this one , and if you like what you read, maybe we can talk more about it.

 

[alwaysbusy]

@cimperia Thank you! I'm certainly are going to take a look at this.

Question: If I was able to generate an xml file in your fileformat, could your tool be used to translate it and then re-use the translations in B4J?

 

[alwaysbusy]

Note for donators: A mail has been send about ABMaterial 1.08b Maintenance Release. I'm having some trouble sending bulk mail, so let me know if you did not receive this mail.

Greetz

 

[little3399]

@alwaysbusy Maybe I had not receive this mail ?

 

[amminf]

Alain,

Awesome framework !

I'll try

Congratulations

 

[amminf]

Hi Alain,

Is it possible to change color text in slider.AddSlideImage object ?

Image back is white like a text in slider.AddSlideImage.

Regards

 

[alwaysbusy]

You can create an image slider theme, but this goes for the whole slider, not on a per/image base.

 

[billyrudi]

Hi i have a blank screen in demo... see picture
can you help me?

Attached Files:

 

[alwaysbusy]

It looks like you are not using the latest css/javascript files because you're missing libs. Make sure to refresh (F5 too)

 

[billyrudi]

Alain, i have replaced all js in the folder many time and maked f5 but with no results!!!
09:27:10.225 TypeError: e.pivotUtilities is undefined
<anonimo> export_renderers.min.js:1
e() export_renderers.min.js:1
<anonimo> export_renderers.min.js:1
<anonimo> export_renderers.min.js:1
1 export_renderers.min.js:1:236

09:27:10.233 TypeError: $.pivotUtilities is undefined
<anonimo> pivotpivot.html:1
m.Callbacks/j() jquery-1.11.2.min.js:2
m.Callbacks/k.fireWith() jquery-1.11.2.min.js:2
.ready() jquery-1.11.2.min.js:2
J() jquery-1.11.2.min.js:2
1 pivotpivot.html:1:18

 

[Harris]

Alain, i have replaced all js in the folder many time and maked f5 but with no results!!!
09:27:10.225 TypeError: e.pivotUtilities is undefined
<anonimo> export_renderers.min.js:1
e() export_renderers.min.js:1
<anonimo> export_renderers.min.js:1
<anonimo> export_renderers.min.js:1
1 export_renderers.min.js:1:236

09:27:10.233 TypeError: $.pivotUtilities is undefined
<anonimo> pivotpivot.html:1
m.Callbacks/j() jquery-1.11.2.min.js:2
m.Callbacks/k.fireWith() jquery-1.11.2.min.js:2
.ready() jquery-1.11.2.min.js:2
J() jquery-1.11.2.min.js:2
1 pivotpivot.html:1:18

The files you need are under Library\www folder from your 1.08 release....

Look in your current js... Do you see any min files in there? You won't unless you take them from the path defined above.
Several of us had the same issue and posted our findings previously.

Thanks

 

[alwaysbusy]

It still looks like you are missing css, js files etc...

Since 1.08, I had to split up the download as it became to big (lots of repeated files). So I'm wondering if you did all the steps to reconstruct it.

1. Download: http://gorgeousapps.com/20160401w1335.zip
2. Download Demo Assets: http://gorgeousapps.com/DemoAssets.zip
3. After downloading, unzip them and copy all folders for (2) to the www folder of Demo (1) (overwriting the existing empty ones).
4. Copy the library files to your b4j library folder
5. Copy the www folder to your project www folder and overwrite the files (do it also in the Demo, ABMFeedback, Folders and Template folder)

So in the end, the demo \www folder should look something like this (there may be more files, but just to give the idea):

\Demo\Objects\www\fonts\...
\Demo\Objects\www\demo\...
\Demo\Objects\www\demo\CompPivotTablePage\abmaterial-pivottable.html
\Demo\Objects\www\demo\CompPivotTablePage\CompPivotTablePage.css
\Demo\Objects\www\demo\CompPivotTablePage\CompPivotTablePage.js
\Demo\Objects\www\demo\CompPivotTablePage\donotdelete.conn
\Demo\Objects\www\demo\CompPivotTablePage\pivotpivot.html
\Demo\Objects\www\demo\pivots\Pivot.csv
\Demo\Objects\www\css\abmmenu.min.css
\Demo\Objects\www\css\abmmenutest.min.css
\Demo\Objects\www\css\abmpivot.min.css
\Demo\Objects\www\css\APlayer.min.css
\Demo\Objects\www\css\bootstrap-material-datetimepicker.min.css
\Demo\Objects\www\css\chartist.min.css
\Demo\Objects\www\css\font-awesome.min.css
\Demo\Objects\www\css\fullcalendar.min.css
\Demo\Objects\www\css\jquery.treetable.min.css
\Demo\Objects\www\css\materialize.min.css
\Demo\Objects\www\css\mobiscroll.min.css
\Demo\Objects\www\css\nouislider.min.css
\Demo\Objects\www\css\pivot.min.css
\Demo\Objects\www\css\Squire-UI.min.css
\Demo\Objects\www\css\zocial.min.css
\Demo\Objects\www\css\custom\...
\Demo\Objects\www\js\abmcanvas.min.js
\Demo\Objects\www\js\abmpivot.min.js
\Demo\Objects\www\js\APlayer.min.js
\Demo\Objects\www\js\b4j_ws.min.js
\Demo\Objects\www\js\bootstrap-material-datetimepicker.min.js
\Demo\Objects\www\js\chartist.min.js
\Demo\Objects\www\js\cookies.min.js
\Demo\Objects\www\js\export_renderers.min.js
\Demo\Objects\www\js\fullcalendar.min.js
\Demo\Objects\www\js\gcal.min.js
\Demo\Objects\www\js\gmaps.min.js
\Demo\Objects\www\js\hello.all.min.js
\Demo\Objects\www\js\html2canvas.min.js
\Demo\Objects\www\js\jquery-1.11.2.min.js
\Demo\Objects\www\js\jquery-ui.custom.min.js
\Demo\Objects\www\js\jquery-ui.min.js
\Demo\Objects\www\js\jquery-ui.tree.min.js
\Demo\Objects\www\js\jquery.ABMTableScroll.min.js
\Demo\Objects\www\js\jquery.csv.min.js
\Demo\Objects\www\js\jquery.fileupload.min.js
\Demo\Objects\www\js\jquery.iframe-transport.min.js
\Demo\Objects\www\js\jquery.injectCSS.min.js
\Demo\Objects\www\js\jquery.inputmask.bundle.min.js
\Demo\Objects\www\js\jquery.knob.min.js
\Demo\Objects\www\js\jquery.scrollIntoView.min.js
\Demo\Objects\www\js\jquery.stylesheet-animate.min.js
\Demo\Objects\www\js\jquery.stylesheet.min.js
\Demo\Objects\www\js\jquery.transit.min.js
\Demo\Objects\www\js\jquery.treetable.min.js
\Demo\Objects\www\js\jquery.ui.touch-punch.min.js
\Demo\Objects\www\js\jquery.ui.widget.min.js
\Demo\Objects\www\js\jspdf.min.js
\Demo\Objects\www\js\jssocials.min.js
\Demo\Objects\www\js\materialize.min.js
\Demo\Objects\www\js\mobiscroll.min.js
\Demo\Objects\www\js\moment-with-locales.min.js
\Demo\Objects\www\js\nouislider.min.js
\Demo\Objects\www\js\pivot.es.min.js
\Demo\Objects\www\js\pivot.fr.min.js
\Demo\Objects\www\js\pivot.min.js
\Demo\Objects\www\js\pivot.nl.min.js
\Demo\Objects\www\js\pivot.pt.min.js
\Demo\Objects\www\js\pivot.ru.min.js
\Demo\Objects\www\js\pivot.tr.min.js
\Demo\Objects\www\js\platform.min.js
\Demo\Objects\www\js\reconnecting-websocket.min.js
\Demo\Objects\www\js\signature_pad.min.js
\Demo\Objects\www\js\sorttable.min.js
\Demo\Objects\www\js\Squire-UI.min.js
\Demo\Objects\www\js\squire.min.js
\Demo\Objects\www\js\tips_data.min.js
\Demo\Objects\www\js\custom\nouislider.min.js
\Demo\Objects\www\js\custom\compatibility.js
\Demo\Objects\www\js\custom\debugger.js
\Demo\Objects\www\js\custom\l10n.js
\Demo\Objects\www\js\custom\viewer.css
\Demo\Objects\www\js\custom\viewer.html
\Demo\Objects\www\js\custom\viewer.js
\Demo\Objects\www\js\custom\viewer.min.css
\Demo\Objects\www\js\custom\viewer.min.js
\Demo\Objects\www\js\web\cmaps\...
\Demo\Objects\www\js\web\images\...
\Demo\Objects\www\js\web\locale\...

Maybe just create an empty folder, redo all these steps and see if you get the above structure.

 

[Harris]

4. Copy the library files to your b4j library folder
5. Copy the www folder to your project www folder and overwrite the files (do it also in the Demo, ABMFeedback, Folders and Template folder)

What is missing from the above statement is:
5. Copy the www folder (FOUND IN THE LIBRARY FOLDER - (Library\www\ (js, fonts, css) - the current 1.08 version)....

There are many other www folders in the package which are NOT 1.08 and tends to confuse (many of) us.

Thanks

 

[LWGShane]

@alwaysbusy - Please use another download service. Your previous choice was much faster than the current one.

 

[alwaysbusy]

@Cableguy, what do you mean? It's the same (www.gorgeousapps.com)

 

[LWGShane]

@Cableguy, what do you mean? It's the same (www.gorgeousapps.com)

It is? For some reason it's really slow now.

 

[alwaysbusy]

It is? For some reason it's really slow now.

Do you mean the download of the zips? or de demo app? or the feedback app? The feedback app is on my personal 'mediacenter' pc, doing a lot of stuff (probably to much now even hosting my 'game' bot). The downloads are on the same server (gorgeousapps.com, from one.com) and the prd.one-two.com:51042/demo is a professional (expensive) one and should be fast. At least here in Belgium it flies, as it is directly on the 'backbone'.

 

[LWGShane]

Do you mean the download of the zips?

Yeah, downloading of the zips. Everything else runs fine. Maybe use Dropbox as a secondary option?

 

[alwaysbusy]

@ColdBlueLava Thanks for letting me know. I'll see what I can do.

 

[alwaysbusy]

ABMaterial public release 1.08 can now be downloaded from the first post!

Donators know what's coming next in a few hours: version 1.10! (1.09 has been skipped as a number, see more in the mail)