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

Ola

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

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

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



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.

1625825241311.png


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]
 
Last edited:

Lello1964

Well-Known Member
Licensed User
Longtime User
Hi,
how use internationalization Api to change Vuetify language, date format and currency to Euro ?
 

Mashiane

Expert
Licensed User
Longtime User
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

Well-Known Member
Licensed User
Longtime User
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 :

 
Last edited:

joulongleu

Active Member
Licensed User
Longtime User
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
 

Attachments

  • part29.png
    part29.png
    293.1 KB · Views: 280

Mashiane

Expert
Licensed User
Longtime User
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...
 

joulongleu

Active Member
Licensed User
Longtime User
[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

Member
Licensed User
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? :)
 

Mashiane

Expert
Licensed User
Longtime User
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.
 
Top