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
Click to expand...

ABMaterial is DonationWare.

Click here
if you like to donate
Click to expand...

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
Click to expand...

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:


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
Click to expand...
Demo source code (for v4.51, not yet updated for 5.15, but still usefull to learn ABM): https://gorgeousapps.com/ABMExtras4.51.zip
Click to expand...

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!
Click to expand...

Alain Bailleul
Alwaysbusy's Corner
 
Last edited:
Click to expand...

Cableguy

Expert
Licensed User
Longtime User
alwaysbusy said:
No its not. I'll try to set something up.
Click to expand...

An online full blown demo will help you get more donators as users can see and explore the possibilities of the framework!
 

ciprian

Active Member
Licensed User
Longtime User
Hello, first of all, i'd like to thank you for this brilliant library.
I'm kinda a newbie so please be patient
I'm trying to change the logo and i have added a logo.png image.
After some tries, i've changed this image with another one.
But it is showing the old one....dont undestand why.
 

Harris

Expert
Licensed User
Longtime User

Delete your browser history. It is probably caching the old image.
Please use B4J Questions for future posts.

Thanks
 

billyrudi

Active Member
Licensed User
Longtime User
Hi to all
On ipad the demo not works.
Alwaysbusy tomorrow i will give you the solution for local variables with the version 4 of b4j so you can think about...
 

Cableguy

Expert
Licensed User
Longtime User
sanjibnanda said:
wonderful work!
can ABM be used with UI apps? I mean without server implementation.
thanks
Click to expand...
You can use it without an internet connection by calling the localhost in the browser
 
B

b4auser1

Well-Known Member
Licensed User
Longtime User
I followed the "Getting started" to create a test application. I started the application and just see the set of folders under www.
Could you hint what I have missed to do ?
 

Harris

Expert
Licensed User
Longtime User
b4auser1 said:
I followed the "Getting started" to create a test application. I started the application and just see the set of folders under www.
Could you hint what I have missed to do ?
Click to expand...
In your browser, do you have a page open looking for the app? Note the port number you set in your app...
http://localhost:51048/yourtest
 

corwin42

Expert
Licensed User
Longtime User
I just started to play around with this framework to evaluate it for a current project I'm doing.
Great work!

Are there any plans to add an ABMSlider control? I need to set up some numeric values in my application and I am missing a slider badly.

Really great work so far.
 

Cableguy

Expert
Licensed User
Longtime User
In the demo provided there is a slider, i think near the kenny example, that can be used as a numérica slider
 
B

b4auser1

Well-Known Member
Licensed User
Longtime User
Harris said:
In your browser, do you have a page open looking for the app? Note the port number you set in your app...
http://localhost:51048/yourtest
Click to expand...

Thank you. It works.

I added this code with filter to redirect from http://localhost:51048 to http://localhost:51048/yourtest

B4X: 
public Sub StartServer(srvr As Server, srvrName As String, srvrPort As Int)
...   
    srvr.AddFilter("/", "ABM_Filter_Root2App", False)
   
    srvr.Port = srvrPort
    srvr.Start       
End Sub

B4X: 
'Class module
Sub Class_Globals
   
End Sub

'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize

End Sub

'We can use a Filter class to redirect all http traffic to https:
'Return True to allow the request to proceed.
Public Sub Filter(req As ServletRequest, resp As ServletResponse) As Boolean
        resp.SendRedirect($"/${ABMShared.AppName}"$)
     Return False
End Sub
 
B

b4auser1

Well-Known Member
Licensed User
Longtime User
My impression from framework - it is very great.

I have some suggestions to make small improvements to templates.

1. Move to ABMShared
B4X: 
    ' name of the app
    Public Const AppName As String = "APPNAME"          '<-------------------------------------------------------- IMPORTANT
and remove Private AppName As String = "APPNAME" from all modules. Use ABMShared.AppName instead.

2.
Add to ABMShared
B4X: 
    Public Const wsProtocol As String = "/ws/" ' or "/wss/"

and change everywhere from
B4X: 
srvr.AddWebSocket("/ws/" & AppName, "ABMApplication")
to
B4X: 
srvr.AddWebSocket(ABMShared.wsProtocol & AppName, "ABMApplication")

3. Add to ABMApplication template code to setup ssl for server.
 

alwaysbusy

Expert
Licensed User
Longtime User
Are there any plans to add an ABMSlider control? I need to set up some numeric values in my application and I am missing a slider badly.
Click to expand...

Possibly. As for now, you can make your own slider like in the ABMCanvas demo page. The problem with such a control is the same you have with a 'mousemove' event: it is impossible to send the 'current' position back and forth to the server all the time.
 

alwaysbusy

Expert
Licensed User
Longtime User
It looks like the facebook login for the feedback does not work. Just checked it and Facebook does not accept my homebrew server to run the app. Makes sence, as you do need a valid registered domain name to run facebook apps.

So, as from now on, if you need a 'guest' login, just email me at: alain.bailleul@pandora.be
 

Harris

Expert
Licensed User
Longtime User
corwin42 said:
I just started to play around with this framework to evaluate it for a current project I'm doing.
Great work!
Click to expand...

@corwin42 Glad to see you discover this amazing framework. I, for one, find it most helpful in creating web-apps without the usual (extreme) effort.
Having spent over 2 years trying to learn HTML, JavaScript, php, Ajax, Jquery, Koolphp, phpMeastro, and the lot to create a complex website; I am very pleased to finally embrace the usefulness of B4J with the inclusion of ABMaterial framework (modern web UI design). Other frameworks create a HUGE amount of php code that requires a masters in computer science to decipher, modify and make work!

Like most (poor developers), I have not the time nor financial resources to contract a "web designer" to build my back end. I have been down this path only to discover they have no idea of the project scope (even when documented) and how pieces integrate. Sure, many can create an attractive front end with static pictures, sliders, contact forms etc (so can I - to a degree).

As I have discovered (and many others as well), this framework is constantly evolving / improving with the hard work of alwaysbusy within his time frame constraints. It is not complete but at least - 85 percent there. As you may be aware, he has created a Feedback channel where we can post new feature requests, log bugs and communicate ABM progress apart from the B4X comm channel.

I hope, based on your expert knowledge of all things programmable, that as you discover how to use this framework, you can provide snippets and tutorials that will advance us all to a higher level of understanding. We shall be most appreciative.

Thanks
 

alwaysbusy

Expert
Licensed User
Longtime User
@corwin42, and others
Are there any plans to add an ABMSlider control?
Click to expand...

Two new controls for v1.05: ABMSlider and ABMRange. Both are horizonal only and unless Materialize CSS implements a vertical one, this is going to be our slider/range control.



 

Javier Lovay

Member
Licensed User
Longtime User
Hello, your work is excellent.
Can use your framework in B4A? I am developing an web app in B4A that run on a android server.
Thanks and congratulations!
 
You must log in or register to reply here.

Similar Threads

  • Question
B4J Question ABMaterial Framework for WebApps
Replies
3
Views
924
MichalK73
  • Article
B4J Tutorial [ABMaterial/ABMServer] Mini Template for absolute beginners (update 2024/05/17)
2 3
Replies
46
Views
22K
alwaysbusy
  • Article
Share My Creation [ABMaterial] Project.Show
Replies
6
Views
3K
MathiasM
M
  • Article
B4J Library [ABMaterial] New in 2.00 preview
Replies
11
Views
3K
alwaysbusy
  • Article
B4J Tutorial [ABMaterial] New component ABMPDFViewer in 1.08
Replies
0
Views
3K
alwaysbusy
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…