Share My Creation [BANanoWebix] Proof of concept

Discussion in 'B4J Share Your Creations' started by Mashiane, Jun 12, 2019 at 7:53 PM.

  1. Mashiane

    Mashiane Expert Licensed User



    For a long long long while I have been very curios about Webix, It reminded me of my days when I was doing ASP.Net with Ext.JS many many moons aho. That helped me create my first web database application with SQL as a backend back in 2009. A lot of VB.Net code that was... It was marvelous and I was the happiest man in the world, king of the world. It so amazing how the excitement of achieving something as a first "Hellow World" app running without hurdles. Just like when I first wrote my first Android app with B4A many years back.

    So today I spent time time to feed that curiosity and with my question being can I achieve this with BANano? I am happily surprised and satisfied that I was able to pull it off, and I had to take everything I tend to think about HTML out of the window for a while to Object Orientation.

    I made mistakes, rewrote stuff, debugged a lot, but hey, ended up with a single component class to rule them all.

    What I liked most was that all this was done without a single HTML element being created by me. I'm basically using Lists and Maps all the way. Everything is an object and Webix just renders, creates the datasource links automatically. Basically I just had to worry about the look and feel of the app.

    So I followed their example, tried to understand the logic of what they did things and came up with my own flavor of implementation.

    As their lib is quiet huge, this just for me meant that its possible and if I want to explore more of their candy, I continue on the trend, there are a lot of things I like about it though and well, their price is not as welcoming. Yes for internal company apps and open source apps, the moon is no longer the limit. Anything commercial should be licensed.

    In their example, this is the structure of the Basic App.

    view:"toolbar", elements:[
    view:"button", value:"Add", width:100 },
                    { view:"button", value:"Delete", width:100 }
                height:120, cols:[
                        view:"form", elements:[
                            { view:"text", placeholder:"Title" },
                            { view:"text", placeholder:"Year" }  
                        template:"#title# - #year#", // which data to show
                        select:true, //enables selection
                            { id:1, title:"The Shawshank Redemption", year:1994 },
                            { id:2, title:"The Godfather", year:1972 },
                            { id:3, title:"The Godfather: Part II", year:1974 },
                            { id:4, title:"The Good, the Bad and the Ugly", year:1966 },
                            { id:5, title:"My Fair Lady", year:1964 },
                            { id:6, title:"12 Angry Men", year:1957 }

    So here is my BANano_Ready to generate same...

    Sub BANano_Ready()
        pg.Content.TypeOf = 
    '*** define row 1
        'add toolbar
        Dim R1 As WixRow
    'R1.Template = R1.ID
    Dim hdr As WixHeader
    "hdr""My First Webix App")
    Dim tblBar As WixToolBar
    "btnSave","Save",70, BANano.CallBack(Me,"save_row",Null))
    "btnDelete""Delete"70, BANano.CallBack(Me,"delete_row",Null))
    "btnClear""Clear"95, BANano.CallBack(Me,"clear_form",Null))
    'add rows to the page
    Dim R2 As WixRow
    Dim R2C1 As WixColumn
    'R2C1.Template = R2C1.ID
    'add form
        myForm.Initialize(Dollar, "myform",300)
    'add r2c1 to row
    Dim R2C2 As WixColumn
    'R2C2.Template =
        'add a list
    Dim filmset As List
    "id":1"title":"The Shawshank Redemption""year":1994))
    "id":2"title":"The Godfather""year":1972))
    "id":3"title":"The Godfather: Part II""year":1974))
    "id":4"title":"The Good, the Bad and the Ugly""year":1966))
    "id":5"title":"My Fair Lady""year":1964))
    "id":6"title":"12 Angry Men""year":1957))
    Dim recID As String
        myList.Template = 
    "#title# - #year#"
        myList.EnableSelect = 
        myList.Height = 
    400 = filmset
        myList.onAfterSelect = BANano.CallBack(Me,
    'attach the select event
    End Sub
    Last edited: Jun 12, 2019 at 11:16 PM
    Johan Hormaza likes this.
  2. Mashiane

    Mashiane Expert Licensed User

    The other event linking code was also just a breath of fresh air to try and link.

    'a row is selected from the list
    Sub record_selected(id As String)
    'get the record from the list
        Dim record As Map = myList.GetItem(id)
    'assign record to the form
    End Sub

    'the toolbar save button is clicked
    Sub save_row(e As BANanoEvent)
    'get values from the form
        Dim values As Map = myForm.GetValues
    'read the id for the record
        Dim recID As String = values.GetDefault("id","")
    If recID = "" Then
    'add to the list
    'update the list
    End If
    End Sub

    'the toolbar delete button is clicked
    Sub delete_row(e As BANanoEvent)
    'get the selected iten
        Dim recID As String = myList.GetSelectedID
    If recID = "" Then Return
    'remove item from list
    'clear the form
    End Sub

    'the toolbar clear button is clicked
    Sub clear_form
    'clear the form contents
    End Sub
    These are linking the form to the list. The list was just automatically updated by Webix when we just fed it the data that it needed to process and defined the 'template' to display the data.

    One of my favourate things were these methods...@form level

    'get the form contents
    Sub GetValues() As Map
    Dim values As Map = Dollar.Selector(ID).RunMethod("getValues",Null).result
    Return values
    End Sub

    'clear the form
    Sub Clear
    End Sub

    'set values
    Sub SetValues(values As Map)
    End Sub
    Just calling built in methods on the library we are able to getValues, clear the form and setValues, off course just from a JSON object (i.e. map)

    On the list side...

    'update an existing record
    Sub Update(recordID As String, record As Map)
    End Sub

    'get an item
    Sub GetItem(recordID As StringAs Map
    Dim values As Map = Dollar.Selector(ID).RunMethod("getItem",Array(recordID)).Result
    Return values
    End Sub

    'attach events after page is created
    Sub AttachAfterSelectEvent()
    End Sub

    'remove an item
    Sub Remove(recID As String)
    If recID = "" Then Return
    End Sub

    'get the selected item id
    Sub GetSelectedID As String
    Dim recID As String = Dollar.Selector(ID).RunMethod("getSelectedId",Null).Result
    Return recID
    End Sub
    These methods were just a marvel. The idea of not writing loops and creating HTML elements to create the UX was just too cool. So I'm thinking, if I'm really serious about speed in development of app, this is one option I should look for in these frameworks.
    Johan Hormaza likes this.
  3. Mashiane

    Mashiane Expert Licensed User

    If one took a look at the WixHeader class, there is really nothing fancy and its basic as it gets, off course I have not taken a deep look into this whole big monster.

    Sub Class_Globals
    Public ID As String
    Public Header As WixElement
    End Sub

    'initialize the header
    Public Sub Initialize(sID As String, sTitle As String)
    ID = sID.tolowercase
        Header.View = 
        Header.TypeOf = 
        Header.Template = sTitle
    End Sub

    Sub Item As Map
    Return Header.item
    End Sub
    In all classes that I have created, they have a base class that I have named WixElement. That base class is nothing more other than just lists and maps variables.

    Sub Class_Globals
    Public ID As String
    Public Template As String
    Public Columns As List
    Public Width As Int
    Public Height As Int
    Public Rows As List
    Private Element As Map
    Public Value As String
    Public Elements As List
    Public Name As String
    Private Attributes As Map
    Public View As String
    Public TypeOf As String
    End Sub

    'initialize the element
    Public Sub Initialize(sID As String)
    ID = sID.ToLowerCase
        Width = 
        Height = 
        Element = CreateMap(
        Value = 
        Name = 
    End Sub

    'set an attribute
    Sub SetAttr(attrName As String, attrValue As Object)
    End Sub

    'return the object
    Sub Item As Map
    "width", Width)
    "type", TypeOf)
    "name", Name)
    "value", Value)
    "template", Template)
    "cols", Columns)
    "rows", Rows)
    "elements", Elements)
    For Each attr As String In Attributes.Keys
    Dim strVal As Object = Attributes.Get(attr)
    Return Element
    End Sub

    'add item to a column
    Sub AddColumnItem(itm As Map)
    End Sub

    'add item to a row
    Sub AddRowItem(itm As Map)
    End Sub

    'add on elements
    Sub AddElementItem(itm As Map)
    End Sub

    'update property when not blank
    private Sub SetOnContent(Prop As String, PropValue As String)
    If PropValue = "" Then Return
    End Sub

    'update property when size > 0
    private Sub SetOnCondition(Condition As Int, Prop As String, PropValue As Object)
    If Condition <= 0 Then Return
    End Sub
    So far I have not written a single HTML element definition or written any javascript. Now that I love!

    joulongleu and Johan Hormaza like this.
  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