B4J Question [BANanoVueMaterial] adding and removing components while running

[serro efe]

Hello @Mashiane ,
I do tests with the library and plan to use it in a project.
At runtime, I try to add and remove components. I did a few tests and failed. Is there such a possibility. If possible, can you show it with an example.

This is how you make the first screening.

Sub Code
    vm = vmx
    Dim cont As VMContainer = vm.CreateContainer(name, Me)
    cont.Hide
    devamAddRows (1) .AddColumns3x4
  ....
....
    ....
    vm.AddContainer(cont)
End Sub

For example, how do I add or remove an extra component to the page in a timer.

Also, the pages open late. Do you have any suggestions on this subject?

 

[Mashiane]

1. Can you please attach a simplified example of your project and please explain which elements you want to add via a timer.
2. On the issues of the pages loading late, are you using the BANanoVuetifyCore library? The core library does not have the additional extensions like the full blown library.

We are also hoping that VueJS 3 and thus Vuetify 3 comes out soon, there have been some glaring issues about speed that have been indicated by many users and are being fixed. Besides that we are working hard to profile and also ensure a smooth joy ride of the work!

Ta!

 

[serro efe]

@Mashiane I'm actually trying to find out when I have time.
I have no exact project. I'm testing on your examples.

Timer was an example here.
Can we create a new VMInfoBox with a button and change its content. Or can we create a card and put objects like chart, badge, vminfobox on it.

primitive example;
https://codesandbox.io/s/0y7jw79ljn?file=/src/components/Node.vue
https://jsfiddle.net/u6j1uc3u/32/

E.g; A new record has come to the database from the outside. Can we immediately create a new card and show its information in it.
Without refreshing the page

I hope that has been revealing.

I don't worry about late loading for now.

 

[Mashiane]

Can we create a new VMInfoBox with a button and change its content

I will see if I can extend the infobox with a container.

can we create a card and put objects like chart, badge, vminfobox on it.

Yes this is possible but for BVM I have not done a full implementation of the card, yes I created the base classes but not implemented them.

A new record has come to the database from the outside. Can we immediately create a new card and show its information in it.
Without refreshing the page

This should be possible depending on what backend you are using. It could be with web-sockets / firebase. Both I have not explored yet.

I don't worry about late loading for now.

In this thread post I have indicated how one can use the CDN version for the core library. BVM comes with "local hosting" resources. Also its important that the core library is used as it does not have extensions. Extensions will at a later stage come as individual libraries just like the BANanoVuetifyConnection and BANanoVuetifyPrism libs.

[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...

www.b4x.com

 

[serro efe]

Thanks for the answer

Yes this is possible but for BVM I have not done a full implementation of the card, yes I created the base classes but not implemented them.

It is not a previously created card or object. I think it should be created or removed based on a button, socket connection or record to the database. If there is such a possibility, it will be very fast to make a real interactive web application.

Think about it, a new user from Socket has arrived or logged out. We can show or remove this user's information with a new card or infobox without refreshing the instant page.

Or;
Think of an appointment system, a new appointment has been created, a new window appointment information appears on the panel before the page is refreshed. The finished appointment is automatically removed.

 

[serro efe]

@Mashiane

I will see if I can extend the infobox with a container.

I understand you're busy enough. Did you try an experiment on this topic?
According to the answer, I plan to gain experience on your library and direct my projects.

 

[Mashiane]

I am currently experimenting with adding components at runtime. On the other hand, I would greatly recommend that you read something about VueJS as understanding of how that framework works will be of great advantage to you on this project as Vuetify is built on top of VueJS.

For this I am experimenting with the v-for directive and slots as they seem like a perfect combination to implement this. These are pure VueJS objects.

The websocket part is currently out of scope for me and need devoted time to understand how the whole concept works. I'm like a dummy in that front.