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

 

[alwaysbusy]

jeep up with newest jetty version

Correct, that is the only change from the previous version. We use ABM extensively within our company and we haven't had the need to make modifications to it for quite some time

 

[alwaysbusy]

@Jmu5667 supporting jServer 3.0 may be as trivial as changing one line in the xml file:

<dependsOn>jServer3</dependsOn> ' <-- if you have renamed the old jServer.jar to jServer3.jar

ABMaterial itself will not be compiled with Java 11 but still with Java 8. Same goes for BANano.

Alwaysbusy

 

[alwaysbusy]

ABMaterial 5.00 for jServer 4.00 released (source code + binary)

Download instructions: https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/

Alwaysbusy

 

[MichalK73]

Request to add the js,font, css package from ABMaterial 5.00 to the CDN. This speeds up page loading a lot.

 

[alwaysbusy]

@MichalK73 I was on vacation so it took me some time to respond (limited internet access, a blessing )

New CDN should be up at: https://cdn.jsdelivr.net/gh/RealAlwaysbusy/ABMaterial@5.00/

Alwaysbusy

 

[MichalK73]

@MichalK73 I was on vacation so it took me some time to respond (limited internet access, a blessing )

New CDN should be up at: https://cdn.jsdelivr.net/gh/RealAlwaysbusy/ABMaterial@5.00/

Alwaysbusy

I clearly understand. A vacation is a vacation and not a job, we will calmly wait for you.
Thanks a lot for uploading the new version of CDN .

 

[Tecuma]

Hello community,

I started to read (and learn) about ABMaterial. What I understand is that I need Oracle Java 8 to run / use ABMaterial. How about the Java 8 license? Since the Java 8 update at April 16, 2019 8u221, all versions and updates for (Java 8, 9, 10, 11 and 13) has no cost just for personal use and development purposes. Any other use, needs a Commercial License. How do you handle this? Do you have to switch to the openjdk pendant to use latest fixes / patches?

Best regards

--Christian

 

[alwaysbusy]

What I understand is that I need Oracle Java 8 to run / use ABMaterial

No. We do indeed use Adopt Open JDK 11 for example.

 

[Tecuma]

Ok.
Where is the difference between Adopt Open JDK 11 and the openjdk 11 from B4X except JFX?

 

[alwaysbusy]

Not that I'm aware of. Our provider chose Adopt so went for the same on our development machines.

 

[DonManfred]

openjdk 11

i´m pretty sure ABMaterial will work with this SDK too

 

[Tecuma]

Ok. Thank you. I will test it with OpenJDK 11.

 

[JackKirk]

I'm giving some preliminary thought to trying to convert some pretty heavy B4A/i customer-facing apps to a web app - and ABMaterial is an obvious starting point.

Before I spend a lot of time on it I would appreciate some general guidance.

In essence, I need to be able to do 4 things:

1. let the customer take a selfie when the web app is used on a smartphone - I have seen:

https://www.b4x.com/android/forum/threads/abmaterial-mashcameraplain.86132/

Is this all there is?

2. download photos and videos from AWS S3 buckets - I'm assuming this is no problem.

3. save such downloaded photos and videos in the smartphone's gallery - is this possible with browser sandboxing etc?

4. be able to transfer photos and videos to the social media apps on the smartphone - same question as 3.

Any input would be appreciated...

 

[Cableguy]

Hi....

If you have all that working in their B4A/B4i versions, why do you need to replace it with a webapp?
The way I see it, your webapp would be better off as a companion app for the other 2 versions.
Anyway... @Mashiane 's "mash' component set, although it can work with ABMATERIAL, are not endorsed by the framework creator @alwaysbusy.
This said, there is the ability within the framework to create custom components, thus you can try to adapt any Java code you came across that interests you.
It was the case of my request for the "captcha" custom component, adapted by @alwaysbusy himself.

 

[Cableguy]

Has anyone else got AVAST detecting a trojan on the ABMaterial5.00-bin.zip file?

 

[JackKirk]

If you have all that working in their B4A/B4i versions, why do you need to replace it with a webapp?
The way I see it, your webapp would be better off as a companion app for the other 2 versions.

Yes, I have all that working in my B4A/i apps - I am not looking to replace them as much as supplement them. The apps also have a subscription element that I would like to get as far away as possible from the app stores 15/30% rip off.

 

[Cableguy]

As a companion app, and to "force" the user to buy your platform specific app, some features should NOT be implemented in the Webapp, or at least just be dummy placeholders to redirect the user to the other apps.
Features like the camera are, in my opinion, useless in a webapp.

Everything else you mention shouldn't be too hard to accomplish with ABM

 

[JackKirk]

Features like the camera are, in my opinion, useless in a webapp.

Cableguy, what do you mean by this - it is not possible/stable/???

Thanks...

 

[Cableguy]

Cableguy, what do you mean by this - it is not possible/stable/???

Thanks...

I mean that a user using a webapp will not be expecting it to take photos...
that's what the platform specific apps exist for....

take FB for example... if a webapp would suffice, why did they create android/ios apps? for the user experience! that's what you should focus on.
Go see the comments on any app that only serves as container for the webapp version, and you will see how low they rate.
user's want simplicity and also data efficient apps.

 

[JackKirk]

that's what the platform specific apps exist for....

My platform-specific apps are used to download photos and videos of customers traversing ziplines and other obstacles in "tree adventure" parks.

One criticism being levelled is that the customer does not want to have to go through the hassle of installing an app that is going to be used for a limited time.

Also as previously stated I would like to get as far away from the 30/15% gouging of the app stores as I can

The apps use the AWS Rekognition service to work out which photos and videos the customer are in - using a selfie that the user is asked to supply.

This means I have to use the device camera to take the selfie which is then uploaded and analysed.

I would like to use ABMaterial to create a webapp but the big stumbling block I see at the moment is a viable camera component (ABMCamera anyone???).

I am aware of https://www.b4x.com/android/forum/threads/abmaterial-mashcameraplain.86132/ but this looks like it died a death about 6 years ago.

I have been doing some investigation of webapps that control the camera and after a lot of experimentation with several candidates finally found:

https://code-literacy.medium.com/using-web-apis-to-create-a-camera-application-26fc0fc2b8c3

which is modern and works on both mobile Chrome and mobile Safari.

I have taken a copy of this and done some minor renaming and installed it on a website I have, you can access it at:

https://treetopssmartphotoaccount.com/takepic3.html

If anyone is interested in the HTML/CSS/JS of this to maybe use as a starting point for an ABMCamera component just ask.

Thanks for any support in this area...

PS and it would extend the reach of the project to laptops...