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
Chartist.js is the library I've picked to make charts. The main objective of ABMaterial is that the user does not have to write any HTML, Javascript or CSS.

Before I start to make changes, and if it is only a div you'll need, you can try the following:

0. in you app create an empty row with one cell
1. Run your app
2. Open the html in an text editor like notepad++ (while your app running!)
3. Find the row and col you've created and add you div in it
e.g.

B4X:
<div class="container">
<div id="r18" class="row transparent   " style="margin-top: 0px; margin-bottom: 20px">
<div name="page.cell(18,1)" id="r18c1" class="col s12 m12 l12 offset-s0 offset-m0 offset-l0 transparent   " style="position: relative ;margin-top: 0px;margin-bottom: 0px;padding-left: 0px;padding-right: 0px" >
<div></div>   <--------------------------------------- this is your div
</div>
</div>
</div>

4. press F5 in the browser
5. check if everything is as you expected
6. Mail me with a feature request to add a div and I see if it can add it to the framework
 

billyrudi

Active Member
Licensed User
Longtime User
Hi AlwaysBusy,
i have made as you write..
it is not necessary to add other div.
i can use one of your...ex r2c1

so if in the buildpage i add
page.AddExtraJavaScriptFile("herocharts-min.js")
page.AddExtraCSSFile("chartdemo.css")



and in WebSocket_Connected
chart.Initialize(ws, "r2c1","Grafico", "'label': 'Paolo','value': '18000','color': '#f8bd19'", "'label': 'Arianna','value': '20000','color': '#h8bd19'")
chart.Resize(10, 10, 600, 500)


i'm able to add all i want.

my
Private chart As UAPPlusChart
is made so:

B4X:
'Class module
Sub Class_Globals
   
    Private mID As String
    Private mWS As WebSocket
Private mData As List

End Sub

Public Sub Initialize(WS As WebSocket,ID As String,Titolo As String,  d1 As String,d2 As String)

    mWS = WS
    mID = ID.ToLowerCase

    Dim Script As String   

    Script = "var lineChart2 = new HeroCharts({ " & _
                "'chart': {'type':'3dpie','chartcontainer':'" & mID &"','heading':'" & Titolo &"', 'width': 600," & _
                "'height': 500,'originx': 0," & _
                "'originy': 80," & _
                "'colors': ['#33bdda', '#ff5904','#6baa01']," & _
                "'legendposition': 'bottom'," & _
                "'legendbox': true," & _
                "'startingangle': '125',}, 'series': [ " & _
                "{" & d1 & "}," & _
                 "{" & d2 & "}]," & _
                "});" & _
                " lineChart2.draw();"

    mWS.Eval(Script, Array As Object(mID))

End Sub

Sub GetID() As String
    Return mID
End Sub

' ###

Sub AddEvent(EventName As String, PreventDefault As Boolean)
    EventName = EventName.ToLowerCase
    mWS.RunFunction("b4j_addEvent", Array As Object("#" & mID, EventName, mID & "_" & EventName, PreventDefault))
End Sub

Sub RemoveEvent(EventName As String)
    EventName = EventName.ToLowerCase
    mWS.Eval("$(arguments[0]).off('" & EventName & "', $(arguments[1]))", Array As Object("#" & mID))
End Sub

Sub SetEventObjectName(EventObjectName As String, EventName As String, PreventDefault As Boolean)
    EventObjectName = EventObjectName.ToLowerCase
    EventName = EventName.ToLowerCase
    RemoveEvent(EventName)
    mWS.RunFunction("b4j_addEvent", Array As Object("#" & mID, EventName, EventObjectName & "_" & EventName, PreventDefault))
End Sub

' ###

Sub AppendTo(ElementID As String)
    mWS.Eval("$(arguments[0]).appendTo($(arguments[1]))", Array As Object("#" & mID, "#" & ElementID.ToLowerCase))
End Sub

Sub Remove()
    mWS.Eval("$(arguments[0]).remove()", Array As Object("#" & mID))
End Sub

Sub Resize(Left As String, Top As String, Width As String, Height As String)

    Dim CSS As String

    CSS = "$(arguments[0]).css({"
   
    If Left   <> -1 Then CSS = CSS & "'left':'" & Left & "px',"
    If Top    <> -1 Then CSS = CSS & "'top':'" & Top & "px',"
    If Width  <> -1 Then CSS = CSS & "'width':'" & Width & "px',"
    If Height <> -1 Then CSS = CSS & "'height':'" & Height & "px',"
   
    If CSS.EndsWith(",") Then
        CSS = CSS.SubString2(0, CSS.Length - 1)
        CSS = CSS & "});"
        mWS.Eval(CSS, Array As Object("#" & mID))
    End If
   
End Sub

with this solution you can use all jquery ui objects and all javascript components if you like!
i hope that is usefull for you!.
regards Paolo
 

Attachments

  • Senza titolo.jpg
    Senza titolo.jpg
    105.9 KB · Views: 274

Erel

B4X founder
Staff member
Licensed User
Longtime User
<off topic>
The smart strings literal was implemented exactly for this use case:
B4X:
Dim script As String = $"
    var lineChart2 = new HeroCharts({
     'chart': {'type':'3dpie','chartcontainer':'${mID}','${heading}':'${Titolo}', 'width': 600,{
     'height': 500,'originx': 0,
     'originy': 80,
     'colors': ['#33bdda', '#ff5904','#6baa01'],
     'legendposition': 'bottom',
     'legendbox': true,"
     'startingangle': '125',}, 'series': [
     {${d1}},
      {${d2}}],
     });
     lineChart2.draw();"$

Note that you can use $xml{SomeVariable} to escape the 5 xml entities.
</offtopic>
 

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
Is there any way to activate one of the default options in a ABMCombo at runtime?

How Can I know which option of a combo is selected in any time (not when it is clicked)?
 

Cableguy

Expert
Licensed User
Longtime User
log it! create a set of flags for the properties you need to know the state of, and log them!
 

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
log it! create a set of flags for the properties you need to know the state of, and log them!

Yes, thanks. This is I'm doing. You can use Text property too.

The problem I have now is I can't refresh and I can't "initialize" it with no one option selected in run time.
 

Javier Lovay

Member
Licensed User
Longtime User
Hello, your work is excellent.
Can use your framework in B4A? I am developing an web app in B4A that run on a android server.
Thanks and congratulations!
 
Last edited:

Harris

Expert
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
 

Harris

Expert
Licensed User
Longtime User
I added more TopMenuItems than the default Contact.
Works great until sized to small...


EDIT: SORRY! Helps do read the documentation!!!
Set Param to make topmenu NOT show on small screens!



ABMaterial1.png





Small (phone).
Top doesn't conform to wrap menu items...



ABMaterial2.png
 
Last edited:

Bladimir Carrillo

Member
Licensed User
Longtime User
Dear Alain,

I've been testing the framework and is excellent. I plan to use it to migrate to a large web environment, which at the moment is a windows desktop application system.
Right now I'm testing with access to a MySQL database showing data in a ABMtable and works well.
Now I have an error when I try to run the JAR file (generated when running the application in Release mode):

'Error: A JNI error has occurreed, please chek your installation and try again"

Additionally, the JAR file generated just have 47 KB, so I think it does not contain server components internally.

I would appreciate your valuable assistance to solve this error and continue my testing and development.

Best regards.
 

Attachments

  • ABMtest01.png
    ABMtest01.png
    106.9 KB · Views: 297

Harris

Expert
Licensed User
Longtime User
Right now I'm testing with access to a MySQL database showing data in a ABMtable and works well.

Would it be possible to provide a code snip-it of how you accomplished this? I am curious how you populate rows and cells with database table records.

Thanks
 

Harris

Expert
Licensed User
Longtime User
http://192.227.136.228:51042/demo

The link above shows the Alain's demo running on my VPS located in Dallas, Texas, USA.

Try it out!

It is a Linux Ubuntu 12.04 LTS VPS. Just one of my test servers provided by WeLoveServers (19 bucks per year).

I installed the Demo.jar in the var directory (after much experimenting and updating java to 1.8).

When I ran it ( nohup java -jar Demo.jar ), it created the folders in the www dir with all files required - except for the /images folder (which was empty).
I copied the images to the folder and everything seems to work as expected...

It is working great on my tablet (Samsung Active 8.0) and desktop (Win 8.1) - both Chrome Browser with much the same performance as my localhost!

I think now I can relax because I have found a framework where (we) can create a stable and functional backend without all the extreme learning curve involved with website technologies. Sure, there will be some hoops, where we need to inject some JavaScript, php and such, but far less than what I have already dealt with (I expect).

Thanks alwaysbusy, I have sent a small donation... My next shall be larger as your wonderful project progresses.

Mike "Harris" Whetmore
 

alwaysbusy

Expert
Licensed User
Longtime User
Hi all,

Sorry for my absence the last few days, but I was in the hospital having some gallstones removed. They were killing me :-(
So I'm little short of a week behind on my release schedule.

I will carefully go through the last posts and see what can be done. I'm very happy some of you are willing to take over some of the work by creating little demo apps to help each other out.

First thing on the agenda is getting v1.02 out to the public. It has a great deal of fixes for little problems and makes it easier to design the 'grid'. Expect this later today.

Next, I'll try to finish up the next beta for the donators with the ABMCalendar and the ABMSocialOauth control. Check your mail in the next few days.

I'm aware some of the controls lack some functionality but I'm afraid it is part of the deal. It is not that easy to find a good balance between 'easy to use' and 'extended functionality'. But it will grow in time. First versions of B4A were alo missing some things. I love billyrudis example on 'adding' a new chart control. Maybe some amongst you could share more of these 'extra controls'?

Cheers and happy programming!
 

Bladimir Carrillo

Member
Licensed User
Longtime User
Hi all,
Sorry for my absence the last few days, but I was in the hospital having some gallstones removed. They were killing me :-(

Hi Alain,
I'm glad you're safe from your gallstones and I hope you recover soon.

I'm trying to handle a data table (ABMTable) and have trouble when updating content has been edited or deleted records from the database.
Is there any way to remove data from the table (ABMTable) to load and view the updated data?
Now only the data it is updated when I stop and run the application again.
These days I will make my donation. Your work is very important to me.

Best regards
 
Top