Share My Creation [ABMaterial] framework for WebApps in B4J

Discussion in 'B4J Share Your Creations' started by alwaysbusy, Oct 15, 2015.

  1. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    [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:
    Code:
    '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,12False,"")
        GridDef.AddRows(
    2,True"").AddCell(0,0,0,12,12,12True,"")
        GridDef.AddRows(
    1,False"").AddCell(0,0,0,12,12,12False,"")

        
    ' 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: Jan 28, 2016
  2. Erel

    Erel Administrator Staff Member Licensed User

    Wow!!!

    I watched it two times. Amazing work.
     
  3. Douglas Farias

    Douglas Farias Expert Licensed User

    VERY VERY NICE :)
     
    alwaysbusy likes this.
  4. inakigarm

    inakigarm Well-Known Member Licensed User

    Awesome job !!
     
    alwaysbusy likes this.
  5. Sergey Kravchenko

    Sergey Kravchenko Active Member Licensed User

    It's cool!
    Already there is a beta the version?
     
    alwaysbusy likes this.
  6. AscySoft

    AscySoft Active Member Licensed User

    Wow indeed! Very very nice.
     
    alwaysbusy likes this.
  7. ivanomonti

    ivanomonti Well-Known Member Licensed User

    massima potenza.....
     
    alwaysbusy likes this.
  8. Ed Brown

    Ed Brown Active Member Licensed User

    Well done!
    I look forward to further updates on your progress.
     
  9. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Thanks for the kind words! I'm planning to have a workable version by the end of the month. In a bigger sheme to promote B4J, I would release it together with a couple of articles on my blog because, although simple to use, it's still a big framework and demands a certain work method from the programmer.

    Note: I've already put a lot of hours into this and there are still a lot more to come, so ABMaterial will probably be released as DonationWare.

    Here is a second video demonstrating a rather important control: ABMInput

     
    Beja, Sergey Kravchenko, Erel and 2 others like this.
  10. LucaMs

    LucaMs Expert Licensed User

    I must definitely look at this: I think I saw a few Erel's WOWs :)

    .......
     
    Last edited: Oct 16, 2015
    Beja and alwaysbusy like this.
  11. LucaMs

    LucaMs Expert Licensed User

  12. Ed Brown

    Ed Brown Active Member Licensed User

    Wow!
    I've also just noticed the number and type of controls that are shown on the menu that are coming - nice!
     
    alwaysbusy likes this.
  13. ivanomonti

    ivanomonti Well-Known Member Licensed User

    wow
     
    alwaysbusy likes this.
  14. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    Lots of changes this week, although most of them in the core methods:

    - Complete rewrite of the Grid system with additional methods to write grids faster
    - Lots and lots of Bug fixes
    - New controls (Combo, Lists, Checkboxes, Switches, Radiobuttons, Sliders, ...)

    And another video:
     
    Beja, Toley, Cableguy and 6 others like this.
  15. JonPM

    JonPM Well-Known Member Licensed User

    I would gladly pay for this, it looks awesome.
     
    alwaysbusy likes this.
  16. souzafo

    souzafo Member Licensed User

    Awesome!
    When will we have a version to test ?
     
    alwaysbusy likes this.
  17. imbault

    imbault Well-Known Member Licensed User

    Super, when can we donate to try this kind of magic?
     
    alwaysbusy likes this.
  18. Ed Brown

    Ed Brown Active Member Licensed User

    Stop teasing us!
    Let us know when we can $$ for it.
    :)
     
    alwaysbusy likes this.
  19. Cableguy

    Cableguy Expert Licensed User

    I will be needing this soon!!!!
     
    alwaysbusy likes this.
  20. alwaysbusy

    alwaysbusy Well-Known Member Licensed User

    The target for the first release is in about a week (or two). I prefer releasing a rather stable version with enough controls to start creating real world applications and a demo app that shows most of the possibilities of the framework so the learning curve is not to steep. The big change I had to make in the grid design would've required a lot of rewriting from your side and no one would've been happy with that.

    Still a couple of controls to write, but then I can start finishing up the demo app. Writing ABMaterial is something I do in the mornings before and at night after my day job.

    So I guess one more 'teaser' video :) somewhere next week and then it's all yours to play with.

    One more thing. Thank you all for your likes and support messages. It has really kept me going the last few weeks . Luckily I had an extra hour this weekend due to the change of the daylight saving time ;)
     
    Beja, Toley, highflyer and 4 others like this.
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice