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

Mashiane · Aug 24, 2021

Did you know?

Download BANanoVuetifyAD3 5.96
Download New Awesome Kitchen Sink
Download New Awesome BANanoServer Kitchen Sink
Download test.sql to import with phpMyAdmin
Download BVAD3EDS Template

The BANanoServer (aka jetty) Kitchen Sink is just an extension of the normal Kitchen Sink we have here.

based on

however, the normal kitchen sink will always have the most up to date features.

To make it work...

1. We updated the config.properties file with the exact path of our SQLITE database. You need to run the project to generate the objects folder first.

Sqlite_JdbcUrl=jdbc:sqlite:C:\\MyApps\\b4j\\workspace\\BANanoVuetifyAD3\\WebApps\\BVAD3Server\\Objects\\www\\assets\\test.db

This uses jRDC2 connectivity to work around the CRUD functionality of the WebApp.

2. We also created a MySQL backend database and linked it with JRDC2 to our WebApp.

We also updated our config.properties file to point to our mysql backend.

B4X:

# MySQL Server:
DriverClass=com.mysql.cj.jdbc.Driver
Jdbc=jdbc:mysql
JdbcUrl=jdbc:mysql://localhost:3306/test?characterEncoding=utf8
User=root

Ta!

Mashiane · Aug 25, 2021

We released the BANanoVuetifyAD Quick Reference Docs

Let this help you on your journey with BANanoVuetifyAD3.

Mashiane · Aug 25, 2021

BANanoVuetifyAD3 MySQL Connect.

This enables one to test MySQL connections to any backend, it uses PHP internally.

Mashiane · Aug 25, 2021

BANanoVuetifyAD3 MSSQL Connect

Install the PDO Driver to webserver

These are extracted to the ext folder: C:\laragon\bin\php\php-7.4.19-Win32-vc15-x64\ext

Mashiane · Aug 25, 2021

BANanoVuetifyAD3 SQLite Connect

Mashiane · Sep 10, 2021

Hi there, whilst its not really necessary yet to be moving to Vuetify3, that uses VueJS 3. Its still in Alpha and a lot will change. Yes the benefits of VueJS3 as compared to VueJS2 are massively overwhelming, performance, stability, better design etc etc. Me is just wondering if its something you would be willing to support in creating as part of the BVAD3 forward thinking strategies. Yes, there is a lot that needs to be showcased in terms of what the current BVAD3 framework can do and is doing and a lot of people are using it to create their apps. Awesome. For now the move is towards more BANanoServer based apps to establish a base as your next choice for development. Your thoughts....

BTW

Mashiane · Sep 11, 2021

Did you know?

The best way to refresh data for the VueTable is to use .Reload(Records), where Records is an object array with your records. This ensures that any previous

(a) sorting
(b) grouping
(c) expanded items

are cleared.

In most cases we have used .SetRows(Records) or .UpdateItems(VC, Records) - these do not clear existing sorts, groups/expansaiton, but just reloads the data.

Ta!

Mashiane · Sep 11, 2021

Hi there gang, Lesson 13 of the Mashy Teaches Series is out. We look at beginning Offline First WebApps with BVAD3.

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

13 - Beginning Offline First WebApps - IndexedDB CRUD Download BVAD3 6.03 Download Project PS: Consider donating if you looove the work!

www.b4x.com

Some additional code shortcuts have been added to the 6.03, there is nothing new as they are just used in this example to improve code readability. These are:

AddFilter - SetFilter
AddComputed - SetComputed
AddWatch - SetWatch
AddMethod - SetMethod
OnMounted - SetMounted
OnUpdated - SetUpdated
OnBeforeMount - SetBeforeMount
OnBeforeUpdate - SetBeforeUpdate
OnBeforeDestroy - SetBeforeDestroy
OnBeforeCreate - SetBeforeCreate
OnCreated - SetCreated
OnDestroyed - SetDestroyed
OnActivated - SetActivated
OnDeActivated - SetDeActivated
OnNextTick - SetNextTick
OnTimeOut - SetTimeOut

Enjoy!

Mashiane · Sep 14, 2021

Did you know?

The only controls that do not need an explicit .BindState / .BindStateOnApp call is the VField?

VFields are used inside VForms to create (a) the grid for your form and (b) the components inside that form. This is done as soon as .CreateForm is called on a form.
Internally this executes all your .BindState calls for each of the controls.

NB: All other components need an explicit .BindState / .BindStateOnApp call. This is COMPULSORY.

Enjoy!

Mashiane · Sep 14, 2021

Did you know?

The VField component "never exists" by itself but a native component is created in its stead based on this Custom View selection

B4X:

#DesignerProperty: Key: ComponentType, DisplayName: Component Type*, FieldType: String, DefaultValue: TextField, Description: Component Type, List: P|H6|H1|H2|H3|H4|H5|div|span|TextField|TextArea|TimePicker|DatePicker|DateTimePicker|FileInput|FileInputImage|Money|Thousands|Password|ComboBox|AutoComplete|Select|Avatar|AvatarIcon|AvatarText|CheckBox|Switch|RadioGroup|Image|Telephone|Email|Website|Slider|Chip|Rating|ProgressCircular|ProgressLinear|Icon|Button|FAB|ColorSelect|ColorTextField

This is a power component as with it you are able to create a multitude of the native components.

That you can also create events linked to the native component by using "Generate Members". These are the events for the VField that link back to the native components.

B4X:

#Event: Blur (e As BANanoEvent)
#Event: Change (item As Object)
#Event: Time_Change (item As String)
#Event: Date_Change (item As String)
#Event: Click (e As BANanoEvent)
#Event: ClickAppend (e As BANanoEvent)
#Event: ClickAppendOuter (e As BANanoEvent)
#Event: ClickClear (e As BANanoEvent)
#Event: ClickPrepend (e As BANanoEvent)
#Event: ClickPrependInner (e As BANanoEvent)
#Event: Focus (e As BANanoEvent)
#Event: Input (item As Object)
#Event: KeyDown (e As BANanoEvent)
#Event: MouseDown (e As BANanoEvent)
#Event: MouseUp (e As BANanoEvent)
#Event: UpdateError (B As Boolean)
#Event: KeyUpEnter (e As BANanoEvent)
#Event: KeyUpEnterPrevent (e As BANanoEvent)
#Event: Button_Click (e As BANanoEvent)

To see all native components created with the VField component, visit this page in the Kitchen Sink: https://mashiane.github.io/BANanoVuetifyAD3/#/formbuilder

Ta!

NB: You do not need to Generate Members for the "actual" VTextField i.e there is no need for Private VTextField1 as VTextField in Process_Globals because it "never exists", so if you generated these, remove them.

Mashiane · Sep 14, 2021

Upcoming Updates

1. Standardization of Margins and Padding.

I cannot over-emphasize the need for anyone who wants to master BANanoVuetifyAD3 of the need to skim through and spend some time reading the Vuetify Documentation, for more understanding and also catching up on some of the things I have left out.

With that said, https://vuetifyjs.com/en/styles/spacing/#how-it-works, has a section that talks about margins and paddings.

You might have noticed that some components in the Property bags have these properties;

B4X:

#DesignerProperty: Key: MA, DisplayName: MA, FieldType: String, DefaultValue: , Description: MA
#DesignerProperty: Key: MB, DisplayName: MB, FieldType: String, DefaultValue: , Description: MB
#DesignerProperty: Key: ML, DisplayName: ML, FieldType: String, DefaultValue: , Description: ML
#DesignerProperty: Key: MR, DisplayName: MR, FieldType: String, DefaultValue: , Description: MR
#DesignerProperty: Key: MT, DisplayName: MT, FieldType: String, DefaultValue: , Description: MT
#DesignerProperty: Key: MX, DisplayName: MX, FieldType: String, DefaultValue: , Description: MX
#DesignerProperty: Key: MY, DisplayName: MY, FieldType: String, DefaultValue: , Description: MY
#DesignerProperty: Key: PA, DisplayName: PA, FieldType: String, DefaultValue: , Description: PA
#DesignerProperty: Key: PB, DisplayName: PB, FieldType: String, DefaultValue: , Description: PB
#DesignerProperty: Key: PL, DisplayName: PL, FieldType: String, DefaultValue: , Description: PL
#DesignerProperty: Key: PR, DisplayName: PR, FieldType: String, DefaultValue: , Description: PR
#DesignerProperty: Key: PT, DisplayName: PT, FieldType: String, DefaultValue: , Description: PT
#DesignerProperty: Key: PX, DisplayName: PX, FieldType: String, DefaultValue: , Description: PX
#DesignerProperty: Key: PY, DisplayName: PY, FieldType: String, DefaultValue: , Description: PY

