B4J Question [BANanoVuetifyAD3] vCard and vBtn

Star-Dust

Expert
Licensed User
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.

1634152817130.png


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
 
Solution
@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.

ProfileCardClick.gif


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

Expert
Licensed User
@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.

ProfileCardClick.gif


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
 
Upvote 1
Solution

Mashiane

Expert
Licensed User
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.

1634255335528.png


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:

1634255429281.png


and VLabel2 caption is bound to

1634255463223.png


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!
 
Upvote 0

Star-Dust

Expert
Licensed User
@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
 
Upvote 0
Top