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 10, 2015

@Cableguy Yes. The next update will have a property on the page 'ShowGridInfo=true' to show the grid. Even more, it will help you to code the component in the right cell giving you an indication in the cell top left corner.

Note: Because of the many questions/suggestions I can hardly follow, from now on only stable versions will be released on the first page. However, donators will receive an email with a download link to my betas so they can start playing with the new features/components and bug fixes a lot earlier.

Cableguy · Nov 10, 2015

Can't wait to check my inbox

Gabino A. de la Gala · Nov 10, 2015

Hello!!! First of all, congratulations for your great job!!!

I've found a anomalus behaviour in the new login form. Only appears the first time I access each time I restart the server.

This problem only appears using Chrome. Explorer and Firefox works fine always.

pixet · Nov 10, 2015

great job,
MP

alwaysbusy · Nov 10, 2015

@Gabino A. de la Gala I see what you mean. Unforunately this is not something I can do about it I'm afraid. Chrome does not seem to lose the WebSocket connection fast enough (if you check the taskmanager, there are always a lot of chrome apps running, so maybe this has something to do with it). You could alsways make a 'logoff' button in the app. In the button code, just set

B4X:

ws.Session.SetAttribute("IsAuthorized", "")

Cableguy · Nov 10, 2015

Taking the firsts steps in your framework, I took the time to print out all the code modules in the demo, and the start tips of the webapp.
Just followed them and my folder tree is created as described, but I'm getting a few weird logs, and nothing shows up in the browser but an occasional "404" or a "Not Connected" message...

here's my log:

B4X:

Program started.
java.lang.NullPointerException
 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 net.lusufibra.abmapplication._startserver(abmapplication.java:103)
 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.shell.Shell.runMethod(Shell.java:593)
 at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:225)
 at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:158)
 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.ShellBA.raiseEvent2(ShellBA.java:90)
 at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
 at net.lusufibra.main.main(main.java:29)
java.lang.NullPointerException
 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 net.lusufibra.abmapplication._startserver(abmapplication.java:103)
 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.shell.Shell.runMethod(Shell.java:593)
 at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:225)
 at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:158)
 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.ShellBA.raiseEvent2(ShellBA.java:90)
 at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
 at net.lusufibra.main.main(main.java:29)
2015-11-10 19:40:01.328:INFO::main: Logging initialized @1347ms
2015-11-10 19:40:01.522:INFO:oejs.Server:main: jetty-9.1.z-SNAPSHOT
2015-11-10 19:40:01.574:WARN:oejh.MimeTypes:main: java.util.MissingResourceException: Can't find bundle for base name org/eclipse/jetty/http/encoding, locale en_GB
2015-11-10 19:40:01.640:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@babb1{/,file:/D:/B4X/ABMaterialBeta0.99/LusoFibra/Objects/www/,AVAILABLE}
2015-11-10 19:40:01.646:INFO:oejs.AbstractNCSARequestLog:main: Opened D:\B4X\ABMaterialBeta0.99\LusoFibra\Objects\logs\b4j-2015_11_10.request.log
2015-11-10 19:40:01.792:INFO:oejs.ServerConnector:main: Started ServerConnector@1b6d4ae{HTTP/1.1}{0.0.0.0:51042}
2015-11-10 19:40:01.793:INFO:oejs.Server:main: Started @1880ms
Emulated network latency: 100ms

am I missing something?

Gabino A. de la Gala · Nov 10, 2015

alwaysbusy said:
@Gabino A. de la Gala I see what you mean. Unforunately this is not something I can do about it I'm afraid. Chrome does not seem to lose the WebSocket connection fast enough (if you check the taskmanager, there are always a lot of chrome apps running, so maybe this has something to do with it). You could alsways make a 'logoff' button in the app. In the button code, just set

B4X:

ws.Session.SetAttribute("IsAuthorized", "")

I think I found a "relative solution"... Uncheck the option "execute applications in background with Google Chrome is close". In configuration/system

alwaysbusy · Nov 10, 2015

@Cableguy Have you started with a complete copy of the Template folder?

Cableguy · Nov 10, 2015

Yes I did, and did all the Nx stuff...

I will try to Franken the demo until it breaks, lol

Cableguy · Nov 10, 2015

Frankening is way too laborious...

Could your template be executable right out of the box? Like 1 empty page with 1 navbar item?

alwaysbusy · Nov 11, 2015

@Cableguy Damn last minute changes . Just add the line BuildPage to the ABMApplication Initialize method so it looks like:

B4X:

Public Sub Initialize
    Pages.Initialize  
    PageNeedsUpload.Initialize
    ' add your icons
    ' ABM.AddAppleTouchIcon("", "")
    ' ABM.AddMSTileIcon("", "")
    ' ABM.AddFavorityIcon("", "")  
    ' build the local structure IMPORTANT!
    BuildPage
