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

Ola

**************************************************
Feb 2024: BVAD3 RoadMap

[BANanoVuetifyAD3] 2024 RoadMap

Hi Fam BVAD3 is currently based on VueJS 2 and Vuetify 2. As you might be aware, VueJS 3 is now the standard and VueJS 2 has come to end of life when it comes to support. Vuetify 2 will also be coming to end of life when it comes to support. There has not been any upgrades to BVAD3 to work...

www.b4x.com

*************************************************

Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

Full Install Instructions on Github

What's New

To use this free and open source B4J library, you need BANano.

IMPORTANT: BANano License

Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc
More...


What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.

MySQL
SQLite
MSSQL

WebServers You Can Use

Laragon - publish to c:\laragon\www

[WebApps] Using Laragon as your development web server

Ola I just ran into this link, https://www.keycdn.com/blog/web-development-tools And besides XAMPP, which I have been using for my personal web development projects, there is Laragon. With XAMPP, I remember I had to manually edit my php.ini file to locate the extension for SQLite3 to be...

www.b4x.com

[BANanoVuetifyAD3] Using a real device to debug your localhost running webapp

Hi there You are developing your app and want to see it running on your device instead of your machine from localhost. The easier method: 1. Enable hotspot on your phone. 2. Connect your PC to your phones hotspot. 3. Execute cmd > ipconfig > note the IP4 IP Address 4. Enter this IP address on...

www.b4x.com

USBWebServer
IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup

Enjoy

PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.

2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]

 

[Mashiane]

But "to" can't with parameters

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

 

[Lello1964]

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

 

[Mashiane]

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]

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]

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

drwlist_click test ok,Thank You very much.

 

[joulongleu]

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

'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]

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]

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

dbSchema.Initialize...
dbSchema.GetTableStructure

2.To select all records in a table

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

3. Select where

dbRecords.SelectWhere

4. Insert

dbRecords.Insert1(<map>)

Etc etc...

 

[Mashiane]

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]

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]

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]

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]

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

 

[Lello1964]

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

And this.

 

[Mashiane]

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]

@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]

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

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]

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]

me too

 

[Mashiane]

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.