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

Mashiane · Feb 9, 2020

*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

Mashiane · Apr 27, 2020

BVMDesigner eBook (draft) and BVMDesigner usage...

Mashiane · Apr 30, 2020

Version 3.8 is now available.

Fixed some bugs around validation etc.

Download it here... https://github.com/Mashiane/BANanoVuetify

Mashiane · May 1, 2020

BANanoVueMaterial - Table Selects

To activate the "select all" button on a table

B4X:

dt1.SetShowSelect(True)
    dt1.SetOnToggleSelectAll("dt1_selectall")

Then add an event to trap the selected items

B4X:

Sub dt1_selectall(items As List)
    Log(items)
End Sub

To trap selection of a single item:

B4X:

dt1.SetOnItemSelected("dt1_itemselected")

And the callback...

B4X:

Sub dt1_itemselected(item As Map)
    Log("item selected")
    Log(item)
End Sub

The demo example on the next release will be updated...

Mashiane · May 2, 2020

Upcoming Changes: Added ability to setfocus to a control.

Example..

B4X:

Dim txtEmail As VMTextField = vm.NewEmail(Me, True, "txtemail", "email", "Email Address","", True, "email", "Enter email address here", "The email address is required!", 0)

Run validation and if there is an error focus on "txtEmail"

B4X:

Sub btnOkSignIn_click(e As BANanoEvent)
    'get the contents of the form
    Dim rec As Map = mdlSignIn.Container.GetData
    'validate the details
    Dim bValid As Boolean = mdlSignIn.Container.Validate(rec)
    If bValid = False Then
        vm.ShowSnackBar("You need to specify both the email address and password!")
        vm.SetFocus("txtemail")
        Return
    End If
    vm.ShowSnackBar(BANano.tojson(rec))
    'process further
End Sub

Mashiane · May 2, 2020

Upcoming Changes: Download & Upload Component Schemas

This avails the possibility for different developers to create different parts of an app and then be able to download and upload the component schemas. This creates a JSON file.

This uses an invisible file selector.

Mashiane · May 2, 2020

Upcoming Changes: Invisible File Selector

At times you just want to click an image / button and activate a file selector:

We have

B4X:

vm.AddFileSelect(Me, "fucomponent")

Then let's show it whenever we want. e.g. in a _click event

B4X:

vm.ShowFileSelect("fucomponent")

We then trap the change event...

B4X:

Sub fucomponent_change(e As BANanoEvent)
    Dim fileList As List = vm.GetFileListFromTarget(e)
    Log(fileList)
End Sub

Mashiane · May 2, 2020

Upcoming Changes: VMDataTable.GetItemKeys

The VMDataTable has an event call OnInput. This fires each time selected items change on a table. This returns a list of map records that have been selected.

GetItemKeys is a new sub for the data table to return a list of keys that have been selected. This is based on the primary key that was specified when the VMDataTable is initialized. There is no built in functionality to return what is not selected.

Define the event.

B4X:

dt1.SetOnInput("dt1_input")

The dt1 is defined in process_globals

Trap the callback.

B4X:

Sub dt1_input(items As List)
    Log("selected items")
    Dim selKeys As List = dt1.GetItemKeys(items)
    Log(selKeys)
    'join the items
    Log("String Join")
    Dim selItems As String = vm.JoinItems(",", "'", selKeys)
    Log(selItems)
    'normal join
    Log("Normal Join")
    Dim selNormal As String = vm.Join(",", selKeys)
    Log(selNormal)
End Sub

Results

Known Issues: This event fires twice.

swamisantosh · May 3, 2020

ex

Mashiane said:
Upcoming Changes: VMDataTable.GetItemKeys

The VMDataTable has an event call OnInput. This fires each time selected items change on a table. This returns a list of map records that have been selected.

GetItemKeys is a new sub for the data table to return a list of keys that have been selected. This is based on the primary key that was specified when the VMDataTable is initialized. There is no built in functionality to return what is not selected.

Define the event.

B4X:

dt1.SetOnInput("dt1_input")

The dt1 is defined in process_globals

Trap the callback.

B4X:

Sub dt1_input(items As List) Log("selected items") Dim selKeys As List = dt1.GetItemKeys(items) Log(selKeys) 'join the items Log("String Join") Dim selItems As String = vm.JoinItems(",", "'", selKeys) Log(selItems) 'normal join Log("Normal Join") Dim selNormal As String = vm.Join(",", selKeys) Log(selNormal) End Sub

Results

View attachment 93098

Known Issues: This event fires twice.

excellent

swamisantosh · May 3, 2020

Mashiane said:
Upcoming Changes: Invisible File Selector

At times you just want to click an image / button and activate a file selector:

View attachment 93085

We have

B4X:

vm.AddFileSelect(Me, "fucomponent")

Then let's show it whenever we want. e.g. in a _click event

B4X:

vm.ShowFileSelect("fucomponent")

We then trap the change event...

B4X:

Sub fucomponent_change(e As BANanoEvent) Dim fileList As List = vm.GetFileListFromTarget(e) Log(fileList) End Sub

we should option to import data from XLS, CSV to database tables.

Mashiane · May 3, 2020

swamisantosh said:
import data from XLS, CSV to database tables.

This is a specialized feature that is not part of the library and its not part of the short term implementation. Time will tell and I'm not making any promises...

Mashiane · May 3, 2020

Upcoming Updates: Drag n Drop Chips

swamisantosh · May 3, 2020

already you have implemented Download & Upload Component Schemas ,importing xls,csv format should be not big issue

Mashiane · May 3, 2020

swamisantosh said:
importing xls,csv format should be not big issue

My previous comment on the issue still stands. I'm sorry, importing XLS or CSV is not in the short term plans of implementation of BVM. Anyone who wants those features can write the code themselves to do that.

Mashiane · May 3, 2020

Upcoming Updates: Drag n Drop Badge

Mashiane · May 3, 2020

Upcoming Updates: Drag n Drop Avatar

Mashiane · May 3, 2020

Hoorah!!! Version 3.81 now available for download with the above enhancements.

Download

NB: Schema uploads still under development.

PS: You are kindly requested not to ask questions or request features on this thread.

Mashiane · May 4, 2020

Important Announcement!!! Importing Component Schemas

Previously we indicated that one can export and will be able to import component schemas. This means one can create the schema of the app, see it functional and email it to another to open in the designer and continue creating the app.

PS: Maintenance version 3.82 out with this feature!

Mashiane · May 4, 2020

Upcoming Updates: Drag n Drop List

Mashiane · May 4, 2020

Upcoming Updates: Drag n Drop Tabs

Mashiane · May 4, 2020

Upcoming Updates: Drag n Drop Stepper

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Member

Expert

Expert

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency