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

Ola

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:

Mashiane

Expert
Licensed User
Longtime User
Just a little ity bitsy update...

Dates in the date picker appear as YYYY-MM-DD, we have changed that to...


1626446623756.png


1. You need to set a watch on changes to the selected date using its v-model. The v-model for the date picker here is date1.

So in initialize we have added..

B4X:
about.SetWatch("date1", True, True, Me, "detectdate", Null)

Then we define our callback as..

B4X:
Sub detectdate            'ignoreDeadCode
    VTextField1.FormatDate(about)
End Sub

Sadly this is not an automatic process as yet.

2. On the sliders, we have added functionality to display the slider value before and or after the slider. You set these in the abstract designer, no code needed.

1626446850804.png


So I guess this covers all that we can do on the UI front for now. If there is something on the Vuetify site you want and is not included, you will indicate and we will gladly add it otherwise we will deal with bugs from now on and whatever little things are left out accidentally.

Ta!

PS: You can download 5.71 then from the same links.
 

roberto64

Active Member
Licensed User
Longtime User
Hello, I'm trying but in vain to understand why publishing it on my server gives me these errors, in a nutshell it does not show me the images in the controls, instead on the localhost yes why?
Greetings
NUOCA1607.PNG
 

Mashiane

Expert
Licensed User
Longtime User
Hi @roberto64 , there seems to be a problem with your server as its failing to decode the font files. BVAD3 internally comes with material design and roboto fonts and this is not being picked up. I noted this from your last DM you sent. It could be due to write permissions I'm not sure though. Until that is fixed on your server front the app wont work as expected. Sadly there is nothing I can do on my side about that.

In terms of your design and it being responsive.

1. In a clean layout, insert a blank VContainer
2. Inside that VContainer, insert a VRow
3. Add 2 VCols inside the VRow and set their Cols property to 12.
4. In the first VCol as your "Rubrica Telefonica Sms" content.
5. In the second VCol, add the VueTable.

This will help with your layout being responsive.
 

Mashiane

Expert
Licensed User
Longtime User
Tip: If your WebApp will not use firebase

It is always better to download the library source file and run it yourself on your own PC to generate the BANanoVuetifyAD3 b4xlib. This you can do by downloading these resources.


Now if your WebApp, will not use Firebase, you can remove the referenced resources out of the library. You do this by...

Open the BANanoVuetifyAD3 library project.
Open the Main Module
Comment the following lines out:

B4X:
'FIREBASE
    BANano.Header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-messaging.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-performance.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-database.js")
    BANano.header.AddJavaScriptfile("https://www.gstatic.com/firebasejs/8.6.8/firebase-functions.js")

and

B4X:
BANano.Header.AddJavascriptFile("firesql.umd.js")

Run the project (DO NOT COMPILE TO JAR), this will produce a new b4xlib, without the firebase resources.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
THINGS OF IMPORTANCE

I cannot over-emphasize the need to get yourself going through this series for your grasping the basics. Its very informative and will help you a great Deal

 

roberto64

Active Member
Licensed User
Longtime User
Hi, no unfortunately it's not my server, I published your example bvad3ks and everything worked correctly, I'll try to understand why thanks for your availability.
 

Mashiane

Expert
Licensed User
Longtime User
As part of the BANanoVuetifyAD3 Telegram Channel, the source code for the ICT Asset Manager is available on the channel, to test please. I would appreciate your feedback on the current work in progress. As a thank you for your support you can keep the source and any that will follow after updates.

I thank you.
 

Mashiane

Expert
Licensed User
Longtime User
Tip: Formatting VDataTable content before it displays

The designer properties for the VDataTable allows one to format the content of each column you specify before it displays.

B4X:
#DesignerProperty: Key: PreDisplay, DisplayName: Before Display (JSON), FieldType: String, DefaultValue: , Description: For each column specified run this callback before displaying
#DesignerProperty: Key: ConditionalClass, DisplayName: Conditional Class (JSON), FieldType: String, DefaultValue: , Description: For each column specified apply class from callback
#DesignerProperty: Key: ConditionalColor, DisplayName: Conditional Color (JSON), FieldType: String, DefaultValue: , Description: For each column specified apply the color from the callback
#DesignerProperty: Key: ConditionalStyle, DisplayName: Conditional Style (JSON), FieldType: String, DefaultValue: , Description: For each column specified apply the style from the callback

