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
Tobster_
Posts: 257
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK
Accepted Solution

Multiple ListItems Causes ListView To Crash

Hello, 

 

I am using a ListView within my Cascades application and it uses a GroupDataModel and a DataSource; the DataSource is an XML file located within my assets folder. 

 

Here's the ListView:

Container {
                        ListView {
                            id: listView1
                            dataModel: dataModel1

                            leadingVisual: [
                                Container {
                                    id: dropDownContainer1
                                    topPadding: 20
                                    leftPadding: 20
                                    rightPadding: 20
                                    bottomPadding: 20
                                    background: Color.create("#212121")
                                    DropDown {
                                        id: dropDown1
                                        title: qsTr("Month:")
                                        Option {
                                            text: qsTr("June")
                                            value: "June"
                                        }
                                        Option {
                                            text: qsTr("July")
                                            value: "July"
                                        }
                                        onSelectedIndexChanged: {
                                            dataSource1.sQuery = dropDown1.at(dropDown1.selectedIndex).value;
                                        }
                                    }
                                }
                            ]

                            contextActions: [
                                ActionSet {
                                    id: itemActionSet
                                    title: ListItemData.title
                                    subtitle: qsTr("Actions")
                                    actions: [
                                        ActionItem {
                                            title: qsTr("Add To Saved")
                                            imageSource: "asset:///IMG/ic_add_favorite.png"

                                            onTriggered: {
                                                //Add to saved tab which can then be accessed by the user
                                            }
                                        }
                                    ]
                                }
                            ]
                            listItemComponents: [
                                ListItemComponent {
                                    type: "item"
                                    StandardListItem {
                                        title: ListItemData.listItem.title
                                    }
                                }
                            ]

                            onTriggered: {
                                var selectedItem = dataModel1.data(indexPath);
                                var detail = fixtures.createObject();

                                navigationPane1.push(detail)
                            }
                        }

                    }

attachedObjects: [
                // Definition of the second Page, used to dynamically create the Page above.
                GroupDataModel {
                    id: dataModel1
                    sortingKeys: [ "title" ]
                    grouping: ItemGrouping.ByFullValue
                },
                DataSource {
                    id: dataSource1
                    property string sQuery: ""
                    onSQueryChanged: {
                        dataModel1.clear()
                        load()
                    }
                    source: "asset:///XML/Fixtures.xml"
                    type: DataSourceType.Xml
                    remote: false
                    query: "/root/continent"

                    onDataLoaded: {
                        //create a temporary array tohold the data
                        var tempdata = new Array();
                        for (var i = 0; i < data.length; i ++) {

                            tempdata[i] = data[i]

                            //this is where we handle the search query
                            if (sQuery == "") {
                                //if no query is made, we load all the data
                                dataModel1.insert(tempdata[i])
                            } else {
                                //if the query matches any part of the country TITLE, we insert that into the list
                                //we use a regExp to compare the search query to the COUNTRY TITLE (case insenstive)
                                if (data[i].listItem.title.search(new RegExp(sQuery, "i")) != -1) {
                                    dataModel1.insert(tempdata[i])

                                    //Otherwise, we do nothingand donot insert the item
                                }

                            }

                        }

                        // this if statement below does the same as above,but handles the output if there is only one search result
                        if (tempdata[0] == undefined) {
                            tempdata = data

                            if (sQuery == "") {
                                dataModel1.insert(tempdata)
                            } else {
                                if (data.listItem.title.search(new RegExp(sQuery, "i")) != -1) {
                                    dataModel1.insert(tempdata)
                                }
                            }
                        }
                    }
                    onError: {
                        console.log(errorMessage)
                    }
                },

                ComponentDefinition {
                    id: fixtures
                    source: "FixturesDetail.qml"
                }
            ]
            onCreationCompleted: {
                dataSource1.load()
            }

 

 

Here's the XML file:

 

