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:

thinktank

Member
thanx for the updates... as we noticed that pages when displayed take sometime to load, therefore splash screen addition will be highly useful... tia
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Drag n Drop a Page (Create different pages for your website / webapp)

This demo shows how one can drag and drop a page to the stage. This is useful if your app will have 1 or more pages and each page can be created separately. You can add multiple pages for your site / webapp in this fashion and update their configuration and then add components etc etc that you need. Here we use a fake drawer and fade navbar to show how the drawer items and navbar items will be drawn for the page links depending on what you specify on the settings.

 

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT ANNOUNCEMENT:

BANanoVuetifyCore Library

The BANanoVuetifyCore library is the core BANanoVuetify library without any of the other functionalities but pure stuff. ONLY Vuetify classes are part of the library and nothing else. This means no additional extensions have been added on this version but just pure vuetify related stuff. The library name that will appear on your B4J libraries listing is BANanoVuetifyCore (4+)

This is on the 0. Core folder in this repo. There is source code for the library and a demo project that does not have anything outside of Vuetify.

Check it out here.

What does this mean?

The core does not have the following built in like the previous library. These will come as additional classes that you can add separately.
  1. Charts do not exist ie. eCharts and ChartKick
  2. Quill editor is not included
  3. Prism is not included
  4. InfoBox is not included
  5. Faker is not included (own developed class)
  6. CircleCounter is not included
  7. ArcCounter is not included
  8. OXML i.e. excel reporting is not included.
  9. Designer is not included.
The main version however currently contains these extensions.

Currently the core is using built in resources. We will explore CDN links later on.

Enjoy.

PS: The BVMDesigner can also be run online from here.
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes: Setting Project Properties in a drawer (placed on the right side)

This enables one to specify the project name, database name, database types to use in the project.
Currently the Designer supports BANanoSQL only.

One clicks on a button in the navbar to activate the drawer and when cancel is closed the drawer is closed.

BANanoRightDrawer.gif
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: We have updated the Demo project "modFiles" to demonstrate the invisible File Selector for reading Text Files

Reading Text Files


The contents of the file for this example as displayed in console log.


BVMReadTextFile.gif


  1. We create a button and add it to a container.
  2. When clicked, we show the file selector
  3. On file change in the selector, we read the file contents with a promise.
  4. When the file contents are got, we display in console log. Off course, you can do whatever you need with text file contents
B4X:
Sub Code
    vm = pgIndex.vm
    'create a container to hold all contents
    Dim cont As VMContainer = vm.CreateContainer(name, Me)
    'hide this container
    cont.Hide
    '
    Dim btnTextFile As VMButton = vm.CreateButton("btnTextFile", Me).SetLabel("Read Text File Without Upload")
    cont.AddControlS(btnTextFile.Button, btnTextFile.ToString, 1, 1, 6, 6, 6, 6)
   
    'add container to page
    vm.AddContainer(cont)
    ' add an invisible file selector
    vm.AddFileSelect(Me, "fucomponent")
   
End Sub


Sub btnTextFile_click(e As BANanoEvent)
    vm.ShowFileSelect("fucomponent")
End Sub

Sub fucomponent_change(e As BANanoEvent)
    Dim fileList As List = vm.GetFileListFromTarget(e)
    If fileList.size = 0 Then Return
    'only process 1 file
    Dim fr As String = fileList.get(0)
    '
    Dim Result As Map
    Dim promise As BANanoPromise = vm.readAsText(fr)
    promise.Then(Result)
        'get the json content
        Dim txt As String = Result.get("result")
        Log(txt)
        '
    promise.Else(Result)
        Dim compError As String = Result.get("result")
        Log(compError)
    promise.End
   
    'nully file component so we can select same file
    vm.NullifyFileSelect("fucomponent")
End Sub
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Reading Excel files and processing the output

This is featured in the "modFiles" examples to import Excel worksheet.


This returns a JSON list that you can process anyway you want. This reads the first worksheet in the workbook.


1. Add a button to select the file

B4X:
Dim btnExcelFile As VMButton = vm.CreateButton("btnExcelFile", Me).SetLabel("Read Excel File Without Upload")
    cont.AddControlS(btnExcelFile.Button, btnExcelFile.ToString, 2, 1, 12, 12, 12, 12)

2. Add a file select

B4X:
vm.AddFileSelect(Me, "xlscomponent")

3. Add the click event for the file selector

B4X:
Sub btnExcelFile_click(e As BANanoEvent)
    vm.ShowFileSelect("xlscomponent")
End Sub

4. Trap the file change event and read the contents of the excel file.

B4X:
Sub xlscomponent_change(e As BANanoEvent)
    Dim fileList As List = vm.GetFileListFromTarget(e)
    If fileList.size = 0 Then Return
    'only process 1 file
    Dim fr As String = fileList.get(0)
    '
    Dim Result As Map
    Dim promise As BANanoPromise = vm.readAsBinaryString(fr)
    promise.Then(Result)
        'get the json content
        Dim data As String = Result.get("result")
        '
        Dim be As BANanoExcel
        be.initialize
        Dim records As List = be.ReadFile(data)
        Log(records)
        dtExcel.SetDataSource(records)
        '
    promise.Else(Result)
        Dim compError As String = Result.get("result")
        Log(compError)
    promise.End
    
    'nully file component so we can select same file
    vm.NullifyFileSelect("xlscomponent")
End Sub

In our case we load the contents of the excel sheet to the data-table, use dtExcel.SetDataSource(?) The data table column names are CaseSenSitive now!!

B4X:
'add a table to the page use the same columns in the excel file
    dtExcel = vm.CreateDataTable("dtExcel", "OrderDate", Me)
    dtExcel.SetTitle("Orders")
    dtExcel.AddSearch
    dtExcel.AddColumn("OrderDate", "Order Date")
    dtExcel.AddColumn("Region", "Region")
    dtExcel.AddColumn("Rep", "Rep")
    dtExcel.AddColumn("Item", "Item")
    dtExcel.AddColumn("Units", "Units")
    dtExcel.AddColumn("Unit Cost", "Unit Cost")
    dtExcel.AddColumn("Total", "Total")
    cont.AddControlS(dtExcel.DataTable, dtExcel.ToString, 3, 1, 12, 12, 12, 12)
 

swamisantosh

Member
Licensed User
Longtime User
Upcoming Updates: Reading Excel files and processing the output

This is featured in the "modFiles" examples to import Excel worksheet.


This returns a JSON list that you can process anyway you want. This reads the first worksheet in the workbook.


1. Add a button to select the file

B4X:
Dim btnExcelFile As VMButton = vm.CreateButton("btnExcelFile", Me).SetLabel("Read Excel File Without Upload")
    cont.AddControlS(btnExcelFile.Button, btnExcelFile.ToString, 2, 1, 12, 12, 12, 12)

2. Add a file select

B4X:
vm.AddFileSelect(Me, "xlscomponent")

3. Add the click event for the file selector

B4X:
Sub btnExcelFile_click(e As BANanoEvent)
    vm.ShowFileSelect("xlscomponent")
End Sub

4. Trap the file change event and read the contents of the excel file.

B4X:
Sub xlscomponent_change(e As BANanoEvent)
    Dim fileList As List = vm.GetFileListFromTarget(e)
    If fileList.size = 0 Then Return
    'only process 1 file
    Dim fr As String = fileList.get(0)
    '
    Dim Result As Map
    Dim promise As BANanoPromise = vm.readAsBinaryString(fr)
    promise.Then(Result)
        'get the json content
        Dim data As String = Result.get("result")
        '
        Dim be As BANanoExcel
        be.initialize
        Dim records As List = be.ReadFile(data)
        Log(records)
        dtExcel.SetDataSource(records)
        '
    promise.Else(Result)
        Dim compError As String = Result.get("result")
        Log(compError)
    promise.End
  
    'nully file component so we can select same file
    vm.NullifyFileSelect("xlscomponent")
End Sub

In our case we load the contents of the excel sheet to the data-table, use dtExcel.SetDataSource(?) The data table column names are CaseSenSitive now!!

