Share My Creation Advay: An ABMaterial WebApp with Source Code

Hi there


This is a proof of concept app that shows a 3 section screen, where one can define an ABMaterial component, then have the source code definition and then a preview of the component in the screen. For now only the ABMActionButton Component has been explored. This uses a SQLite backend database for the structure of the components and these are created dynamically. This WebApp has been developed using ABMaterial 3.0.3 using B4J from Anywhere Software inspired by the ABMaterial Framework.

This has been created purely with MyMaterial.Show, source code attached. The backend SQLite database with the component definitions is in the objects folder, named phindi.db.

Reproduce:

  • Open the Advay project using B4J.
  • Reference ABMaterial 3.0.3
  • Copy your www folder to the Objects folder
  • Execute the b4j project
  • Open the Advay app on localhost:51043/advay.
Happy coding.
 

Attachments

  • Advay.zip
    64.9 KB · Views: 376

Mashiane

Expert
Licensed User
Longtime User
ABMComponents:

These are loaded from the ABMComponents table in the phindi.db to the ABMCombobox. As soon as one is selected, the various properties for the component are loaded, for example, the ABMActionButton.

ABMComponents.png
 

Mashiane

Expert
Licensed User
Longtime User
A look at the source code...

Components are loaded to the design ABMCombo

B4X:
Private Sub RefreshOnLoad_cboComponents()
    'Get access to the component in the page.
    Dim cboComponents As ABMCombo = page.Component("cboComponents")
    'Clear the ABMCombo items
    cboComponents.Clear
    'Define list details to load to the combo
    Dim results As List
    Dim resCnt As Int
    Dim resTot As Int
    Dim resMap As Map
    'variable to hold the source field
    Dim Title As String
    'variable to hold the description field
    Dim Title As String
    'Add a spinner to the page
    'Get connection from current pool if MySQL/MSSQL
    Dim SQL As SQL = ABMShared.SQLGet
    'Get the records as a list of maps from the db
    results = ABMShared.SQLExecuteMaps(SQL,"select * from ABMComponents where active = 1 order by Title", Null)
    'Close the connection to the database
    ABMShared.SQLClose(SQL)
    'Loop throught each record read and process it
    resTot = results.size - 1
    For resCnt = 0 To resTot
        'Get the record map
        resMap = results.get(resCnt)
        'process the id field
        Title = resMap.get("title")
        Title = resMap.get("title")
        cboComponents.AddItem(Title, Title, ABMShared.ListItemIconTitle(page, Title, "", Title, ""))
    Next
    'Refresh the ABMCombo contents
    cboComponents.Refresh
End Sub

On click of the ABMCombo item, the component structure is read and displayed. The user updates properties here and has to click the preview button to see the output...

B4X:
Public Sub DesignComponent
    'Get combo active item
    Dim cboComponents As ABMCombo = page.Component("cboComponents")
    Dim strComponent As String = cboComponents.GetActiveItemId
    'remove cell contents
    page.Cell(4,1).RemoveAllComponents
    page.Cell(4,2).RemoveAllComponents
    'remove cell contents
    page.Cell(4,3).RemoveAllComponents
    'the map will hold the properties for this control
    Dim results As List
    Dim SQL As SQL = ABMShared.SQLGet
    results = ABMShared.SQLExecuteMaps(SQL, "select * from ABMProperties where component = ?", Array As String(strComponent))
    'Close the connection to the database
    ABMShared.SQLClose(SQL)
    For Each resMap As Map In results
        Dim propname As String = resMap.get("propname")
        Dim method As String = resMap.getdefault("method","")
        Dim sList As String = resMap.Getdefault("list","")
        Dim defaultvalue As String = resMap.Getdefault("defaultvalue","")
        Select Case method
        Case "AddTextProperty"
            ABMShared.AddTextProperty(page,propname,defaultvalue,4,1)
        Case "AddComboProperty"
            ABMShared.AddComboProperty(page,propname,defaultvalue,4,1,sList)
        End Select
    Next
    page.Cell(4,1).refresh
End Sub

After a user clicks the Preview Button...

B4X:
Public Sub btnPreview_Clicked(Target As String)
    'Get combo active item
    Dim cboComponents As ABMCombo = page.Component("cboComponents")
    Dim strComponent As String = cboComponents.GetActiveItemId
    'remove cell contents
    page.Cell(4,2).RemoveAllComponents
    'remove cell contents
    page.Cell(4,3).RemoveAllComponents
    'the map will hold the properties for this control
    Dim cMap As Map
    cMap.Initialize
    Dim results As List
    Dim SQL As SQL = ABMShared.SQLGet
    Dim defaultvalue As String
    results = ABMShared.SQLExecuteMaps(SQL, "select * from ABMProperties where component = ?", Array As String(strComponent))
    'Close the connection to the database
    ABMShared.SQLClose(SQL)
    For Each resMap As Map In results
        Dim propname As String = resMap.get("propname")
        Dim method As String = resMap.get("method")
        Select Case method
        Case "AddTextProperty"
            defaultvalue = ABMShared.GetInput(page, propname)
            cMap.Put(propname.ToLowerCase,defaultvalue)
        Case "AddComboProperty"
            defaultvalue = ABMShared.GetCombo(page, propname)
            cMap.Put(propname.ToLowerCase,defaultvalue)
        End Select
    Next
    Dim strCode As String = ABMCreateComponent
    strCode = ABMShared.CodeFormatter(strCode)
    'add code to the codelabel
    Dim cl As ABMCodeLabel = ABMShared.BuildCodeBlockFromSmartString(page,"cl",strCode)
    page.cell(4,2).AddComponent(cl)
    Select Case strComponent
    Case "ABMActionButton"
        Dim ac As ABMActionButton = ABMShared. ABMActionButton_Add(page,cMap)
        page.AddActionButton(ac)
    End Select
    page.refresh
End Sub

The glueing code to create the ABMCodeLabel code from the selected properties...

B4X:
Public Sub ABMCreateComponent() As String
    'Get combo active item
    Dim cboComponents As ABMCombo = page.Component("cboComponents")
    Dim strComponent As String = cboComponents.GetActiveItemId
    Dim strCode As StringBuilder
    Dim strProp As StringBuilder
    strCode.Initialize
    strProp.Initialize
    Dim initList As List
    Dim propList As List
    Dim SQL As SQL = ABMShared.SQLGet
    'select init methods
    initList = ABMShared.SQLExecuteMaps(SQL, "select * from ABMInitialize where component = ?", Array As String(strComponent))
    propList = ABMShared.SQLExecuteMaps(SQL, "select * from ABMProperties where component = ?", Array As String(strComponent))
    'Close the connection to the database
    ABMShared.SQLClose(SQL)
    strProp.append("Sub ").append(strComponent).append("_Add(page As ABMPage, pMap as Map) As ").append(strComponent).append(CRLF)
    strCode.Append("Dim comp As ").append(strComponent).append(CRLF)
    For Each resMap As Map In propList
        Dim propname As String = resMap.getdefault("propname","")
        Dim defaultvalue As String = resMap.getdefault("defaultvalue","")
        Dim slist As String = resMap.getdefault("list","")
        Select Case propname
        Case "initialize"
            strProp.append("Dim s").append(propname).append(" As String").append(CRLF)
            strProp.append(propname).append(" = pMap.getdefault(").append(QUOTE).append(propname.tolowercase)
            strProp.append(QUOTE).append(", ").append(QUOTE).append(defaultvalue).append(QUOTE).append(")").append(CRLF)
            strCode.Append("Select case s").Append(propname).Append(CRLF)
            For Each initMap As Map In initList
                Dim initialize1 As String = initMap.get("initialize")
                Dim definition As String = initMap.get("definition")
                strCode.Append("Case ").Append(ABMShared.InQuotes(initialize1)).Append(CRLF)
                strCode.append("comp.").append(definition).append(CRLF)
            Next
            strCode.Append("End Select").Append(CRLF)
        Case Else
            strProp.append("Dim ").append(propname).append(" As String").append(CRLF)
            strProp.append(propname).append(" = pMap.getdefault(").append(QUOTE).append(propname.tolowercase)
            strProp.append(QUOTE).append(", ").append(QUOTE).append(defaultvalue).append(QUOTE).append(")").append(CRLF)
        End Select
        If slist.length > 0 And propname <> "initialize" Then
            strProp.append("Select Case ").append(propname).append(CRLF)
            Dim spItems() As String = Regex.Split(";", slist)
            For Each strItem As String In spItems
                strProp.append("Case ").append(ABMShared.inquotes(strItem)).append(CRLF)
                strProp.append(propname).append(" = ").append(strItem).append(CRLF)
            Next
            strProp.append("End Select").append(CRLF)
        End If
    Next
    strProp.append(strCode.tostring).append(CRLF)
    strProp.append("Return comp").append(CRLF)
    strProp.append("End Sub").append(CRLF)
    Return strProp
End Sub

This code for this ABMActionButton, generated the code in ABMShared used to create the component on the page, which is...

B4X:
Public Sub ABMActionButton_Add(page As ABMPage, pMap As Map) As ABMActionButton
    Dim id As String
    id = pMap.getdefault("id", "")
    Dim iconname As String
    iconname = pMap.getdefault("iconname", "mdi-action-dashboard")
    Dim iconawesomeextra As String
    iconawesomeextra = pMap.getdefault("iconawesomeextra", "")
    Dim themename As String
    themename = pMap.getdefault("themename", "")
    Dim openDirection As String
    openDirection = pMap.getdefault("opendirection", "ABM.ACTIONBUTTON_DIRECTION_UP")
    Select Case openDirection
    Case "ABM.ACTIONBUTTON_DIRECTION_UP"
        openDirection = ABM.ACTIONBUTTON_DIRECTION_UP
    Case "ABM.ACTIONBUTTON_DIRECTION_DOWN"
        openDirection = ABM.ACTIONBUTTON_DIRECTION_DOWN
    Case "ABM.ACTIONBUTTON_DIRECTION_LEFT"
        openDirection = ABM.ACTIONBUTTON_DIRECTION_LEFT
    Case "ABM.ACTIONBUTTON_DIRECTION_RIGHT"
        openDirection = ABM.ACTIONBUTTON_DIRECTION_RIGHT
    End Select
    Dim positionMainButton As String
    positionMainButton = pMap.getdefault("positionmainbutton", "ABM.ACTIONBUTTON_POSITION_BOTTOMRIGHT")
    Select Case positionMainButton
    Case "ABM.ACTIONBUTTON_POSITION_TOPLEFT"
        positionMainButton = ABM.ACTIONBUTTON_POSITION_TOPLEFT
    Case "ABM.ACTIONBUTTON_POSITION_TOPRIGHT"
        positionMainButton = ABM.ACTIONBUTTON_POSITION_TOPRIGHT
    Case "ABM.ACTIONBUTTON_POSITION_BOTTOMLEFT"
        positionMainButton = ABM.ACTIONBUTTON_POSITION_BOTTOMLEFT
    Case "ABM.ACTIONBUTTON_POSITION_BOTTOMRIGHT"
        positionMainButton = ABM.ACTIONBUTTON_POSITION_BOTTOMRIGHT
    End Select
    Dim positionTopBottomPx As String
    positionTopBottomPx = pMap.getdefault("positiontopbottompx", "0")
    Dim positionLeftRightPx As String
    positionLeftRightPx = pMap.getdefault("positionleftrightpx", "0")
    Dim sInitialize As String
    sInitialize = pMap.getdefault("initialize", "Initialize2")
    Dim comp As ABMActionButton
    Select Case sInitialize
    Case "initialize"
        comp.Initialize(page, id, iconname, iconawesomeextra, themename)
    Case "initialize2"
        comp.Initialize2(page, id, iconname, iconawesomeextra, openDirection, positionMainButton, positionTopBottomPx, positionLeftRightPx, themename)
    End Select
    Return comp
End Sub

Well, nothing is perfect, my codeformatter has some issues with the Case statements..

Anyway, happy coding...
 
Top