When read and applied, these build and add classes for margins and paddings for any element that you want to set sizes for. From the link above, this can be explained as.

For example to set margin-top=4px, one would use the class mt-1 and to apply negative margins e.g. margin-bottom=-20px one would use mb-n5.

As you might have noticed, our Custom View "Properties" are made of very long lists of items and these are based on the Vuetify API. As an example, the Alert component, which is the element v-alert, has this API, https://vuetifyjs.com/en/api/v-alert/

This details the attributes/properties, events etc that can be applied to the alert component. We have used that information to build the property bags we are using.

For you to understand each component and how you can customize it, its important that you also spend some time "reading". There is no point in reproducing the Vuetify documentation as it will basically saying exactly what they say there.

So how does one add padding and margins in the updated property bags? Well, there are these 2 properties now.

B4X:

#DesignerProperty: Key: MarginAXYTBLR, DisplayName: Margins AXYTBLR, FieldType: String, DefaultValue: a=?; x=?; y=?; t=?; b=?; l=?; r=? , Description: Margins A-X-Y-S-M-L-X
#DesignerProperty: Key: PaddingAXYTBLR, DisplayName: Paddings AXYTBLR, FieldType: String, DefaultValue: a=?; x=?; y=?; t=?; b=?; l=?; r=? , Description: Padding A-X-Y-S-M-L-X

You just indicate the number of the margin by over-writing the ? mark, for only the margins / padding that you need to be updated.

As the previous definitions were only affecting a handful of components, these new method is now standard for 99% of the components, including the VField so that it gets applied to the native components.

This helps in bringing the very needed flexibility for one to set their styles as they need.

PS: If you want to specify you own margn and padding besides mx-1, pa-3, you can just use margin-top:6px on the "Styles" property
Enjoy!

Mashiane · Sep 15, 2021

IMPORTANT: In this question we discuss how to change attributes at run-time.

[BANanoVuetifyAD3] How to change color on text in a VLabel ?

Hi I'm trying to change attributes on a VLabel that is made in Abstract manager after it has been bound. I have manage to change the text using {{ artnumber }} in Caption field but what if I want to change the color for example ? Private Sub Icon_Image_Click (e As BANanoEvent) 'This works...

www.b4x.com

Mashiane · Sep 15, 2021

Upcoming Updates: VLabel Typography

To create typography related content for BANanoVuetifyAD3, we use the VLabel and select the size we want either being H1.. H6, p, span, strong, div etc.

The updates are in related to these articles:

(a) https://vuetifyjs.com/en/styles/colors/
(a) https://vuetifyjs.com/en/styles/text-and-typography/

This means, one will be able to indicate the various options via the abstract designer and also be able to change these at runtime using the .Update?? calls.

These are the new methods added to the VLabel for run-time functionality

UpdateTextDecoration
UpdateTruncate
UpdateLineThrough
UpdateFontThin
UpdateFontLight
UpdateUnderLine
UpdateOverline
UpdateBold
UpdateFontWeightBlack
UpdateItalic
UpdateTextColor
UpdateColor
UpdateTextAlign

Classes & Styling

ToggleClass
AddClassRT (AddClass is for usage after BANanoLoadLayout only for DESIGN TIME)
RemoveClassRT (RemoveClass is for usage after BANanoLoadLayout only for DESIGN TIME)
AddStyleRT (AddStyleClass is for usage after BANanoLoadLayout only for DESIGN TIME)
RemoveStyleRT

Other notable Mentions (for all components)

AddAttr (for usage after BANanoLoadLayout only for DESIGN TIME)
RemoveAttr ((for usage after BANanoLoadLayout only for DESIGN TIME))

Changing the Caption at RunTime (follow the methodology indicated on the steps below)

Step1: Define the Caption to be bound to some variable name you specify like this:

Step 2: Define the States to have the default value for the caption. You can also indicate other bindings you want for the states e.g. appbarcolor:green, this could also work with the attributes

Internally this will execute

B4X:

.SetData("lblpagecaption", "Anele Mashy Mbanga")

At runtime, execute..

B4X:

.UpdateCaption("This is new text")

Ta

Mashiane · Sep 15, 2021

Upcoming Updates - New Components

These were usually created with the VLabel components and are now separate

VApp
VMain
VDivider
VSpacer
VRouterView

List/Array Manipulation

If you have a list of objects e.g records from a DB, you can manipulate them with these methods.

Example

B4X:

{"name":"Anele", "age":48}, {"name":"Usi", "age":18}, {"name": "Olo", "age":12}, {"name":Eso, "age":11}

Lets assume that you saved these as a list with .SetData("mylistname", mylist)

Q1. How do you find if the list has an object with the name "Eso"
A1.

B4X:

dim bHas As Boolean = vuecomponent.ListContains("mylistname", "name", "Eso")

Q2. How do I return the object with Olos content
A2.

B4X:

dim Olo as Map = vuecomponent.ListFind("mylistname", "name", "Olo")

Q3. How do I get the index of the object with age 12
A3.

B4X:

dim idx as int = vuecomponent.ListIndexOf("mylistname", "age", 12)

Breaking Changes (To ensure consistency & same methodology application accross the library as all components now have UpdateColor method. Also in some cases, it has been noted that changing the "color" only happens by applying class bindings instead of the "color" attribute. The class binding approach has been applied)

Each of these components UpdateColor signatures have changed slightly (removal of the VueComponent)

VAlert
VAppBar
VAvatar
VBadge
VBtn
VBtnIcon
VFAB
VPanelItem
VSnackBar
VToolBar

Mashiane · Sep 16, 2021

Upcoming Updates: UpdateCaption

The following components all have the UpdateCaption method. This means you can update the captions at runtime.

VInfoBox
VAlert
VAppBarTitle
VAvatar (when you have set it to text)
VBtn
VCardSubTitle
VCardText
VChip
VLabel
VProgressCircular
VSnackBar
VToolBarTitle
VToolTip
VueInfoBox

Mashiane · Sep 16, 2021

Upcoming Updates: UpdateLabel

To change the caption/label of input elements at runtime, use UpdateLabel. Affected controls are:

VAutoComplete
VCombobox
VCheckBox
VFileInput
VRadio
VRadioGroup
VRangeSlider
VSelect
VSlider
VSwitch
VTextField

Mashiane · Sep 16, 2021

Remember: ReferenceError .... undefined

Means that you have not executed .BindState / BindStateOnApp.

BindState should be called after BANAno.LoadLayout.

If you however use the VForm and VFields, you only execute .BindState once for the form and not for the form components no matter how many they are, thats why is better and faster to use the VForm and VField approach when creating your forms.

If you however use the VForm and VFields, you only execute .BindState once for the form and not for the form components no matter how many they are, thats why is better and faster to use the VForm and VField approach when creating your forms.

Think of the VForm as the PreferenceDialog in B4X.

Mashiane · Sep 17, 2021

Did you know?

You can install the Vue.JS Devtools which will help you understand and also fix bugs.

Download it from here: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en

After install, go to its settings and Allow it to access File URLs

To demonstrate, check the right section of the screen

Mashiane · Sep 18, 2021

IMPORTANT Please Remember:

IT IS NO LONGER RECOMMENDED TO BIND ELEMENTS LIKE THIS

B4X:

vuetify.BindVueElement(appmain.VElement)

Rather Use this RECOMMENDED approach

B4X:

appmain.BindStateOnApp(vuetify)

or

B4X:

yourcomponent.BindState(YourComponent)

In some instances BindState / BindStateOnApp has more feautures for components that the not recommended method does not access.

Ta!

Mashiane · Sep 18, 2021

Check out the tutorials on reading text files

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

13 - Beginning Offline First WebApps - IndexedDB CRUD Download BVAD3 6.03 Download Project PS: Consider donating if you looove the work!

www.b4x.com

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads