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

PCastagnetti · May 18, 2016

Hello to all

With version 1.10 does not seem to work the addition of items in the component 'ABMCombo' on raspbian.

On windows everything works properly.

Thank you

alwaysbusy · May 18, 2016

can you post (or mail me alain.bailleul@pandora.be) some example project? I'll check it out as it should not make any difference on what you are running it.

PCastagnetti · May 18, 2016

Ok.
I send a project just started that has the problem.

The problem seems to occur with the demo too.

Thank you

alwaysbusy · May 18, 2016

Just a quick thought. Did you also copy the 'copymewithjar.needs' that is generated next to jar file in the /objects folder to your Pi?

PCastagnetti · May 18, 2016

Cleaning up the folder and copying the ''copymewithjar.needs' the problem is solved (I had previously tried to copy the file with no luck)

Thanks for your help

PCastagnetti · May 19, 2016

With version 1.10, using the demo program, I can not use the PDFViewer control.

Did I forget something?

thank you

alwaysbusy · May 19, 2016

@PCastagnetti No, you are correct, it is a bug. The file 'viewerpdf.html' is not created in the correct folder (it is created in the root of the disk). For now you can manually copy it, but please enter this bug in the feedback app so it can be fixed!

Also please do not ask questions in this post. I do not follow up this post all the time. Create a new question with [ABMaterial] in the subject line. It is much easier for me to track questions. Thanks!

PCastagnetti · May 19, 2016

please enter this bug in the feedback app so it can be fixed!

ok already inserted

Also please do not ask questions in this post. I do not follow up this post all the time. Create a new question with [ABMaterial] in the subject line. It is much easier for me to track questions. Thanks!

sorry

alwaysbusy · May 27, 2016

ABMFeedback is up again! Got rid of Windows 10 all together and set up an Ubuntu server instead. I announce it here because now my mail provider is down

If you encountered problems with v1.10, this is the time to tell me as I'm finishing up maintenance update 1.11 (scheduled to go out next week)

alwaysbusy · Jun 1, 2016

Donators should have received a mail about the ABMaterial 1.11 Maintenance Update.

billyrudi · Jun 1, 2016

Alain how i can add a ABMCanvasObject to a ABMModalSheet ?
how i can modify the following code?
regards Paolo

B4X:

Dim canvas1 As ABMCanvas
    canvas1.Initialize(page, "canvas2", ABM.COLOR_BLACK , ABM.INTENSITY_NORMAL,  1024, 1600,   True)
    myModal.Content.Cell(1,1).AddComponent(canvas1)
   
    Dim bg As ABMCanvasObject
   
    bg.InitializeAsRectangle(  page,"bg",0, 0,1024  ,1550,  False)
    bg.drawImage(  "INTERFACCIA_STATO_DI_CARICA", 0,0)   
    canvas1.AddObject(bg)
    canvas1.Refresh

alwaysbusy · Jun 1, 2016

@billyrudi please ask your question in a new post

amminf · Jun 1, 2016

alwaysbusy said:
Donators should have received a mail about the ABMaterial 1.11 Maintenance Update.

Alain,

Thank you very much. Keep up your great work.

Best regards

amminf · Jun 1, 2016

Hi Alain,

In notices-cautions for the update 1.11 says "There is Also a new event Changed (value as String). This is added Because a lot of users asked for it, but I strongly discourage you to use it as it Will certainly have a big impact on your server !!! "

I feel my ignorance ... but would it be possible that those slow events (CHANGES, LostFocus, GotFocus) are administered with javascript and so to increment speed ?

Best regards

alwaysbusy · Jun 1, 2016

The problem with these events is they have to go to the server if you want to use B4J code (and that is the exact purpose of ABMaterial). I don't want the programmer to have to use javascript etc instead of B4J code. These events can still be useful if you e.g. use ABMaterial for the interface of a local Raspberry Pi project.

amminf · Jun 1, 2016

alwaysbusy said:
The problem with these events is they have to go to the server if you want to use B4J code (and that is the exact purpose of ABMaterial). I don't want the programmer to have to use javascript etc instead of B4J code. These events can still be useful if you e.g. use ABMaterial for the interface of a local Raspberry Pi project.

In my ignorance, you could not create functions to be executed in javascript. They would be used only in the case of events, to get even more speed. These functions would be embbebed in html code or transferred as-is to a .js file

amminf · Jun 1, 2016

To all,

Lost event sample running (ABM v1.11):

code:

Regards

amminf · Jun 2, 2016

Off-topic. 10 very good reasons to stop using JavaScript
https://www.leaseweb.com/labs/2013/07/10-very-good-reasons-to-stop-using-javascript/

LWGShane · Jun 3, 2016

amminf said:
Off-topic. 10 very good reasons to stop using JavaScript
https://www.leaseweb.com/labs/2013/07/10-very-good-reasons-to-stop-using-javascript/

ABMaterial doesn't use JavaScript, and those aren't very good reasons.

amminf · Jun 3, 2016

ColdBlueLava said:
ABMaterial doesn't use JavaScript, and those aren't very good reasons.

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

B4J Library [Web][ABMaterial] Framework for WebApps

Member

Expert

Member

Expert

Member

Member

Expert

Member

Expert

Expert

Active Member

Expert

Active Member

Active Member

Expert

Active Member

Active Member

Active Member

Well-Known Member

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency