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

 

[imbault]

Bravo Alain, excellent work, very good emerging new framework.

Congrats.

Patrick

 

[somed3v3loper]

Amazing work Alain .
You did a great job.

You cannot upload it to a normal webserver. Press run in b4a (you're starting the server). Then open your browser and go to http://localhost:51042/demo. Remember, b4j does not create websites. It creates webapps.

Why can't we upload to normal server ?

 

[Cableguy]

I have one question and one wish!
Q: is it possible to add a "normal" control to a cell?
W: a login control... I plan to use your framework as interface to my server and I will need user access control...

 

[narek adonts]

I think the top feature that can be added in the feature is to add a visual designer for your framework to be able to build web apps with a wysiwyg tool.

 

[billyrudi]

Hi AlwaysBusy,
very nice app!!
please attention to the function
AddPage
in Linux it not works if you don't change the backslash like under....

public Sub AddPage(Page As ABMPage)
    Pages.Add(Page.Name)
    Page.Title = Title
    Page.Description = Description
    PageNeedsUpload.Add(ABM.WritePageToDisk(Page, File.DirApp  & "/www/" & AppName & "/" & Page.Name & "/", "index.html"))
End Sub

regards Paolo

 

[billyrudi]

an example of my one night app...

 

[alwaysbusy]

i have a problem in linux in

Can you describe your problem (logs?). It is kind of hard to find a bug through thousands of lines of code if I do not know what I'm looking for. With logs, at least I get an indication of the line where it crashes.

 

[billyrudi]

hi the AddPage function in linux don't works if you have the slash like \ in the line

File.DirApp & "\www\" & AppName & "\" & Page.Name & "\"

the app don't start with an error in path not found

 

[Erel]

Note that backward slashes '/' will work on all platforms.

 

[billyrudi]

yes i confirm this Erel.

 

[alwaysbusy]

@billyrudi Ah ok, I will change that. must have overlooked it as I develop on windows. I thought the navigation bar problem was not related to that remark about the "/".

 

[alwaysbusy]

btw, your app looks great with ABMaterial, doesn't it? Nice to see someone is building a real world app with it already

 

[PhillipMorris]

Great job. Amazing Framework.
Can you please tell me why can't we upload to a normal server ?

 

[Cableguy]

I thinks that, if the server has Java capabilities, you can...
The thing is, it cannot be triggered just by accessing www.mysite.com, the index.html page will have to redirect to the webbap entry point.
This has yet not been tested.

 

[Cableguy]

Hi Alan, have you taken a look at these two small points?

 

[alwaysbusy]

I'm working on both of them right now.

 

[Cableguy]

NICE!!!!!!!!

 

[Cableguy]

I thinks that, if the server has Java capabilities, you can...
The thing is, it cannot be triggered just by accessing www.mysite.com, the index.html page will have to redirect to the webbap entry point.
This has yet not been tested.

I can now confirm that it works... I just uploaded the folder "www" to my hosted webspace, and entered in the address tab "www.tugadroid.net/www/demo" and it started the webapp!!!

for now I just see the ABMaterial in the title tab, and the circular waiting thingy... I have a very slow connection!! So can anyone try to access it from my page above?

 

[alwaysbusy]

Your jar file is not running on your webspace I think (Chrome F12 key, log). It is not enough to upload the files to your webspace, your webspace must be capable to run the .jar file (javac.exe -jar ...)

WebSocket connection to 'ws://www.tugadroid.net/ws/demo' failed: Error during WebSocket handshake: Unexpected response code: 404

 

[Cableguy]

then why do I get the circling waiting ring? isn't he also a part of ABM's?

Ok, so I've been searching my CP and found nothing about java or .jar, I guess I just can't run from my webspace... still, mu raspi based webserver is slowly coming to life!!!