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.

ABMDragonfly4.00.png


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 :)

gridbuilder1.png


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


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.12 - for jServer 4.00 (open source, library only):

ALWAYS TAKE A BACKUP BEFORE USING A NEW VERSION!


ABMaterial 5.12 is now available on github and is open sourced :cool: (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.


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

1. Download https://github.com/RealAlwaysbusy/A...eleases/download/v5.12/ABMaterial5.12-bin.zip
2. Download https://github.com/RealAlwaysbusy/A...r4.00/releases/download/v5.12-www/www5.12.zip
3. Unzip ABMaterial5.12-bin.zip and copy all .xml and .jar files to you B4J Libraries folder
4. Unzip www5.12.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.

Additional Resources:

Demo source code (for v4.51, not yet updated for 5.12, 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
 
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
The mail to the donators is also out with the new beta version 1.03 containing:

1. Some bug fixes.
2. Two new controls (ABMSocialOAuth and ABMCalendar)
3. ABMTable has some extra functionality to make it 'editable'
4. Masks on input fields

Please let me know if you did not receive it.
 

alwaysbusy

Expert
Licensed User
Longtime User

Harris

Expert
Licensed User
Longtime User
Hint: Clear Browser cache to avoid odd behavior when updating to new version.
 

Harris

Expert
Licensed User
Longtime User
One wee question...

If one has a TopNavBar, (Home, Products, Support, etc), how does one gain access to it on small devices (when hidden)?
Does one incorporate this into a SideNavBar and eliminate the TopNav? What is the Material way?

No rush on response (you are most every busy), Thx.
 

Roberto P.

Well-Known Member
Licensed User
Longtime User
Hello AB,

Just spent the past few days exploring the ABMaterial concept of web site creation.
Looks great to date! Your examples work well with static data (with very small issues - see my next post...).

Anyone considering avoiding the normal learning curve of JavaScript, HTML(5) and JQuery (to some extent), PHP (- not covered here...) and understands B4X shall find this most welcoming, as I have.

I know enough about each to completely bury myself in a never ending spiral of frustration!
I have explored many different frameworks only to realize that I cannot possibly learn (in short order) what it takes to create what my app demands.
I have also had to HACK into generated code to make it function as I wanted (ie. introduce a filter).

We need a B4C (client) and B4S (server). Or a B4J_CS (covers both).

However complicated it may first appear, following your well defined examples and tutorial makes it easier.
Without this knowledge of how to properly construct a (page, table, etc) one could get way off tract in short order...
Thankfully you have taken the effort to point this out.

I think now is the time to connect it to a DB (MySQL) and introduce those complexities.
A simple CRUD example (using canvas to extend table as you have mentioned) would be most helpful.
Reading and experimenting with all your wonderful stuff, I am still too stupid (novice) to piece this together...

Hopefully you shall find the time soon (or some other contributor).

In my opinion, it only lacks the CRUD functionality (ie. a CRUD framework).
When one examines other offerings from various suppliers, this is not as easy one might expect.
Many technicalities to overcome (INSERT, UPDATE, DELETE, etc.)
I understand this from other suppliers who generate this PHP code to handle these functions.


Thanks

Harris


Hi Harris
I agree with you! I agree that it is necessary to add CRUD functionality to make this framework up to the other pasati on classic php / jsp.
I think anyway we can already do this with individual implementations.
Hello
Roberto
 

Harris

Expert
Licensed User
Longtime User
Hi Harris
I agree with you! I agree that it is necessary to add CRUD functionality to make this framework up to the other pasati on classic php / jsp.
I think anyway we can already do this with individual implementations.
Hello
Roberto
Great, some examples would be nice, I shall try my best...

There are many examples using B4J hooking MySQL, now make them look pretty with ABMaterial.
We may be here soon since a little logic is all that is required to populate ABMTables (php get)
Hooks and Post to update and insert. Right now I just can,t wrap my head around it while trying to grasp all else in ABM.

Like all else in B4X, we shall overcome. In this case, I can see it is already written... we just need to apply it.

Erel can only hold our hand for so long... He constantly provides us with examples and tools so that we may proced on our own. With careful reflection on his responses, we often find our resolutions.

I would certainly get very tired of repeating the same statement (logic) over again - yet he graciously does....
That is the Number 1 reason why he and B4X iis SO successful. ... customer service.

Thanks
 

alwaysbusy

Expert
Licensed User
Longtime User
Actually, there is no need to use php, as B4J does everything for you. In our company, I'm connecting to our Microsoft SQL server with jSQL (https://www.b4x.com/android/forum/threads/sql-tutorial.35185/#content) and run my queries. I do not have my code with me right now, but it goes something like this:

B4X:
   Try
       sql1.Initialize("net.sourceforge.jtds.jdbc.Driver","jdbc:jtds:sqlserver://192.xxx.yyy.zzz:1433/DatabaseName;user=xxx;password=yyy")
    Catch
        Log("Error connecting to database")
    End Try

Then I simply run all the queries I need to run (plenty of examples on this forum).

something like this:

B4X:
        dim rs as cursor = sql1.ExecQuery("select * from mytable where namùe='alain';")
        Do While rs.NextRow
            Log(rs.GetString("id"))
            ' build your table with ABMaterial
        Loop
        rs.Close
 

Bladimir Carrillo

Member
Licensed User
Longtime User
Hi,
@Harris, @Roberto P. , I share my web app code with basic CRUD combining ABMaterial Framework and using concepts from Erel's ServerExample web app. You have to change the database access credentials in the 'settings.txt' file located on 'Objects' folder, and copy de folder 'ABMaterial1.02.zip\Template\Objects\www\' to 'Objects' folder.

@alwaysbusy , I have the following mistakes and needs that I have failed to solve:
- I added an ABMActionbutton to the page 2 (SisMACPage0002) but do not recognize the events. I had to add other normal buttons (ABMButton) to solve the problem.
- The footer on ABMTable appear twice when there are few or nothing rows.
- The ABMTable need a high light option to identify de current position, and a paging option.
- When run the compiled jar file, the app show the special characters as � simbols.
- To confirm the deletion of a row, a message dialog is required with options YES / NO

I appreciate the effort you're making to achieve this great framework and thank you in advance for your answers.

PD. I made a small donation today as a token of appreciation for your great project. Please send me the progress to my email.

Best regards.
 

Attachments

  • SisMACwebapp.zip
    25.7 KB · Views: 306
  • SisMACwebapp.png
    SisMACwebapp.png
    104.4 KB · Views: 394
Last edited:

Roberto P.

Well-Known Member
Licensed User
Longtime User
Hi,
@Harris, @Roberto P. , I share my web app code with basic CRUD combining ABMaterial Framework and using concepts from Erel's ServerExample web app. You have to change the database access credentials in the 'settings.txt' file located on 'Objects' folder, and copy de folder 'ABMaterial1.02.zip\Template\Objects\www\' to 'Objects' folder.

@alwaysbusy , I have the following mistakes and needs that I have failed to solve:
- I added an ABMActionbutton to the page 2 (SisMACPage0002) but do not recognize the events. I had to add other normal buttons (ABMButton) to solve the problem.
- The footer on ABMTable appear twice when there are few or nothing rows.
- The ABMTable need a high light option to identify de current position, and a paging option.
- When run the compiled jar file, the app show the special characters as � simbols.
- To confirm the deletion of a row, a message dialog is required with options YES / NO

I appreciate the effort you're making to achieve this great framework and thank you in advance for your answers.

PD. I made a small donation today as a token of appreciation for your great project. Please send me the progress to my email.

Best regards.


thanks Vladimir
excellent example. It would be interesting to get to have the management of Master-Details inside AbMaterial could be very strong because of its performance and usability responsive.
Roberto
 

alwaysbusy

Expert
Licensed User
Longtime User
@Bladimir Carrillo Looks like a great example! I can't test it out because I'm at my day job and I do not have the code with me, but I'll try it tonight.

Some quick responses to your remarks:

- I added an ABMActionbutton to the page 2 (SisMACPage0002) but do not recognize the events. I had to add other normal buttons (ABMButton) to solve the problem.
Yes, this is how it works. The actionbutton is just an 'entry point' to other buttons but has no click event itself. This is the behaviour of the Materialize CSS framework. I found it strange myself when I worked on ABM, but understood why they did it. When you click on the 'big button' to open it to show the small ones, what does the user actually wanna do? Doing the click action or opening the sub menu? I see if I could rework (if I do not have to change their framework) this action an raise a click event IF there are no sub items. But I'll check, as I thought I already did something about it. May be a bug.

- The footer on ABMTable appear twice when there are few or nothing rows.
Looks like the behaviour of the old (0.99) jquery.ABMTableScroll.min.js file. Maybe a cache problem?

- The ABMTable need a high light option to identify de current position, and a paging option.
This is something that has been requested, but I'm still trying to find a good way to do it

- When run the compiled jar file, the app show the special characters as � simbols.
I can see it in your screenshot but I'll have to dig deeper into it as it should be automatically converted as an entity (like ú ). If you open the html file (I can't run it until tonight), is it converted?

- To confirm the deletion of a row, a message dialog is required with options YES / NO
You have to create your own ModalSheet with a YES and NO button. Modal Sheets can be 'stacked'. I do it in the demo of the ABMModalSheet control if you did not enter your name.
 

Harris

Expert
Licensed User
Longtime User
at com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask.run(BasicResourcePool.java:1810)
at com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread.run(ThreadPoolAsynchronousRunner.java:648)
Dec 02, 2015 6:25:44 PM com.mchange.v2.resourcepool.BasicResourcePool forceKillAcquires
WARNING: Having failed to acquire a resource, com.mchange.v2.resourcepool.BasicResourcePool@23223dd8 is interrupting all Threads waiting on a resource to check out. Will try again in response to new client requests.
Dec 02, 2015 6:25:44 PM com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask run
WARNING: com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@78a1be2e -- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed more than the maximum number of allowed acquisition attempts (30). Last acquisition attempt exception:
java.sql.SQLException: Access denied for user 'mhw'@'localhost' (using password: NO)
at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:1078)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:4237)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:4169)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:928)



