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 · Apr 12, 2017

Donators can now download the ABMaterial 3.03 Maintenance Release from the feedback app. Has about 10 fixes.

amminf · Apr 12, 2017

"Has about 10 fixes."

And some new features

Impressive your constant work !!!

Congrats

stanmiller · Apr 13, 2017

alwaysbusy said:
Donators can now download the ABMaterial 3.03 Maintenance Release from the feedback app. Has about 10 fixes.

Another impressive release!

hansy2 · Apr 27, 2017

Donated! XXXXXXXXXXXXXXXXX144H Thx

alwaysbusy · May 17, 2017

ABMaterial 3.03 public has been released (see the first post). Donators will receive a mail for ABMaterial 3.20 shortly...

Cableguy · May 17, 2017

It's not fair... you really wanna make me go nuts!?
I only managed to make some progress with the previous (3.03) version and you are already rolling out a new update!
It's just not fair!!!

(lol, keep them coming!)

Harris · May 18, 2017

Geez, only abmapplication changes required?
Man you went easy on us this round. Just how we like it...

With a little help from our friends... It is good to have helpful friends in the right places.
Those that see beyond and above what we can not.
Those that support us in time of need.
Those that give without expectation of payback or reward.
Those that love and respect us for what we do and give to others.

We all can be inspired to love, give and share based on your unselfish examples - and that of our friends.

This formula of cooperation was inspired from the founder of B4X, without ever really expressing it.
He (somehow) knew it would flourish on its own. He was right, and it certainly has. We shall continue...

alwaysbusy · May 18, 2017

In case you did not get the mail, note that from 3.00+ on, you can always download the latest version from the Feedback App!

shashkiranr · Jun 9, 2017

Hi All,

How do you set a custom color. I have an color in hex. How can I set it to a button.

Best,
SK

stanmiller · Jun 9, 2017

shashkiranr said:
Hi All,

How do you set a custom color. I have an color in hex. How can I set it to a button.

Best,
SK

Good question. There are a few steps to do custom coloring.

In general for "how to" ABMaterial questions we've been following a convention to post in the "B4J questions" section starting the subject line with [ABMaterial]. ABMaterial is a big topic and posting in "B4J questions" will give us a dedicated thread to respond to.

To color a button with a hex code you'll need to add a color definition and create a button theme.

Here are code snippets that show how the [CALCULATE] button is colored on this page.

https://macthomasengineering.com:51050/siteone/prodcalc/calculator.html?loc=clt&v=123

B4X:

' Helpful constants
Public Const COLOR_CALCULATE As String ="color_calculate"
Public Const OPACITY_100 As Int = 1                      
Public Const THEME_BUTTON_CALCULATE as String = "calculate"

...

' Add custom color definition
MyTheme.Page.AddColorDefinition( COLOR_CALCULATE, ABM.INTENSITY_DARKEN4, "#779a0b", OPACITY_100 )

...

' Add button theme
MyTheme.AddButtonTheme( THEME_BUTTON_CALCULATE )
MyTheme.Button( THEME_BUTTON_CALCULATE ).ForeColor = ABM.COLOR_WHITE
MyTheme.Button( THEME_BUTTON_CALCULATE ).ForeColorIntensity = ABM.INTENSITY_DARKEN4
MyTheme.Button( THEME_BUTTON_CALCULATE ).BackColor = COLOR_CALCULATE
MyTheme.Button( THEME_BUTTON_CALCULATE ).BackColorIntensity = ABM.INTENSITY_DARKEN4
...

' Add button to page
Dim btn As ABMButton
btn.InitializeRaised(page , "calcbtn", "", "", "CALCULATE" , THEME_BUTTON_CALCULATE )

m4.s · Jun 23, 2017

Hello Alain,

This is really a fantastic web app framework you've developed here for the B4J community.

I was excited to learn about and test ABMaterial, but then came to the realization that there seems to be no way to *alternatively* build desktop applications with it. Correct?

The 35 theme-enabled controls/components you built and include look and feel just awesome, and they go far beyond what B4J currently supports via its core and jControlsFX libraries. Might there be any way to port them for use in B4J desktop applications? I further assume not, but figured it was worth a try to at least ask...

Kudos again for all your hard work and contribution!

Harris · Jun 23, 2017

Desktop... What's in that name?

--- Install an app to your local drive (PC), is what I see (then support an update).

This is the legacy we have been dealing with for so many years. Each user MUST update their desktop app with each new version released.
Sounds a bit like Windows (version - WTF) to me...

All platforms these days (as I see) are trying to move past INSTALLING (and individually supporting) anything on YOUR local PC. This has been nothing but a ROYAL pain in the ass.

B4J, in its native format, is for desktop (you must run the jar).

ABMaterial is for a Browser (Chrome, FF, Safari, etc). It expects a server. The server may be local to LAN, or WAN, remote server.
Any updates to the jar go to server. All users get the same version - NOTHING to install or update.

alwaysbusy · Jun 23, 2017

@m4.s The closest you can get is using a WebView in a B4J app. (See the 'Native' demo project in the download). It has a way to do bi-directional communication between your B4J app and the WebView.

More info in this document (also in the zip): http://gorgeousapps.com/ABMNative.pdf

ddefrain · Jun 29, 2017

PLEASE FORGIVE ME; It Works Now, maybe my phone data was lost

Thank You for this Great Great Framework.
One question.
Does Chat Example works without Wi-Fi/Lan connection. I mean only with phone data?.
'Cause I deploy the Chat Example to my server then with my phone I can access the link provided and no text appears in the chat messages on the phone side.

Thank's in advance!
Best Regards!!!

alwaysbusy · Jun 30, 2017

@ddefrain Indeed, it shouldn't make any difference, as long as you can open a website, ABMaterial should work.

alwaysbusy · Jun 30, 2017

ABMaterial 3.20 Chipmunk public version has been released (see https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/). Donators will receive a mail for ABMaterial 3.50 shortly...

Alexander Stolte · Jul 15, 2017

i have a simple question to it, is that possible to implement the RDC?

Thanks.

alwaysbusy · Jul 16, 2017

@Alexander Stolte You can do anything a normal B4J app can do. ABMaterial is just an alternative web app GUI for your app.

Alexander Stolte · Jul 16, 2017

alwaysbusy said:
You can do anything a normal B4J app can do

Lets get ready to program nice web-projects, thanks! i donate later.

incendio · Aug 2, 2017

Hello,

Great works, thanks for this.

Is there an example of this framework for a simple database application (Select, Insert, Delete, & Update) ?

B4J Library [Web][ABMaterial] Framework for WebApps

Expert

Active Member

Active Member

New Member

Expert

Expert

Expert

Expert

Active Member

Active Member

Member

Expert

Expert

Member

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency