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

 

[joulongleu]

Thank you for your help, BJ4 6.0 & Abmaterial 4 above, the perfect combination

 

[MbedAndroid]

@MbedAndroid Please ask questions in a new topic using '[ABMaterial]Your question' in the subject


This would mean that the class 'ABMCacheControl' (exactly that name) is missing. If you do have it in your project, we'll continue the conversation in the new topic.

done see https://www.b4x.com/android/forum/threads/abmaterial-question-about-update-4-03.86712/

 

[inakigarm]

Is there any problem with alwaysbusy.no-ip.org/feedback ? (can't connect)

 

[MichalK73]

https://feedback.abmaterial.com/feedback/

 

[alwaysbusy]

alwaysbusy.no-ip.org/feedback

That url does not work anymore.

Try:

feedback.abmaterial.com (should go to https://feedback.abmaterial.com/feedback/)

Or:

http://81.165.232.103:8080/feedback/

 

[alwaysbusy]

@MichalK73 you beat me

 

[inakigarm]

That url does not work anymore.
Try:
feedback.abmaterial.com (should go to https://feedback.abmaterial.com/feedback/)
Or:
http://81.165.232.103:8080/feedback/

Thanks, can you change the incorrect URL on first post?

 

[alwaysbusy]

Done! Thanks for letting me know. Complete forgot it was mentioned there too.

 

[mindful]

@alwaysbusy you need to change it in next version changes txt files. In 4.03 it's the old url.

 

[LWGShane]

@alwaysbusy - Could you post your NGINX conf file for the feedback app? I'm kinda a noob at creating NGINX sites so something more complex like a ABMaterial proxy is beyond me.

Thanks!

 

[alwaysbusy]

I'm not using NGINX but HAProxy. I'll upload that config when I'm at home.

 

[alwaysbusy]

Here it is (I'm not a specialist either):

global
  log /dev/log local0
  log /dev/log local1 notice
  chroot /var/lib/haproxy
  stats socket /run/haproxy/admin.sock mode 660 level admin
  stats timeout 30s
  user haproxy
  group haproxy
  daemon
  debug

 defaults
  log global
  mode tcp
  option tcplog
  option dontlognull
  timeout connect 15s
  timeout client 15s
  timeout server 15s
frontend localhost80
  bind *:80
  mode http
  acl host_feedback hdr(host) -i feedback.abmaterial.com
  acl is_root path -i /
  http-request set-path /feedback if is_root
  redirect scheme https code 301 if !{ ssl_fc } host_feedback
  
frontend localhost443
  bind *:443
  option tcplog
  mode tcp

  acl tls req.ssl_hello_type 1

  tcp-request inspect-delay 5s
  tcp-request content accept if tls

  acl host_feedback req.ssl_sni -i feedback.abmaterial.com
  use_backend feedback if host_feedback

 backend feedback
  server feedback1 192.168.xxx.xxx:xxxxx check

 listen stats
  bind :9000  
  mode http
  log global
  stats enable
  stats hide-version
  stats refresh 30s
  stats show-node
  stats uri /haproxy?stats
  stats auth LOGIN:PASSWORD
  stats admin if TRUE

# these are the error pages returned by HAProxy when an error occurs
#  customize as needed
  errorfile 400 /etc/haproxy/errors/400.http
  errorfile 403 /etc/haproxy/errors/403.http
  errorfile 408 /etc/haproxy/errors/408.http
  errorfile 500 /etc/haproxy/errors/500.http
  errorfile 502 /etc/haproxy/errors/502.http
  errorfile 503 /etc/haproxy/errors/503.http
  errorfile 504 /etc/haproxy/errors/504.http

 

[alwaysbusy]

IMPORTANT NOTICE: https://www.b4x.com/android/forum/t...olation-with-the-abm-license-agreement.87773/

 

[Mirko Melegari]

i'm trying to start with abmaterial , i've installed and followed the instruction but...
when i load the app in browser this is the
page i see:

http://localhost:51042/prova

Resource Not Found.
Error 404: The requested resource could not be found but may be available again in the future.

You can go back to the homepage by clicking here!

could you please help me?

 

[alwaysbusy]

could you please help me?

Please start a new question, using [ABMaterial] in the subject title. Thank you!

Some checks:

1. So you did do the following in ABMApplication

Private InitialPage As String = "YourStartPage/"  '<-------- First page to load, case sensitive

In initialize:

ABMShared.AppName = "prova" '<-------- your app name, case sensitive

2. your .jar is running
3. you have the full www folder (with js,css,font)
4. you have the .needs file next to your jar

 

[Blueforcer]

Hey. i try to study this awesome Work.
I started the Demo app but every code Section ist black?
It seems that the Syntax highlighting doesnt work. Black font color and black background.
Can someone help me?

 

[billyrudi]

Alain hi,
there is a way to initilize a recursuve timer at root time?
I have need to display generic informations or push informations.
Regards Paolo

 

[alwaysbusy]

@Blueforcer see this topic: https://www.b4x.com/android/forum/threads/abmaterial-problem-with-the-demo.86833/#post-549645

 

[alwaysbusy]

@billyrudi for questions, please start a new topic with [ABMaterial] in the subject. Thank you!

You can use the normal timer in B4J I guess

 

[Cableguy]

Hi Alain, any eta on 4.25?