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...

amminf

Active Member
Licensed User
Longtime User
Congratulations on your formidable and great work and also the mini team
I am not in a hurry to upgrade, but if I adapt my webapp to the new session system to ABM 2.03, will it be compatible with ABM 2.04, or should I wait?

BTW. Very cool new reconexion system
 

alwaysbusy

Expert
Licensed User
Longtime User
Thanks! Yes it will keep working (mixing both systems won't be possible). Also, we are discussing if for example GetUUID() shouldn't be called GetPageID(). The method will have the same functionality. It's just that terms like UUID may not be clear to everyone and PageID could. Not sure if the name will change, and if it does it will be a quick search/replace. In any case, if you do the change now and want to switch to the new one, it won't be a huge task. Changing the 2.03 session system to the 2.10 system will take me problably 15 minutes in the Demo app for example for all pages.
 

amminf

Active Member
Licensed User
Longtime User
okay. I'll transition to 2.03 as soon as I find a free time slot. Thks.
 

clarionero

Active Member
Licensed User
Longtime User
Hi. I'm begining to work with this fantastic framework, Congratulations!!!

I have a "simple" question: if i configure a dedicated server machine for use it, can i define it to use the default web port 80 for all my applications? or i must use ever diferent ports por each diferent application?

Thanks

Rubén
 

clarionero

Active Member
Licensed User
Longtime User
O

orynkanov

Member
Licensed User
Hello! How to add text on a new line in ABMCard? If writing CRLF, CRLF is changed to a space. If you write {BR}, the line looks like "qwe{BR}rty." I use ABMaterial 1.22.
 
Last edited:

stanmiller

Active Member
Licensed User
Longtime User
A minor edit to ABMSessionCreator.bas for those updating to 2.17.

The new session creator includes a log message that changes the global DateTime.Format. Instead you can use SimpleDateFormatter to format the date which is ideal for situations where you want to log the time without adversity.

B4X: 
'Filter class
Sub Class_Globals
    Private sdf As SimpleDateFormatter
End Sub

Public Sub Initialize
    sdf.Initialize( "dd/MM/yyyy HH:mm")
End Sub

'Return True to allow the request to proceed.
Public Sub Filter(req As ServletRequest, resp As ServletResponse) As Boolean

'    DateTime.DateFormat = "dd/MM/yyyy"
'    DateTime.TimeFormat = "HH:mm"
'    Log("In filter: " & DateTime.Date(DateTime.Now) & " " & DateTime.Time(DateTime.now))

    Log("In filter: " & sdf.GetDateTime())

    req.GetSession  'a new session will be created if a session doesn't exist.    
    Return True
End Sub

Class attached to this post. Follow this link for a demo and sample B4A project.

B4A/B4J Class - Save the Date! with SimpleDateFormatter
https://www.b4x.com/android/forum/threads/save-the-date-with-simpledateformatter.73998/
 

Attachments

  • SimpleDateFormatter.bas
    4.6 KB · Views: 346
Last edited:

Harris

Expert
Licensed User
Longtime User
The following statement is a response from an associate who was deeply involved (DB admin - project manager), as was I (tech support), with a previous company.
I sent him a link to my modified Feedback app for him to explore.

His response:

This is unreal! Hard to believe the "company" apps still run on "Flex" whatever the heck that is. You could single handedly take down 80% of the IT staff there and eliminate the need for "a company's staff!" If there was only a way to get you in a room for a full day with " the company owners"

The "company" was referring to an actual entity - that I disguised. They have already spent 10 M (USD) in developing something going nowhere.

This shows that others with an understanding of what is required to develop such complex projects - are TOTALLY amazed at the B4X simplicity.

I was amazed at his response. Many out there have much to discover.

But how (as Erel asks - promote B4J) ?
 

techknight

Well-Known Member
Licensed User
Longtime User
I really like this framework, however there is still alot of "glue code" needed to frame up the UI in the window which I am not too good at. I was wondering in the future if there would be like a "Visual Designer" like setup wrapped around this library?

point and click, drag and drop like I am used to in B4A. That would be awesome!!

This is almost a product in of itself. It could "technically" be used to build a new environment like B4W. Basic4Web. Now, thats an idea!
 
Last edited:

Harris

Expert
Licensed User
Longtime User
techknight said:
point and click, drag and drop like I am used to in B4A. That would be awesome!!
Click to expand...

Yes that would...

Lets say we have a table, with relation..

Drag and drop the view (contains column names, data types, grid widths, sort-able, etc). How to get related values from other table?

Now, place this in the Build Grid. How does this fit in the maximum of 12 cols supported? (usually 1 table with size of 12).
You want CRUD with this grid? Which fields, what are default values, are they combo, input, text, number, checkbox or what?

Now do the ConnectPage sub. Where to place which item in what cell (small, medium and large form factors).

@Mashiane has been creating support for this. Give it a shot.


Personally, I find the power comes in the CRUD generator, and the ability to tweek anything I need to - which often is many.
This way, I don't have a re-run of a CRUD generator stomping my hard earned modifications.

Unless you have worked with other (be all - end all) framework / type code generators; you can't appreciate what I mean.
I don't mean it is impossible - it is just a tremendous amount of work for the developer - like he/she doesn't have enough to deal with.

Someday, it shall get there... for now, understand and code it - with help from the helpers...
 
Last edited:

amminf

Active Member
Licensed User
Longtime User
ABMaterial already is a framework without the need of a designer.

The Grid is already a designer and automatic and for any device! What designer does that?

As far as I believe the designer has been and will be a source of problems for ABMaterial, without contributing ABSOLUTELY nothing to the improvement of our application.

Internally, the designer will make the development of ABMaterial more complicated. If we add to it the complexity and inefficiency of open technologies, it will make keeping ABMaterial crazy.

Those who have made webapp with the usual technologies PHP + js know how to truly appreciate the value of ABMaterial

Only the work by AB in the last weeks related to the slow connections and the reconnection, already serve to exclaim a great GUAUUUU!

I said it a long time (https://www.b4x.com/android/forum/threads/abmaterial-poll-what-to-do-next.71148/#post-454113 ) ago and I repeat it again.

My two cents



 
Last edited:

techknight

Well-Known Member
Licensed User
Longtime User
amminf said:
ABMaterial already is a framework without the need of a designer.

The Grid is already a designer and automatic and for any device! What designer does that?
Click to expand...

Ok, I must have missed something in the video and tutorials, because I don't see any automation anywhere? no WYSIWYG like the designer, Maybe I missed it. To be honest I dont understand ABMaterial at all, I just stumbled upon it yesterday and it intrigued me. But, As far as functionality from a fundamental level, all I saw was teaser demos, and then eventually the website which lets you play with the same demos.

Dont get me wrong, I think this library is next generation excellent. But there are just some things I must be missing...

Edit: Nevermind, I just saw your link. Looks like I am not the only one asking ;-)
 
Last edited:

stanmiller

Active Member
Licensed User
Longtime User

A WYSIWYG designer for a responsive framework like ABM would be very complex. Material design websites are "responsive" in that they flow the content to the client browser be that desktop, tablet, or mobile. On a desktop that may be two columns while on a mobile only one.

Predefined templates seem more practical than a designer (e.g. Order entry, email, login, display table, show report). Then you just grab the template and customize to your specific needs. After all, there are only so many ways you can layout content and still follow the Material design specs.

Material design sites are laid out in a smart "grid" which flows the content on the user's browser. ABM provides a grid API for you to design pages.

ABMaterial - Meet the Grid
http://prd.one-two.com:51042/demo/GridsPage/abmaterial-grid-layout.html?1481252987543

For more details on responsiveness and the grid follow this link.

Google Material Design - Respsonsive UI
https://material.google.com/layout/responsive-ui.html#
 
Last edited:

techknight

Well-Known Member
Licensed User
Longtime User
Except for what I need, I dont need to scroll anything. At most, I need a swoopy menu that slides in from the left that has settings for things. But the main page is constant with controls and labels. Thats it.
 

Harris

Expert
Licensed User
Longtime User
techknight said:
Except for what I need, I dont need to scroll anything. At most, I need a swoopy menu that slides in from the left that has settings for things. But the main page is constant with controls and labels. Thats it.
Click to expand...
This is a typical response from someone new examining this framework.
No dis-respect... it is all of our initial reaction to this new world of web app design.

You are asking for "point and click" magic. It doesn't exist here. You need to apply some work (code logic).

If you hold in here and learn the framework (it gets easier as you progress), you shall see, like many of us, there is nothing quite like this...
That's the magic.

" I dont need to scroll anything. At most, I need a swoopy menu that slides in from the left that has settings for things. But the main page is constant with controls and labels. " - This does not define or describe anything to do with ABM?

When you have come to terms with the fundamentals, you shall be in a better position to ask for specific help.
Take your time, not one of us learned this over-night (even the developer). @stanmiller and others have posted their expert guidance.

Hey, I know and understand your anticipation. I was initially in the same (excited) position as you!

However, like all of us venturing here, it is all up to you. When you understand the basics and know how to pose the right question; we are here to help.
 
You must log in or register to reply here.

Similar Threads

  • Question
B4J Question ABMaterial Framework for WebApps
Replies
3
Views
916
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…