B4J Question [BANanoVuetifyAD3] vCard and vBtn

Star-Dust · Oct 13, 2021

I tried the 'Awesome Kitchen Sink' example and dwelt on vCard-1

I wondered how by clicking the MESSAGE button it is possible to identify which CARD has been clicked.

B4X:

Sub buildteam
    Dim team As List
    team.Initialize
    team.Add(CreateMap("name": "Iyad", "role": "web developer", "avatar": "./assets/img1.png"))
    team.Add(CreateMap("name": "Reda", "role": "Graphic designer", "avatar": "./assets/img2.png"))
    team.Add(CreateMap("name": "Zineb", "role": "web developer", "avatar": "./assets/img3.png"))
    team.Add(CreateMap("name": "Hu TechGroup", "role": "Desktop developer", "avatar": "./assets/img4.png"))
    about.SetData("team", team) 
End Sub

B4X:

Private Sub VBtn1_Click (e As BANanoEvent)
    '???'
End Sub

Private Sub VCard1_Click (e As BANanoEvent)
    '???
End Sub

Mashiane · Oct 15, 2021

@Star-Dust

This must be one of the best questions I have received. I will also update the kitchen sink to highlight the answer to this question and answer.

To cut a lot story short.., after banano loadlayout

B4X:

VBtn1.OnClick("person.name")

and add this method.

B4X:

Private Sub VBtn1_Click (item As Object)
    vuetify.ShowSwalInfo(item)
End Sub

Mashiane · Oct 14, 2021

Hey, I will look into this, we have has electricity cuts day in day out here and one cannot get anything done! The quicker way is to send stuff via the telegram channel at least thats on my phone (thats not an excuse though).

At least 24 hours for non-response will end in an hour from now, he he he.

Mashiane · Oct 15, 2021

@Star-Dust

This must be one of the best questions I have received. I will also update the kitchen sink to highlight the answer to this question and answer.

To cut a lot story short.., after banano loadlayout

B4X:

VBtn1.OnClick("person.name")

and add this method.

B4X:

Private Sub VBtn1_Click (item As Object)
    vuetify.ShowSwalInfo(item)
End Sub

Mashiane · Oct 15, 2021

Some back-ground to what is happening with this VCard Example

1. we create a list of objects ie. maps and store them in a data-variable named team.
2. We create layout with a container, a row and a column.
3. We tell the column that everything inside you, you need to re-create for each element in the "team" list.

4. So each child element will basically receive a "person" element. this includes the card, avatar etc. As an example, the avatar image SRC is bound to:

and VLabel2 caption is bound to

By default, button click events receive the (e As BANanoEvent) event listener. This case is however special, we want to pass the persons name as an argument to the click event. So we need to tell the btn event definition, that you are no longer receicing "e" but the "person.name" with

B4X:

VBtn1.OnClick("person.name")

This you need to do after load-layout.

The V-For directive is one of the most powerful directives in VueJS to create multiple components at run-time without much hustles.

Great stuff. All the best!

Star-Dust · Oct 17, 2021

Mashiane said:
@Star-Dust

This must be one of the best questions I have received. I will also update the kitchen sink to highlight the answer to this question and answer.
]

Is there a prize for the best question?

Because I only ask better questions

B4J Question [BANanoVuetifyAD3] vCard and vBtn

Star-Dust

Expert

Mashiane

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Star-Dust

Expert

Similar Threads

B4J Question [BANanoVuetifyAD3] vCard and vBtn

Star-Dust

Expert

Mashiane

Expert

Mashiane

Expert

Mashiane

Expert

Star-Dust

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency