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]

And we should be back up again. What worries me is that I hadn't had to do a thing this morning, while yesterday evening the server would not start at all. All components on the server where super warm, so maybe it will crash again if a certain heat point is reached. I will see if I can move the app to a VPS next weekend.

 

[alwaysbusy]

Same thing as yesterday. I'll post when the feedback will be up again (probably moved to another server, but this may take a few days).

 

[Carlos M. Cruz Malerva]

Great job alwaysbusy. I sent you a donation for your work.

 

[giannimaione]

a fantastic website made with ABMaterial
https://macthomasengineering.com:8443/

 

[Mashiane]

a fantastic website made with ABMaterial

This is really awesome, good job!

 

[roddy]

ABMaterial is great and i have some question.
How to do can change language for buttom in ABMCalendar? e.g. chinese
or ABMCalendar have some property like ABMDateTimePicker.PickText、ABMDateTimePicker.TodayText ...

 

[alwaysbusy]

@roddy Please do not post questions in this post as it is for announcements only and I could miss this. Start a new topic with '[ABMaterial] your question' in the subject. Thx!

You can set the language with the, well .language property ;-)

cal1.Language = "zh-cn"

 

[alwaysbusy]

Feedback will be down for some time due to a fatal crash of my server. The good news is that I've been able to save all the cases.

 

[ivanomonti]

c'è un chiaro esempio passo passo per iniziare a usare questa libreria

 

[alwaysbusy]

c'è un chiaro esempio passo passo per iniziare a usare questa libreria

English please. Thx!

ABMaterial lessons for dummies: https://www.b4x.com/android/forum/threads/abmaterial-for-dummies-beginner-lessons.88346/#content

 

[alwaysbusy]

I've created a 'mini' template and a Wrapping ABMserver that will make it hopefully somewhat easier for absolute beginners to get started:

http://b4x.com/android/forum/threads/abmaterial-mini-template-for-absolute-beginners.117237

Cheers,

Alwaysbusy

 

[vecino]

The demo website does not work :/
http://prd.one-two.com:51042/demo/AboutPage/abmaterial-about.html

 

[alwaysbusy]

@vecino Should be up again. Thank you for letting me know!

 

[LucaMs]

[I state that I am guilty of... ignorance = I know very little ABMaterial, the little I knew I have forgotten, so it is likely that I am going to write at least superfluous things].

I recently watched the first video of this tutorial (mostly out of curiosity). In it, some components (label, input, button) are created and added by writing code in a class (which represents an html page, if I'm not mistaken).
Since I remember little and that an image is worth a thousand words (badly written in English, moreover), I take a screenshot of that video tutorial...

I don't know if it has already been developed and published, but it would be very convenient to develop a Designer that generates that code and places it in the class, right?

Already exists this "type" of Designer (I saw that there is a Designer to generate a grid but not one that does what I just wrote; probably using this "grid generator" as a base could be an idea)?

For now mine is only curiosity; maybe in the future I would like to be able to use ABMaterial to develop PWA in an easy way. By the way: does ABMaterial produce (and save on disk) HTML, JS, CSS files?

 

[alwaysbusy]

it has already been developed and published

No, and unfortunately ABM can not (by design) provide this. One of the reasons I wrote BANano, which can use the Abstract Designer.

 

[Indic Software]

I don't know if it has already been developed and published, but it would be very convenient to develop a Designer that generates that code and places it in the class, right?

If there is a Designer which will allow a user to visually place controls and set necessary properties then I feel ABM would become a very powerful tool that developers like me would like to use.

Till such a thing is not available I don't think I personally would use it as the amount of work involved is way too much.

 

[MichalK73]

Hello.
When learning about ABMaterial I had the same thought, "why is there no Designer GUI?" I say a young project maybe someday and I started writing from code. Now I honestly don't mind. Looking back now, if I had a GUI, the creation time using a designer would be only slightly shorter than writing code (clicks, moving objects, parameter settings is also the time it takes to create). However, writing the code gives you full control over what you want to do and I can see it in my head by placing more elements on the page.
Having a designer would probably contribute to better writing for new users, but writing code without a designer in my opinion I have more control what I want to achieve.

 

[LucaMs]

If there is a Designer which will allow a user to visually place controls and set necessary properties then I feel ABM would become a very powerful tool that developers like me would like to use.

Till such a thing is not available I don't think I personally would use it as the amount of work involved is way too much.

It shouldn't be very difficult to develop a simple Designer; the problem is finding time to do it.

 

[LucaMs]

It shouldn't be very difficult to develop a simple Designer; the problem is finding time to do it.

I forgot how to use VB Net - now I love only B4X ? and therefore I only develop using B4X ?

I tried with VB Net only because it has the PropertyGrid control, although, of course, the designer must to allows you to move and resize the View-Control using your mouse.

Also, here - just a quick test - the new button should go in a grid.

 

[Harris]

I don't think I personally would use it as the amount of work involved is way too much.

Too much work??? Compared to learning Javascript, HTML5, CSS and Ajax - and using these to create / cobble a "simple" web page is what I consider "way too much work".
When developing in debug mode, the web page you are working on essentially becomes your designer...

I use ABM everyday and am currently updating an app to make it more responsive on small devices. This requires bypassing the ABMTable and using ABMCustomCard for the presentation. This is easily accomplished, enjoyable to code and the outcome - a work of art...

Sure, a formal designer would be nice but as @alwaysbusy stated - not possible. However, there are code generators built in to create much of the grid and modalsheet code.