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 · Jun 11, 2020

Upcoming Updates: Drag n Drop Pagination

This demo shows how one can drag and drop a pagination component to the stage. One can later configure the properties of the dialog.

Mashiane · Jun 11, 2020

Upcoming Updates: Drag n Drop Footer

This demo shows how one can drag and drop a footer to the stage. One can later configure the properties of the footer. As the footer has a container, one can add whatever component they see fit.

Mashiane · Jun 11, 2020

Upcoming Updates: Drag n Drop Sheet

This demo shows how one can drag and drop a sheet to the stage. A sheet works like a container. This can be used on the bottom sheet component.

Mashiane · Jun 12, 2020

Upcoming Updates: Drag and Drop Alert

This demo shows how one can drag and drop an alert on the stage. One can later configure the properties of the dialog.

Mashiane · Jun 12, 2020

Core 4.13 Now Available

Please note that we have changed the navbar background to "normal", this is due to adding the progress linear control just below the navbar to signify progress. It runs when redrawing the stage.

Ta!

Mashiane · Jun 13, 2020

Core 4.14 is available, its a maintenance release to fix bugs with the MSSQL schema extraction for data tables. One can also explore the component & routers as per Examples/22 Components.

Ta!

Mashiane · Jun 15, 2020

Exciting News!!!

BANanoVueMaterial / BANAnoVuetify is going full circle with BANanoVuetifyAD, in support of B4J and new upcoming developments with BANano e.g Live Reload.

Using the BVMDesigner App and code is still fully supported, we are implementing components and routers for that so that we have seamless flows. So far tests are yielding good results.

We are bringing full control of the design functionality back to the developer i.e. Design it how you like.

Both the BVMDesigner (source code generator) and BANanoVuetifyAD (design using the Abstract Designer with Custom Views) will work hand in hand and independently of each other.

Ta!

swamisantosh · Jun 15, 2020

Mashiane said:
Exciting News!!!

BANanoVueMaterial / BANAnoVuetify is going full circle with BANanoVuetifyAD, in support of B4J and new upcoming developments with BANano e.g Live Reload.

Using the BVMDesigner App and code is still fully supported, we are implementing components and routers for that so that we have seamless flows. So far tests are yielding good results.

We are bringing full control of the design functionality back to the developer i.e. Design it how you like.

Both the BVMDesigner (source code generator) and BANanoVuetifyAD (design using the Abstract Designer with Custom Views) will work hand in hand and independently of each other.

Ta!

View attachment 95719

BVMDesigner has already made the job much simpler,
now with BANanoVuetifyAD it will be value added solutions, hope we will able to use Project Components with BANanoVuetifyAD ,
BANanoVuetifyAD - Design it how you like. very important great solution

Mashiane · Jun 15, 2020

swamisantosh said:
BVMDesigner has already made the job much simpler,

Yes it does because components are already consolidated to make blocks that are easier to use. With BVMAD, one creates an app starting from the root, so creativity with the BVMAD is the key. I like to think of the BVMDesigner as for beginners an the BVMAD for more advanced users. But then again, if you are versed with B4X, then there is nothing you wont be able to create.

For example, with BVMAD, you start with

<v-app>
<v-content>
<v-container> and or
<v-router-view>
to add components

With the BVMDesigner, the starting point is <v-container> to add already created blocks. The BVMAD then adds flexibility for ones creative juices to come to life. The nice thing is that BVMA schema is purely created by the BVMDesigner and maintaining the custom views is done there. This means 158 different individual components however others are not "visible" and will possibly be hidden as others are just child components to others.

Other components are just easy to use by just dropping them to the stage and then "generating" events as you would with B4X.

joulongleu · Jun 15, 2020

This is really a good tool

Mashiane · Jun 18, 2020

BANanoVuetifyAD Pre-Release Playlist

Please note: The code in the repo is only for Exploring at the moment and should not be used for production. The project is still at a very challenging stage.

Explore the code here, https://github.com/Mashiane/BANanoVuetifyAD

If you are brave, follow their example demos on their website and play around with the abstract designer to see if you can reproduce.

Enjoy

Mashiane · Jun 18, 2020

Core 4.14 Maintenance Update has been pushed. This also comes with an avatar group on the extensions. Only 4 images can be added to the avatar group.

B4X:

Dim ag As VMAvatarGroup
    ag.Initialize(vue, "ag", Me)
    ag.AddAvatar("a1", "./assets/sponge.png")
    ag.AddAvatar("a2", "./assets/2.jpg")
    ag.AddAvatar("a3", "./assets/4.jpg")
    ag.AddAvatar("a4", "./assets/3.jpg")

Ta!

Mashiane · Jun 22, 2020

Creating a news website / webapp with BVMAD

Mashiane · Jun 25, 2020

Core 4.15 Available..

This is just a maintenance update of Vuetify to the latest version. You can see details of the releases here.

The vuetify update will also apply to BANanoVuetifyAD.

Ta!

Mashiane · Jul 8, 2020

Upcoming Updates to 4.17.

