B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

*START OF NOTICE

As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3.

This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of the Abstract Designer use.

Subscribe to Telegram Channel

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Ahoy!!!

*END OF NOTICE


UPDATE 24 October 2020: The recommended methodology to create BANanoVuetify WebApp is being discussed here:
MealPrep. This covers most of what VueJS + Vuetify is all about in terms of the internals.

Whilst you can use the designer to create your UX, you need to separate your concerns when creating the app just like its done on the MealPrep by using components and routers for the pages.

DO NOT FOLLOW THE APPROACH USED IN CREATING THE BANANOVUEMATERIALDEMO WHEN CREATING YOUR APPS. THAT METHOD IS NO LONGER FEASIBLE.


Download

BANanoVuetifyAD - Prelease Playlist on Youtube
BANanoVueMaterial (Vuetify) Playlist on Youtube

2020-05-20 Update: Important Update

BANanoVueMaterial Designer Usage - Mock.Compile.Publish

BANanoVueMaterialCore (pure vuetify without extensions)

Exploring Components & Router Basics

How to ask questions, request help, report bugs and request enhancements + Telegram Channel

Thanks to everyone who has been playing with this and highlighting issues and requesting features. You are stars!

*** IMPORTANT: Migrating to the new version

Word. Moving from VueMaterial to Vuetify was inevitable and whilst both are Vue Material based frameworks, Vuetify has more strengths. If if was going to be possible, we would not be having a migration guide, however things changed and enhancements happened and some code rewrites took place. When doing the transition from the VueMaterial to Vuetify codebases, we tried to make the code transition to be as smooth as possible, thus our migration guide is as small as possible. We did not want to dictate how to use the lib, so we removed some things that were hard coded and fixed. This was specific to the side drawer. To test the migration, the old examples were converted to new examples (see below) and all of them work.

BANanoVueMaterial is complete open source, so this means you can use it to your hearts content and adjust it and make it your own. If you enhance, send us word, we will merge. Make the code simple and comment it as much as you can. I cannot over-emphasize that Vuetify is LARGE, so check their website on how components are created and used to learn stuff. Do enjoy. TheMash. #IAmLovingThis

BANanoVuetify (recommended for new projects & migration notes attached)

You can track our progress from here. All the components that we got from VueMaterial exists in Vuetify and more!!!

  • Copy all the files in the 1. External Libraries folder to your B4J external libraries folder
  • If you want to explore the BANanoVuetify source code, open and run the project in 2. Library
  • If you want to explore all the components in this version, open and run the project in 3. Demo
  • You can also explore other specific examples from the 4. Examples folder
Live Preview



Tutorials (New)

Mock.Compile.Publish


NB: Download and Import the Project Components files for the Expense Tracker here.

1. Expense Tracker with BANanoSQL


Expense Tracker Part 1
Expense Tracker Part 2
Expense Tracker Part 3
Expense Tracker Part 4
Preparations for Part 5
Expense Tracker Part 5.1
Expense Tracker Part 5.2

2. Expense Tracker with SQLite (you need to understand all of 1. Expense Tracker with BANanoSQL first!)

Making your app use SQLite as a backend
Mock.Compile.Publish Expense Tracker with SQLite as BackEnd Full Implementation

3. Expenses Tracker with MSSQL (you need to understand all of 1. & 2. above first!)

Mock.Compile.Publish Expense Tracker with MSSQL as BackEnd

4. Expense Tracker with MySQL (you need to understand all of 1. - 3. above first)

Mock.Compile.Publish Expense Tracker with MySQL as BackEnd

NEW NEW NEW!!!! Handling Events