Having a heck of a time connecting to my local MySql db. With or without password.
Tried different users, disabled firewall, etc.
Strange, phpmyadmin accesses it just fine...

B4X:
Public Sub init
    Dim JdbcUrl As String = Main.settings.Get("JdbcUrl")
    Dim driverClass As String = Main.settings.Get("DriverClass")
    Dim dbuser As String = Main.settings.Get("DBUser")
    Dim dbpassword As String = Main.settings.Get("DBPassword")
    Log(" Credts : "&JdbcUrl&"  "&driverClass)
    Log(" Credts :"&dbuser&"  "&dbpassword)
    Try
       pool.Initialize(driverClass, JdbcUrl, dbuser, dbpassword)
    Catch
       Log("last Except: "&LastException.Message)
    End Try
      
End Sub

EDIT: App dies here: ---> Dim sql1 As SQL = pool.GetConnection
Public Sub CreateUserTableIfNeeded
Dim sql1 As SQL = pool.GetConnection
End Sub..




settings.txt

B4X:
JdbcUrl=jdbc:mysql://localhost/harris?characterEncoding=utf8
DriverClass=com.mysql.jdbc.Driver
DBUser=mhw
DBPassword=
RecaptchaPrivateKey=6LcslRATAAAAAMfi-QOBebkJfIcJTZBPWuOZlfQu
Port=51043
 
Last edited:

Harris

Expert
Licensed User
Longtime User
I think that it is better to start a new thread for this discussion. Based on the error message the problem is in the user name / password.

Ok, I have been reading others with same issue and I am unable to resolve. I tried with several of my test servers (local and remote) and get the same issue. They all work using the same login credentials with RDC, phpmysql and others...
Thx.
 

billyrudi

Active Member
Licensed User
Longtime User
at com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask.run(BasicResourcePool.java:1810)
at com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread.run(ThreadPoolAsynchronousRunner.java:648)
Dec 02, 2015 6:25:44 PM com.mchange.v2.resourcepool.BasicResourcePool forceKillAcquires
WARNING: Having failed to acquire a resource, com.mchange.v2.resourcepool.BasicResourcePool@23223dd8 is interrupting all Threads waiting on a resource to check out. Will try again in response to new client requests.
Dec 02, 2015 6:25:44 PM com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask run
WARNING: com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@78a1be2e -- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed more than the maximum number of allowed acquisition attempts (30). Last acquisition attempt exception:
java.sql.SQLException: Access denied for user 'mhw'@'localhost' (using password: NO)
at com.mysql.jdbc.SQLError.createSQLException(SQLError.java:1078)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:4237)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:4169)
at com.mysql.jdbc.MysqlIO.checkErrorPacket(MysqlIO.java:928)



Having a heck of a time connecting to my local MySql db. With or without password.
Tried different users, disabled firewall, etc.
Strange, phpmyadmin accesses it just fine...

B4X:
Public Sub init
    Dim JdbcUrl As String = Main.settings.Get("JdbcUrl")
    Dim driverClass As String = Main.settings.Get("DriverClass")
    Dim dbuser As String = Main.settings.Get("DBUser")
    Dim dbpassword As String = Main.settings.Get("DBPassword")
    Log(" Credts : "&JdbcUrl&"  "&driverClass)
    Log(" Credts :"&dbuser&"  "&dbpassword)
    Try
       pool.Initialize(driverClass, JdbcUrl, dbuser, dbpassword)
    Catch
       Log("last Except: "&LastException.Message)
    End Try
     
End Sub

EDIT: App dies here: ---> Dim sql1 As SQL = pool.GetConnection
Public Sub CreateUserTableIfNeeded
Dim sql1 As SQL = pool.GetConnection
End Sub..




settings.txt

B4X:
JdbcUrl=jdbc:mysql://localhost/harris?characterEncoding=utf8
DriverClass=com.mysql.jdbc.Driver
DBUser=mhw
DBPassword=
RecaptchaPrivateKey=6LcslRATAAAAAMfi-QOBebkJfIcJTZBPWuOZlfQu
Port=51043

Hi are you sure to have disabled the only ssh connection to mysql?
 

alwaysbusy

Expert
Licensed User
Longtime User
@Bladimir Carrillo

- I added an ABMActionbutton to the page 2 (SisMACPage0002) but do not recognize the events. I had to add other normal buttons (ABMButton) to solve the problem.
I checked it and it does work, but I'll noticed you've left 'If SubTarget="" Then Return' in the buttons clicked event, which means as much as 'ignore' it if you're not a subbutton.
 
Top