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

 

[Cableguy]

0.99 is the lastest beta release (oficial).
Donators however, will receive the stable versions before everyone else, so that they can have a play with it.
Current stable version is 1.0, and I will be playing with it tonight!
BTW, putting a minimum amount on a donation is the same as setting a price! There's no minimum amount for a donation, no donation is too small, nor too big. Just keep in mind what AlwaysBusy efforts can bring you, and set an amount accordingly!

 

[Roberto P.]

ok. I'm interested to use your system for which I will donation. As I wrote would be interesting (must) also be integrated calendar and an example of data exchange with the database to see if you can build applications (Web app) to manage orders, invoices, customers and products. This is my need and I want to manage with your beautiful framework.

thank you

 

[Cableguy]

The framework has just been born, I could bet that AlwaysBusy will be adding a few more controls, and other improvements to the framework!
As a donor, all I can say is that AlwaysBusy does take the time to "listen" and tries to fulfill the needs!

 

[Roberto P.]

well, thank you for your feedback. I'll also donation and hope to give also contribute to improve this framework that I think has a lot of potential.
regards

 

[alwaysbusy]

@Roberto P. Please do not feel obliged to donate. Donator or not, everyone will get the same library. I just feel like I should return the favour and give them some kind of benefit. And even for me, it's good that some early versions are not directly into the wild. e.g. I have now added a chart control, but by no means is it ready for public release. I hope some of the feedback will make it easier for me to correct some mistakes beforehand.

As for the database connection. I may do something around this, but actually all the information to do this is already in this forum. This has nothing to do with ABMaterial, but is just plain old B4J. Erel wrote a bunch of examples on this subject. The calendar control will probably be one of the next controls, as I got some javascript libs in mind that could fit in.

 

[billyrudi]

Hi alwaysbusy and everyone,
in every command buttom if you demand the closing of a panel in another function it will not close until you make a ws.flush.
This is rigth.
I have this in the login panel when i must ask to a webservice to check my credentials.

 

[Gabino A. de la Gala]

Hello!!!.

¿It's posible to "mask" the edit fields for passwords?

 

[alwaysbusy]

Hi alwaysbusy and everyone,
in every command buttom if you demand the closing of a panel in another function it will not close until you make a ws.flush.
This is rigth.
I have this in the login panel when i must ask to a webservice to check my credentials.

Yes this is right. The next update has this already fixed.

 

[alwaysbusy]

Hello!!!.

¿It's posible to "mask" the edit fields for passwords?

Yes, check the 'password' input field in the demo (ABMInput).

 

[Roberto P.]

@Roberto P. Please do not feel obliged to donate. Donator or not, everyone will get the same library. I just feel like I should return the favour and give them some kind of benefit. And even for me, it's good that some early versions are not directly into the wild. e.g. I have now added a chart control, but by no means is it ready for public release. I hope some of the feedback will make it easier for me to correct some mistakes beforehand.

As for the database connection. I may do something around this, but actually all the information to do this is already in this forum. This has nothing to do with ABMaterial, but is just plain old B4J. Erel wrote a bunch of examples on this subject. The calendar control will probably be one of the next controls, as I got some javascript libs in mind that could fit in.

I do not feel obligated, but I think it's fair to make a donation to know the value of the idea, the time and the utility that we have.

I really hope you will continue the development of controls.

I know the examples database B4j, but I thought to a practical example for reading and writing data from the controls to the tables.

thank you
Hello

 

[Gabino A. de la Gala]

Yes, check the 'password' input field in the demo (ABMInput).

It works!!!

Dim inp2 As ABMInput
    inp2.Initialize(AppPage, "inp2", ABM.INPUT_PASSWORD, "Password", False, "")
    myModal.Content.Cell(2,1).AddComponent(inp2)

Thanks.

 

[Cableguy]

Hi Alain,

I think I found a bug with ABM v1.0!

what I did:
Copied the Template folder and renamed it.
Renamed the .b4j and .b4j.meta Files.
Did all the Nx stuff.
So my AppName is "Portal" and created a page from the page template, following the indicated procedure, named "Home".
Hit Run and no errors nor warnings, cool
Opening the browser and typing the address (localhost:51042/Portal) I see the browser trying to open the Home page (localhost:51042/Portal/Home) but I get a 404 error.
I decided to check the www folder tree (D:\B4X\R1x1511132010\TugaDroid\Objects\www\Portal) ... and I see no "Home" folder!
So my new Page is NOT being created!!!

 

[alwaysbusy]

Have you put a stop in the ABMApplication class? (AddPage method where it says writepagetodisk I think, I'm not sitting before my computer). Check the values of the variables there.

 

[Cableguy]

Sorry, Alain, my bad! I forgot to change the Page object name in Main

 

[alwaysbusy]

No problem, I'm so used to how its done it was quite possible I forgot to mention something

 

[Cableguy]

v1.01 Wish!
Theme the sideNavBar, not just the TopNavBar!

 

[alwaysbusy]

You can already. The navbar theme has a lot of properties starting with SideBar...

 

[Cableguy]

You can already. The navbar theme has a lot of properties starting with SideBar...

I have a LOT to explore then!

 

[Cableguy]

Am I right in assuming that a NavBarSideItem that has SubItems will not fire the "parent"?
Like:

mypage---my subpage1

Clicking mypage will trigger the animation of the navbar BUT NOT the opening of the mypage/index.html file (?)

 

[alwaysbusy]

Yes. This is because of the accordeon effect. Suppose this scenario:

Click mypage -> shows the index + accordeon open
Click subpage -> shows subpage
Click mypage again - > shows the index + accordeaon closes.

This is kind of confusing for the user. NavBar is an object of MateriizeCSS.js so I rather don't make changes to this file because if an update comes up from these guys (with bugfixes or new objects), we would not be able to use it without doing all the changes again.