B4X:
'add a table to the page use the same columns in the excel file
    dtExcel = vm.CreateDataTable("dtExcel", "OrderDate", Me)
    dtExcel.SetTitle("Orders")
    dtExcel.AddSearch
    dtExcel.AddColumn("OrderDate", "Order Date")
    dtExcel.AddColumn("Region", "Region")
    dtExcel.AddColumn("Rep", "Rep")
    dtExcel.AddColumn("Item", "Item")
    dtExcel.AddColumn("Units", "Units")
    dtExcel.AddColumn("Unit Cost", "Unit Cost")
    dtExcel.AddColumn("Total", "Total")
    cont.AddControlS(dtExcel.DataTable, dtExcel.ToString, 3, 1, 12, 12, 12, 12)
that's really great job. somebody said that, its not possible.

now only 2 final wishes are left
1.PDF Designer for designing reports
2.inline edit......(for sales voucher)
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: BANanoPDFMake inclusion

The PDFMake library will be part of the upcoming version. Anyone who wishes to use that will have to thoroughly familiarise themselves with how PDFMake works.

I wrote tutorials for this and the implementation here will not be any different:

Designer
Library

We will however include the designer in as part of the BVMDesigner to generate the needed source code like before.
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: Full Control of the toolbar.

Previously, the toolbar comes prebuilt with a hamburger, a logo, a title and a spacer.

At times one wants to have full control on what should appear on the toolbar, thus, the toolbar code for this is no longer hard coded. You need to create your toolbar yourself the way you want.

1589110649599.png


For example, this toolbar above has been created with this code.

B4X:
'initialize the application
    vm.Initialize(Me, Main.appname)
    'add a hamburger
    vm.NavBar.AddHamburger
    vm.NavBar.Hamburger.SetVisible(True)
    'add a logo
    vm.NavBar.Logo.SetBorderRadius("50%")
    vm.NavBar.Logo.SetBorderWidth("1px")
    vm.NavBar.Logo.SetBorderColor("black")
    vm.NavBar.Logo.SetBorderStyle("solid")
    vm.NavBar.Logo.SetSize("46px","46px")
    vm.NavBar.AddLogo("./assets/sponge.png")
    vm.NavBar.Logo.Show
    vm.NavBar.AddTitle(Main.AppTitle,"")
    vm.NavBar.AddSubHeading1(Main.Version)
    vm.NavBar.AddSpacer
    vm.NavBar.SetVisible(True)
    vm.NavBar.SetModeFixed(True)

With this we are ensuring full control of your design to yourself. Off course the designer will help you with creating your toolbars.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: BVM Designer Projects.

Download

BVM Projects allows one to create projects in the designer. With version 3.85, one is required to create components within a project. Components on the stage can then be saved on this project. One can work on multiple projects and then extract their components to the stage to "consolidate". To view just components of that project one needs to clear the components by Components-Clear


NB: It is important to use the BANanoVuetifyCore library for projects as it does not have additional extensions but just the pure VueJS + Vuetify frameworks.

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
IMPORTANT UPDATE: BVM 4.00 about the Core, Designer and Extensions

Download

The BVMDesigner is now using the BANanoVuetifyCore Library and Extensions. The compiled versions of these extensions are in the 1. External Libraries folder, and the source code for them are available in the 0. Core Folder.

NB: Use the core library for your projects as it does not have the extensions. These will all be available as separate libraries soon.

B..Connect - Database Connectivity (BANanoSQL, SQLite, MySQL and MSSQL). PHP specific classes
B..Device - device component for designer
B..Prism - code view for designer.

BVMExtensions.png
 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetify Core 4.03 Update:

Download

BANanoVuetifyConnection - this now includes all backend database helpers. Due to the designer currently supporting BANanoSQL, we are coding it to support SQLite, MySQL, MSSQL code structures. This should be done sometime next week and has received priority.

The Designer has been updated to support Core 4.03. This helps in facilitating ease of building apps that have relationships between tables. The last and final part of Mock.Compile.Publish - Expense Tracker - Part 5 will show how to achive this with ease. This is coming soon.

Ta!

NB: 1. Added .AutoFocus(True) this applies to date / time picker, selects and text fields. This ensures that the focus is on the input control you want.
 
Last edited:
Top