B4J Library [Web][ABMaterial] Framework for WebApps

alwaysbusy · Nov 5, 2015

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

alwaysbusy · Jun 15, 2020

@Indic Software ABM is a wrapper for Materialize CSS, no other CSS framework (Bootstrap has nothing to do with ABM). If you want to use that, I wrote the BANano library, where you can use ANY css/javascript framework (Bootstrap, ReactJS, Vue, ...) you want.

ABM is in many cases the perfect tool for WebApps, without having to know anything about Javascript, CSS, HTML, PHP or Web whatsoever. Knowing pure B4J is enough. It is used internally within our company and has dramatically increased the development speed over any other tool we used before. THAT is the reason I shared this library to the community.

ABM does a lot of stuff in the background that makes the resulting app fast and reliable because it prevents the programmer from making common mistakes. The B4J Webserver Jetty is a very good Webserver and, with the proper load balancing, can serve up many users (just the same as with ReactJS, NodeJS, PHP: without a good load balancing strategy, they also will choke on a huge number of users just like Jetty will). In our latest company ABM WebApp, it will serve up to 50.000+ users with ease.

So the choice is: learn Javascript/HTML/CSS/PHP/ReactJS/Bootstrap/Vue and do all you want, or use only one language B4X where you are familiar with, having Materialize CSS as your UI with ABM (and some custom components if you want to pimp it a bit).

I guess as you already know html/javascript/css/php very well, your choice is simple and ABM just isn't for you. But I'm glad it has given many B4X users the opportunity to make great, robust WebApps without having to learn new stuff.

Alwaysbusy

LucaMs · Jun 15, 2020

alwaysbusy said:
@Indic Software ABM is a wrapper for Materialize CSS, no other CSS framework (Bootstrap has nothing to do with ABM). If you want to use that, I wrote the BANano library, where you can use ANY css/javascript framework (Bootstrap, ReactJS, Vue, ...) you want.

ABM is in many cases the perfect tool for WebApps, without having to know anything about Javascript, CSS, HTML, PHP or Web whatsoever. Knowing pure B4J is enough. It is used internally within our company and has dramatically increased the development speed over any other tool we used before. THAT is the reason I shared this library to the community.

ABM does a lot of stuff in the background that makes the resulting app fast and reliable because it prevents the programmer from making common mistakes. The B4J Webserver Jetty is a very good Webserver and, with the proper load balancing, can serve up many users (just the same as with ReactJS, NodeJS, PHP: without a good load balancing strategy, they also will choke on a huge number of users just like Jetty will). In our latest company ABM WebApp, it will serve up to 50.000+ users with ease.

So the choice is: learn Javascript/HTML/CSS/PHP/ReactJS/Bootstrap/Vue and do all you want, or use only one language B4X where you are familiar with, having Materialize CSS as your UI with ABM (and some custom components if you want to pimp it a bit).

I guess as you already know html/javascript/css/php very well, your choice is simple and ABM just isn't for you. But I'm glad it has given many B4X users the opportunity to make great, robust WebApps without having to learn new stuff.

Alwaysbusy

It is not exactly like that.

Following a video tutorial about JavaScript, 4 lessons for a total of only 6 hours and 11 minutes, this is the great final result (without CSS, which the tutorial did not teach, of course):

?

Harris · Jun 15, 2020

alwaysbusy said:
it will serve up to 50.000+ users with ease

WOW! That's my goal - 50G of clients at 2500.00 per year = BIG BUCKS!

Just noticed my member level has been upgraded to Expert (very debatable)...
I would prefer a status of HACK - much more appropriate for me....

Cableguy · Jun 15, 2020

I think the main problem in writing a designer is the fact that the screen occupation is not known by the "designer"
Creating a code generator is in itself not hard, but then, enters theming, and grid placement, will it be inside a "cell" or a "container"..?
There is just too many variables in the screen layout itself, unlike with the other designers that know the screen size and how they are "divided".

LucaMs · Jun 15, 2020

Harris said:
50G of clients

50 Giga... I would be happy 1c from each one just una tantum! (even a quarter of a cent!)

Jones Hone · Aug 8, 2020

I am test ABMarterial's project of demo.b4j.
I only modify some word to Chinese word.
But:
On ABMNavigationBar the Chinese word is gardled.
Ob other page the Chinese word is correct.
(Refer to below image, Please.)
How can I fix it? Thank you!

