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

Harris · Dec 3, 2015

< SOLVED> ConnectionPool Issue (see post in B4J Questions)

@Bladimir Carrillo

When I hover over views, the tool tip is being Translated to English - all text is translated!
Data is being added to the table but not showing up in grid.
I am sure I shall figure that out.

EDIT: Recompiled app and now records show in grid...
Guess we need a "refresh" after update, insert or delete...

Thanks for the example!!!

Harris · Dec 3, 2015

@Bladimir Carrillo

some observations....
added clear and refresh...

B4X:

Sub msbtnOk_Clicked(Target As String)
    page.CloseModalSheet("myModal")

    Dim Fields As Map
    Fields.Initialize
     ......



    Dim tbContacts As ABMTable = page.Component("tblContacts")
   
    ' added clear.
    tbContacts.Clear   ' clears existing list.... otherwise list will compound and grow.

    FillcontactosTable(tbContacts, DB.pool.GetConnection.ExecQuery("SELECT id_contacto, pais, organizacion, nombres, DATE_FORMAT(fecha,'%d-%m-%Y') FROM cv_contactos ORDER BY id_contacto DESC LIMIT 200"))

    ' added refresh.
    tbContacts.Refresh  ' shows new additions, updates BUT not deletes  (need to clear / refresh on this delete action)
  
End Sub

Harris · Dec 4, 2015

Question:

Can I create an index.html ( global to my site: http://www.tripinspect.com ) that will re-direct to my webapp (ie. tripinspect.com:51043)?

Not sure how to accomplish this.

hibrid0 · Dec 4, 2015

Harris said:
Question:

Can I create an index.html ( global to my site: http://www.tripinspect.com ) that will re-direct to my webapp (ie. tripinspect.com:51043)?

Not sure how to accomplish this.

<?php header ("Location: http://tripinspect.com:51043"); ?>

B4X:

<html>
<head>
<meta http-equiv="Refresh" content="5;url="http://tripinspect.com:51043">
</head>

<body>
<p>Nos hemos mudado! Serás dirigido automáticamente en cinco segundos. En caso contrario, puedes acceder haciendo click <a href="http://tripinspect.com:51043">aquí</a></p>
</body>
</html>

Harris · Dec 4, 2015

Inline buttons for actions...

B4X:

Sub tblContacts_Clicked(PassedRowsAndColumns As List)
    Dim tblCellInfo As ABMTableCell = PassedRowsAndColumns.Get(0)
    Dim tbl As ABMTable = page.Component("tblContacts")

    Try

        Log("rowcols: "&PassedRowsAndColumns.Size&"  Col: "&tbl.GetString(tblCellInfo.Column ,0))
        Log("cellinfo  Row: "&tblCellInfo.Row&"  Cell: "&tblCellInfo.Column  )
        contactId = tbl.GetString(tblCellInfo.Row,  1)
        ' new stuff HERE.....
        Dim col As Int
        col = tblCellInfo.Column
        If col = 6 Then
               EditContact("edit")
        End If

        Toast("You Selected Contact: " & contactId & " !", 2000)
    Catch
        Toast(LastException.Message, 5000)
    End Try

    Return
End Sub

B4X:

Sub FillcontactosTable(tb As ABMTable, rs As ResultSet)

    Dim rowNum As Long=1
    Do While rs.NextRow
        Dim row As List
        Dim rowCellThemes As List
        row.Initialize
        rowCellThemes.Initialize
        row.Add(""&rowNum )
        rowCellThemes.Add("headerfooter")

        Dim resInt As Int=rowNum/2
        Dim resReal As Double=rowNum/2
        Dim rowTheme As String
        If resReal-resInt=0 Then
            rowTheme="rowpair"
        Else
            rowTheme="rowunpair"
        End If
        For c = 0 To rs.ColumnCount - 1
            Dim val As String = rs.GetString2(c)
            row.Add("" & val)
            rowCellThemes.Add(rowTheme)
        Next
        ' new stuff HERE
        Dim btn As ABMButton 'EDIT contact
        btn.Initializefloating(page , "btn7", "mdi-editor-mode-edit",  "sub3")
        row.Add(btn )
        rowCellThemes.Add(rowTheme)
        Dim btn1 As ABMButton 'DELETE contact
        btn1.Initializefloating(page, "btn5", "mdi-action-delete", "sub1")
        row.Add(btn1 )
        rowCellThemes.Add(rowTheme)

        tb.AddRowWithTheme(row, rowCellThemes)
        rowNum=rowNum+1
    Loop

    rs.Close
End Sub

Harris · Dec 5, 2015

<solved>

Odd situation:

After 3 (maybe 4) edits, the system generates this error that I logged:
Table Click error: com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResourcePool@77f03bb1 -- timeout at awaitAvailable()

Now clicking the edit button no longer raises the event...

B4X:

    ... 18 more
Caused by: com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.v2.resourcepool.BasicResourcePool@77f03bb1 -- timeout at awaitAvailable()
    at com.mchange.v2.resourcepool.BasicResourcePool.awaitAvailable(BasicResourcePool.java:1416)
    at com.mchange.v2.resourcepool.BasicResourcePool.prelimCheckoutResource(BasicResourcePool.java:606)
    at com.mchange.v2.resourcepool.BasicResourcePool.checkoutResource(BasicResourcePool.java:526)
    at com.mchange.v2.c3p0.impl.C3P0PooledConnectionPool.checkoutAndMarkConnectionInUse(C3P0PooledConnectionPool.java:755)
    at com.mchange.v2.c3p0.impl.C3P0PooledConnectionPool.checkoutPooledConnection(C3P0PooledConnectionPool.java:682)
    ... 26 more
Row not found: 6
rowcols: 1  Col: null
cellinfo  Row: 4  Cell: 6
Row not found: 4
Table Click error: java.lang.NullPointerException
Row not found: 6
rowcols: 1  Col: null
cellinfo  Row: 4  Cell: 6
Row not found: 4
Table Click error: java.lang.NullPointerException
Row not found: 6
rowcols: 1  Col: null
cellinfo  Row: 4  Cell: 6
Row not found: 4
Table Click error: java.lang.NullPointerException

Problem is here: (in the Sub EditContact(Action As String) )

Dim m As Map = DBUtils.ExecuteMap(DB.pool.GetConnection , "SELECT * FROM cv_contactos WHERE id_contacto = ?", Array As String(contactId))

Harris · Dec 6, 2015

See:
<Solved> ConnectionPool (maxpoolsize Issue) - in Questions)

It has been an adventure but managed to resolve (I think...)
It is a bloody good thing I am not paid by the hour... (how does that work when self-employed?)

If response is too confusing, (hope not), let me know ad I shall clarify with sample app.

little3399 · Dec 8, 2015

ABMaterial! can provide a tree control just like , tks!

Anser · Dec 8, 2015

Congratulations and this is a Great Work.

I downloaded the sample available in the first post of this thread. It is running fine.

I need to develop a Webapp that works on a web browser. If this suits my requirement, then I plan to start the development using ABMaterial.

I need to find answers for the following

Is this matured enough to use it in production environment ?

I would like to know whether any sample is available that shows the connectivity to the Database and retrieving recordsets and then displaying it on a Grid ?

I know that many others like me here will prefer to have a sample with a database. Lack of a database related sample is pulling me back.

Will jRDC work along with this OR is there any other preferred method other than jRDC for Database connectivity when used along with ABMaterial Framework?

in the code posted by Harris, I see DB.Pool.GetConnection.ExecQuery

B4X:

DB.pool.GetConnection.ExecQuery("SELECT id_contacto, pais, organizacion, nombres, DATE_FORMAT(fecha,'%d-%m-%Y') FROM cv_contactos ORDER BY id_contacto DESC LIMIT 200"))

Is this a DB.Pool a different method for database connectivity ?

And once again, this is a great work and is going to be very useful for this community.

Thanks and Regards

Anser

alwaysbusy · Dec 8, 2015

@little3399 Not this, but something similar I like to call ABMTreeTable is in the making. As the name ABMaterial suggests, all object must have some kind of Material look and feel, so a normal tree is not going to be added. I think using the technique BillyRudi described a couple of posts back you could add it yourself if you want to.

I probably will make v1.02 available to the public next week and the the week after, donators will receive the next version which will contain the new ABMTreeTable object.

ABMTreeTable can expand like a normal tree and will look something like this (early stage, look could change):

alwaysbusy · Dec 8, 2015

@Anser

Is this matured enough to use it in production environment ?

We'll use it in our company for our first production in-house apps. I consider it quite stable and when there are problems I'm trying to fix them as quickly as possible. Donators then receive these versions very shortly after we ran some tests.

I would like to know whether any sample is available that shows the connectivity to the Database and retrieving recordsets and then displaying it on a Grid ?
I know that many others like me here will prefer to have a sample with a database. Lack of a database related sample is pulling me back.
Will jRDC work along with this OR is there any other preferred method other than jRDC for Database connectivity when used along with ABMaterial Framework?

A couple of post back, someone has made an app to do so. Database is out of scope for this library. It can do everything you can do with B4J, it just gives you an extra easy-to-use layer for the GUI.

Harris · Dec 8, 2015

Any plans to support the pickadate? (found on http://materializecss.com/ site)

Thanks

Harris · Dec 8, 2015

Trying to create a ABMCombo to use in my Insert/Edit forms - as a lookup, populated from a DB table.
The updated table will hold the PKey to the lookup table.
Normally, the combo would have a pair of key / value.

' create combo
Dim combo1 As ABMCombo
combo1.Initialize(page, "combo1", "Select a person", 650, "")
combo1.IconName = "mdi-action-account-circle"

' add items
combo1.AddItem("combo1S1", "Mommy", BuildSimpleItem("S1", "mdi-action-account-circle", "{NBSP}{NBSP}Mom"))

The BuildSimpleItem adds a label for each item....

Here the key is "combo1S1"
Here the value is "Mommy"

How does one retrieve the key when all we have access to is the value (combo1.text)?

Thanks

Harris · Dec 9, 2015

Anser said:
Will jRDC work along with this OR is there any other preferred method other than jRDC for Database connectivity when used along with ABMaterial Framework?

in the code posted by Harris, I see DB.Pool.GetConnection.ExecQuery

B4X:

DB.pool.GetConnection.ExecQuery("SELECT id_contacto, pais, organizacion, nombres, DATE_FORMAT(fecha,'%d-%m-%Y') FROM cv_contactos ORDER BY id_contacto DESC LIMIT 200"))

Is this a DB.Pool a different method for database connectivity ?

See my earlier post(s) about using pool connections... They must be created and released correctly or the pool will fail (it will be drained). Your quote above (what I posted before I knew better) is how NOT to do it.

I am assuming jRDC is for connecting to REMOTE db's (when using B4J and connecting to a db not on same server).
I use RDC for my B4A app. It executes the SQL queries on the server - safe no SQL injection. Works GREAT!

The pool connection (again assuming) is run on the (localhost) server so it is also safe. I tried connecting to a remote server with pool - but no luck...

Perhaps someone else with expert experience can chime in here and clarify the preferred or "best" practice - pool or jRDC?

Thanks

Anser · Dec 9, 2015

Harris said:
I am assuming jRDC is for connecting to REMOTE db's (when using B4J and connecting to a db not on same server).
I use RDC for my B4A app. It executes the SQL queries on the server - safe no SQL injection. Works GREAT!

jRDC is an enhanced version of RDC

Harris said:
See my earlier post(s) about using pool connections... They must be created and released correctly or the pool will fail (it will be drained)

The pool connection (again assuming) is run on the (localhost) server so it is also safe. I tried connecting to a remote server with pool - but no luck...

I prefer to use jRDC OR something similar to jRDC (ie connect to a remote DB) irrespective of whether the Database and application are on the same server or NOT. The reason is that, on a later date, if I ever decide to have application on one server and database on another server, I need not bother about changing the code inside my ABMaterial app. I just need to change the connection parameters in the jRDC.

Thanks & Regards

Anser

Harris · Dec 9, 2015

alwaysbusy said:
A couple of post back, someone has made an app to do so. Database is out of scope for this library. It can do everything you can do with B4J, it just gives you an extra easy-to-use layer for the GUI.

Material Design is a nice way to present your site in a modern format.
Using static objects, (loading images from a file folder, hard coded text, etc) one can create a nice looking page.

No doubt, in 6 months time, Google and related partners will come up with another "new" funky design to replace it... (Material Funk).

Common to all design themes (Material being one of many), is the ability to integrate database hooks. However - very few consider this an important aspect.
It is quite easy to model a web page based on static components (of which all ABMaterial examples are built from), but quite another matter when driven from database records.

Most (if not all) real world sites have a DB which drives the content. These sites are not blogs that post new content based on some contributors submission (a simple paragraph).
These sites are dynamic - constantly adding and updating data in many tables of the DB to reflect the app scope.

To dismiss "Database is out of scope" is to state that using this for a real world apps will be difficult for the newcomer.
Currently, this is true.... It need not be.

How can this be resolved? Start with the basics. A knowledge base of examples showing users how to accomplish certain DB tasks in ABMaterial.
Populating tables (relatively easy).
Setting check boxes and radio options (based on DB table values).
Populating combo boxes (and setting current value)
Populating lists
Retrieving (key) values and updating the DB table for each.

As one may infer, I (for one) am frustrated with the learning curve to get this framework working to my expectations.
It is still in beta, looking quite promising as a B4J addition, but lacks the docs (and code) to make it work real world.

I do hope in one months time - I shall EAT all words stated above.

Thanks

Anser · Dec 9, 2015

Harris said:
Common to all design themes (Material being one of many), is the ability to integrate database hooks. However - very few consider this an important aspect.
It is quite easy to model a web page based on static components (of which all ABMaterial examples are built from), but quite another matter when driven from database records.

Most (if not all) real world sites have a DB which drives the content. These sites are not blogs that post new content based on some contributors submission (a simple paragraph).
These sites are dynamic - constantly adding and updating data in many tables of the DB to reflect the app scope.

To dismiss "Database is out of scope" is to state that using this for a real world apps will be difficult for the newcomer.
Currently, this is true.... It need not be.

How can this be resolved? Start with the basics. A knowledge base of examples showing users how to accomplish certain DB tasks in ABMaterial.
Populating tables (relatively easy).
Setting check boxes and radio options (based on DB table values).
Populating combo boxes (and setting current value)
Populating lists
Retrieving (key) values and updating the DB table for each.

As one may infer, I (for one) am frustrated with the learning curve to get this framework working to my expectations.
It is still in beta, looking quite promising as a B4J addition, but lacks the docs (and code) to make it work real world.

I do hope in one months time - I shall EAT all words stated above.

Thanks

You said exactly what I wanted to say.

DonManfred · Dec 9, 2015

alwaysbusy said:
The next controls I want to write would be ABMDatePicker and ABMTimePicker.

May i suggest a nice Timepicker?

Please note that i donated today and have not done any "coding" with ABMaterial... Just found the hread, donated without "using" the demo...
I saw ABMaterial in action this evening the first time after i compiled the demo project and run it on my PC.

I´M IMPRESSED! Really... Looks cool and i´m sure i´ll havae to play around with it in the future to say more about it... For now i´m really "shocked" (in a positive way!) about the features of the lib!

I dont know whether the Timepicker is "useable" in ABMaterial. But i saw jquery so i guess it should be possible!?

PS: This is my first post in the thread; i´m sure more will follow ;-)

Harris · Dec 9, 2015

Hello DonManfred,

I am sure that MANY of us are glad to see you here! We can use all the Expert help and advise you can contribute.
alwaysbusy has been burning the candle at both ends trying to keep up with our requests and questions - and doing a GREAT job!.

Since this framework is new (and possibly foreign) to many (like me), it is difficult to understand some of the complexities.
That said, I sure we will work them out and truly appreciate this modern way to build web apps.
I have amazed myself at what I was able to accomplish - of course with help (examples) from contributors to get me started.
It is "different", but really cool...

Thanks

Harris · Dec 10, 2015

Anser said:
jRDC is an enhanced version of RDC. I prefer to use jRDC OR something similar to jRDC (ie connect to a remote DB) irrespective of whether the Database and application are on the same server or NOT. The reason is that, on a later date, if I ever decide to have application on one server and database on another server, I need not bother about changing the code inside my ABMaterial app. I just need to change the connection parameters in the jRDC.

Thanks & Regards

Anser

Please let (us) know how you make out following this path. It makes good sense - as you have defined.
The RDC in B4A works well and jRDC has extra benefits.

I started with pool because I knew of no other option - quite new to B4J.

B4J Library [Web][ABMaterial] Framework for WebApps

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Active Member

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency