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
Posts: 64
Registered: ‎06-28-2011
My Device: BlackBerry Z10
My Carrier: Bell
Accepted Solution

ListView and ListItem displaying funny

How come when I have my .XML directly in my ListView, all the list items display properly, but if I add the data to a data source, it doesn't. 

 

Example below because I can't explain this very well.

ListView {
            dataModel: XmlDataModel {
                source: "hills.xml"
            }
            listItemComponents: [
                ListItemComponent {
                    type: "listItem"
                    StandardListItem {
                        title: ListItemData.skiHill
                    }
                },
                ListItemComponent {
                    type: "header"
                    Header {
                        title: ListItemData.key
                        touchPropagationMode: TouchPropagationMode.None
                    }
                }

 Vs. 

ListView {
            dataModel: dataModel
            listItemComponents: [
                ListItemComponent {
                    type: "listItem"
                    StandardListItem {
                        title: ListItemData.skiHill
                    }
                },
                ListItemComponent {
                    type: "header"
                    Header {
                        title: ListItemData.key
                        touchPropagationMode: TouchPropagationMode.None
                    }
                }

...

attachedObjects: [
        GroupDataModel {
            id: dataModel
            sortingKeys: [
                "skiHill"
            ]
        },
        DataSource {
            id: dataSource
            source: "hills.xml"
            query: "/root/listItem"
            onDataLoaded: {
                dataModel.insertList(data);
            }
        }

 

On the 2nd of two different types of lists, the list item displays info from a different part of my XML, not the ski hill name.

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: ListView and ListItem displaying funny

Might help to see a screenshot showing the odd display. Also a sample of the relevant XML.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 64
Registered: ‎06-28-2011
My Device: BlackBerry Z10
My Carrier: Bell

Re: ListView and ListItem displaying funny

XML

<header key="A"/>
			<listItem skiHill="Asessippi Ski Area" picture="Asessippi.jpg" phone="204-564-2000" website="www.asessippi.com" street="" city="Inglis MB" monfriHours="9am-4:30pm (8pm Wed/Fri)" satHours="9am-8pm" sunHours="9am-4:30pm" childLift="Child (6-12)" seniorLift="Youth" studentLift="Student/Senior" adultLift="Adult (18+)" adultDayLift="$48" seniorDayLift="$40.80" childDayLift="$36.70" studentDayLift="$43.20" adultNightLift="$36" seniorNightLift="$30.60" childNightLift="$27.50" studentNightLift="$36" adultRental="All Ages" childRental="Pre School" adultDayRental="$32" childDayRental="$28.80" adultNightRental="$27" childNightRental="$24.50" dayLift="Full Day" nightLift="Night(3pm-8pm)" greenCircle="8" blueSquare="8" blackDiamond="5" doubleblackDiamond="0" verticalDrop="N/A" gondola="0" doubleAmount="0" fourSeater="1" threeSeater="1" tBar="" ropeTow="0" snowPark="Yes" snowfall="45cm"/>

 And what happens IMG_00000055.png

 

It seems to pull data from the "adultDayLift" part of the XML.

 

Like I said, when I don't use GroupDataModel, it works fine.

Developer
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: ListView and ListItem displaying funny

Okay, this looks a lot like a situation I had (not using XML though, but I think it might be the same anyway) with GroupDataModel, and even with ArrayDataModel, related to the item "type" property.

You might want to investigate the use of the itemType() function that you can add to the ListView. I don't know how the XML is transformed as you insert it into the model, but when I was using JSON data and didn't specify itemType() in a way that pulled out the correct field, I would get similar behaviour. Basically it would select an arbitrary field and display it using a default StandardListItem rather than picking the one I'd supplied.

It's possible if you remove the "type" property from your first ListItemComponent, or use try type: "" instead, that you'll see a change and can track down the specific fix needed from there.

Sorry I can't be more specific... I don't work with XML when I can help it, which is most of the time. ;-)

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Developer
Posts: 64
Registered: ‎06-28-2011
My Device: BlackBerry Z10
My Carrier: Bell

Re: ListView and ListItem displaying funny

I'm new and XML data was used in the examples I read, so it stuck to me.

 

I was able to get the items to be named properly, but in the process lost the headers. Now the headers appear as a normal list item

Highlighted
Developer
Posts: 293
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: ListView and ListItem displaying funny

Your Header should look like:

 

 ListItemComponent {
                    type: "header"
                    Header {
                        title: ListItemData
                        touchPropagationMode: TouchPropagationMode.None
                    }
                }

i.e. just use ListItemData for the title - because from a GroupDataModel (and probably XmlDataModel) the first level of the indexpath is always returned as a string, not as an actual data item that has properties

 

 

ListItemComponent {
                    type: "item"
                    StandardListItem {
                        title: ListItemData.skiHill
                    }
                },

Your actual list items should have the type "item" - because this is what the GroupDataModel specifies.

 

You can override that by using an itemType() callback in QML, if you need it to be something different, or if you require a mixture of different types within the list

Developer
Posts: 64
Registered: ‎06-28-2011
My Device: BlackBerry Z10
My Carrier: Bell

Re: ListView and ListItem displaying funny

Thank you Peter and strobejb.

 

Appreciate your help