<root>
    <continent title="Thursday 12 June 2014"> 
        <listItem title="Brazil vs Croatia">
        </listItem>
	</continent>
    <continent title="Friday 13 June 2014">
    	<listItem title="Mexico vs Cameroon">
        </listItem>
        <listItem title="Spain vs Netherlands">
        </listItem>
        <listItem title="Chile vs Australia">
        </listItem>
        </continent>
    <continent title="Saturday 14 June 2014">
        <listItem title="Colombia vs Greece">
        </listItem>
        <listItem title="Uruguay vs Costa Rica">
        </listItem>
        <listItem title="England vs Italy">
        </listItem>
        <listItem title="Côte d’Ivoire vs Japan">
        </listItem>
      </continent>  
    <continent title="Sunday 15 June 2014">
        <listItem title="Switzerland vs Ecuador">
        </listItem>
        <listItem title="France vs Honduras">
        </listItem>
        <listItem title="Argentina vs Bosnia and Herzegovina">
        </listItem>
        </continent>
    <continent title="South America">
        <listItem title="Argentina">
        <teamlist>teamlist</teamlist>
        </listItem>
        <listItem title="Brazil">
        <teamlist>teamlist</teamlist>
        </listItem>
        <listItem title="Chile">
        <teamlist>teamlist</teamlist>
        </listItem>
        <listItem title="Colombia">
        <teamlist>teamlist</teamlist>
        </listItem>
        <listItem title="Ecuador">
        <teamlist>teamlist</teamlist>
        </listItem>
        <listItem title="Uruguay">
        <teamlist>teamlist</teamlist>
        </listItem>
        </continent>
</root>

 Only the top item appears whilst all of the others just appear as being blank and the user can therefore not click on them. 

 

Any help with this would be great. 

 

Thanks :smileyhappy: 

 

Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Multiple ListItems Causes ListView To Crash

your ListView is expecting its items to be of type "item"
your XML is using items of type "listItem"

so fix your listitemcomponent to be the correct type?

Also, if your source data is XML, why not use XmlDataModel? it looks kinda convoluted the way you are loading data, if all you are dealing with is a static XML file in your assets folder

ListView {
dataModel: XmlDataModel {
source: "XML/Fixtures.xml"
}
}
Please use plain text.
Developer
Tobster_
Posts: 257
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Multiple ListItems Causes ListView To Crash

[ Edited ]

An XML Data Model would work but can I also add headers to each item with an XML Data Model?

 

As I am currently trying this: 

 

main.qml

 

ListView {
                            id: listView1
                            dataModel: XmlDataModel {
                                source: "asset:///XML/Fixtures.xml"
                            }

                            leadingVisual: [
                                Container {
                                    id: dropDownContainer1
                                    topPadding: 20
                                    leftPadding: 20
                                    rightPadding: 20
                                    bottomPadding: 20
                                    background: Color.create("#212121")
                                    DropDown {
                                        id: dropDown1
                                        title: qsTr("Month:")
                                        Option {
                                            text: qsTr("June")
                                            value: "June"
                                        }
                                        Option {
                                            text: qsTr("July")
                                            value: "July"
                                        }
                                        onSelectedIndexChanged: {
                                            dataSource1.sQuery = dropDown1.at(dropDown1.selectedIndex).value;
                                        }
                                    }
                                }
                            ]

                            contextActions: [
                                ActionSet {
                                    id: itemActionSet
                                    title: ListItemData.title
                                    subtitle: qsTr("Actions")
                                    actions: [
                                        ActionItem {
                                            title: qsTr("Add To Saved")
                                            imageSource: "asset:///IMG/ic_add_favorite.png"

                                            onTriggered: {
                                                //Add to saved tab which can then be accessed by the user
                                            }
                                        }
                                    ]
                                }
                            ]
                            listItemComponents: [
                                ListItemComponent {
                                  type: "continent" 
                                  Container {
                                      Header {
                                          title: ListItemData.continent.title
                                      }
                                  }
                                },
                                ListItemComponent {
                                    type: "item"
                                    StandardListItem {
                                        title: ListItemData.listItem.title
                                    }
                                }
                            ]

                            onTriggered: {
                                var selectedItem = dataModel1.data(indexPath);
                                var detail = fixtures.createObject();

                                navigationPane1.push(detail)
                            }
                        }

 Fixtures.xml

 