Developing a grid with the Designer
Developing forms with the Designer
Designing text field controls with the Designer
Designing text area controls with the Designer
Designing password controls with the Designer
Designing images with the Designer
Designing file input with the Designer
Designing buttons with the Designer
Designing checkboxes with the Designer
Designing switches with the Designer
Designing icons with Designer
Designing labels with Designer
Designing sliders with the Designer
Designing select, combo and autocomplete with the Designer
Designing radio boxes with the Designer
Designing date & time pickers with the Designer (NB: functionality works on your app)
Designing a parallax with the Designer
Designing a container with the Designer
Designing the appbar, toolbars and systembar with the Designer - Part 1
Designing the appbar, toolbars and systembar with the Designer - Part 2
Drag n Drop Menu - Part 1
Drag n Drop Menu - Part 2
Drag n Drop Carousel
Drag n Drop Dialog
Drag n Drop Rating
Drag n Drop SpeedDial
DataTable multi selects
SetFocus(?)
Invisible File Selector
DataTable GetItemKeys
Drag n Drop Chips
Drag n Drop Badges
Drag n Drop Avatars
Exporting Component Schemas (Multi Development Mode)
Importing Component Schemas (Multi Development Mode)
Drag n Drop Lists
Drag n Drop Tabs
Drag n Drop Stepper
Drag n Drop ExpansionPanels (Accordion)
Drag n Drop Page
Setting Project Properties
Reading Text files (without upload to server)
Reading Excel files (without upload to server)

Reporting (New)

Excel Client Side Reporting with OXML

Example Projects

Hello World
Navigation (1 or more pages using v-show directive)
Login Screen
User Registration Screen
Expenses.Show - MySQL+PHP+ChartKick CRUD
Form Utilities - BANanoSQL CRUD
Calculations - using watch directives

IMPORTANT: Asking Questions about BANanoVueMaterial

1. Please do not ask questions on this thread as this is about updates and new developments about BANanoVueMaterial.
2. When asking a question, please use the B4J Forum and prefix your question with [BANanoVueMaterial] Your Question
3. As the author of this lib, I would recommend that in the content of your question you also address it to myself with @Mashiane (this will also help me find and attend to your questions faster as it will show in my personal notifications)

Related Content

BANanoVue - a now updated CORE of BANanoVueMaterial
BANanoWired - a mockup framework build on BANanoVue (WIP)
BANanoPDFDesign - a creation based on BANanoVueMaterial for PDF reporting (WIP)
BANanoVMDesign - this intends to support BANanoVueMaterial design philosophy. (WIP)

Have fun and enjoy!

PS: BANanoVueMaterial uses an updated version of the BANanoPostProcessor library done by Kiffi.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
DataTable - Persisting changes when input elements change on the table.

Assuming... we have loaded these fields to a table from a database, how does one persist the changes made to a database when...

1. A switch value changes.
2. A checkbox value changes
3. A star value changes or
4. A progress value changes.

attributes.png


We added a switch that was linked to a database table column named "active"

B4X:
dtvuetifyattributes.AddSwitch("active", "On Sub Signature")

The field on the database table is named "active", so when this value changes to true/false, we want to update the database.

So when ever a value changes, just like edit / delete, an event is fired. The table name is "dtvuetifyattributes" and the field name is "active", so this event is fired.

B4X:
Sub dtvuetifyattributes_active(item As Map)

And what is passed to it is the current record being processed.

To back-track a little, we added these columns to the table.

B4X:
dtvuetifyattributes.AddIconView("icon", "Icon")
    dtvuetifyattributes.AddColumn1("name", "Name", "text",0,False,"start")
    dtvuetifyattributes.AddColumn1("type", "Type", "text",0,False,"start")
    dtvuetifyattributes.AddColumn1("default", "Default", "text",0,False,"start")
    dtvuetifyattributes.AddColumn1("description", "Description", "text",0,False,"start")
    dtvuetifyattributes.AddSwitch("onsub", "On Sub")
    dtvuetifyattributes.AddSwitch("active", "On Sub Signature")

These are linked to a database table and our original query to select the records from the db was.

B4X:
Dim rsAttributes As BANanoAlaSQLE
    db.OpenWait("bvmdesigner", "bvmdesigner")
    rsAttributes.Initialize("vuetifyattributes", "name")
    Dim qw As Map = CreateMap()
    qw.put("component", menuID)
    rsAttributes.SelectWhere(Array("*"), qw, Array("="), Array("name"))
    rsAttributes.result = db.ExecuteWait(rsAttributes.query, rsAttributes.args)
    rsAttributes.FromJSON
    'save records to state
    vm.SetData("vuetifyattributes", rsAttributes.Result)
    'update the data table records
    dtvuetifyattributes.SetDataSource(rsAttributes.Result)
    dtvuetifyattributes.SetPage("1")

So back to what happens when a switch changes. The event below is fired, receiving key value pairs for the record being processed.

B4X:
Sub dtvuetifyattributes_active(item As Map)
    'get the key
    Dim skey As String = item.get("key")
    'update the database
    db.OpenWait("bvmdesigner", "bvmdesigner")
    Dim compSQL As BANanoAlaSQLE
    compSQL.Initialize("vuetifyattributes", "key")
    compSQL.Update1(item, skey)
    compSQL.result = db.ExecuteWait(compSQL.query, compSQL.args)
    compSQL.FromJSON
End Sub

We read the key column / field value (this is not displayed on the table but is part of the fields in the table)
We open the table we want to process and pass it the record saved on item using the key.
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes to the Designer

One of the advantages of using the designer is because of CRUD functionality. This means you after you link your backend (SQLite, MySQL, MSSQL) you can then easily create user interfaces based on your database schema for CRUD to your database of choice.

Before, each time one changed a property in the property bag, the stage reflected the new changes. This has not worked optimally for some instances so this is a manual event now. As soon as you click the refresh button in the toolbar, your stage is refreshed with your changes.

Handling database schemas.

When designing forms based on database schemas, at times you need to define everything about the form easily. The "Schema" section has been updated for one to be able to do some mandane task using the switches.

For example cust_no.

We don't want this field to be listed on the data-table, its not required and it should be available on the dialog input screen but invisible.

For the cust_name, we want this to show on the data-table etc.

The changes ones makes with on the schema are saved and once the stage is "refreshed", the controls will be created and shown on the stage.

designerupdates.png


Color coded buttons

For data-tables, the edit and delete and other action buttons will now come color coded. We have added this to the designer to enhance your UI and your generated source code for your data-aware app comes with this built in. As an example this code will be generated...

B4X:
dtAgents.SetEdit(True)
    dtAgents.SetDelete(True)
    dtAgents.SetIconDimensions1("edit", "24px", "success", "80")
    dtAgents.SetIconDimensions1("delete", "24px", "error", "80")

Case Sensitivity

JavaScript is case sensitive, thus anything in the designer is case sensitive, especially the JSON returned from your database. When importing databases, its important that the field names in your tables are all LOWERCASE and does not have special characters like -, _ etc., if this is not the case, you can activate this feature each time you run a select from your tables.

The generated SelectAll_??? code by the designer now adds an extra method call to the SelectAll_?? method. This is

B4X:
rsAgents.result = vue.MapKeysLowerCaseList(rsAgents.result)

NB: YOU CAN COMMENT THIS LINE OUT IF ALL THE FIELDS IN YOUR BACKEND-TABLE ARE LOWERCASE.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates - Data-table inline editing with the edit-dialog


One can also use these on their apps.

1. Add columns to the data-table as you would.

B4X:
dtschema.AddColumn("key", "Name")
    dtschema.AddColumn("title", "Label")
    dtschema.AddColumn("collength", "Length")
    dtschema.AddColumn("coldatatype", "Field Type")
    dtschema.AddColumn("colrow", "R")
    dtschema.AddColumn("colcolumn", "C")

2. Add the edit dialog to the columns one needs to be edited

B4X:
dtschema.AddEditDialog("title",False)
    dtschema.AddEditDialog("collength",False)
    dtschema.AddEditDialog("colrow",False)
    dtschema.AddEditDialog("colcolumn",False)

3. Add events to the data-table (These are compulsory)

B4X:
Sub dtschema_save(item As Map)
    Log("save")
    Log(item)
End Sub

Sub dtschema_cancel(item As Map)
    Log("cancel")
    Log(item)
End Sub

Sub dtschema_open
 
End Sub

Sub dtschema_close

End Sub

Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
A combo box / auto complete can also be added..

In this example we add a column for the foreign table column..

combobox.png


Add the columns

B4X:
dtschema.AddColumn("colforeigntable", "ForeignTable")
    dtschema.AddColumn("colforeignkey", "ForeignKey")
    dtschema.AddColumn("colforeignvalue", "ForeignValue")

Add the combo selectors - These are activated once you click on the row column

B4X:
dtschema.AddEditDialogCombo("colforeigntable",False,"tablenames","tablename","tablename",False)
    dtschema.AddEditDialogCombo("colforeignkey",False,"fields","key","key",False)
    dtschema.AddEditDialogCombo("colforeignvalue",False,"fields","key","key",False)

For the foreign table, the data source should be a list of maps saved with state name "tablenames", the key field will be a map key named tablename with also the display value.

This works the same as the NewSelectCombo / NewSelectAutoComplete component.

In this example, when we change the value in the foreign selection, we want to update the "fields" state where the other combos will get their content from.

B4X:
'change the foreign table, update the other 2 columns
Sub dtschema_colforeigntable_change(item As Map)
    'get the table name to process
    Dim scolforeigntable As String = item.get("colforeigntable")
    If scolforeigntable = "" Then Return
    '
    Dim prjSQL As BANanoAlaSQLE
    db.OpenWait("bvmdesigner", "bvmdesigner")
    prjSQL.Initialize("tables", "tablename")
    prjSQL.Read(scolforeigntable)
    prjSQL.Result = db.ExecuteWait(prjSQL.query, prjSQL.args)
    prjSQL.fromJSON
    '
    Dim Result As List = prjSQL.Result
    Dim rec As Map = Result.Get(0)
    Dim fieldsJSON As String = rec.get("fields")
    Dim fields As List = BANano.FromJson(fieldsJSON)
    vm.setdata("fields", fields)
End Sub

In this example, we read a field from a BANanoSQL table, this contains a JSON string with field properties. We convert this into a list and save it.

The colforeignkey and colforeignvalue columns above will get their contents from the new list.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Hooo haaaa!!!

One of the important things when importing databases to the designer is to ensure that all date fields are actually text fields. The PHP prepared statements are only using these bound parameters

/* Bind parameters. Types: s = string, i = integer, d = double, b = blob */, you need to convert your date data type to string for all dates in the database.

datetimepicks.png


So here we highlight the date-time fields after the import with a red background to indicate an error.

Reproduction

You create the table a normal way, then

B4X:
dtschema.SetItemClass("checkDateTime")

The above code tells the app that for each item, apply this callback. For each item we check a particular field and if that field matches, we return the class to use.

B4X:
'mark row as red if we have dates
Sub checkDateTime(item As Map) As String
    Dim scoldatatype As String = item.get("coldatatype")
    Select Case scoldatatype
    Case "date", "datetime"
        Return "red"
    End Select
End Sub

Ta!

PS: Will be added in the next update.
 

Mashiane

Expert
Licensed User
Longtime User
Handling Data-Table Date Displays

The recommended way to save dates is using a varchar data type for your table in yyyy-mm-dd format. This makes it easy to sort and search.

However you might want to display dates differently in your data-table.

With this code for example

B4X:
dtInsurancePolicies.SetColumnDateFormat("startdate", "dd/MM/yyyy")

The output date shows 22/01/2020 for example whilst its saved as 2020-01-22 in your backend.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Demonstrating how inline editing with a text area works.

NB: To persist your changes, you need to save the content.


In this example of the designer, we are specifying the items that will be used by the combo box, but these will be sourced from a key,value field. So we specify the keys separated by , and values separated by , also.

BVMComboItems.gif


You add the column the normal way to the data-table and then also add this.

B4X:
dt.AddColumn("colkeys", "Item Keys (,)")

Then

B4X:
dt.AddEditDialogTextArea("colkeys", True)

Ta
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyDesigner - Importing Database Table Field Descriptions From Excel

NB: It's better just to follow this approach discussed here as it eliminates errors


Core 4.23 is also available, This includes the latest version of Vuetify 2.3.5.


Ta!
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Data-Table Column Visibility Toggler

Excited that I will be shooting 2 birds with one stone when it comes to his component.

Its a data-table column visibility toggler, which I will easily also adopt for reporting choosing. As its based on a list, I can add icons and other things on it.



To add this to your own data-table, include this code just before the data-table is added to the parent. It has to be added after all columns and actions are added for it to work.

In this example, the table is added to a container, so we add the column chooser before that. It does all the related magic of picking up the headers and other things from the data-table.

B4X:
dtschema.SetColumnChooser(True)    '
    contSchema.AddControl(dtschema.DataTable, dtschema.tostring, 1, 1, 0, 0, 0, 0, 12, 12, 12, 12)

You can explore it now on your projects by downloading the code from the first post.
 

Mashiane

Expert
Licensed User
Longtime User
The next version of BANanoVuetify 4.25 features functionality to Export and Import database tables schema as JSON layouts.

These JSON layouts are useful when you might want someone else to update the database table layout, e.g. field title, field row and column position, field control type. Once updated, whoever is administering your database can save then export this database tables json layout for further use.

Watch this video here to understand what this means:

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify 4.25 is out, this includes the latest version of the Vuetify Library 2.3.6 that was updated 2 days ago.

Download from the 1st post.

Ta!

PS: I am adding data-table "Totals" row and will be available with the next version. One will be able to show row count / row sum per data-table headers with this.
 

swamisantosh

Member
Licensed User
Longtime User
BANanoVuetify 4.25 is out, this includes the latest version of the Vuetify Library 2.3.6 that was updated 2 days ago.

Download from the 1st post.

Ta!

PS: I am adding data-table "Totals" row and will be available with the next version. One will be able to show row count / row sum per data-table headers with this.
By providing data-table Totals feature , data-table can be used as reporting tool.provision for exporting to excel,pdf will be excellent addon
 

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT NOTICE: Explaining the Database Schema Layout

:You might want to set your browser to 80% on smaller screens

A maintenance update of the schema layout has been done and its available now at , https://github.com/Mashiane/BANanoVuetify

Database Schema Layouts enables one to pre-define database tables before these are converted to UI via the convert to data-table command.

What we do is the following:

1. For each field in the database table for the selected column, give it a title.
2. Define its control type e.g. combo, date, email etc.
3. Define its relationship between other tables
4. Define the boolean attributes using switches
5. Define the matrix location of the component, e.g. Row and Column.
Etc.

Mode 1 - Editable Content

dbschemalayout01.png


There are 2 toolbars for this screen. 1 is t control the saving, export (JSON) and import (JSON) of the database schema (AS A WHOLE). If you import, all your previously defined changes about the database tables WILL BE OVERWRITTEN, be careful there.

The 2nd toolbar, is to control what you see on the table. You have 3 modes, 1. editable content, 2. switches and 3. relationships.


Available Modes (table headers change depending on the mode you have selected)

Mode 1 - Editable content (these are details like title, row, column etc)

To change details, you click the row and column to edit, an edit dialog appears and then you update press enter to save your changes. The default mode when you select a table to process is this mode as indicate above.


dbschemalayout04.png



Mode 2 - Switches (these are for all boolean attributes)

dbschemalayout02.png


Here you turn attributes ON / OFF

Mode 3 - relationships

With this mode one indicates the relationship between the field being processes with other tables. There is only a 1 to 1 definition relationship allowed.



dbschemalayout03.png


Here you select the foreign table, this allows you to select the foreign key and value.

dbschemalayout05.png


Remember, save your work, back it up by exporting it to JSON if you need to,

Ta!
 
Top