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:

tuhatinhvn

Active Member
Licensed User
Longtime User
Please ask a question in a new topic with [ABMaterial] in the subject.

You can't. You can however set the AutoPlay to false in the Initialize method. Add it as a wish into the feedback app.
can you give me an example how to play audio when I click a button I can stop or next audio, or I click a button will load other audio. (Not Playlist, I hate it)
ABMaterialAudioPlayer only load a song and run unlimit, can not stop it to open other media, it is very stupid, I don't think I can use it to code any website to play audio online
 

stanmiller

Active Member
Licensed User
Longtime User
@tuhatinhvn I reposted your question in the B4J Q&A forum here:

[ABMaterial] How to control audio playback when I click a button
https://www.b4x.com/android/forum/t...control-playback-when-i-click-a-button.77337/

This is a good question. Alwaysbusy has been very receptive to adding features to the library where possible. He has a feedback application online where ABM users can add feature requests and report bugs. If you don't have an account, send him a note and I'm sure he'll set you up.

This is a direct link to the feedback app: http://81.165.232.188:8080/feedback/
 

MichalK73

Well-Known Member
Licensed User
Longtime User
ABMNative is amazing to me. Recently I have been thinking about how to solve this problem in order to use mobile sensors. This is really great news for me. Thanks a lot.
 

MichalK73

Well-Known Member
Licensed User
Longtime User
ABNative Example:
1. With the Abmaterial I will send to the GPS device and launch any navigation.
2. Instead of ModalSheet I can use the Material Dialog and send back to the web answer. (ModalSheet I tested is slow in webview)
3. Make a picture and send it to the server.
4. Use the Android tab slide and on each tab tab another web subpage.
5. Read heart rate, immediately send to the server where the graph will be in real time.
And many other possibilities.
This is what I missed. cool
 

alwaysbusy

Expert
Licensed User
Longtime User
Note that for many of these projects you propose, you are probably better of writing a full B4A app with native Android controls than using a WebView!
Every interaction will go back and forth to the server, while a full native app does not have to do this.

So don't overuse this feature and think beforehand how it affects the user of your app.
 

Philip Chatzigeorgiadis

Active Member
Licensed User
Longtime User
This error appears in compilation, after updating Library (and www folder) to version 3.00 from 2.51.
The changes mentioned in the 3.00 checklist have been incorporated.
Collecting data from B4J source files... (1/2)

init SQL Server
Μαρ 16, 2017 3:34:16 ΜΜ com.mchange.v2.log.MLog
INFO: MLog clients using java 1.4+ standard logging.
Μαρ 16, 2017 3:34:17 ΜΜ com.mchange.v2.c3p0.C3P0Registry
INFO: Initializing c3p0-0.9.5.2 [built 08-December-2015 22:06:04 -0800; debug? true; trace: 10]
Start B4J Analyse!
When an error occurs, check the B4JAnalyse.log file in the Objects folder to see the last B4J line it was working on.
Collecting data from B4J source files... (1/2)
ABMShared.bas
ChatShared.bas
DBM.bas
ABMApplication.bas
ABMCacheScavenger.bas
ABMUploadHandler.bas
...
...
WorkFlow.bas
StreamWebDev.b4j
Analysing data from B4J source files... (2/2)
abmapplication._startserver (java line: 478)
java.lang.StringIndexOutOfBoundsException: String index out of range: -3
at java.lang.String.substring(String.java:1955)
at com.ab.abmaterial.ABMPage.WritePageToDiskPerTheme(Unknown Source)
at com.ab.abmaterial.ABMPage.WritePageToDisk(Unknown Source)
at com.ab.abmaterial.ABMaterial.WritePageToDisk(Unknown Source)
at com.ab.abmaterial.ABMaterial.WriteAppLauchPageToDisk(Unknown Source)
at streamweb.ab.com.abmapplication._startserver(abmapplication.java:478)
at streamweb.ab.com.main._appstart(main.java:389)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:497)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:93)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
at streamweb.ab.com.main.main(main.java:29)
 

Samuel Ramirez

Member
Licensed User
Longtime User
Hi Alain,

Congratulations, it's an awesome work!

I just started with the installation of ABMaterial V2.51. At compilation time of the Demo project I received a log related to a missing parameter, uu will see the log in the image in attachment.

Can you tell me if I'm missing something?
 

Attachments

  • ABMaterial-Demo-error.jpg
    ABMaterial-Demo-error.jpg
    30.4 KB · Views: 280

Samuel Ramirez

Member
Licensed User
Longtime User
Thanks Alain, I changed the line as per you suggestion and corrected two lines with same case. I received another error message related to line 90 of complannerpage as you can see it in the log file in attachment.
 

Attachments

  • ABMaterial-Demo-error2.jpg
    ABMaterial-Demo-error2.jpg
    69.3 KB · Views: 267

orynkanov

Member
Licensed User
Hello!
How do ABMaterial and apache ProxyPass?
ProxyPass /cabinet http://192.168.88.2:8888/cabinet
ProxyPassReverse /cabinet http://192.168.88.2:8888/cabinet
ProxyPass /ws http://192.168.88.2:8888/ws
ProxyPassReverse /ws http://192.168.88.2:8888/ws
ProxyPass /js http://192.168.88.2:8888/js
ProxyPassReverse /js http://192.168.88.2:8888/js
ProxyPass /css http://192.168.88.2:8888/css
ProxyPassReverse /css http://192.168.88.2:8888/css
ProxyPass /font http://192.168.88.2:8888/font
ProxyPassReverse /font http://192.168.88.2:8888/font
It does not work.

Hello!
I was on the right track. It is necessary to make so:
<VirtualHost *:80>
ServerName cabinet.site.kz
ServerAdmin [email protected]

ProxyRequests Off
ProxyPass /css http://ipa.site.kz:8888/css/
ProxyPassReverse /css http://ipa.site.kz:8888/css/

ProxyPass /font http://ipa.site.kz:8888/font/
ProxyPassReverse /font http://ipa.site.kz:8888/font/

ProxyPass /js http://ipa.site.kz:8888/js/
ProxyPassReverse /js http://ipa.site.kz:8888/js/

ProxyPass / http://ipa.site.kz:8888/cabinet/
ProxyPassReverse / http://ipa.site.kz:8888/cabinet/

RewriteEngine On
RewriteCond %{HTTP:Connection} Upgrade [NC]
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteRule /(.*) ws://ipa.site.kz:8888/$1 [P,L]
</VirtualHost>
 
Last edited:

amminf

Active Member
Licensed User
Longtime User
Congrats !

3.02 numbering is low for the amount of improvements and new features that brings this new ABM release :)
 
Top