The format should be

The column name and the method name. If your column is for example weight and you want to format it:

Eg

B4X:
weight:getcolor; height:gettextcolor

In your code you will define

B4X:
Sub getColor(item as Map) as String
do whatever
return whatever
End sub

The ConditionalClass, ConditionalColor and ConditionalStyle always expects item as map as a variable to pass in your callback. For pre-display, your callback can be

B4X:
dateofbirth:nicedate
for example.

NiceDate is a built in callback to format the dates with DDD, dd mm yyyy

For more details, see the ICT Asset Manager Source Code and other previous examples.

Enjoy!
 

Mashiane

Expert
Licensed User
Longtime User
Coming Updates:

All controls have now received the needed support for being Responsive and more support for Mobile Devices. This is true the visibility classes. You just call the visibility class you need after banano load-layout.
These cannot be added to the abstract designer directly. I have included the call and the class that it applies here.

XS - xtra small
SM - small
MD - medium
LG - large
XL - extra large

B4X:
Sub HiddenXSOnly
    AddClass("hidden-xs-only")
End Sub

Sub HiddenSMOnly
    AddClass("hidden-sm-only")
End Sub
    
Sub HiddenMDOnly
    AddClass("hidden-md-only")
End Sub
    
Sub HiddenLGOnly
    AddClass("hidden-lg-only")
End Sub
    
Sub HiddenXLOnly
    AddClass("hidden-xl-only")
End Sub
'
Sub HiddenXSAndDown
    AddClass("hidden-xs-and-down")
End Sub

Sub HiddenSMAndDown
    AddClass("hidden-sm-and-down")
End Sub
    
Sub HiddenMDAndDown
    AddClass("hidden-md-and-down")
End Sub
    
Sub HiddenLGAndDown
    AddClass("hidden-lg-and-down")
End Sub
    
Sub HiddenXLAndDown
    AddClass("hidden-xl-and-down")
End Sub
'
Sub HiddenXSAndUp
    AddClass("hidden-xs-and-up")
End Sub

Sub HiddenSMAndUp
    AddClass("hidden-sm-and-up")
End Sub
    
Sub HiddenMDAndUp
    AddClass("hidden-md-and-up")
End Sub
    
Sub HiddenLGAndUp
    AddClass("hidden-lg-and-up")
End Sub
    
Sub HiddenXLAndUp
    AddClass("hidden-xl-and-up")
End Sub    

Sub HideOnAll
    AddClass("d-none")
End Sub

Sub HideOnlyOnXS
    AddClass("d-none d-sm-flex")
End Sub

Sub HideOnlyOnSM
    AddClass("d-sm-none d-md-flex")
End Sub

Sub HideOnlyOnMD
    AddClass("d-md-none d-lg-flex")
End Sub

Sub HideOnlyOnLG
    AddClass("d-lg-none d-xl-flex")
End Sub

Sub HideOnlyOnXL
    AddClass("d-xl-none")
End Sub

Sub VisibleOnAll
    AddClass("d-flex")
End Sub

Sub VisibleOnlyOnXS
    AddClass("d-flex d-sm-none")
End Sub

Sub VisibleOnlyOnSM
    AddClass("d-none d-sm-flex d-md-none")
End Sub

Sub VisibleOnlyOnMD
    AddClass("d-none d-md-flex d-lg-none")
End Sub

Sub VisibleOnlyOnLG
    AddClass("d-none d-lg-flex d-xl-none")
End Sub

Sub VisibleOnlyOnXL
    AddClass("d-none d-xl-flex")
End Sub


Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Tip: Pre-Display Formatting for VueDataTable

There are two ways to format data-table column data for Pre-Display i.e. before data is displayed.

One method accepts the value in that RC position and the second method accept the complete Row data.

1626783547350.png


For your callback method to take the value and process it, use the normal definition e.g. daterequested:nicedate.

This accepts a date value in YYYY-MM-DD format and makes it "ddd, DD MMM YYYY" format

The second option is specifying that the callback will use the complete row data by including () on it e.g. requestitem:getrequesteditem().

This means on the column named requestutem, for each row, run the getrequestitem(item) callback

As an example,


B4X:
Sub getrequesteditem(item As Map) As String            'ignoreDeadCode
    Dim srequesttype As String = item.Get("requesttype")
    Dim srequestitem As String = item.Get("requestitem")
    Select Case srequesttype
    Case "Hardware"
        Dim harditem As Map = hardware.Get(srequestitem)
        Dim shardwarename As String = harditem.Get("hardwarename")
        Return shardwarename
    Case "Software"        
        Dim softitem As Map = software.Get(srequestitem)
        Dim sname As String = softitem.Get("name")
        Return sname
    Case Else
        Return srequestitem
    End Select
End Sub

This methods receives the row, reads the requesttype and requestitem and then will return the relevant content to display for that row column.
 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 Version 5.74

Vuetify LLC made a new release today. We have included it in the BANanoVuetifyAD3 library.

Please download the latest release of the BANanoVuetifyAD3 sources and run them to compile the b4xlib (DO NOT COMPILE TO LIBRARY).

Thank you.

 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates

Tip: Trapping VueTable, Row Click, Row Double Click and Row Right Click Events.


Generate members from the layout. The item returned is the item that has been row clicked, row double clicked or row right clicked on.
You can have either row click / row double click and not both and row click always fires first.

B4X:
Private Sub vendorTable_ContextMenuRow(e As BANanoEvent, other As Map)
    'IMPORTANT
    e.PreventDefault
    Log("right click....")
    Dim item As Map = vendorTable.GetItem(other)
    Log(item)
End Sub
'
Private Sub vendorTable_DblClickRow (e As BANanoEvent, other As Map)
    Log("double click...")
    Dim item As Map = vendorTable.GetItem(other)
    Log(item)
End Sub

''will also fire if there is a double click event
Private Sub vendorTable_ClickRow (item As Map, other As Map)
    Log("click row")
    Log(item)
End Sub


 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3: Entering LTS

What is LTS?

Long-term support (LTS) is a product lifecycle management policy in which a stable release of computer software is maintained for a longer period of time than the standard edition. The term is typically reserved for open-source software, where it describes a software edition that is supported for months or years longer than the software's standard edition.

It has been a long roads towards reaching a stable version of BANanoVuetifyAD3 that can be usable for commercial and personal projects. We had a paradigm shift and started using the abstract designer in full mode in creating our projects.

In one of my projects after using the abstract designer functionality (UI and DataSource) the project changed from 830 code lines to 370 lines, and more could have been achieved also.

We have controls to create the most awesome WebApps/SPA/PWA available. Thanks also to BANano.

We have created a lot of tutorials and also started a "Mashes Teaches BANanoVuetifyAD3....". We have explored tht BANanoServer and provided yall a working kitchen sink with CRUD functionality and also did jRDC connectivity. You have leaflet and google maps.

We also have a Telegram Channel where we post updates and communication about this project, and an active Github page.

Ahoy!!!

#Likes do not pay the bills, they just put a smile on the face.
 

Mashiane

Expert
Licensed User
Longtime User
Tip: Defining & Executing Custom Queries using the DataSource



With the data-source on your layout... we define the query to execute and then indicate the action to perform.

B4X:
'we start with hardware status report
    Dim hardwareStatusS As String = $"SELECT hardwarestatus.description, hardwarestatus.color, COUNT(hardware.hardwareid) AS records FROM hardware LEFT OUTER JOIN hardwarestatus ON hardware.statusid = hardwarestatus.statusid GROUP BY hardwarestatus.description, hardwarestatus.color"$
    '
    dashboardDS.CustomQuery = hardwareStatusS
    dashboardDS.CUSTOM("hardware_status")

NB: CUSTOM actually executes the query, so set the query before calling CUSTOM.

Generate the DONE event of the data-source.

B4X:
Private Sub dashboardDS_Done (Action As String, Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
    If Success Then
        Select Case Action
        Case "hardware_status"
            ShowHardWareStatus(Result)
        End Select
    Else
        vuetify.ShowSwalError("The query could not be executed successfully!")    
    End If
End Sub

Then you read the action and perform the needed action based on the result.

Ta!
 
Last edited:
  • Like
Reactions: LJG
Top