B4J Library [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.00 - for jServer 4.00 (open source, library only):
ABMaterial 5.00 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.00:

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

alwaysbusy

Expert
Licensed User
Longtime User
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.
 

rboeck

Well-Known Member
Licensed User
Longtime User
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!
 

woniol

Active Member
Licensed User
Longtime User
Hi,
I get this in Logs at first run both Demo and Template:
B4X:
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

Well-Known Member
Licensed User
Longtime User
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.
 

Attachments

  • Log.zip
    321 bytes · Views: 428
Last edited:

Harris

Expert
Licensed User
Longtime User

Cableguy

Expert
Licensed User
Longtime User
[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

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

upload_2015-11-9_8-34-44.png
 

alwaysbusy

Expert
Licensed User
Longtime User
@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.

pitest.png
 

billyrudi

Active Member
Licensed User
Longtime User
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?
 
Last edited:

rboeck

Well-Known Member
Licensed User
Longtime User
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.
 

alwaysbusy

Expert
Licensed User
Longtime User
@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

Expert
Licensed User
Longtime User
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?
 
Top