B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane · Dec 3, 2020

joulongleu said:
But "to" can't with parameters

Noted my friend. It should be available in the next beta release.

Lello1964 · Dec 4, 2020

Hi,
how use internationalization Api to change Vuetify language, date format and currency to Euro ?

Mashiane · Dec 4, 2020

Lello1964 said:
how use internationalization Api to change Vuetify language, date format and currency to Euro ?

Frankly I don't know. Have never explored that part. When I have enough time I will explore it. Before I do translations via keeping a map file with keys and values and just link that to the ux.

Lello1964 · Dec 4, 2020

Mashiane said:
Frankly I don't know. Have never explored that part. When I have enough time I will explore it. Before I do translations via keeping a map file with keys and values and just link that to the ux.

I think it's very simply, only I don't know how send command :

Internationalization (i18n) — Vuetify

Vuetify supports language Internationalization (i18n) from a wide range of locales and easily integrates vue-i18n.

vuetifyjs.com

joulongleu · Dec 4, 2020

Mashiane said:
Noted my friend. It should be available in the next beta release.

?drwlist_click test ok,

Thank You very much.

joulongleu · Dec 4, 2020

Hi Dear Mashiane
The following code does not know where error, the data is not displayed.(use part29)

Thank You.

code:

'Static code module
Sub Process_Globals
    Public vuetify As VuetifyApp
    Public tables As VueComponent
    Public path As String
    Public name As String = "tables"
    Private banano As BANano
    Private vtables As VueElement
    Private vetable As VueTable
    Private vetable1 As VueTable
    Private dtusers As VueTable
    Private dtimages As VueTable
   
    Public lnamecol As List
    Public ltypecol As List
'    Private dt1 As VMDataTable
    Public currentable As String
   
   
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    tables.Initialize(Me, name)
    path = tables.path
    'load the template
    banano.LoadLayout(vuetify.PlaceHolderName, "vtables")
    vtables.Matrix(1, 1).LoadLayout("vetable")

    vetable.AddColumn("f1", "f1")
    vetable.AddColumn("f2", "f2")
    vetable.AddColumn("f3", "f3")
    vetable.AddColumn("f4", "f4")
    vetable.AddEdit
    vetable.AddDelete

    vetable.SetIconDimensions("edit", "", vuetify.COLOR_GREEN)
    vetable.SetIconDimensions("delete", "", vuetify.COLOR_RED)
'
    LoadDatitb
   
    tables.BindVueTable(vetable)
   
    vuetify.AddRoute(tables)
End Sub


Sub LoadDatitb

    currentable ="table1"
'    Log(currentable)
    If currentable = "" Then Return

    'update the table title
    lnamecol.Clear
    ltypecol.Clear
    Dim dbSchema As BANanoMSSQLE
    dbSchema.Initialize("RaspberryPI", "", "", "")
'    dbSchema.Execute($"DESCRIBE ${currentable.ToUpperCase}"$)
    dbSchema.Execute($"sp_columns ${currentable.ToLowerCase}"$)
'    dbSchema.Execute($"${currentable.ToUpperCase}"$)
    dbSchema.json = banano.CallInlinePHPWait(dbSchema.MethodNameDynamic, dbSchema.BuildDynamic)
    dbSchema.FromJSON
    If dbSchema.OK = False Then
        Return
    End If
'    Log(dbSchema.Result)
    For Each fld As Map In dbSchema.Result
'        lnamecol.Add(fld.Get("Field"))
'        ltypecol.add(fld.Get("Type"))
       
        lnamecol.Add(fld.Get("COLUMN_NAME"))
        ltypecol.add(fld.Get("DATA_TYPE"))
    Next

    'define a new variable for records to avoid conflicts
    Dim dbRecords As BANanoMSSQLE
    dbRecords.Initialize("RaspberryPI", "", "", "")
    dbRecords.Execute($"SELECT * FROM ${currentable}"$)
'    dbRecords.Execute($"SELECT * FROM name "$)
    dbRecords.json = banano.CallInlinePHPWait(dbRecords.MethodName, dbRecords.Build)
    dbRecords.FromJSON
    'reset everything about the table

'    Dim i As Int
    For Each colName As String In lnamecol
'        If colName.Trim <> "id" Then
        vetable.AddColumn(colName.trim, colName.trim)
'        End If

    Next

    Log(dbRecords.result)
    vetable.AddRow(dbRecords.result)
    vetable.Refresh
   
End Sub

Mashiane · Dec 4, 2020

joulongleu said:
vetable.AddRow(dbRecords.result)

AddRow expects a map and not a list, perhaps thats why. Also ensure that your column names are CaseSensiTiVe.

Ta!

Mashiane · Dec 4, 2020

joulongleu said:
dbRecords.Initialize("RaspberryPI", "", "", "")
dbRecords.Execute($"SELECT * FROM ${currentable}"$)

I do not recommend running queries like this as it opens one to SQL injections. The library uses parameter queries to ensure this does not happen. The .Execute method has been availed for absolute necessary cases. Doing things like this is not necessary and I will not support it going forward.

1. To get the table structure

B4X:

dbSchema.Initialize...
dbSchema.GetTableStructure

2.To select all records in a table

B4X:

dbRecords.Initialize(<tablename>, "", "")
dbRecords.SelectAll(array("*"), Array("firstname")

3. Select where

B4X:

dbRecords.SelectWhere

4. Insert

B4X:

dbRecords.Insert1(<map>)

Etc etc...

Mashiane · Dec 4, 2020

Part 28:

We add a parallax, rating and image

NB: The latest tutorial will have the most updated code and library for these tutorials.

Mashiane · Dec 4, 2020

Part 29

We add page transitions, circular and linear progress and trap click events for our drawer. We also get file details when a file is selected via the v-file-input component.

NB: The latest tutorial will have the most updated code and library for these tutorials.

Mashiane · Dec 5, 2020

Part 30

Download

We code: The grid and its structure using AddRows and AddColumns. We add element using AddButton, AddCheckBox, AddRadioGroup, AddImage at grid positions. We bind events to the buttons and checkbox and get state values.

Mashiane · Dec 5, 2020

Part 31

We code a universal list that shows different kings of content, avatars, icons, titles and sub-titles and it uses the cool v-if directive.

joulongleu · Dec 7, 2020

Hi Mashiane: [BANanoVuetifyAD] ViewTable how to use ResetColumns and Reset ,thank you.

Lello1964 · Dec 7, 2020

Lello1964 said:
Hi,
how use internationalization Api to change Vuetify language, date format and currency to Euro ?

And this.

Mashiane · Dec 7, 2020

joulongleu said:
Hi @Mashiane: [BANanoVuetifyAD] ViewTable how to use ResetColumns and Reset ,thank you.

Wow, you wrote it in bold.... I am trying to avoid all the mistakes I made with BVM here, thus this version, thus my todo list is rather large. Please be patient.

Mashiane · Dec 7, 2020

@Lello1964 , the issue of internationalization is not in any of my immediate radars yet. How I did before was to have a key value pair that I could relate to which has worked well. As this library is not pure VueJS, I never before delved into learning that and fully implementing it.

joulongleu · Dec 8, 2020

[BANanoVuetifyAD] Reset is ok, after many days of learning

reset:

Sub Reset
    rows.Initialize
    exclusions.Initialize
    filters.Initialize
    hasFilters = False
    columnsM.Initialize
    masterColumns.Initialize
    SetData(headers, NewList)
    SetData(Items, NewList)
    SetData(title, "")
    SetData(selected, NewList)
    SetSortBy(NewList)
    SetGroupBy(NewList)
    SetExpanded(NewList)
    SetGroupDesc(NewList)
    SetSortDesc(NewList)
'    SetValue(NewList)
    SetData($"${keyID}columns"$, NewList)
    SetData($"${keyID}fsource"$, NewList)
    setPage("1")
    SetData($"${keyID}pagecount"$, "0")
    SetData(keyID, DateTime.Now)
End Sub

VittorioBarile · Dec 9, 2020

Mashiane said:
I do not recommend running queries like this as it opens one to SQL injections. The library uses parameter queries to ensure this does not happen. The .Execute method has been availed for absolute necessary cases. Doing things like this is not necessary and I will not support it going forward.

Hi Mashiane, wich lib are you using for use that methods?
I'm gonna use BANanoConnect v1.00 because i cannot use BANanoVuetifyConnect because BANanoShared is declared twice!
Could you help me too?

joulongleu · Dec 9, 2020

me too

Mashiane · Dec 9, 2020

VittorioBarile said:
I'm gonna use BANanoConnect v1.00 because i cannot use BANanoVuetifyConnect because BANanoShared is declared twice!

I hear you. BANanoVuetifyConnect was specifically built around BVM (one sub doing that). I need to slightly modify it for BVAD3 (remove this one sub), otherwise everything is still the same. I will include the Connect classes as internal classes for BVAD3 as there are no dependencies there but just code.

I had previously written an Expense Tracker for all backend platforms in BVM, the same methodology applies as nothing changes. At the crux of it, for the parameter queries one needs to feed the data types matching the fields and execute queries but then again I will do a refresher here for that as I have not done any tutorial specific to BVAD3 yet.

B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Expert

Well-Known Member

Expert

Well-Known Member

Active Member

Active Member

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Well-Known Member

Expert

Expert

Active Member

Member

Active Member

Expert

Similar Threads