B4J Question [BANanoVue] Add component to NavDrawer [SOLVED]

micro · Aug 20, 2020

Hi to all
the tests continue
In my app at first I create the navbar with a single component, basically an icon with the name of the working database

B4X:

Sub BuildNavDrawer
    '*copy code after this line
    vm.Drawer.Setwidth("300")
    vm.Drawer.Setvisible(True)
    'this page should show on the drawer
    Dim bo As BANanoObject = BANano.GetLocalStorage("settaggi")
    Dim jsonpars As BANanoJSONParser
    jsonpars.Initialize(BANano.ToString(bo))
    Dim m As Map = jsonpars.NextObject
    db = m.Get("dbname")
    vm.Drawer.AddIcon1($"page${db}"$, "mdi-database", "", db, "Database")
End Sub

after reading the database tables

B4X:

Sub LoadTables
    Dim dbsql As BANanoMySQLE
    dbsql.Initialize(db, "", "", "")
    dbsql.SetConnection(dbhost, user, pass)
    dbsql.GetTableNames
    dbsql.json = BANano.CallInlinePHPWait(dbsql.MethodName, dbsql.Build)
    dbsql.FromJSON
    If dbsql.OK = False Then
        vm.showsnackbarerror($"Errore lettura tabelle!"${CRLF}${dbsql.error}"$)
        Return
    Else
        vm.ShowSnackBarSuccess("Tabelle lette correttamente!")
    End If
    Dim l As List
    l.Initialize
    If dbsql.result.Size > 0 Then
        For Each record As Map In dbsql.result
            l.add(record.Get("table_name"))
        Next
        AddTableNav(l)
        Log("mostra Table")
    End If
End Sub

I try to add the list ot the tables to the NavBar
(first example with a combobox)

B4X:

Sub AddTableNav(l As List)
'    Log(l)
    vm.Drawer.AddDivider
    Dim cbo As VMSelect = vm.CreateComboBox("cbo", Me)
    cbo.SetLabel("Seleziona archivio").SetOutlined(True)
    cbo.AddItems(l)
    vm.Drawer.AddChild(cbo1.Combo)
    vm.Drawer.Refresh
End Sub

(second example with a list)

B4X:

Sub AddTableNav(l As List)
    vm.Drawer.AddDivider
    vm.Drawer.AddParentChild("","ai", "mdi-table", "", "Seleziona Archivio","")
    For i = 0 To l.Size - 1
        vm.Drawer.AddParentChild("ai","", "", "", l.Get(i),"")
        'Log(l.Get(i))
    Next
    vm.Drawer.Refresh
End Sub

but nothing changes, the NavBAr always remains unchanged ?
Do I have to redesign it all or is the code wrong?
Thanks

Mashiane · Aug 20, 2020

Lets make this easy for both of us, upload your example project, I will take a look and im sure you will have a solution.

micro · Aug 21, 2020

Mashiane said:
Lets make this easy for both of us, upload your example project, I will take a look and im sure you will have a solution.

I showed the most relevant subs, however I attach the test project.
you just have to insert a test database with some tables in laragon server.
Thanks

Mashiane · Aug 21, 2020

Reference: https://www.b4x.com/android/forum/t...based-framework-for-banano.113789/post-757794

Updated code attached

micro · Aug 21, 2020

OK well
now it works, so it must all happen in one step (in Sub BuildNavDrawer) and not in a second step.
Thanks

Mashiane · Aug 21, 2020

For this case, Yes, as the header does not have a click event, only the child tree items have a click event.

And there are only 2 levels that have been defined internally for the parent child relationships, so we have to make it like this.

micro · Aug 21, 2020

Mashiane said:
For this case, Yes, as the header does not have a click event, only the child tree items have a click event.

And there are only 2 levels that have been defined internally for the parent child relationships, so we have to make it like this.

Ok
Another question and then I open another thread (same problem?)
In BuildNavBar i created a label (will contain the text of the selected table) initially empty.

B4X:

Dim lb As VMLabel
lb = vm.CreateLabel("idnamearc")
lb.SetText("")
vm.NavBar.AddSpacer.AddSpacer.AddComponent("idnamearc", lb.ToString) 'on the right side of the NavBar

In Sub draweritems_click(elID As String)

B4X:

Dim vue As BANanoVue
Dim bo As BANanoObject = vue.getElementById("idnamearc")

bo =

B4X:

<label id="idnamearc"></label>

but I can't set the text
I do so

B4X:

bo.SetField("text", elID)

....but I'm sure I'm wrong
Thanks
I'm sorry but it's a new framework and it takes me some practice

Mashiane · Aug 23, 2020

Hi there

Yes, its always good to start a new thread for your question. So please next time dont hesitate to.

As I'm helping you, I am going to request you to do yourself a big favour. Go through the BANanoVue tutorial so that you have some understanding of how VueJS works inside BANano, this will help you with some very basic understanding of how this works. You need to forget about javascript dom manipulations for a while here and have to think about VueJS DOM manipulation.

To be able to achieve what you need, you need to understand how the v-model works, getting and setting "state" is done with .SetData(?, ?) and .GetData(?) methods.

1. When the table is selected, pass the table name being selected to vm.SetData("tablename", selectedTableName). Call this after the click method.
2. Create a label that will receive the saved tablename state, for example. Here we create a label that will use the <span></span> element

B4X:

Dim lbl As VMLabel = vm.CreateLabel("lblme").SetText("{{ tablename }}").SetSpan

Add that to the NavBar.

Each time the tablename is changed, automatically the state on the label is updated.

That is all you need and you dont need getelementid etc etc at all.

The recommended way to use getElementID is via using refs.

Ta

B4J Question [BANanoVue] Add component to NavDrawer [SOLVED]

micro

Well-Known Member

Mashiane

Expert

micro

Well-Known Member

Attachments

Mashiane

Expert

Attachments

micro

Well-Known Member

Mashiane

Expert

micro

Well-Known Member

Mashiane

Expert

Similar Threads

B4J Question [BANanoVue] Add component to NavDrawer [SOLVED]

Well-Known Member

Expert

Well-Known Member

Attachments

Expert

Attachments

Well-Known Member

Expert

Well-Known Member

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency