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.

ABMDragonfly4.00.png


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 :)

gridbuilder1.png


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


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.12 - for jServer 4.00 (open source, library only):

ALWAYS TAKE A BACKUP BEFORE USING A NEW VERSION!


ABMaterial 5.12 is now available on github and is open sourced :cool: (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.


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.12:

1. Download https://github.com/RealAlwaysbusy/A...eleases/download/v5.12/ABMaterial5.12-bin.zip
2. Download https://github.com/RealAlwaysbusy/A...r4.00/releases/download/v5.12-www/www5.12.zip
3. Unzip ABMaterial5.12-bin.zip and copy all .xml and .jar files to you B4J Libraries folder
4. Unzip www5.12.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.

Additional Resources:

Demo source code (for v4.51, not yet updated for 5.12, 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
 
Last edited:

Anser

Well-Known Member
Licensed User
Longtime User
Please let (us) know how you make out following this path. It makes good sense - as you have defined.
The RDC in B4A works well and jRDC has extra benefits.

I started with pool because I knew of no other option - quite new to B4J.
Actually, I don't know whether this is the right thread to post a reply.
If your question here is about the difference betweeen RDC and jRDC and the benefits of jRDC over RDC, then here is my answer.

There were few bugs with RDC. The result from RDC is unpredictable, if we use column alias in our queries.
For Eg. SELECT ITEM, QTY, RATE QTY * RATE AS 'Amount'

jRDC has resolved all these issues. One of the advantages of jRDC is that you can include config.properties file inside the .jar file. So it becomes one single .jar file

I moved from RDC to jRDC and it is working fine.

I am totally new to B4J, I have few months of experience with B4A.

Regards

Anser
 

alwaysbusy

Expert
Licensed User
Longtime User
Progress update. Later this week, version 1.03 will be released to the public. Shortly after that, donators will receive the next version 1.04. In this version, there will be an extra demo app with source code (ABMFeedback) I'm creating with 3 purposes:

1. Iron out as many bugs as possible
2. We'll use it for real: it will be usefull to get some structure in bugs/wishes. Questions still need to be asked in this forum.
3. It will demonstrate Add/Edit/Delete/Show in databases and table objects.

ABMTable has been reviewed big time! We show the active row, sorting has been upgraded etc... ABMPagination is a new control to do, well, pagination. It will raise events so you can update the page in your code. The ABMFeedback app will also demonstrate this. Lots of little bug fixes.

Little screenshot of ABMFeedback:

cases1.png
 
Last edited:

Roberto P.

Well-Known Member
Licensed User
Longtime User
fantastic ... I can not wait to receive the update ..
regards
 

Harris

Expert
Licensed User
Longtime User
Hello @alwaysbusy

What you have done to date is nothing short of fantastic! Thank you for all your efforts.

Looking forward to the email for version 1.03 ;)

I suggest that @alwaysbusy should be promoted to "Expert" status (from Active Member). He has certainly earned it!

Heck - I have an Active Member status; but how active my member is, it is a non starter at my age... (non-offensive - just a pun).
Hopefully this post won't set me back to Novice...!!!!
 

Bladimir Carrillo

Member
Licensed User
Longtime User
Little screenshot of ABMFeedback: ... - ABMTable image sample -

How I could add a single visible ABMActionButton to an ABMTable active row?
The idea is to add a single button with multiple options instead several visible buttons in the table. That ActionButton should appear only in the active row.

I'm sure it will be easy for you :)
 

alwaysbusy

Expert
Licensed User
Longtime User
I don't think it is possible I'm afraid as the click you get is from the cell, not the action button. All action buttons would be called the same so you would never know which one was clicked. Send me a mail with a feature request, so I'll can look into it. (Almost finished with the ABMFeedback so you'll be able to add your request there.)

Also, as Erel requested, please post question about abmaterial in the B4J Question Forum, starting with [ABMaterial] Your subject... Thx
 

Harris

Expert
Licensed User
Longtime User
(Almost finished with the ABMFeedback so you'll be able to add your request there.)

I am turning blue holding my breath!
Like many I expect, we can hardly wait to experience your progress, and thus ours...

The ABMFeedback should provide a great example of how we can accomplish our CRUD tasks, and more.

Thanks for your devotion.
 

alwaysbusy

Expert
Licensed User
Longtime User
Version 1.03 is now downloadable from the first post for everyone. Read the included readme file!

Donators will receive 1.04 today including the source code for ABMFeedback, which is now also available for everyone.

ABMfeedback url: http://alwaysbusy.no-ip.org/feedback

You can login in the feedback app using your Facebook account.

You can rank 5 cases by assigning points to a case. Donators have double point value (sounds like a game )
To set your points, open up the case and pick your rank. To re-use your points, set one of the previously assigned cases to rank 0.

Please don't use this as a chatbox or to ask questions: that is why we have a cool B4J forum. Be specific in your requests and bug reports and only upload attachments relevant to the case.
 

Harris

Expert
Licensed User
Longtime User
I was wondering how (any) pagination actually fetched records for each page. I learned something new today!

LIMIT startIndex, numRecs (fromPage, 10).

From MySQL docs:
With two arguments, the first argument specifies the offset of the first row to return, and the second specifies the "MAXIMUM NUMBER" of rows to return. The offset of the initial row is 0 (not 1):

So, the Select won't fail on the last page even if there are only 2 rows to return!

Great CRUD example with logged in Admin or general user permissions!
Much more content than I ever expected. Excellent teaching\learning aid.
All is working great so far (insert, update, delete, combo's, etc).
Updated to B4J 4.0 as well.

Thanks so much for this wonderful Christmas Gift. It's all I really wanted...

I few posts back I mentioned something about "eating my words"... Well, I am choking on them! This is fantastic!
 
Last edited:

Harris

Expert
Licensed User
Longtime User
HI, alwaysbusy

I found a question about using ABMaterial Framework Library ... Does it encapsulation the google jquery CDN ?
Because in China , we can not access the google jquery CDN ...
Does it can be put the google jquery CDN spin-off ? let user to can config the jquery CDN address ? TKS!

This is a good question - although should not be posted here... Post in B4J Questions [ABMaterial] - your question... Otherwise, we followers lose track of IMPORTANT info!
So, pls remove this and re-post in B4J Questions as suggested.

( I cannot use CDN in my clients' project since they do not have access to the internet. Looks like all .js files are in the www/js folder (or can be put there if need be) ).
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
jQuery is used locally, however I think the material icon fonts come from the google site. I'll see if I can make them local too. Add a feature request in the feedback.

A couple of objects do need to link to some sites: youtube, codelabel and upload come to mind. However, if you do not use them, they will not we added to the html file so you should be safe.
 

Harris

Expert
Licensed User
Longtime User
jQuery is used locally, however I think the material icon fonts come from the google site. I'll see if I can make them local too. Add a feature request in the feedback.

A couple of objects do need to link to some sites: youtube, codelabel and upload come to mind. However, if you do not use them, they will not we added to the html file so you should be safe.

Submitted Feedback item...

We are building our own demise... This important info will be lost in B4J [ABM].
 
Last edited:
Top