[Sorry! I'll post another new thread.]

Cableguy · Aug 8, 2020

Jones Hone said:
I am test ABMarterial's project of demo.b4j.
I only modify some word to Chinese word.
But:
On ABMNavigationBar the Chinese word is gardled.
Ob other page the Chinese word is correct.
(Refer to below image, Please.)
How can I fix it? Thank you!
View attachment 98226
View attachment 98227
View attachment 98228
View attachment 98229

Please start a new thread for your question.
This thread is meant as an announcement / introduction thread to ABMaterial.
By posting your answer here, it will have less visibility, and even worse, the possible answers will not be easily found by others having the same issues!

Jones Hone · Aug 8, 2020

Sorry! I'll post another new thread.

Schakalaka · Sep 11, 2020

Donation Done

Don Oso · Nov 1, 2020

Some new updates for this lib in the future? may be turn it open source ? ??

alwaysbusy · Nov 1, 2020

Don Oso said:
Some new updates for this lib in the future? may be turn it open source

There have indeed been very few updates (needed) and making it open source is something I'm very seriously considering. I think it is mature enough to be so. I previously did not want to do it because it could turn into a wild grow of versions that could break with every 'official' update I did. But things have changed now.

Cristianlt · Apr 21, 2021

@LucaMs

is it possible to use ABMaterial with VB .net?

Indic Software · Apr 23, 2021

I don't think so. It is built in B4J and we cannot compile the code of B4J in VB.NET.

Jmu5667 · Apr 23, 2021

Cristianlt said:
@LucaMs

is it possible to use ABMaterial with VB .net?

What had you in mind, what are you trying to do ?

hibrid0 · Apr 25, 2021

Cristianlt said:
@LucaMs

is it possible to use ABMaterial with VB .net?

In Vb.net you will test Radzen https://www.radzen.com/
Or https://mudblazor.com/

barx · May 2, 2021

I think it is about time I looked at this. I want to create myself a job management platform to help keep my jobs/clients/invoicing in order. I was going to try create it in Laravel PHP framework, but then I remembered this project and thought 'why the hell not give it a try'.

See how it goes...

MichalK73 · May 2, 2021

barx said:
I think it is about time I looked at this. I want to create myself a job management platform to help keep my jobs/clients/invoicing in order. I was going to try create it in Laravel PHP framework, but then I remembered this project and thought 'why the hell not give it a try'.

See how it goes...

I recommend ABMaterial, it is perfect for what you want to write. You'll like it nice to write. You do very well to have a goal, and you will slowly write your system and at the same time you will learn the framework and the next ones will be easier for you.
Good luck, and if you have a problem, everyone will help you here.

Indic Software · May 3, 2021

barx said:
I think it is about time I looked at this. I want to create myself a job management platform to help keep my jobs/clients/invoicing in order. I was going to try create it in Laravel PHP framework, but then I remembered this project and thought 'why the hell not give it a try'.

See how it goes...

This means you are well versed in PHP as well as B4J.

If you can wait for a few days we are launching a new product NO-CODE web application generator called ZenDevX!!

In ZenDevX you will be able to build any king of web application without having to write a single line of code!

Please don't get me wrong. Using ABM is a very good idea but unforunately one has to code a lot and test the output very frequently. And as per my very little experience with ABM, this is very time consuming.

Please check the Post: https://www.b4x.com/android/forum/threads/launching-two-product-back-to-back.130225/ for more information as I will be posting updates there.

Finally ZenDevX will generate complete web app with PHP code for server side, JavaScript for client side and it uses Bootstrap for page designing internally.

barx · May 3, 2021

Indic Software said:
This means you are well versed in PHP as well as B4J.

If you can wait for a few days we are launching a new product NO-CODE web application generator called ZenDevX!!

In ZenDevX you will be able to build any king of web application without having to write a single line of code!

Please don't get me wrong. Using ABM is a very good idea but unforunately one has to code a lot and test the output very frequently. And as per my very little experience with ABM, this is very time consuming.

Please check the Post: https://www.b4x.com/android/forum/threads/launching-two-product-back-to-back.130225/ for more information as I will be posting updates there.

Finally ZenDevX will generate complete web app with PHP code for server side, JavaScript for client side and it uses Bootstrap for page designing internally.

Sounds very interesting. I will certainly keep an eye ut for it.
Cheers

hibrid0 · May 3, 2021

Indic Software said:
This means you are well versed in PHP as well as B4J.

If you can wait for a few days we are launching a new product NO-CODE web application generator called ZenDevX!!

In ZenDevX you will be able to build any king of web application without having to write a single line of code!

Please don't get me wrong. Using ABM is a very good idea but unforunately one has to code a lot and test the output very frequently. And as per my very little experience with ABM, this is very time consuming.

Please check the Post: https://www.b4x.com/android/forum/threads/launching-two-product-back-to-back.130225/ for more information as I will be posting updates there.

Finally ZenDevX will generate complete web app with PHP code for server side, JavaScript for client side and it uses Bootstrap for page designing internally.

Something like Scriptcase ???

B4J Library [Web][ABMaterial] Framework for WebApps

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Active Member

Active Member

Expert

Member

Active Member

Well-Known Member

Active Member

Well-Known Member

Well-Known Member

Active Member

Well-Known Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency