Share My Creation [Web][ABMaterial] framework for WebApps in B4J

[NOTE]: ABMaterial has now been released as DonationWare. See the B4J Library forum for the library, demos and more!

[UPDATE] I added a second video further into this topic
[UPDATE] I added a third video further into this topic
[UPDATE] I added a fourth video further into this topic (page 2)

ABMaterial.png


ABMaterial is a new framework combining a tuned version of 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.

Here is a 'teaser' video. (Best watch it full screen although the quality isn't great)


All you see in the video is written completely in B4J without having to write a single line of HTML or CSS code! All this code is automatically generated while you can program your WebApp in an object oriented way like you are used to in the other Anywhere products like B4A, B4i and B4J. ABMaterial controls can be themed and have events you can use in B4J to manipulate the app. Using jQueryelement in ABMaterial, you do not have to worry about Futures etc, as all is taken care of in the library.

ABMaterial WebApps are Desktop, Tablet and Phone aware. Depending on the size of the screen, your app can appear different. For example when you resize the app on a desktop, you'll notice the SideBar on the left will disappear and a 'sandwich' button will appear in the TopBar.

You can create great looking WebApps for the web, tablets, phones and Raspberry Pi. ABMaterial uses WebSockets to interact between the WebApp and B4J.

Coding is very easy and follows the simplicity we're used to within B4A/B4i and B4J.

Has changed since the first post, but the general idea is the same
e.g. here is the source code of the parallax page:
B4X:
'Class module
Sub Class_Globals
    Private ws As WebSocket 'ignore
    ' will hold our page information
    Public page As ABMPage
    ' to access the constants
    Private ABM As ABMaterial 'ignore
    ' name of the page, must be the same as the class name
    Public Name As String = "CompParallaxPage"
    ' name of the app, same as in ABMApplication
    Public AppName As String = "demo"

    ' your own variables
    Dim myToastId As Int
End Sub

Public Sub Initialize
    ' build the local structure IMPORTANT!
    BuildPage
End Sub

Private Sub WebSocket_Connected (WebSocket1 As WebSocket)
    Log("Connected")
    ws = WebSocket1
    ' connect our page with the websocket
    page.SetWebSocket(ws)
    ' Prepare the page IMPORTANT!
    page.Prepare
End Sub

Private Sub WebSocket_Disconnected
    Log("Disconnected")
End Sub

Sub Page_ParseEvent(Params As Map)
    Dim eventName As String = Params.Get("eventname")
    Dim eventParams() As String = Regex.Split(",",Params.Get("eventparams"))
    If SubExists(Me, eventName) Then
        Params.Remove("eventname")
        Params.Remove("eventparams")
        Select Case Params.Size
            Case 0
                CallSub(Me, eventName)
            Case 1
                CallSub2(Me, eventName, Params.Get(eventParams(0)))
            Case 2
                CallSub3(Me, eventName, Params.Get(eventParams(0)), Params.Get(eventParams(1)))
            Case Else
                ' cannot be called diretly, to many param
                CallSub2(Me, eventName, Params)
        End Select
    End If
End Sub

public Sub BuildPage()
    ' initialize this page using our theme mytheme
    page.InitializeWithTheme(Name, "/ws/" & AppName & "/" & Name, False, SharedModules.MyTheme)
    page.ShowLoader=True

    page.SetNavigationBar(SharedModules.MakeNavBar(page, "ABMParallax","../images/logo.png"), "", "Helpers", "ABMParallax")

    Dim GridDef As ABMGridDefinition
    GridDef.Initialize("RGrid")
    GridDef.AddRows(1,False, "").AddCell(0,0,0,12,12,12, False,"")
    GridDef.AddRows(2,True, "").AddCell(0,0,0,12,12,12, True,"")
    GridDef.AddRows(1,False, "").AddCell(0,0,0,12,12,12, False,"")

    ' add the definition
    page.AddFromGridDefinition(GridDef)

    Dim parallax1 As ABMParallax
    parallax1.Initialize(page, "parallax1", "../images/parallax1.jpg", 500)
    page.AddComponent("Rgrid1C1", parallax1)

    ' add paragraph
    page.AddComponent("Rgrid2C1", SharedModules.BuildParagraph(page,"par1","Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling. Adding it is as easy as using this code in B4J.") )

    ' add codeblock
    Dim code As StringBuilder
    code.Initialize
    code.Append("Dim parallax1 As ABMParallax").Append(CRLF)
    code.Append("parallax1.Initialize(page, ""parallax1"", ""../images/parallax1.jpg"", 500)").Append(CRLF)
    code.Append("page.AddComponent(""Rgrid1C1"", parallax1)").Append(CRLF)
    code.Append("").Append(CRLF)
    code.Append("// the other stuff you want to add to the page, like this block").Append(CRLF)
    code.Append("").Append(CRLF)
    code.Append("Dim parallax2 As ABMParallax").Append(CRLF)
    code.Append("parallax2.Initialize(page, ""parallax2"", ""../images/parallax2.jpg"", 500)").Append(CRLF)
    code.Append("page.AddComponent(""Rgrid4C1"", parallax2)").Append(CRLF)

    page.AddComponent("Rgrid3C1", SharedModules.BuildCodeBlock(page, "code", code))

    Dim parallax2 As ABMParallax
    parallax2.Initialize(page, "parallax2", "../images/parallax2.jpg", 500)
    page.AddComponent("Rgrid4C1", parallax2)

    SharedModules.BuildFooter(page)
End Sub

' clicked on the navigation bar
Sub Page_NavigationbarClicked(Action As String, Value As String)
    If Action = "ABMParallax" Then Return
    If Action = "Contact" Then
        Dim myTexts, myReturns As List
        myTexts.Initialize
        myReturns.Initialize
        myToastId = myToastId + 1
        page.ShowToast("toast" & myToastId, "toastred", "Hello to you too!", 5000, myTexts, myReturns)
        Return
    End If
    SharedModules.NavigateToPage(ws, Value)
End Sub

There is still a lot of work to do, but I'm glad I could already show you this :)

I'll keep you updated on the progress.

Alain Bailleul
 
Last edited:

Cableguy

Expert
Licensed User
Longtime User
So many wishes come true, some "must have" snippets incorporated from ground zero, like the root filter, that I had to add each time I re-started a new project!
also the DBM module, already available on the template!
Very cool stuff!
 

amaxco

Member
Licensed User
Longtime User

alwaysbusy

Expert
Licensed User
Longtime User
As there was a major issue with ABM running of B4J v6.00, everyone (donator or not) can download the upgrade to 4.03.

See https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/ for the download link.

Or donators can also use the feedback app to download version 4.03.

For anyone upgrading from Chipmunk, it is very important you also read the included Checklist 4.00 pdf file!
 

alwaysbusy

Expert
Licensed User
Longtime User
ABMaterial 4.25 Donators is now released! For the current public version (4.03) see https://www.b4x.com/android/forum/threads/abmaterial-framework-for-webapps.60072/.

Donators can download Dragonfly from the feedback app.

NOTE: Read the README.TXT file carefully!

With ABM 4.25 comes the first version of B4JS, a transpiler that can convert B4JS code to pure Javascript! Something I wanted to make for a long time now. I restarted the project instead of building on what I had in 2016 because ABM has matured a lot since then.

Like any 'new' language, we will hit some bumps and limitations in the beginning. B4X wasn't build in one day either :)

But I'm confident with your feedback, B4JS can grow to be as production ready as ABM is today!

A lot in ABM had to be changed to make B4JS possible. There is always a chance something in ABM will be broken because of those changes. BUT, I will give ABSOLUTE PRIORITY to such cases. I have done extensive tests myself with our own Web Apps and that is why I'm pretty confident to release it to you now.

So, if you want to make the switch to ABM 4.25, make sure you got enought time to test your own apps and report as best as possible in the feedback app! (an example on how to reproduce the problem helps me enormously).
PLEASE DON'T PANIC!!! Report the problem and I'll look into it. Some 'maintenance' releases will then follow quickly.

An introduction and some tutorials can be found https://www.b4x.com/android/forum/threads/abmaterial-b4js-00-introduction.90249/
Also, in the zip there is a B4JS demo demonstration most of the is described in the tutorials.
 

alwaysbusy

Expert
Licensed User
Longtime User

Attachments

  • README 4.25.txt
    20.4 KB · Views: 398
Last edited:

alwaysbusy

Expert
Licensed User
Longtime User
The mail for v4.30 for donators is out! As this is using my new GDPR approved email list, it may be possible you do not receive it (e.g. I didn't receive an reply from you, or I made a mistake removing you from the list :oops:). In that case, you can send me an email to re-activate you.
 

alwaysbusy

Expert
Licensed User
Longtime User
ABMaterial 4.30 Public is now released!
See the attachment for the release notes.

Donators will receive an email for ABMaterial 4.50 in a couple of hours.

Some time has passed since the last update. Main reason is ABMaterial has been proven to be very stable and very few bugs were reported (Good news!).
On the other hand I have been very busy with some unexpected projects, but because of them, a lot of new features were added to this ABM release.
 

Attachments

  • README 4.30.txt
    18 KB · Views: 326

roddy

Member
Licensed User
Longtime User
ABMaterial 4.30 Public is now released!
See the attachment for the release notes.

Donators will receive an email for ABMaterial 4.50 in a couple of hours.

Some time has passed since the last update. Main reason is ABMaterial has been proven to be very stable and very few bugs were reported (Good news!).
On the other hand I have been very busy with some unexpected projects, but because of them, a lot of new features were added to this ABM release.

ABMaterial is great and i have some question.
How to do can change language for buttom in ABMCalendar? e.g. chinese
or ABMCalendar have some property like ABMDateTimePicker.PickText、ABMDateTimePicker.TodayText ...
 

Attachments

  • calendar.jpg
    calendar.jpg
    89.3 KB · Views: 258

alwaysbusy

Expert
Licensed User
Longtime User
ANNOUNCEMENT:

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

Github (source + binary release 4.95): https://github.com/RealAlwaysbusy/ABMaterial-Source

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.

Alwaysbusy
 
Last edited:

Johan Hormaza

Well-Known Member
Licensed User
Longtime User
ANNOUNCEMENT:

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

Github (source + binary release 4.95): https://github.com/RealAlwaysbusy/ABMaterial-Source

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.

Alwaysbusy
Is it possible to have this version already compiled as a B4J library?

Thank you and extraordinary work !!
 
Top