Introduction
What is ABMaterial? 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.
That seems far fetched is’nt it? Actually its not, its the absolute truth. Some years ago I created a web solution that has been running now for more than 3 years. The web application is called Project.Show and is providing the client a complete value chain in terms of Project Management. Projects have risks, challenges, electronic documents, budgets, expenses, service providers, ghantt charts, site visits, reports, you name it. Project.Show has it all.
Figure 1
Without any knowledge of HTML, CSS or Javascript
Figure 2
Figure 2 is what happens after one signs in into Project.Show, one is provided with an admin panel. As you might have noticed the numbers, this provides access to over 38 other modules (pages). One of the most important features of Project.Show is the E-library. The modules uses the File Manager so that users can upload all the documentation about projects. This provides a centralized location for any type of electronic document on the project. This means whether one is in India, New York, China etc, they can always have access to project documentation. So instead of documents being emailed etc. They get dropped in the E-Library and are available instantly. One just needs to sign in and access them. So no one can make an excuse that I didn’t get the email. LOL.
Project.Show is color coded according to SAFIRIs brand colors. SAFIRI is a transport company here in South Africa and SAFIRI means transport in Swahili. Fortunately ABMaterial has themes for the components, so most of the time you just provide the color and its intensity (light, dark or accent) and magic happens. You don’t even have to know about hex color codes. Hex color what? Now imagine having to remember all 140 color names. Phew.
Where was I? Anyway, for the rest of this, any reference to ABMaterial will be ABM, as it has come to be affectionately known. AB are the initials of its creator + Material. You go Alain Bailleul!
So why and how does HTML, CSS or Javascript knowledge does not apply here? My case is rather special. Let me tell you why.
The History of TGIF Zone Inc
Let’s rewind. In 1992 I start university. I am introduced to Slim. I fall in-love with Turbo Pascal (now Delphi), hard and this was through self study. I might have written an app to generate Resumes. In 1995, I take a gap year and start working for an accounting firm. The accounting firm has hired an ICT company. Out of my curiosity of what they were doing and how and why (apparently I was asking a lot of questions), they give me a job. It’s paying more than my previous one of course.
“We want an inventory management app, here is the book, here is the software, here is the laptop.”, Michael Oosterhagen tells me.
Did I tell you that at varsity I was doing Bachelor of Commerce degree? Well, yours truly here wanted to be a Chartered Accountant. I used to imagine my name having that suffix on it, dash dash dash (CA (SA)). I went for an interview with the accounting firm, was given the job on the spot, worked the whole day and night and came home the following morning.
Wait what? Is this how these guys really work? I asked myself. Is this for me? So I spent a lot of time debating with myself. It took me years later to realize that as app developers, this is how we roll, at times. I was 20 something then, I had a lot to learn.
The book is about Visual Basic 5, some 500 or so odd pages. So this is what happens when you click a button? Aha! A moment of truth. The year is 1996.
Sub btnSave_click
'do something
End Sub
I end up joining PlanetSourceCode, discovering CodeSmart and writing some VB6 Addins. My working station looked something like this. VB6 came on stiffy disks then, including Windows 95 which it had to run to. We did not even have Tera bytes then. Those were the days. You can guess how my cellphone that I was given was like. I had to share it with my collegues and it was heavy hey.
Figure 3
Figure 4
Fast forward. One day, I find Anywhere Software and end up having gigs using B4A. I thank the living God that someone wise conceptualized and ended up creating B4A. I had spent so many days learning Java for Android and still wished that there was something easier to use. I’ve been a fan of VB like forever so B4X for me became very fertile ground. It literally changed my life forever.
We develop an app called TGIF, the app forms the the basis for our company and name.
Then SAFIRI calls and they want a web based Project.Show, a big move from the VB6 version I had done in 2009. At the time I had not explored much of B4J and when I discovered ABM, I jump all in, mind you, I don’t have any type of HTML, Javascript, JQuery qualification or certificate. Thanks to these online courses now that I am now able to transition to acquire paper.
The advantage that come with ABM Support
ABM has a demo app that one can visit and explore its functionality. There is loads of support from the forum when anyone needing help will get help and have their questions answered. This helped me a great deal during the development of Project.Show.
There has been a lot of activity in the forum, for example, a For Dummies thread, release of a Mini course on YT and a Template for Absolute Beginners. Due to it becoming some type of a family project, the contribution from forum members is invaluable indeed too.
Above that there is a feedback app where one can register to request features, report bugs, track new developments in the framework etc. One sends an email to alain.bailleul [at ] pandora.be for login and passwords. The feedback app is also developed using ABM.
Developing Web Solutions with ABM
It is very important that before one embarks on creating a powerful, working, sustainable web project, they start where everything else starts, Requirements gathering. This helps one to create wireframes as the question is what has to be achieved. This also helps in knowing before hand what type of infrastructure is needed to deliver on the project. One of my favorite tools to do this is CaseComplete.
The ABM Grid Builder
ABM comes with a grid builder to help one transition towards their wireframes. After conceptualizing everything with CaseComplete, I fire this. When developing responsive web apps, one is always faced with developing an app that will work on mobile devices, these being cellphones, tablets and then laptops / desktops. The grid builder helps as one can create a grid that will indicate where inputs, buttons, tables, images etc will be located. The matrix is made up of Rows and Columns. Columns are called Cells.
Figure 5
For example in the built above, row 1, i.e. R1 has a single cell, R1C1, whilst the second row has four cells, R2C1 through to R2C4. This at most does give an idea in terms of how ones design will go. Imagine that in R1 you will have a heading and then in R2 you will have some images or buttons showing for each of the columns.
With that said, one is then able to download the structure of the grid and use that in developing their ABM WebApp.
Coding your ABM WebApp
After defining your wireframe using the grid builder, its time to code. The Template for Absolute Beginners mentioned above will be your starting point as a beginner. Let’s look at how we can create a button for example.
From the ABM Demo App, we are being guided in terms of how we can create a button that will be placed in R2C1. Remember, we have just created our grid with R1C1 and then R2C1 – R2C4 above. So to add a button to R2C1, we write code like this
Dim btn1 As ABMButton
btn1.InitializeRaised(page, "btn1", "", "", "BUTTON", "bluegrey")
page.Cell(2,1).AddComponent(btn1)
This in essence will produce a button as displayed below.
Figure 6
Within the ABM framework itself, there are many controls that one can use to create their user interface. As noted from the code above, one did not write any CSS, HTML or Javascript.
Creating Project.Show
When developing Project.Show, I also started here with the learning. I learned how the framework works, played around with the demo app code, explored the source code that comes with the ABM downloads and ended up creating an awesome web app. So one needs to do some learning. The beauty is that when you get your first prototype working, you are already done with your project.
Let’s look at some Project.Show functionalities. In this example, I’m listing Event Categories from my database. Event categories are used to color code calendar events. These could be meetings, site visits etc.
Figure 7
When a user clicks the edit button for any event category they want to update, a dialog box appears. One can then update the details or cancel accordingly. The back-end database that I am using is residing on VPS my webserver.
Figure 8
In some of the instances, some listings needed to have quick KPIs (key performance indicator), as an example here, we can easily see which projects (project names have been removed) are under or over budget. One via the navigation bar is able to download the Projects Progress as an MS Excel report. This can be pasted on PowerPoint presentations etc.
Figure 9
What if the framework does not have the component one needs?
There are times when one needs a component that does not exist in the ABM Framework. One is able then to create these using any Javascript & CSS library they have. I had to wrap up a Ghantt chart for this project as indicated below. ABM comes with a generic pre-built custom control builder that uses a pattern that one has to follow.
Figure 10
Securing ABM Apps
Security is important when multi user apps are being created. Yes, there is additional comfort in the generated application by ABM, its a jar file that sits on your web server, so the internal workings of ones app cannot be seen or accessed. Even with browser page right click, view page source. Whilst one can see some HTML, CSS and links to some Javascript files, there is absolutely no way to access the actual source code for your app. With that said, for Project.Show we created User Groups and Permissions so that we can define who does what by linking a user to a group.
Figure 11
Each group is given permissions depending on what they have to do on the webapp.
Figure 12
Reporting
At high level, for Project.Show we have coded a dashboard that indicates performance. So also you, when creating your ABM apps, you can add charts etc. ChartJS is the default charting framework coming with ABM and its beautiful. For reporting, we are purely using MS Excel. I wrote here in terms of how we were able to achieve that.
Figure 13
ABM has a reporting engine and one also follows the same pattern used in coding the UI. Below is an example of how it is developed and used. The bonus is that it gives one PDF files too.
Figure 14
GIS – Maps
One of the clients requirements was they they need to see on a map all the project locations. With the build in Google Map components in ABM, we were able to meet this requirement easily. A map loads and one clicks a locator to load all the projects GIS locations from the database and add markers on the map.
Figure 15
The Backend Database
One can use any backend database they wish to use. As ABM can be used with any B4X library, whether you want to use MongoDB, MySQL, SQLite, MSSQL etc, nothing is limited. Project.Show runs with SQLite with WAL activated. One develops ABM WebApps using B4X and this exposes a lot of possibilities.
Deployment
When done developing ones’ app, deployment takes place. To deploy an ABM WebApp, one needs a VPS webserver. One is also able to use SSL certificates in their infrastructure too. The WebApp will run from a specific port number which will need to be enabled via the FireWall. Our hosting provider is running this on Linux I believe.
The Flavours of ABM
ABM comes in two flavours, one a free version and another a DonationWare version. This helps with the development and besides feeling good about it, one gets some extra goodies with the donation.
Figure 16
Welcome to the world of ABM. A million thanks to Anywhere Software and Alain.