We are adding some very useful functionality to the data-table that does not come built in.

Profile Images

Example source code...

B4X:

Dim users As List = vm.NewList
    users.add(CreateMap("avatar": "./assets/1.jpg", "firstname":"Him", "lastname":"One"))
    users.add(CreateMap("avatar": "./assets/2.jpg", "firstname":"Him 2", "lastname":"One"))
    users.add(CreateMap("avatar": "./assets/3.jpg", "firstname":"Her ", "lastname":"One"))
    users.add(CreateMap("avatar": "./assets/4.jpg", "firstname":"Her 1", "lastname":"One"))
    users.add(CreateMap("avatar": "./assets/5.jpg", "firstname":"Her 2", "lastname":"One"))
   
    dtUsers = vm.CreateDataTable("dtUsers", "user", Me)
    dtUsers.SetTitle("Users")
    dtUsers.AddAvatarImg("avatar", "Profile")
    dtUsers.AddColumn("firstname", "First Name")
    dtUsers.AddColumn("lastname", "Last Name")
    dtUsers.AddEditThrash
    dtUsers.SetDataSource(users)
    dtUsers.AddToContainer(cont, 2, 1)

These will filter down to the BANAnoVueAD (Beta) soon..

Here we add some images with our own specified dimensions...

Ta!

Mashiane · Jul 8, 2020

Upcoming Updates: Datatable Icons

In this example we want to display an icon on the first column.

B4X:

dtvuetifyattributes.AddIconView("icon", "Icon")

We also wanted to put some significance on the action icons,

1. change edit to green and increase font-size to 32px.

B4X:

dtvuetifyattributes.SetIconDimensions("edit", "32px", "success")

2. change the edit to red and increase font-size to 32px.

B4X:

dtvuetifyattributes.SetIconDimensions("delete", "32px", "error")

Ta!

Mashiane · Jul 8, 2020

Upcoming Updates: DataTable Checkboxes and Switches

I'm trying to have inline editing running on this thing. So far we are able to trap the @change events for these.

Add the checkbox (this one has been set to be a checkbox) with

B4X:

dt1.SetColumnType("glutenfree", dt1.COLUMN_CHECKBOX)

Trap the change event

B4X:

Sub dt1_glutenfree(item As Map)

Switches

Add the switch

B4X:

dtUsers.AddSwitch("active", "Active")

Trap the change event

B4X:

Sub dtUsers_active(item As Map)

Mashiane · Jul 8, 2020

So we will be able to apply some ratings also.. This traps the @input event.

B4X:

dtUsers.AddRating("rating", "Performance")

Event fired

B4X:

Sub dtUsers_rating(item As Map)

Mashiane · Jul 8, 2020

Using a progress circular on the data-table will also be possible.

B4X:

dtUsers.AddProgressCircular("tasks", "Completed")
    dtUsers.SetProgressCircularDimensions("tasks", "green", "-90", "46", "6")

Ta!

Mashiane · Jul 8, 2020

We can also use the ProgressLinear to show progress instead of progress circular.

Here is the complete source code for the Users

B4X:

Dim users As List = vm.NewList
    users.add(CreateMap("avatar": "./assets/1.jpg", "firstname":"Him", "lastname":"One", "active":True, "rating":5, "tasks":9))
    users.add(CreateMap("avatar": "./assets/2.jpg", "firstname":"Him 2", "lastname":"One", "active":False, "rating":4, "tasks": 8))
    users.add(CreateMap("avatar": "./assets/3.jpg", "firstname":"Her ", "lastname":"One", "active":True, "rating":3, "tasks": 5))
    users.add(CreateMap("avatar": "./assets/4.jpg", "firstname":"Her 1", "lastname":"One", "active":True, "rating":2, "tasks": 3))
    users.add(CreateMap("avatar": "./assets/5.jpg", "firstname":"Her 2", "lastname":"One", "active":False, "rating":1, "tasks": 1))
   
    dtUsers = vm.CreateDataTable("dtUsers", "firstname", Me)
    dtUsers.SetTitle("Users")
    dtUsers.AddAvatarImg("avatar", "Profile")
    dtUsers.AddColumn("firstname", "First Name")
    dtUsers.AddColumn("lastname", "Last Name")
    dtUsers.AddSwitch("active", "Active")
    dtUsers.AddRating("rating", "Performance")
    'dtUsers.AddProgressCircular("tasks", "Completed")
    'dtUsers.SetProgressCircularDimensions("tasks", "green", "-90", "46", "6")
    dtUsers.AddProgressLinear("tasks", "Progress")
    dtUsers.SetProgressLinearDimensions("tasks", "orange", "25", True)
   
    dtUsers.AddEditThrash
    dtUsers.SetIconDimensions("edit", "32px", "success")
    dtUsers.SetIconDimensions("delete", "32p", "error")
    dtUsers.SetDataSource(users)
    dtUsers.AddToContainer(cont, 2, 1)

Trap the progress change event

B4X:

Sub dtUsers_tasks(item As Map)

Ta!

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency