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
Highlighted
New Developer
Posts: 15
Registered: ‎08-12-2013
My Device: Z10
My Carrier: Vodafone
Accepted Solution

getting wrong text for items in ListView

Hi guys,

 

I'm really stuck with a problem in qml and would really appreciate a little help.

 

I have a listview which worked fine (right data in right items) before adding a custom control I have created which is basically a label in a container.

 

The container has 2 string property values which I set in my listview item code - expControl.string1 = ListItemData.message and expControl.string2 = substring of ListItemData.message for if expanded or not. I also append a link to the end of both text values which is either >see more< or >see less<.

 

My problem is that the message part of the listview items are now getting mixed up for some reason e.g when i press see more in my expandable control and set the label text in the controls activeTextHandler - label.text = string2 I'm getting the text for a different listview item.

 

Is there anything that could be causing this problem which I have missed? I tried resetting the string property values on dataChanged in my list but that only makes all messages blank.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: getting wrong text for items in ListView

[ Edited ]

Post your code.

 

Everyone seems to expect psychic debugging today.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Developer
Posts: 15
Registered: ‎08-12-2013
My Device: Z10
My Carrier: Vodafone

Re: getting wrong text for items in ListView

Thanks, the project is quite big - the listview item has over 10 controls and it worked when i was just using a label instead of a custom control to display ListItemData.message. I just thought something maybe would jump out to someone by describing my problem.

 

Heres my expandable control

 

import bb.cascades 1.0

Container {
    property string headerText
    property string bodyText
    
    
   
  
    Label {
        id: lblBody
        content.flags: TextContentFlag.Emoticons | TextContentFlag.ActiveText
        textStyle.fontSize: FontSize.Medium
        textStyle.lineHeight: 0.8
        textStyle.color: Color.Black
        text:  headerText
        multiline: true
        activeTextHandler: handler
        attachedObjects: [
            ActiveTextHandler {

                id: handler
                onTriggered: {
                    console.log("ontriggered");
                     if(event.href.toString().indexOf("/seemore") != -1)
                {
                    console.log(headerText + " is less seeing more= "+ bodyText);
                    
                        lblBody.text = bodyText;
                } 
                else if (event.href.toString().indexOf("/seeless") != -1) {
                        console.log(bodyText + "= more seeing less= " + headerText);
                        lblBody.text = headerText;
                    }
                }
            }

        ]
    }
}

 

Here my declaration of ExpandableLabel - sorry the returing text is a bit complicated but I have left it in there in case that is the cause of the problem somehow.

 

 ExpandableLabel {
                                id: expandableMessage
                                headerText: { 
                                    if(ListItemData.message.length > 100) 
                                {
                                    console.log("start This item message is > 100 " + ListItemData.message);
                                       var s = ListItemData.message.substring(0, 100);
                                       // int ind = s.indexOf(" ");
                                        s = s.substring(0, s.lastIndexOf(" "));
                                        return ListItemData.hasPlacez() ? "<html>" + s + "...         <a href=\"www.google.com/seemore\">see more</a>" + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + s + "...          <a href=\"www.google.com/seemore\">see more</a>" + ListItemData.withz + " </html>";
                                
                                
                                }
                                else
                                return ListItemData.hasPlacez() ? "<html>" + ListItemData.message + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + ListItemData.message + ListItemData.withz + " </html>";

                                }
                                bodyText: 
                                {
  if (ListItemData.message.length > 100){
 return  ListItemData.hasPlacez() ? "<html>" + ListItemData.message + "          <a href=\"www.google.com/seeless\">see less</a>" + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + ListItemData.message + "          <a href=\"www.google.com/seeless\">see less</a>"  + ListItemData.withz + " </html>";
      } else {
 return  ListItemData.hasPlacez() ? "<html>" + ListItemData.message + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + ListItemData.message + ListItemData.withz + " </html>";
                       } }
                                visible: {
                                    return ListItemData.message.length || ListItemData.hasPlacez() || ListItemData.withz.length;
                                }
                               
                               
                            }

 

 

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: getting wrong text for items in ListView

[ Edited ]

Nothing leaps out after a cursory glance apart from you are using return outside of a function?

Is headerText defined as a property or alias within your ExpandableLabel custom control?

 

If that is the definition then this is not how you define a customcontrol.

 

[Edit] Okay ignore the last bit the first code you posted is ExpandableLabel.qml, that's fine.

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: getting wrong text for items in ListView

[ Edited ]

I'm now thinking it's some kind of scope issue, if you replace the label definition from

 

text: headerText

 

to

 

text: ""

 

does it make any difference?

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: getting wrong text for items in ListView

Try adding a couple of extra simple labels in to your custom control as well to print out the raw ListItemData and the ListItemData.message.length to see if they match your expectations.


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Developer
Posts: 15
Registered: ‎08-12-2013
My Device: Z10
My Carrier: Vodafone

Re: getting wrong text for items in ListView

I am now trying a different way but reverted back to the original to try your last suggestion but I just got a blank label. I then changed property string to property alias but still the messages were appearing in wrong items.

 

So the way I'm trying now is using 2 different labels with 2 alias and the arrangement of items in list seems corrected but now when an item comes into view even though I set the default visibility of the 2 labels in oncreationcomplete sometimes see less label (body label) is visible first rather than see more label (title label). This happens intermittently and I cant seem to get past it. Anything I can try to make sure the correct containers is visible when the item comes into view?

 

new expandablelabel..

 

import bb.cascades 1.0
Container {
    property alias headerText: lblTitle.text
    property alias bodyText: lblBody.text
    onCreationCompleted: {
        lblTitle.visible = true;
        lblBody.visible = false;
    }
    Container {
        
        id: lblTitleContainer
        Label {
            id: lblTitle
            visible: true
            content.flags: TextContentFlag.Emoticons | TextContentFlag.ActiveText
            textStyle.fontSize: FontSize.Medium
            textStyle.lineHeight: 0.8
            textStyle.color: Color.Black
           
            multiline: true
            activeTextHandler: handler
            attachedObjects: [
                ActiveTextHandler {
                    
                    id: handler
                    onTriggered: {
                        console.log("ontriggered");
                       if (event.href.toString().indexOf("/seemore") != -1) {
                        console.log(" is less seeing more= " + lblBody.text);
                        lblBody.visible = true;
                        lblTitle.visible = false;
                        console.log("isvisible="+ lblBodyContainer.visible);
                    
                    } else if (event.href.toString().indexOf("/seeless") != -1) {
                        console.log(bodyText + "= more seeing less= " + headerText);
                        lblTitle.visible = true;
                        lblBody.visible = false; 
                    }
                    }
                }
            
            ]
        }
    }
    Container {
        
        id: lblBodyContainer
        Label {
            id: lblBody
            visible: false
            content.flags: TextContentFlag.Emoticons | TextContentFlag.ActiveText
            textStyle.fontSize: FontSize.Medium
            textStyle.lineHeight: 0.8
            textStyle.color: Color.Black
           
            multiline: true
            activeTextHandler: handler2
            attachedObjects: [
                ActiveTextHandler {
                    
                    id: handler2
                    onTriggered: {
                        console.log("ontriggered");
                     
                   
if(event.href.toString().indexOf("/seemore") != -1)
                {
                                            console.log(headerText + " is less seeing more= "+ bodyText);
                                            lblBody.visible = true; 
                                            lblTitle.visible = false;
                
                } 
else if (event.href.toString().indexOf("/seeless") != -1) {
                            console.log(bodyText + "= more seeing less= " + headerText);
                            lblTitle.visible = true;
                            lblBody.visible = false; 
}
                    }
                }
            
            ]
        }
    }
}

 

New Developer
Posts: 15
Registered: ‎08-12-2013
My Device: Z10
My Carrier: Vodafone

Re: getting wrong text for items in ListView

I've only just seen your last reply so haven't tried that suggestion yet.

New Developer
Posts: 15
Registered: ‎08-12-2013
My Device: Z10
My Carrier: Vodafone

Re: getting wrong text for items in ListView

Heres the new declaration for expandable label..

 

ExpandableLabel {
                                id: expandableMessage
                                
                                
                                headerText: {
                                
                                    if(ListItemData.message.length > 100) 
                                {
                                    console.log("start This item message is > 100 " + ListItemData.message);
                                       var s = ListItemData.message.substring(0, 100);
                                       // int ind = s.indexOf(" ");
                                        var s2 = s.substring(0, s.lastIndexOf(" "));
                                        return ListItemData.hasPlacez() ? "<html>" + s2 + "...         <a href=\"www.google.com/seemore\">see more</a>" + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + s2 + "...          <a href=\"www.google.com/seemore\">see more</a>" + ListItemData.withz + " </html>";
                                
                                
                                }
                                         else
                                return ListItemData.hasPlacez() ? "<html>" + ListItemData.message + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + ListItemData.message + ListItemData.withz + " </html>";

                            }
                                bodyText : {
                                   
                                        if (ListItemData.message.length > 100){
 return  ListItemData.hasPlacez() ? "<html>" + ListItemData.message + "          <a href=\"www.google.com/seeless\">see less</a>" + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + ListItemData.message + "          <a href=\"www.google.com/seeless\">see less</a>"  + ListItemData.withz + " </html>";
      } else {
 return  ListItemData.hasPlacez() ? "<html>" + ListItemData.message + "<a href=\"www.google.com/" + ListItemData.getLocationId() + "\">" + " - at " + ListItemData.getLocationName() + "&#58;</a>" + ListItemData.withz + "</html>" : "<html> " + ListItemData.message + ListItemData.withz + " </html>";
                       } 
                           }
                               
                           
                                visible: {
                                    return ListItemData.message.length || ListItemData.hasPlacez() || ListItemData.withz.length;
                                }
                            }

 

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: getting wrong text for items in ListView

Hi!

 

Do not rely on onCreationCompleted in ListItemComponents or their child items.

 

The components are created once and then reused during scrolling. Bind to ListItemData elements, but if that's not enough, something like this should work:

 

ListItemComponent {
                    type: "listItem"
                    Container {
id: topItem ListItem.onDataChanged: {
// reset component properties here

 


Andrey Fidrya, @zmeyc on twitter