B4J Question [BANanoVuetifyAD3] vCard and vBtn

Star-Dust

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



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.



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
Sort by date Sort by votes

Mashiane

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

Mashiane

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



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



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

Star-Dust

Expert
Licensed User
Longtime User
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.
]
Click to expand...
Is there a prize for the best question?

Because I only ask better questions
 
Upvote 0
You must log in or register to reply here.
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…