End Sub

Note: I see in the template folder i've also messed up where I've put the .js files. Just to be sure you have the latest versions, move all the .js files from the /Template folder to the /Template/Objects/www/js/ folder.

Sorry for the mess, must've been the fatigue...

I make sure this is remedied in the next update. (I've also uploaded the corrected version on the first page)

Cableguy · Nov 11, 2015

@alwaysbusy ,

Hi Alan, the template is indeed corrected and after the first settings it compiles without any errors.
I now am having the same "unknown source" type of errors with the navbar.
here's my logs:

B4X:

Program started.
java.lang.NullPointerException
    at com.ab.abmaterial.ABMNavigationBar.BuildBody(Unknown Source)
    at com.ab.abmaterial.ABMNavigationBar.Build(Unknown Source)
    at com.ab.abmaterial.ABMPage.WritePageToDisk(Unknown Source)
    at com.ab.abmaterial.ABMaterial.WritePageToDisk(Unknown Source)
    at LusoFibra.net.abmapplication._addpage(abmapplication.java:85)
    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.shell.Shell.runMethod(Shell.java:593)
    at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:225)
    at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:158)
    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.ShellBA.raiseEvent2(ShellBA.java:90)
    at anywheresoftware.b4a.BA.raiseEvent(BA.java:84)
    at LusoFibra.net.main.main(main.java:29)
2015-11-11 10:36:08.695:INFO::main: Logging initialized @903ms
2015-11-11 10:36:08.903:INFO:oejs.Server:main: jetty-9.1.z-SNAPSHOT
2015-11-11 10:36:08.950:WARN:oejh.MimeTypes:main: java.util.MissingResourceException: Can't find bundle for base name org/eclipse/jetty/http/encoding, locale en_GB
2015-11-11 10:36:09.013:INFO:oejsh.ContextHandler:main: Started o.e.j.s.ServletContextHandler@1bbe5e8{/,file:/D:/B4X/ABMaterialBeta0.99/LusoFibra/Objects/www/,AVAILABLE}
2015-11-11 10:36:09.019:INFO:oejs.AbstractNCSARequestLog:main: Opened D:\B4X\ABMaterialBeta0.99\LusoFibra\Objects\logs\b4j-2015_11_11.request.log
2015-11-11 10:36:09.156:INFO:oejs.ServerConnector:main: Started ServerConnector@61f5df{HTTP/1.1}{0.0.0.0:51042}
2015-11-11 10:36:09.157:INFO:oejs.Server:main: Started @1416ms
Emulated network latency: 100ms

[EDIT] browsing the demo, I see the SideNavBar being created in the shared module, so why do we have the navbar props/methods on the pagetemplate? where should a navbar be created?

[EDIT2] I managed to figure it out! at the end, its all a matter of logic!

Cableguy · Nov 11, 2015

Hi Alain,

two questions:
Q1 - Is it possible to set a sidenavbar without the topbar?
Q2.1 - if Q1 is yes, what would be the best and easiest way to place a fixed header?
Q2.2 - if Q1 is NO, is it possible to change the bar height and to add a text overlay to it?

alwaysbusy · Nov 12, 2015

No, a sidebar cannot exist without a topbar. Reason is for mobile devices, where the sidebar disappears and the user can use the 'hamburger' icon in the topbar to open the side menu. If you do not use it on mobile devices, you may try to set the backcolor nd forecolor of the topbar transparent + set the top bar to floating. Not tested, and I do not advice this even if it works because it should be possible to open your app on a mobile device. Without a topbar, the menu cannot be opened on all devices.

Cableguy · Nov 12, 2015

Hi Alain,

Then, could the top bar have a "DesktopBarHeight" kinda of attrib, so that when displaying in a desktop the icon can be a little bigger?
I'm running in a high res screen, and it gets resized to a point that it is almost unrecognizable!
https://www.dropbox.com/s/w9zct0girnflaqr/Screenshot 2015-11-12 17.44.48.png?dl=0

Roberto P. · Nov 12, 2015

hello congratulations for the improvements to the framework. At this point it would be interesting example that exchanges data between the controls and frameworks, and a database on the server.
Thank you
best regards

alwaysbusy · Nov 13, 2015

@Cableguy I don't see anything wrong with your screenshot. What am I missing?

alwaysbusy · Nov 13, 2015

Donators should receive a mail with the new version. Let me know if you did not get it.

Cableguy · Nov 13, 2015

It's not wrong, just way to small to be considered as a Logo on its own... I can live with that

Roberto P. · Nov 13, 2015

that version releases? I see that you can download the 0.99! That the donation amount?

B4J Library [Web][ABMaterial] Framework for WebApps

Expert

Expert

Well-Known Member

Member

Expert

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Expert

Well-Known Member

Similar Threads

Privacy & Transparency

Privacy & Transparency