Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
laairoy
Posts: 24
Registered: ‎10-31-2012
My Device: Dev Alpha B

Make a action on tap in ListView, Help!

[ Edited ]

Hello,

 

I created a ListView and I can not do a given action to touch.

I want to change the font size of the list element.

 

 

ListView {
dataModel: XmlDataModel {
source: "models/test.xml"
}
onTriggered: {
      clearSelection()
      select(indexPath);
      console.log("Selected")
      topLabel.textStyle.fontSizeValue = 12
}
listItemComponents: [
      ListItemComponent {
      type: "category"
      Header {
            title: ListItemData.title
      }
      },
ListItemComponent {
property variant highlighted: ListItem.active
type: "color"
Container {
preferredWidth: 768
preferredHeight: 126
layout: DockLayout {
}
background: Color.create(ListItemData.color)
Label {
id: topLabel
text: ListItemData.name
textStyle.fontSizeValue: 7
textStyle.color: Color.create(ListItemData.titleColor)
}
.

.

.

 

When touch ListView, i receive:

file:///apps/com.example.Palette.testDev_ple_Palette2e98836a/native/assets//main.qml:20: ReferenceError: Can't find variable: topLabel

 

 

__
Helped you? Like me.
Regular Contributor
ametller
Posts: 54
Registered: ‎07-15-2010
My Device: Not Specified

Re: Make a action on tap in ListView, Help!

[ Edited ]

The problem you're having here is that you are trying to modify the Label that is inside the ListItemComponent, and this is not possible from the outside, so the variable "topLabel" is not recognized.

 

I don't think it's possible to modify a ListItemComponent "on the fly". Let's wait for some other answers...

Developer
Developer
lew
Posts: 174
Registered: ‎03-05-2009
My Device: Dev Alpha

Re: Make a action on tap in ListView, Help!

try this:

 

onTriggered:

...

var chosenItem = dataModel.data(indexPath);

chosenItem.fontSizeValue = 12; //modify dataModel data

...

Label {
id: topLabel
text: ListItemData.name
textStyle.fontSizeValue: ListItemData.fontSizeValue //use an attribute from dataModel
textStyle.color: Color.create(ListItemData.titleColor)
}

...

 

To sumarize, you can modify the data within a ListItemComponent by modiying the data in the DataModel corresponding to that indexPath (entry). When you change an attribute in the dataModel, cascades will take care of refreshing the UI.

 

Hope this helps.