<root>
    <continent title="Thursday 12 June 2014" date="Thursday 12 June 2014"> 
        <listItem title="Brazil vs Croatia">
        </listItem>
	</continent>
    <continent title="Friday 13 June 2014">
    	<listItem title="Mexico vs Cameroon">
        </listItem>
        <listItem title="Spain vs Netherlands">
        </listItem>
        <listItem title="Chile vs Australia">
        </listItem>
        </continent>
    <continent title="Saturday 14 June 2014">
        <listItem title="Colombia vs Greece">
        </listItem>
        <listItem title="Uruguay vs Costa Rica">
        </listItem>
        <listItem title="England vs Italy">
        </listItem>
        <listItem title="Côte d’Ivoire vs Japan">
        </listItem>
      </continent>  
    <continent title="Sunday 15 June 2014">
        <listItem title="Switzerland vs Ecuador">
        </listItem>
        <listItem title="France vs Honduras">
        </listItem>
        <listItem title="Argentina vs Bosnia and Herzegovina">
        </listItem>
        </continent>
</root>

 However, the header title (continent title="") is not shown but the listItem title is shown; do you know why this may be?

 

Fixtures.PNG

Please use plain text.
Developer
Tobster_
Posts: 257
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Multiple ListItems Causes ListView To Crash

Still haven't got the headers to work and using an XML data model doesn't use the data source which would mean my search function stops working.

Does anyone have any suggestions?
Please use plain text.
Developer
strobejb
Posts: 267
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Multiple ListItems Causes ListView To Crash

[ Edited ]
Header {
   title: ListItemData.title
}
Please use plain text.
Developer
Tobster_
Posts: 257
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Multiple ListItems Causes ListView To Crash

[ Edited ]

Thanks, that did the trick!

 

Although, as I have this: 

 

onTriggered: {
                                var selectedItem = dataModel1.data(indexPath);
                                var detail = fixtures.createObject();

                                detail.fixtureInfo = selectedItem.listItem.fixtureInfo
                                detail.dateInfo = selectedItem.listItem.dateInfo
                                detail.timeInfo = selectedItem.listItem.timeInfo
                                detail.stadiumInfo = selectedItem.listItem.stadiumInfo

                                navigationPane1.push(detail)
                            }

 The detail.fixtureInfo= selectedItem.listItem.fixtureInfo and the other three, are now preventing the screens to be pushed onto the page whereas before with the Data Source: this didn't happen. 


Also, I have been searching and it appears that I cannot use a DataSource with an XMLDataModel; so do you have any suggestions on how to remake my search function (sQuery) work with the XMLDataModel?

Thanks again :smileyhappy:

Please use plain text.
Developer
Tobster_
Posts: 257
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Multiple ListItems Causes ListView To Crash

Still struggling with this. Does anyone have any suggestions on how I can have multiple list items with GroupDataModel and DataSource?

If not: is there a way for me to use the XMLDataModel and the DataSource? As the DataSource provides the functionality to my search bar and without it, searching the model does not work.
Please use plain text.
Retired
PBernhardt
Posts: 749
Registered: ‎12-16-2008
My Device: BlackBerry Z30
My Carrier: Bell

Re: Multiple ListItems Causes ListView To Crash

The platform will attempt to pick sane defaults for you , but if you override the ListView::itemType(data, indexPath) function you can customize what ListItem is used based on whatever criteria you like.

 

Check out "The Default List Visuals" section of this page:

 

https://developer.blackberry.com/native/reference/cascades/bb__cascades__ListView.html

 

Paul Bernhardt
Application Development Consultant
BlackBerry
@PBernhardt

Did this answer your question? Please accept this post as the solution.
Found a bug? Report it to the Developer Issue Tracker
Please use plain text.
Developer
Tobster_
Posts: 257
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Multiple ListItems Causes ListView To Crash

Thanks for getting back to me Paul.

Is there a way to do this in QML? As I don't really know what I'm doing with C++
Please use plain text.
Retired
PBernhardt
Posts: 749
Registered: ‎12-16-2008
My Device: BlackBerry Z30
My Carrier: Bell

Re: Multiple ListItems Causes ListView To Crash

Yup, the second example is done in QML:

 

ListView {
    dataModel: XmlDataModel { source: "model.xml" }
 
    function itemType(data, indexPath) {
        return (indexPath.length == 1 ? 'header' : 'item');
    }
}

 

Paul Bernhardt
Application Development Consultant
BlackBerry
@PBernhardt

Did this answer your question? Please accept this post as the solution.
Found a bug? Report it to the Developer Issue Tracker
Please use plain text.