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

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



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.

 
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.



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!
 
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")

 

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



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.

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

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

Expert
Licensed User
Longtime User
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation BANano File Sharer Dashboard
Replies
2
Views
2K
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
60K
NGUYEN TUAN ANH
  • Article
Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano
2 3
Replies
58
Views
20K
Mashiane
  • Article
Share My Creation [BANano] WebSites, WebApps, Frameworks Created with BANano
2 3
Replies
43
Views
7K
Mashiane
  • Article
B4J Tutorial [BANano] v2: (2) B4J Abstract Designer
Replies
0
Views
4K
alwaysbusy
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…