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]

Hi there

Updated the date-picker examples in the Kitchen Sink: This date picker has a min and max dates and events

Sub mounted
    'set the date   
    VDatePicker1.SetValue(about, "2018-03-02")
    'set the max date
    VDatePicker1.UpdateMax(about, "2018-03-20")
    'set the min date
    VDatePicker1.UpdateMin(about, "2018-03-05")
    'clear the events
    VDatePicker1.Clear(about)
    VDatePicker1.AddItem("2018-03-05", BANanoShared.Random_Color)
    VDatePicker1.AddItem("2018-03-06", BANanoShared.Random_Color)
    VDatePicker1.AddItem("2018-03-08", BANanoShared.Random_Color)
    VDatePicker1.AddItem("2018-03-10", BANanoShared.Random_Color)
    VDatePicker1.AddItem("2018-03-11", BANanoShared.Random_Color)
    VDatePicker1.Refresh(about)
    '
    'we are setting a range of dates, so we need to pass 2 values
    Dim tDay As String = BANanoShared.DateNow
    Dim nDay As String = BANanoShared.DateAdd(tDay, 5)
    'set the range of dates selected
    VDatePicker7.SetValueRange(about, tDay, nDay)
    'hide the loader
    vuetify.Loading(False)
End Sub

A date having different events, can show these with different specified colors.

 

[Mashiane]

Hi there

Please note BVAD3 has just been updated with the latest version of Vuetify. Get your updated from github now, https://github.com/Mashiane/BANanoVuetifyAD3

The Kitchen Sink has also been updated.

 

[Lello1964]

Hi Mashi,
i'm starting use AD3 again.

I've downloaded latest version of lib and KitechenSink but have this error compiling:

contAD = about.Page.AddContainer("contad", True)

B4J Versione: 9.30
Analisi del Codice.    (3.32s)
    Java Versione: 8
Building folders structure.    (1.79s)
Compilazione del codice.    Error
Errore nella compilazione del programma.
Descrizione dell'errore: Membro sconosciuto: addcontainer
Errore nella linea: 38
contAD = about.Page.AddContainer("contad", True)
Word: addcontainer

I've saw source lib and sub is rem :

'Sub AddContainer(contID As String, bFluid As Boolean) As VueElement
'    Dim elx As VueElement = Page.AddContainer(contID, bFluid)
'    Return elx
'End Sub

 

[Mashiane]

i'm starting use AD3 again.

Please follow the instructions on Github.

 

[Lello1964]

I've tryed to reinstall again from Github, now have this error :

B4J Versione: 9.30
Analisi del Codice.    (6.31s)
    Java Versione: 8
Building folders structure.    (1.64s)
Compilazione del codice.    Error
Errore nella compilazione del programma.
Descrizione dell'errore: Membro sconosciuto: getlabel
Errore nella linea: 115
Dim ncaption As String = VBtn1.GetLabel(about)
Word: getlabel

 

[Lello1964]

 

[Mashiane]

Did you use the link provided on point 9 of the github repo?

 

[Lello1964]

No, i've used files inside library dir of BANanoVuetifyAD3-main.zip

 

[Mashiane]

Unfortunately I cannot reproduce the errors you are experiencing. Try and download the library b4xlib as pointed on item 9 individually, run it to generate the b4xlib and see what happens.

 

[Lello1964]

I cannot solve problem, i've removed two lines :

Private Sub btnGetCaption_Click (e As BANanoEvent)
    Dim ncaption As String = VBtn1.GetLabel(about)
    vuetify.ShowSwal(ncaption)
End Sub

and

VDatePicker7.SetValueRange(about, tDay, nDay)

and now it work.

I think library on github havn't this functions inside

 

[Mashiane]

I cannot solve problem

I have sent you a DM.

 

[Mashiane]

BVAD3 Root Components

This discusses an issue that was previously working before but is actually against VueJS recommendations.

Please note:

When you load a layout with

banano.LoadLayout(about.Here, "mybottomnav")

Please ensure that there is at least 1 root component like a v-container. This layout from the kitchen sink as has 3 root components. This needs to be avoided going forward as your page will definately not show due to more than 1 root component.

To fix this, we have placed these components inside a single root container.

NB: Please ensure that your root layout for a page has a single root component where all others are put inside, otherwise your page will not be displayed.

PS: All the kitchen sink layouts have been updated to have 1 single root component. Please ensure you update the layouts of your project so that they work properly, if you update the library on 2022-02-06 onwards.

TA!

 

[Mashiane]

Tip: Vuetable Column Coloring

The status column should be green
The servicename column should use whatever color is saved on the 'color' key for that record.

As an example, when adding a record, it has to have the color key on the list of maps.

Example

serviceM.Put("status", "Off")
        serviceM.Put("color", "red")

 

[Mashiane]

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD
Tip: Useful new pgIndex.ListView shortcuts - can be called from any page.

For example, you have a listview in pgIndex called 'drwlist'. These methods can be called from any page to manipulate that listview.

'clear the contents
vuetify.ListViewClear("drwlist")

'add an item using BVAD3ListItem
vuetify.ListViewAddItem1("drwlist", bvad3listitem)

'update an item using BVAD3ListItem
vuetify.ListViewUpdateItem("drwlist", "1", dbad3listitem)

'make the item visible
vuetify.ListViewShowItem("drwlist", "admin")

'make the item invisible
vuetify.ListViewHideItem("drwlist", "admin")

'delete an item
vuetify.ListViewDeleteItem("drwlist", "admin")

'add a header to the listview
vuetify.ListViewAddHeader("drwlist", "This is a header")

'add a divider to the listview
vuetify.ListViewAddDivider("drwlist", True)

'add an item to the listview
vuetify.ListViewAddItem("drwlist", "", "admin", "mdi-cog", "", "Administration", "")
vuetify.ListViewAddItem("drwlist", "admin", "users", "mdi-cog", "", "Users", "/users")

'refresh the listview items, useful especially when you add treelike structures
vuetify.ListViewRefresh("drwlist")

The listview itself has its own methods that are similar

 

[Mashiane]

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD
Tip: The structure of a ListView item

BVAD3ListItem

• Initialize (id As String) As BVAD3ListItem
  Initializes the object. You can add parameters to this method if needed.
• Item As Map
  get the item settings
• SetVisible (v As String) As BVAD3ListItem
  set visibility of the item
• SetRightMinusPlusChip (v As String) As BVAD3ListItem
  set the value of the plus minus chip on the right
• SetRightMinusPlusChipColor (v As String) As BVAD3ListItem
  set the color of the plus minus chip on the rigjt
• SetParentID (v As String) As BVAD3ListItem
  set the parent id of the element
• SetDisabled (v As String) As BVAD3ListItem
  set disabled of the element
• SetHREF (v As String) As BVAD3ListItem
  set the href of the item
• SetName (v As String) As BVAD3ListItem
  set the name of the item
• SetReplace As BVAD3ListItem
  set replace of the item in router
• SetAppend As BVAD3ListItem
  set append of the item in router
• SetTo (sto As String) As BVAD3ListItem
  set the to url for the item
• SetLeftIcon (v As String) As BVAD3ListItem
  set the left icon
• SetLeftImage (v As String) As BVAD3ListItem
  set the left image
• SetRightImage (v As String) As BVAD3ListItem
  set the right image
• SetLeftIconColor (v As String) As BVAD3ListItem
  set the left icon color
• SetLeftIconClass (v As String) As BVAD3ListItem
  set the left icon class
• SetAvatar (v As String) As BVAD3ListItem
  set the avatar
• SetAvatarClass (v As String) As BVAD3ListItem
  set the avatar class
• SetAvatarIcon (v As String) As BVAD3ListItem
  set the avatar icon
• SetAvatarIconColor (v As String) As BVAD3ListItem
  set the avatar icon color
• SetAvatarIconClass (v As String) As BVAD3ListItem
  set the avatar icon class
• SetIcon (v As String) As BVAD3ListItem
  set the icon
• SetIconClass (v As String) As BVAD3ListItem
  set the icon class
• SetIconColor (v As String) As BVAD3ListItem
  set the icon color
• SetTitle (v As String) As BVAD3ListItem
  set the title
• SetTarget (v As String) As BVAD3ListItem
  set the target
• SetTargetBlank As BVAD3ListItem
  set target to be blank for this item
• SetSubTitle (v As String) As BVAD3ListItem
  set the sub title
• SetSubTitle1 (v As String) As BVAD3ListItem
  set the sub title 1
• SetSubTitle2 (v As String) As BVAD3ListItem
  set the sub title 2
• SetSubTitle3 (v As String) As BVAD3ListItem
  set the sub title 3
• SetSubTitle4 (v As String) As BVAD3ListItem
  set the sub title 4
• SetRightIcon (v As String) As BVAD3ListItem
  set the right icon
• SetRightIconClass (v As String) As BVAD3ListItem
  set the right icon class
• SetRightText (v As String) As BVAD3ListItem
  set the right text
• SetRightIconColor (v As String) As BVAD3ListItem
  set the right icon color
• SetRightCheckBox (v As Boolean) As BVAD3ListItem
  set the right check box value
• SetRightCheckBoxColor (v As String) As BVAD3ListItem
  set the right check box value
• SetLeftCheckBox (v As Boolean) As BVAD3ListItem
  set the left chechbox color
• SetLeftCheckBoxColor (v As String) As BVAD3ListItem
  set the left chechbox color
• SetRightRating (v As String) As BVAD3ListItem
  set the right rating
• SetRightRatingColor (v As String) As BVAD3ListItem
  set the right rating color
• SetLeftSwitch (v As Boolean) As BVAD3ListItem
  set the left switch value
• SetRightSwitch (v As Boolean) As BVAD3ListItem
  
  set the right switch value
• SetRightSwitchColor (v As String) As BVAD3ListItem
  set the right switch value
• SetRightChip (v As String) As BVAD3ListItem
  
  set the right chip
• SetRightChipColor (v As String) As BVAD3ListItem
  set the right chip color
• SetRightAvatar (v As String) As BVAD3ListItem
  set the right avatar
• SetRightAvatarIcon (v As String) As BVAD3ListItem
  set the right avatar icon
• SetRightAvatarIconColor (v As String) As BVAD3ListItem
  set the right avatar icon color
• SetAvatarText (v As String) As BVAD3ListItem
  set the avatar text
• SetAvatarTextColor (v As String) As BVAD3ListItem
  set the avatar text color
• SetRightAvatarText (v As String) As BVAD3ListItem
  set the right avatar text
• SetRightAvatarTextColor (v As String) As BVAD3ListItem
  set the right avatar text color
• SetAttr (attr As String, v As String) As BVAD3ListItem
  set an attribute

 

[Mashiane]

DateTimePicker Improvements & No Longer Necessary Code

This example of code is NO LONGER necessary.

1. Adding a date watcher

'watch changes to the date and format the display date
 two.SetWatch("employee.dateofbirth", True, True, Me, "makeitnicedate", Null)
 two.SetWatch("employee.datetimeit", True, True, Me, "getdatetimeit", Null)

2. Formating the date..

Private Sub txtDateStarted_Watch
    txtDateStarted.FormatDate(page)
End Sub

or

sub makeitnicedate
end sub

What to do?

Comment them out of your code

Why & What happened?

A new bug was discovered by chance in a very special use case and meant the code had to be re-written.

To elaborate, the input textfield for date is made up of 3 components.

1. VMenu
2. VTextField and
3. VDatePicker

When a person selects a date on the datepicker, it filters down to the text field and menu. This is a complex process. It was working and didn't need any changes until a special use case came forward, rendering this component useless for that use case.

Applicable to any library updates from 2022-02-10 onwards

 

[Mashiane]

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

Tip: Data-Table Toolbar Buttons Loading Indicators

Assuming that you have some toolbar buttons...

Obviously, these will produce..

On your data-table toolbar.

Now, you want to run some process but then show a "loading" status of that button until a process is finished, like this..

How do you do it?

Yesterday I needed this functionality and added it to BVAD3.

With this code, you are able to toggle the loading status of your data-table toolbar buttons.

IoT.UpdateTitleButtonLoading("stopall", True)

#SharingTheGoodness

 

[Mashiane]

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

Tip: Another way of adding items to the ListView ie VList

Dim itm1 As BVAD3ListItem
    itm1.Initialize("fawesome").SetTitle("Font Awesome").SetParentID("other1")
    itm1.SetHREF("https://use.fontawesome.com/releases/v6.0.0/fontawesome-free-6.0.0-web.zip").SetTargetBlank
    drwlist.AddItem1(itm1)

#SharingTheGoodNess

 

[Mashiane]

Version 7.29 has received another update including some minor important bug fixes.

The template files for "Additioanal Libraries" have also been updated to include the feature to change browser titles via the Vue-Router.

GitHub - Mashiane/BANanoVuetifyAD3: Create websites & webapps using Vuetify & BANano

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

The Package Manager is coming out soon..

 

[Mashiane]

[BANanoVuetifyAD3] Tree-Shaking your BVAD3 project with the BVAD3 Package Manager

Hi there [BETA] Download BANanoVuetifyAD3 Library Source Code Download BANanoVuetifyAD3 Package Manager Source Code To avoid this topic being lost in translation, its standing alone. What is the BVAD3 Package Manager? The BANanoVuetifyAD3 library is quite large and at the current moment...

www.b4x.com