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

 

[little3399]

1. version 1.05
2. yes.

 

[alwaysbusy]

It is possible 1.05 does not have the theme yet. Remove the last "" in the line. Check what B4J says the syntax should be.

 

[Harris]

Got to LOVE the new ABMDateTimePicker! It actually works with Long values!
One question: What is the dtsType as String in the init used for?
Thanks

 

[alwaysbusy]

I'm not right now on my pc (for once!) but I think they are the types of scrollers you can make. Check the ABM.DATATIME... constants. They are the ones with _SCROLLER, _PICKLIST and _MIXED I think.

 

[Harris]

 '   in build input sheet
    Dim inpplateno As ABMDateTimePicker
    inpplateno.Initialize(page, "inpplateno",ABM.DATETIMEPICKER_TYPE_DATETIME ,  0,"Select a Date","") 



'in edit sheet
            Dim inpplateno As ABMDateTimePicker = inp.Content.Component("inpplateno")
            Dim dt As Long
            Dim dtt As String
            dtt = user.Get("plate_no") ' get the value in plate_no field - it is a string so covert it to long
            If dtt = "" Then   ' if empty string.....
                dt = DateTime.Now
            Else
                dt = dtt
            End If       
            Log(" datetime: "&dt&"   - "& dtt)
            inpplateno.SetDate(dt) ' set the date shown on input form (and the datepicker) to what came from the table...
            inpplateno.Refresh
            Log(" get date: "&inpplateno.GetDate)

The setdate( dt ) shows the last set value. Can't seem to make input sheet show value from table?

Writing to the table with GetDate works correctly however...
No big hurry...
Thanks

 

[alwaysbusy]

@Harris yes, by own fault of testing date objects the first of the month

Use the attached .js file to correct this problem. (press F5 to make sure the new .js file is used)

 

[Harris]

@Harris yes, by own fault of testing date objects the first of the month

Use the attached .js file to correct this problem. (press F5 to make sure the new .js file is used)

Don't quite understand what you are implying but I shall apply js and test - then report back.

Seems like you and Erel never sleep? - you guys are too busy coding and responding to our incessant (non-critical) issues!

How can we ever thank you(s) enough? ( a suggestion - you don't CHARGE enough )!
B4J and ABMaterial should not be free. Nether are open source and not community supported (code base wise).
Please tell us why you don't ask a (meager) fee for use of a platform and framework that saves us SO much time and money?

In the old days, MS and others would lead you down this garden path of free offerings - only to charge the #@#$ out of you once addicted.
You have your reasons; help us understand your (unique) generosity.

Thanks

 

[Harris]

Use the attached .js file to correct this problem. (press F5 to make sure the new .js file is used)

Appears to be functioning now! Got to love it even more!

 

[little3399]

@alwaysbusy, I from your blogger know , you alse a xojo expert , and I have a question about the WEB APP in XOJO web AND B4J web ?
my question is : Are you compare their performance between XOJO WEB and B4J WEB APP? .... Tks!

ps:maybe xojo web app can easy to develop than B4J WEB develop ? but performacne unkown ...

 

[little3399]

@alwaysbusy, when I try to running the ABMFeedback app , it show this ... ? (it compile normal)

 

[EnriqueGonzalez]

i am almost sure that it is:

Http://Localhost:51044/demo

or the folder where it began, normally where the index.html file is.

 

[Harris]

ps:maybe xojo web app can easy to develop than B4J WEB develop ? but performacne unkown ...

IMHO, NOTHING beats B4X for simplicity, support, community, libs, frameworks (ABMaterial a prime example), Android, iOS and java development, price, stability, Erel, Erel, Erel, etc...

Someone else like to add to this?

 

[alwaysbusy]

Yes, needs to be something like: Http://Localhost:51044/feedback

 

[little3399]

@alwaysbusy ， Tks!

 

[little3399]

@alwaybusy, where the Labelcolor ? tks!

 

[alwaysbusy]

@little3399 please start a new topic in the B4J questions section.

Use '[ABMaterial] your question' in the topic title.

It depends where you use this theme for the label

 

[dar2o3]

Hello, AbMaterial I think websockets used for all, how many concurrent users you think you could take? there been any proof?

Sorry, Goolge translator...

 

[alwaysbusy]

@dar2o3 ABMaterial is just a GUI layer and depends on Jetty, the database behind your app and how efficient you make your code. At some point (10k simultaneous users), you probably will have to do some load balancing anyway. ABMaterial itself is very optimized in the sence it only loads javascripts, css etc where needed and uses B4J SimpleFutures to make traffic to/from the server as minimal as possible.

Some good reads:

https://webtide.com/why-choose-jetty/

https://www.b4x.com/android/forum/threads/server-performance-measures.37502/#content

 

[dar2o3]

Thank you very much for your reply.

 

[jcesar]

Hi

My vps is a linode ubuntu server.
Can I use ABMaterial and B4j webapps ?