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
Hi there

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

1643379524822.png


B4X:
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.

1643380403993.png
 
Last edited:

Lello1964

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

B4X:
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 :

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

Lello1964

Well-Known Member
Licensed User
Longtime User
I've tryed to reinstall again from Github, now have this error :

B4X:
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

Well-Known Member
Licensed User
Longtime User
I cannot solve problem, i've removed two lines :
B4X:
Private Sub btnGetCaption_Click (e As BANanoEvent)
    Dim ncaption As String = VBtn1.GetLabel(about)
    vuetify.ShowSwal(ncaption)
End Sub

and

B4X:
VDatePicker7.SetValueRange(about, tDay, nDay)

and now it work.

I think library on github havn't this functions inside
 

Mashiane

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

1644102938075.png


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

1644103036443.png



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

Mashiane

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

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

1644335433446.png
 

Mashiane

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

B4X:
'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
 
Last edited:

Mashiane

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

Mashiane

Expert
Licensed User
Longtime User
DateTimePicker Improvements & No Longer Necessary Code

This example of code is NO LONGER necessary.

1. Adding a date watcher
B4X:
'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..

B4X:
Private Sub txtDateStarted_Watch
    txtDateStarted.FormatDate(page)
End Sub

or

B4X:
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

Expert
Licensed User
Longtime User
PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

Tip: Data-Table Toolbar Buttons Loading Indicators

Assuming that you have some toolbar buttons...

1644494279895.png


Obviously, these will produce..

1644494483032.png


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..

DataTableToolBarLoadingState.gif


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.

B4X:
IoT.UpdateTitleButtonLoading("stopall", True)

#SharingTheGoodness
 

Mashiane

Expert
Licensed User
Longtime User
PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

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


B4X:
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
 
  • Like
Reactions: LJG

Mashiane

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


The Package Manager is coming out soon..
 

Mashiane

Expert
Licensed User
Longtime User
Top