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

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

 

[LWGShane]

How jQuery Mobile Eats PhoneGap Performance
http://apachecordova.blogspot.com/2013/08/how-jquery-mobile-eats-phonegap-performance.html

?????

ABMaterial doesn't use PhoneGap. B4X doesn't use PhoneGap.

 

[alwaysbusy]

ABMaterial does use Javascript, does use jQuery and it don't think the scores are that bad. It is optimized in every possible way and scores much better that most other tools. It all comes down HOW you use a programming tool/language.

And please start a new post if you want to discuss Javascript etc in general. This post if for ABMaterial announcements.

Googles 'test my site' scores for the demo app (I don't think you can do much better than that):

 

[amminf]

Hi to all,

Yesterday technicians installed the VPS me. The webapp based on ABMaterial going very, very well, both in appearance and speed, both overall speed and handling local speed.

So I just wanted to congratulate and thank Alain for this fabulous framework called ABMaterial.

Best regards.

 

[amminf]

And too I just wanted to congratulate and thank Erel for B4J

Best regards

 

[Philip Chatzig.]

Hello Alain.

Congratulations for this great work.

I have downloaded the demo and have experienced one problem.

The demo runs fine, except the PivotTable page.

When I run the demo, the PivotTable page is loaded, the PivotTable is created (a white rectangle appears in its cell) but it remains blank (no data appear).
No error appears in the B4J log.

I have downloaded the Assets and also copied the www folder from the library folder to the demo folder (overwiting).
I also checked that I have created the folder/file structure shown in a previous post regarding Pivot problems.


Thanks in advance for any help.

 

[alwaysbusy]

@Philip Chatzig. Is there a file called 'Pivot.csv' in www/demo/pivots/ ?

Can you open it in Chrome, press F12 and go to the console. Press F5 to refresh and look if there are error messages you can give me a clue.

 

[Philip Chatzig.]

@Philip Chatzig. Is there a file called 'Pivot.csv' in www/demo/pivots/ ?

Can you open it in Chrome, press F12 and go to the console. Press F5 to refresh and look if there are error messages you can give me a clue.

Hello Alain.

Following your instructions, I noticed some errors in the Chrome console.

The browser could not find abmpivot.js and abmpivot.css in the js and css folder respectively.
I noticed that the files existing in those folders were abmpivot.min.js and abmpivot.min.css.
I renamed these 2 files (deleting .min) and the Pivot table is now working.

However, there are still some errors in the console, which do not seem to affect the Pivot table functionality.
They seem to relate to 2 missing js files.
Here they are:

abmaterial-pivottable.html:207 GET http://localhost:51042/js/jquery.stylesheet.min.js?14
abmaterial-pivottable.html:208 GET http://localhost:51042/js/jquery.stylesheet-animate.min.js?14
abmaterial-pivottable.html?14:207 GET http://localhost:51042/js/jquery.stylesheet.min.js?14
abmaterial-pivottable.html?14:208 GET http://localhost:51042/js/jquery.stylesheet-animate.min.js?14 404 (Not Found)

It did a computer-wide search for jquery.stylesheet files, but could not locate any.


Thank you for your help!

Philip.

 

[alwaysbusy]

You can ignore those errors. They are used in v1.10 where dynamic pages are supported. However, ABMaterial should always use the 'min' files so I'll check that out. (your renaming is ok, it will work, but it is for future reference. The 'min' files are the production files, the ones without 'min' are my develop files, not minified)

 

[fredo]

[ABMaterial] on Firebase Hosting possible?
Since a few weeks I'm busy to transfer my App- and Web-Development to the new "Material Design & Firebase-World" because it has a huge impact on the positive UI experiences for the user and a massive discharge for the cloud-related work of the developer.

Erels Firebase modules and the Firebase docs made it possible to implement the webside work within a few hours even if you are not experienced in the complicated and security-relevant sever universe.

For means of promotion I would like to benefit from the Firebase Hosting to present a static Landing Page for the App.

Even though I know that your wonderful ABMaterial is JAVA based and Firebase Hosting works on JAVASCRIPT ("Ham" and "Hamster") I would like to ask if it could be possible in the future to have a "ABMaterialJS"-Framework one day.​

@Erel BTW: what about a B4JS for the future? I would buy it.

 

[Mashiane]

I understand your JS to mean JavaScript? If so, remember there are a lot of javascript and or even jquery based mobile frameworks for developing apps. This will mean either for the UI, then Erel will have to perhaps use a single framework. One such development tool I have seen is here. You also write your code in basic and it gets converted to jquery and javascript and its based on JQuery Mobile though. With superior mobile frameworks available that use Angular etc, one then has a larger scope.

I also worked on a RAD JQuery Mobile based tool to develop CRUD apps which is available on the store here. Of course I need to add MySQL functionality to it.

#JustSaying

 

[alwaysbusy]

I would say there is very little chance this will happen. ABMaterial is using the Jetty server as a backbone and is not only for 'websites', but can also be used as an alternative UI for raspberry Pi, desktop apps etc. Because it uses B4J, it is also a lot more powerful than alternative frameworks.

As from 1.20 on, ABMaterial does support the Web Firebase API (the Auth and Storage services)

 

[Mashiane]

ABMaterial does use Javascript, does use jQuery and it don't think the scores are that bad. It is optimized in every possible way and scores much better that most other tools. It all comes down HOW you use a programming tool/language.

And please start a new post if you want to discuss Javascript etc in general. This post if for ABMaterial announcements.

Googles 'test my site' scores for the demo app (I don't think you can do much better than that):

Hi, which website did you use to get your Free Report? I'd like to test mine. Thanks

 

[Mashiane]

?????

ABMaterial doesn't use PhoneGap. B4X doesn't use PhoneGap.

Interesting..

 

[Mashiane]

I would say there is very little chance this will happen. ABMaterial is using the Jetty server as a backbone and is not only for 'websites', but can also be used as an alternative UI for raspberry Pi, desktop apps etc. Because it uses B4J, it is also a lot more powerful than alternative frameworks.

As from 1.20 on, ABMaterial does support the Web Firebase API (the Auth and Storage services)

What would be nice though is if the "output" could be compiled with PhoneGap into an universal app for iOS and Android. Has anyone ever tried that. I'm still trying to get the downloaded demo to work. Are you thinking of developing a user's guide perhaps?

 

[alwaysbusy]

https://developers.google.com/speed/pagespeed/insights/ is a good tool to check. But still, read the result carefully, as sometimes you get bad points for stuff google is responsible for themself or just misses (e.g. it does not always find the viewport tag).

Others I use to test ABMaterial and see where I can gain some extra ms:

https://tools.pingdom.com/
http://www.webpagetest.org/

 

[alwaysbusy]

@Mashiane Where are you stuck? To test the demo, run it in B4J (and keep it running!). Then surf to localhost:51042/demo. That's it.

 

[Harris]

@Mashiane Where are you stuck? To test the demo, run it in B4J (and keep it running!). Then surf to localhost:51042/demo. That's it.

I think he is stuck in PhoneGap...
I know a company that uses PhoneGap to develop... They have spent over 10 million $$ and it still doesn't work! Of course - they being fools doesn't help their effort much... Like someone once said to me: "We tried PhoneGap - it is full of Gaps"

Sorry AB to post such off-topic dribble here...

 

[alwaysbusy]

ABMaterial 1.12 for WebApps (Public Release) is now available at https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/
https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/
Read the included Readme file!

ABMaterial 1.20 will be available for donators shortly. (you will receive a mail).

 

[Swissmade]

Nice Job

 

[amminf]

Great all: release and demo update.

Congrats.