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

Ola

Getting Started

NB: IT IS IMPORTANT THAT YOU PLEASE RUN THE BANANOVUETIFYAD3 LIBRARY ON YOUR OWN DEVICE (DO NOT USE THE COMPILED B4XLIB OUT OF THE BOX),THIS WILL GENERATE THE B4XLIB FOR YOUR DEVICE.

IMPORTANT ANNOUNCEMENT : BindState / BindVueElement DEPRECATED



Please read my Article on Medium

1. Download and Copy these files to your B4J External Libraries Folder.
NB: It is greatly recommended that you Download the Library Source Code and run it from your PC Directly
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. Download and run the Awesome Kitchen Sink WebApp
4. Learn from Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
5. We also have the BANanoServer (jetty) version of the Kitchen Sink. See this link also https://www.b4x.com/android/forum/t...bsites-webapps-with-banano.124548/post-845410
6. Download test.sql to import with phpMyAdmin

BANanoDataSource



Tools

BindVueElement Builder

You also can

Explore the Awesome Kitchen Sink WebApp Online hosted on GitHub
Mashy Teaches BANanoVuetifyAD3 YouTube PlayList

Creating a new Project

3. In B4J, click File > New > BVAD3EDS to create a new project

1624754308034.png


What's Next?

You will find the most up to date content from this post

For MySQL Back-Ends

Run the Connection Tester WebApp
https://www.b4x.com/android/forum/threads/banano-bvad3-php-connection-tester.131014/page-2

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

BTW we are on Social Media

Join our Telegram: https://t.me/bananovuematerial
Twitter handle: @mashymbanga

Open Source Code (MIT License)

Here is the Library Source Code (THIS IS OPEN-SOURCE)
Here is the Source Code for the Extensions we have used

Freebies - BVAD3 Projects

Download

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

Mashiane

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

1629829533053.png


based on

1629829985681.png


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.

1629829679545.png


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

1629829733278.png


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

Mashiane

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

 
Last edited:

Mashiane

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

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


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

Mashiane

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

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

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

marginspaddings.png


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

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

 

Mashiane

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

1631713702468.png


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

1631713799906.png


Internally this will execute

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

At runtime, execute..

B4X:
.UpdateCaption("This is new text")

Ta
 
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
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
 
Last edited:
  • Like
Reactions: LJG

Mashiane

Expert
Licensed User
Remember: ReferenceError .... undefined

1631804057304.png


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

Expert
Licensed User
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!
 
Top