B4J Library [Web][ABMaterial] Framework for WebApps

alwaysbusy · Nov 5, 2015

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 · Nov 18, 2015

there is a problem: after some time, the application is disconnected and is no longer reachable. There is a timer that stops or after a little time?

Can you give me some more info about this? I have seen a similar thing myself, but I also noticed this only happened when I was debugging a lot and I was starting and stopping the server a lot, while keeping my Chrome browser open, which sometimes confused the jServer library (jetty). ABMaterial has a build in 'timer' in the browser part where, if it loses connection starts a timer every 3 seconds to reconnect. You can see this in the b4j_ws.js file in the www/js/ folder.

Gabino A. de la Gala · Nov 18, 2015

alwaysbusy said:
A mail with an update of ABMaterial has been sent to the donators containing a fix for the refresh() problem. As this one is rather important for everyone, it would be nice if I could get some quick feedback so I can put this release out for everyone.

I send you a mail with problem detected with the update of tables.

Thanks for your work.

alwaysbusy · Nov 18, 2015

@Gabino A. de la Gala I'll send an update in about half an hour. Seems a big chunk of code was somehow deleted in the lib I've send you. (e.g. I don't think that you have the method called tbl.SetString(row, col, value). Also, I forgot one crucial piece of information. I'll explain more in the mail.

Roberto P. · Nov 18, 2015

alwaysbusy said:
Can you give me some more info about this? I have seen a similar thing myself, but I also noticed this only happened when I was debugging a lot and I was starting and stopping the server a lot, while keeping my Chrome browser open, which sometimes confused the jServer library (jetty). ABMaterial has a build in 'timer' in the browser part where, if it loses connection starts a timer every 3 seconds to reconnect. You can see this in the b4j_ws.js file in the www/js/ folder.

like you said, if I keep the browser open and without any operation, after about 20 minutes the system is no longer available. If I press a button appears red "Disconnected". If it happens, I do print screen.

I am using the example standar.

I try now with the new version that you sent and if it happens, I am sending my ip public server.

Hello

Roberto P. · Nov 18, 2015

Hello
I also tried the new version and the problem remains.
If you leave the brower any page ABMaterial demo open for about 20/30 minutes crashes.
This problem is much thanks and should be fixed.
thank you
Roberto

Roberto P. · Nov 18, 2015

Alain
would be interesting to also implement Ajax, if possible, to avoid that when you press a menu to be recharged all pages, not just the modified part.
I hope you feel this interesting.
Thank you

alwaysbusy · Nov 19, 2015

@Roberto P. Nothing about your crash problem has changed in v1.02. I don't seem to be able to reproduce it over here. Page has been open for hours and still does what it has to do. Also, the server app does not report a problem.

Can you give me the exact steps you're doing? I need as much information as possible. Some things that may help identifying the problem:
Do you see disconnects in B4J?
Do you get crash logs in B4J?
Using chrome, pressing F12 and looking into the console, do you see crash logs?

As for Ajax. As long as you stay on the same page, there is Ajax-like behaviour. That is why components have a refresh() method. e.g. if you do tbl.refresh(), the page is not reloaded but only the table is changed using DOM manipulation. This is also why you should avoid page.refresh() as this is almost the same as navigating to the page again.

Only when you use the navigation bar the new page is loaded (but this is normal, as it actually navigates to another html page). It does not recharge all pages, just the page belonging to the menu item. And it is impossible to put all the b4j pages into one html file. I've tried that in the beginning with iFrames and it immediately was causing a lot of trouble. Also, it was much harder to build WebApps in B4J. It was very easy to write code that crashed the whole app (e.g. using the same id for a component between pages).

It was a matter of balance of creating a framework that is easy to use in B4J (server side) and what happens on the client side (browser). I decided to use B4J to build ABMaterial to make it easy for the programmer. It does not, like B4A or B4i, 'translate' the B4J code to another programming language.

So in short, no. ABMNavigationBar behaviour will not change, at least not in the near future.

Gabino A. de la Gala · Nov 19, 2015

alwaysbusy said:
@Gabino A. de la Gala I'll send an update in about half an hour. Seems a big chunk of code was somehow deleted in the lib I've send you. (e.g. I don't think that you have the method called tbl.SetString(row, col, value). Also, I forgot one crucial piece of information. I'll explain more in the mail.

Tables work fine yet!!!

Thanks!!!

billyrudi · Nov 19, 2015

Hi, AlwaysBusy,
tank you you for all job!
In my smartphone S6 edge the tostmessage when the text is long does not appear appear correctly. the panel's heigth does not increment itself so the text is out of it both upper than down.
wath i can do?

billyrudi · Nov 19, 2015

AlwaysBusy,
there is a way to inject javascript code to a page or a control?

alwaysbusy · Nov 19, 2015

There is a future feature to do this, but THIS IS COMPLETELY UNTESTED! If it does not work, I'm not going to be able to look into this as I still got a lot on my plate.

Page has two methods:

page.AddExtraJavaScriptFile(fileName)
page.AddExtraCSSFile(fileName)

files need to be placed in the js folder and css files in the css folder.

In theory, you should be able to use the default B4J page.ws.RunFunction() and page.ws.RunFuctionWithResult() methods.

If it does work, it would be great if you could report this to the forum, as other could use it too.

alwaysbusy · Nov 19, 2015

@billyrudi

In my smartphone S6 edge the tostmessage when the text is long does not appear appear correctly. the panel's heigth does not increment itself so the text is out of it both upper than down.
wath i can do?

nothing I'm afraid. This is the case in the materialize.css framework I'm using and until those guys fix this, that's how it appears in ABMaterial.

Roberto P. · Nov 19, 2015

alwaysbusy said:
@Roberto P. Nothing about your crash problem has changed in v1.02. I don't seem to be able to reproduce it over here. Page has been open for hours and still does what it has to do. Also, the server app does not report a problem.

Can you give me the exact steps you're doing? I need as much information as possible. Some things that may help identifying the problem:
Do you see disconnects in B4J?
Do you get crash logs in B4J?
Using chrome, pressing F12 and looking into the console, do you see crash logs?

As for Ajax. As long as you stay on the same page, there is Ajax-like behaviour. That is why components have a refresh() method. e.g. if you do tbl.refresh(), the page is not reloaded but only the table is changed using DOM manipulation. This is also why you should avoid page.refresh() as this is almost the same as navigating to the page again.

Only when you use the navigation bar the new page is loaded (but this is normal, as it actually navigates to another html page). It does not recharge all pages, just the page belonging to the menu item. And it is impossible to put all the b4j pages into one html file. I've tried that in the beginning with iFrames and it immediately was causing a lot of trouble. Also, it was much harder to build WebApps in B4J. It was very easy to write code that crashed the whole app (e.g. using the same id for a component between pages).

It was a matter of balance of creating a framework that is easy to use in B4J (server side) and what happens on the client side (browser). I decided to use B4J to build ABMaterial to make it easy for the programmer. It does not, like B4A or B4i, 'translate' the B4J code to another programming language.

So in short, no. ABMNavigationBar behaviour will not change, at least not in the near future.

Hello
I found the cause of the problem: using the program in an ADSL network without a fixed IP, the program disconnects.
Fixed IP is ok.

I understand that implementing Ajax is complicated, but it is nice to see the load of the entire site when running the press the main menu.
We expect .....

Gabino A. de la Gala · Nov 19, 2015

Is it possible to raise a double click event in the cells of tables?

If very complicated. Is there a way to set the duration of the click to jump event?.

My request is the following. On the computer there is not much problem , since the scroll is done with the mouse and the corresponding displacement bar . The problem we have when we use the web from a smartphone or tablet, as we need to nibble on the grid itself to achieve vertical or horizontal motion. And that simple touch to "move" is considered like a click , triggering the event.

Roberto P. · Nov 19, 2015

hello Alain
I requested hoping not to be too picky, but only to improve the framework!

It would be helpful to have two new controls that do not think I have seen:

- Autocomplete
- TreeView

Thank you in advance
Greetings

Cableguy · Nov 19, 2015

with all the feature requests being made, Alain will be "alwaysbusy" up until version 10000!!!

alwaysbusy · Nov 20, 2015

I would like to release version 1.02 somewhere next to the public, so if there are bugs (no new features!) in 1.02, please let me know.

I would suggest you'll mail me the feature requests and bugs, because a lot is going to be lost in the forum I'm afraid.

Maybe also keep posting it in the forum so everyone can see it do avoid doubles.

Use the following subjects in the mail (I'm using rules in my email program to get things organized):

Features subject line:
ABMaterial FEATURE

Bug subject line:
ABMaterial BUG

Also, know not all requests will make it. I'm currently working on the calendar control and it's a monster! Already spend every morning and night this week before and after my day job on it and there is still a lot, lot, lot of work to do on it!

But it is starting to look nice into the framework:

Roberto P. · Nov 20, 2015

Alain goes well, we will write email
Great view of the calendar ... Fantastic!
Thank you
Roberto

Gabino A. de la Gala · Nov 21, 2015

Are there something similar to the event " keypressed " in edit fields?

And so we can try to make suggestions in a list or something similar

Gabino A. de la Gala · Nov 23, 2015

You can highlight somehow selected in a list or table row ?

Thanks.

B4J Library [Web][ABMaterial] Framework for WebApps

Expert

Well-Known Member

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Well-Known Member

Active Member

Active Member

Expert

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Expert

Expert

Well-Known Member

Well-Known Member

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency