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

 

[alwaysbusy]

That is just the code in the html. Once the page is loaded, it needs to be able to connect to your .jar file to continue the rest. All interaction with the webapp is done through the websockets with you app written in b4j. I think you're a little confused on what b4j actually does. If you download Erel's demo app (https://www.b4x.com/android/forum/threads/webapp-web-apps-overview.39811/), you won't be able to put that on your website either if your server is not able to run the jar file. Very few web webspaces do and they are not very cheap to hire.

 

[Erel]

(This is not really related to this thread)
You need a virtual private server (VPS) with SSH access to run B4J server apps. There are low-cost offers (~20$ per month).

You can also use your own computer as a server: https://www.b4x.com/android/forum/threads/37201/#content

 

[alwaysbusy]

Thank you Erel for the explanation.

Update: New version 0.99 available. (see first post). If you have started to write an WebApp with ABMaterial, I had to make adjustments in certain existing objects, but this is the nature of being beta.

 

[rboeck]

Hi,

today i made an raspberry day and i checked, if ABMaterial now works on linux, or exactly on the rpII. The positive - it compiles without errors, it creates a local index.htm an i see the three running circles - but forever. Now i tried to run it on an old mac - exactly the same.
As client machine i see no problems on mac and on raspberry. If you want, i can help you debug on these systems, if its interesting for you.
Thanks for the new version!

 

[alwaysbusy]

@rboeck Is this the demo with the new version (0.99)? Maybe it's a bug in my latest compilation. You can also try setting page.ShowLoader=false in the BuildPage() and see what shows up then. Pressing F12 in the Chrome browser could reveal where it goes wrong.

 

[woniol]

Hi,
I get this in Logs at first run both Demo and Template:

java.lang.UnsupportedClassVersionError: com/ab/abmaterial/ABMComponent : Unsupported major.minor version 52.0

Any idea where is the problem?

Compiling with Java 1.8 solved the problem

 

[rboeck]

It is the new version, the older one had problems with the slashes... I found more then 30 times page.Showloader and made on global replace to false. The problem stays the same. F12 in Chorme allows a wide range of possibilities, what exactly an i do? I can open an teamviewer session, if you can use it...
I have attached the console log, because there are much 404 resource errors.

 

[Harris]

(This is not really related to this thread)
You need a virtual private server (VPS) with SSH access to run B4J server apps. There are low-cost offers (~20$ per month).

You can also use your own computer as a server: https://www.b4x.com/android/forum/threads/37201/#content

Need a low cost server?

Check this link out.

https://www.weloveservers.net/openv...tm_campaign=massive_50_fall_hosting_sale_name

I have 7 VPS from these guys - 3 are only $19 Cdn per YEAR.

 

[Cableguy]

[NEW]: Side bar position can be preserved with Page.SaveNavigationBarPosition in Page_NavigationbarClicked() event and restored in Page_Ready() event.

[NEW]: Demo has been extended to show login screen (login: demo, password: demo).

[CHANGED]: ABMSlider is now called ABMImageSlider

THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!THANK YOU!

did I said THANK YOU! already?

 

[little3399]

HI,
I run the new version (0.99) and get some error ? and how to fixed it ? Tks!

 

[alwaysbusy]

You are running the old demo project with the new library files. As mentioned methods have changed so that does not work. Use the new demo project.

 

[alwaysbusy]

@rboeck Sorry for the late reply but as I do not have a raspberry pi, I had to setup a virtual one using QEMU and that was not so obvious. Just tried it and everything goes as it should (even with emulator only having 256MB of ram). From your logs, did you copy all the files to your raspberry pi? It looks like you are missing all the javascript and css files. You have to copy all the files to your rasperry pi, not only the jar. (I did even too much probably as the www folder should be enough.

 

[billyrudi]

Hi alwaysbusy,
tanks for the last post to me.
There are some visualitations problems in the footer page on the ipad. it don't show at bottom when page is portrait. do you know already?

 

[alwaysbusy]

@billyrudi I was not aware there was a problem. All you put up was a screenshot of your app. I need more info before I can start looking into the problem. (type ipad, browser, code, logs...)

 

[rboeck]

Hi, i worked with the b4j bridge with remotedebugging and did not copy anything by myself. As i see i have a folder tempjars, inside there is a www folder with demo folder inside. Inside this demo folder are 172 files, for each page a folder etc. There are also the files index.htm, demo.css, demo.js and donotdelete.conn.
Today i found, thats the problem is in combination with remote debugging. Even on a PC there are the same symptons as descripted, so i will try to make my setup manually and look, what will haben.

 

[Cableguy]

Just made my donation... Not much, enough to buy yourself an happy meal!

 

[little3399]

@alwaysbusy , Does the password's display can be show in "*"

" ?

 

[alwaysbusy]

@little3399 Yes, check out ABMInput in the demo app. There is a password field there.

 

[alwaysbusy]

@rboeck You have to copy the files manually, remote debugging does not copy the files (this is default B4J behaviour, nothing to do with ABMaterial). ABMaterial helps a bit by creating the Demo folder and files, but cannot copy your images, other css/js files needed etc. Check Erels posts on this subject for more info.

 

[Cableguy]

Hi Alan,

When creating the grid, is it possible to have it empty but still "seeing" the placeholders, maybe by having a border on the grids?