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:

Harris

Expert
Licensed User
Longtime User
AB,

Can one get similar functionality using OpenStreetMaps (as with Google)?

Didn't see much for grid in video clips (12 cells...). Most of my pages are all grid with modal form edit/insert.
I also use master/detail (/detail) grid relations.

Can source be modified to include other things that engine doesn't have ability to do (ie, setting SELECT filters, reading and writing cookies, etc)

When you are ready, who may I (hopefully) contract to make my site using your ABMaterial framework?
It looks great and the way to go!

I will be too (always) busy writing reports using JasperSoft (report server) and B4A app inclusions..

Thanks
 

alwaysbusy

Expert
Licensed User
Longtime User
@Harris

Can one get similar functionality using OpenStreetMaps (as with Google)?
Maybe an idea for another control, but for this realease only Google Maps is available

Can source be modified to include other things that engine doesn't have ability to do (ie, setting SELECT filters, reading and writing cookies, etc)
As far as I'm aware (correct me if I'm wrong @Erel) but when using websockets cookies and SELECT do not apply. There is an upgrade request which is completed before the websocket is created if I remember well. Moreover, ABMaterial is developped having in mind the developer should not need to write his own CSS and HTML. We'll see how far I can carry this dream...

Didn't see much for grid in video clips (12 cells...). Most of my pages are all grid with modal form edit/insert.
I also use master/detail (/detail) grid relations.
It will be possible to create grids/tabels with all kind of ABMcomponent inside (even other tables). However, again for this release, no possibility to edit. A complete reload is needed. They do have goodies like being scrollable (horizontal/vertical and sortable). Here is a screenshot from within the demo app .
tabledemo.png


When you are ready, who may I (hopefully) contract to make my site using your ABMaterial framework?
I'm sure some 'ABMaterial' gurus will show up in the this forum who will be able to assist you, or even freelance for you.

Still a lot to do on the demo app, so bear with me if it takes some time...

Alain
 
Last edited:

Harris

Expert
Licensed User
Longtime User
Thanks Alain for the detailed reply. Looking forward to your fine efforts.

Most of my comments are based on what I have learned creating with Javascript, JQuery, HTML and php / Ajax (server side).
So many different program technologies to learn, so little time.

If only I had the ability to extract half of Erel's brilliance, I would have it done already!
 

Erel

B4X founder
Staff member
Licensed User
Longtime User

alwaysbusy

Expert
Licensed User
Longtime User
I'm almost there. One more chapter to write (ABMModalSheet), some polishing at the demo app and I'm ready to release the beta. Plans are for tonight or tomorrow night.

In the meantime while you wait, an extra video showing two new controls (sorry guys, it was stronger than myself. I just had to write them before the release).

 
Last edited:

Cableguy

Expert
Licensed User
Longtime User
I particularly like the "UpLoad Manager" Control!
 

EnriqueGonzalez

Well-Known Member
Licensed User
Longtime User
So awesome,

nice that you are already done, if it were not i was going to suggest and Early Access or something like that!!
 

Cableguy

Expert
Licensed User
Longtime User
I have one question/wish... will there be a "created with ABMaterial" type of control? I do think that in each webapp created using this Library, there should be a (non intrusive) "Created Using ABMaterial" Logo or watermark!
 

Roberto P.

Well-Known Member
Licensed User
Longtime User
good job. we are eagerly awaited to have your framework
 

alwaysbusy

Expert
Licensed User
Longtime User
Done! You can now download the ABMaterial Framework (Beta) from the Libraries forum. Forgive me if I don't answer many questions in the next 48 hours, but after 6 weeks of 5 hours sleep a day, I'm probably not that lucid anymore. Thanks everyone for the support during this adventure and I hope it will meet the little hype it may have caused ;-)
 

codie01

Active Member
Licensed User
Longtime User
Good Day alwaysbusy, Your work is awesome and a donation is coming as it is well deserved. I have my own webpages going locally with local host, however porting to my web server is a problem. Is there any where I can go to read a tutorial on this.

Regards P.
 

codie01

Active Member
Licensed User
Longtime User
Good Day Alwaysbusy,

Firstly ABMATERIAL rocks, Iam finally able to get my desktop, mobile and website working all on one app to a central database, mate you provided a great solution. Just one quick question. I can control everything other that the top navigatorbar, I quite simply want to turn of the box around it Zepth. How can i Do this thanks or is the function/sub missing.

Thanks
 

codie01

Active Member
Licensed User
Longtime User
Good Day Alain,

I have been trying to use grids and had some strange results, this morning I made a simple grid (You did advise this, but I choose "I am an idiot approach" sometimes I'm a clown) to test to solve the problem as follows:

B4X:
    ' create the page grid
    page.AddRows(1,True,"myrow").AddCellsOS(6,0,0,0,2,2,2,"myrow")
    page.AddRows(1,True,"myrow").AddCellsOS(3,0,0,0,4,4,4,"myrow")

    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

    page.Cell(1,5).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(1,6).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(2,1).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(2,2).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(2,3).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))

Using both .AddRows and .AddRowsM you will see that in row(1) I place content in Cells 5 and 6, however they turn up in Cells 1 and 2 and not in cells 5 and 6 respectively, this means I need to fill cells 1,2,3,4 to push them across and I am not able to target a cell as I hoped.

Is this a bug? or am I not doing something wrong?

And yes ABMaterial Rocks.

Phil.
 

Harris

Expert
Licensed User
Longtime User
Good Day Alain,

I have been trying to use grids and had some strange results, this morning I made a simple grid (You did advise this, but I choose "I am an idiot approach" sometimes I'm a clown) to test to solve the problem as follows:

B4X:
    ' create the page grid
    page.AddRows(1,True,"myrow").AddCellsOS(6,0,0,0,2,2,2,"myrow")
    page.AddRows(1,True,"myrow").AddCellsOS(3,0,0,0,4,4,4,"myrow")

    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components

    page.Cell(1,5).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(1,6).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(2,1).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(2,2).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))
    page.Cell(2,3).AddComponent(ABMShared.BuildParagraph(page,"par1","A"))

Using both .AddRows and .AddRowsM you will see that in row(1) I place content in Cells 5 and 6, however they turn up in Cells 1 and 2 and not in cells 5 and 6 respectively, this means I need to fill cells 1,2,3,4 to push them across and I am not able to target a cell as I hoped.

Is this a bug? or am I not doing something wrong?

And yes ABMaterial Rocks.

Phil.

I had the very same issue with latest version so I added cells in the compound fashion...

page.AddRows(1,True,"myrow").AddCellsOS(1,0,0,0,2,2,2,"myrow").AddCellsOS(1,0,0,0,2,2,2,"myrow").AddCellsOS(1,0,0,0,2,2,2,"myrow")....

I shall add it to the feedback when I confirm it again...

And yes ABMaterial Rocks.
 

codie01

Active Member
Licensed User
Longtime User
I had the very same issue with latest version so I added cells in the compound fashion...

page.AddRows(1,True,"myrow").AddCellsOS(1,0,0,0,2,2,2,"myrow").AddCellsOS(1,0,0,0,2,2,2,"myrow").AddCellsOS(1,0,0,0,2,2,2,"myrow")....

I shall add it to the feedback when I confirm it again...

And yes ABMaterial Rocks.

Thanks Harris, getting there slowly. This worked but now I have a blank row between each row, I do not want this, I need each row to join below with the one above. How can I remove this. Here is my code in case I have it wrong.

B4X:
    ' create the page grid
    page.AddRows(1,True,"blackbackrow").AddCellsOS(1,0,0,0,12,12,12,"")
     page.AddRows(1,True,"blackbackrow").AddCellsOS(1,0,0,0,3,3,3,"").AddCellsOS(1,0,0,0,3,3,3,"").AddCellsOS(1,0,0,0,1,1,1,"").AddCellsOS(1,0,0,0,2,2,2,"").AddCellsOS(1,0,0,0,3,3,3,"")
    page.AddRows(1,True,"blackbackrow").AddCellsOS(1,0,0,0,12,12,12,"")
    'IMPORTANT once you loaded the complete grid AND before you start adding components
    page.BuildGrid
  
    ' load page images
    Dim img1 As ABMImage
    img1.Initialize(page, "img1","../images/freephone2.png",1)
    Dim img2 As ABMImage
    img2.Initialize(page, "img2","../images/logo.png",1)
    Dim img3 As ABMImage
    img3.Initialize(page, "img3","../images/shoppingcart.png",1)
    Dim img4 As ABMImage
    img4.Initialize(page, "img4","../images/nationwide.png",1)
  
    ' Build Header
    page.Cell(1,1).AddComponent(ABMShared.BuildSpan(page,"par2","."))
    page.Cell(2,1).AddComponent(ABMShared.BuildSpan(page,"par2","."))  
    page.Cell(2,2).AddComponent(img4)
    page.Cell(2,3).AddComponent(img3)
    page.Cell(2,3).AddComponent(ABMShared.BuildParagraphWH(page,"par4","Cart Items #0"))
    page.Cell(2,4).AddComponent(ABMShared.BuildSpan(page,"par2","."))  
    page.Cell(2,5).AddComponent(img1)
    page.Cell(3,1).AddComponent(img2)

thanks Phil
 
Top