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

 

[Mashiane]

I think he is stuck in PhoneGap...
I know a company that uses PhoneGap to develop... They have spent over 10 million $$ and it still doesn't work! Of course - they being fools doesn't help their effort much... Like someone once said to me: "We tried PhoneGap - it is full of Gaps"

Sorry AB to post such off-topic dribble here...

Very funny, ha ha ha...

 

[amminf]

In my early dealings with the new version 1.20 I'm seeing a big improvement in the response speed of the application.

AB, my congratulations.

 

[Mashiane]

Thanks for the new domain. My learning curve is about to explode. Genious work!!!

 

[billyrudi]

i have not the link to download 1.20

 

[alwaysbusy]

@billyrudi I've resend the mail to both your email addresses

 

[souzafo]

The address abmaterial.com is not opening properly on Android devices. In the old address http://prd.one-two.com:51042/demo works normally. Another question , this demo is compiled in DEBUG or RELEASE mode?

 

[hibrid0]

Hi I have a question about the performance, because I see in demo page take a lot of time loading the page, show an animation before loading content.
Can I disable this animation and show the content the most faster possible?.
I talk about because on marketing pages we have just 10 seconds or less before the user left our site. If is too slow to show the info.

 

[alwaysbusy]

Please start a new post to ask your question, using [ABMaterial] in the subject line. Thank you.

ABMaterial is already setup to be as fast as possible. Removing the animation will not speed it up (it only shows 'something' while it builds the page).
I do not understand why it is so slow on your side, as over here, it loads under 1s. (But the server is in Belgium, as am I)

Couple of notes:
1. ABMaterial is for WebApps and although possible, not for WebSites.
2. The demo is configured to load ALL possible libraries for ALL pages at startup so navigation is as swift as possible. In case of the demo, it has to load the complete framework as it demonstrates every component. This may have an impact on the first load. Real life apps will have to load far less libraries. For a website instead of a webapp, you may choose to only load the libs needed for hat page instead of loading them all at once.
3. The demo is build 'at run time'. You have to look how static some parts of a page are. If they do not change much, consider placing them in BuildPage() instead of ConnectPage(). Static info will load considerably faster.
4. Make your first page light so it loads fast. Use pagination if you have to show a lot of heavy data. Or build the page as the user 'scrolls'

 

[Mashiane]

Hi Everyone,

I'm currently working on a UI builder RAD tool called ABMaterial.Show that enables one to create their pages with components easily, please check it out on thos post, https://www.b4x.com/android/forum/threads/abmaterial-show.70259/#content
https://www.b4x.com/android/forum/threads/abmaterial-show.70259/#content
Thanks enjoy.

 

[stanmiller]

Edit for Grids page in demo.

 

[alwaysbusy]

@stanmiller Indeed. I'll update this in the demo. Thanks for pointing this out to me.

 

[stanmiller]

And also... Well done! ABMaterial is a monumental achievement.

 

[stanmiller]

AB,

Is "/www/" (or a variation thereof - e.g. Server.StaticFilesFolder ) hard-coded anywhere in the ABMaterial library?

I modified the v1.20 template, substituting File.DirApp & "/www/" occurrences, so that the compiled "webapp.jar" and content are relocatable (e.g. the .jar running in any folder in the private space outside of the website public root while the site content remains in the public folder tree. )

I'm getting an Null Pointer exception if I don't make the content (css, font, js, etc.) a sub directory of "www". Separately, my hosting service uses "public_html" as their "www", so I just fake it and make a subfolder "www".

It feels like "css", "font", "js" folders or perhaps the webapp pages themselves need to be sub folders of "www" as in /www/css, or /www/font or /www/js, or /www/demo?

 

[alwaysbusy]

@stanmiller Please start a new thread for you question using [ABMaterial] in the subject. Thank you.

Yes, it is hardcoded in many cases. Does your solution work? Maybe I can add a parameter to ABMaterial where you specify the folder. Default "www", but you can change it to e.g. "public_html".

In you own B4J code, you would of course still need to replace the www's by public_html as you did now.

If this suits you, add it as a feature request to the ABMaterial feedback app, otherwise it will be forgotten as I'm working on another part of ABMaterial now.

 

[Mashiane]

@alwaysbusy I wish for the ABMCamera component to take pictures and perhaps record video. That will be ultimately cool. Any outlook in the future of this framework?

 

[alwaysbusy]

@Mashiane. No for now. I've checked into this, but the number of browsers that support this HTML5 API to control the camera is very limited and too much subject to change. Once (if) a lot more browsers support it and the API stabilizes, I probably will reconsider this.

 

[little3399]

why the demo apps running like this ?

 

[alwaysbusy]

@little3399 Please start a new thread for you question using [ABMaterial] in the subject. Thank you.

Just tested the server an it seems to run. Try it in Chrome, F12 to open the console tell me what it says. This may give me a clue.

 

[amminf]

Running ok on Chrome:

 

[amminf]

Running ok on Firefox: