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

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