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: 3
Registered: ‎06-05-2014
My Device: z10
My Carrier: TMobile

Displaying xml data in a listview

Hello all,

 

I'm new to BB10 native development and I'm trying to get xml data to display in a listview without having to massage the xml file to 2 levels deep or what have you. The documentation only gives the simplest of examples and is not clear (to me) how to jump beyond that. In the sample xml listing below, how would I go about displaying the firstname and lastname on the same line and the number on the second line (description), either in QML or C++?

 

<employees>

    <employee>

        <firstname>Joe</firstname>

        <lastname>Black</lastname>

        <number>12345</number>

    </employee>

            .

            .

            .

</employees>

 

Thanks for your time.

Developer
Posts: 378
Registered: ‎07-20-2012
My Device: Blackberry Z10 (White), BlackBerry Dev Alpha C
My Carrier: O2 UK

Re: Displaying xml data in a listview

[ Edited ]

Hi, 

 

I saw your forum post earlier and thought I'd like to help out so I have put together a sample for you to understand XML data, data models, data sources as well as searching (filtering) and navigation panes! 

 

Just simply copy and paste the code below and you will be well on your way to using XML within your BlackBerry 10 applications! 

 

The only issue is that if you're looking to have more than one listItem per employee then the list view will not display them correctly and I would therefore recommend checking out JSON instead of XML but XML if fine for now just to understand how the data model and data source functions Smiley Happy 

 

main.qml:

 

import bb.cascades 1.0
import bb.data 1.0
NavigationPane {
    id: navigationPane

    Page {
        id: page
        titleBar: TitleBar {
            title: qsTr("Employees")
        }
        Container {
            Container {
                id: searchContainer
                visible: false
                background: Color.create("#212121")
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                leftPadding: 10.0
                rightPadding: 10.0
                topPadding: 15.0
                bottomPadding: 15.0
                TextField {
                    id: urlBar
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 3.0
                    }
                    hintText: "Search..."
                    verticalAlignment: VerticalAlignment.Center
                    textFormat: TextFormat.Plain
                    onFocusedChanged: {
                        if (focused == true) {

                        }
                    }
                    inputMode: TextFieldInputMode.Default
                    input.submitKey: SubmitKey.Search
                    input.onSubmitted: {
                        dataSource.sQuery = urlBar.text
                    }
                    onTextChanging: {
                        dataSource.sQuery = urlBar.text
                    }
                }
                Button {
                    text: qsTr("Cancel")
                    layoutProperties: StackLayoutProperties {
                        spaceQuota: 1.0
                    }
                    onClicked: {
                        urlBar.text = ""
                        dataSource.sQuery = ""
                        searchContainer.setVisible(false)
                    }
                }
            }
            ListView {
                id: listView
                dataModel: dataModel

                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        StandardListItem {
                            title: ListItemData.listItem.title
                            description: ListItemData.listItem.number
                        }
                    }
                ]
                onTriggered: {
                    var selectedItem = dataModel.data(indexPath);
                    var detail = employee.createObject();
                    detail.employee = selectedItem.listItem.title
                    detail.employeeName = selectedItem.listItem.title
                    detail.employeeNumber = selectedItem.listItem.number

                    navigationPane.push(detail)
                }
            }
        }
        actions: [
            ActionItem {
                title: qsTr("Search")
                ActionBar.placement: ActionBarPlacement.OnBar

                onTriggered: {
                    searchContainer.visible = true
                    urlBar.requestFocus()
                }
            }
        ]
    }

    attachedObjects: [
        GroupDataModel {
            id: dataModel
            sortingKeys: [ "title" ]
            grouping: ItemGrouping.ByFullValue
        },
        DataSource {
            id: dataSource
            property string sQuery: ""
            onSQueryChanged: {
                dataModel.clear()
                load()
            }
            source: "data.xml"
            type: DataSourceType.Xml
            remote: false
            query: "/root/employee"
            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
                        dataModel.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) {
                            dataModel.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 == "") {
                        dataModel.insert(tempdata)
                    } else {
                        if (data.listItem.title.search(new RegExp(sQuery, "i")) != -1) {
                            dataModel.insert(tempdata)
                        }
                    }
                }
            }
            onError: {
                console.log(errorMessage)
            }
        },
        ComponentDefinition {
            id: employee
            source: "employeeDetail.qml"
        }
    ]
    onCreationCompleted: {
        dataSource.load()
    }
    onPopTransitionEnded: {
        // Destroy the popped Page once the back transition has ended.
        page.destroy();
    }
}

 

data.xml:

 

<root>
    <employee title="Employee A"> 
    	<listItem title="Joe Black">
        <number>12345</number>
        </listItem>
    </employee>
    <employee title="Employee B"> 
    	<listItem title="Joe Black 2">
        <number>12345</number>
        </listItem>
    </employee>
    <employee title="Employee C"> 
    	<listItem title="Joe Black 3">
        <number>12345</number>
        </listItem>
    </employee>
</root>

employeeDetail.qml:

 

import bb.cascades 1.2

Page {
    property alias employee: titleBar.title //This will display the employee's name as the title bar
    property alias employeeName: employeeName.text
    property alias employeeNumber: employeeNumber.text
    titleBar: TitleBar {
        id: titleBar
        scrollBehavior: TitleBarScrollBehavior.Sticky
    }
    ScrollView {
        id: scrollView
        scrollViewProperties {
            scrollMode: ScrollMode.Vertical
        }
        Container {
            Header {
                title: qsTr("Employee's Name:")
            }
            Container {
                leftPadding: 20

                Label {
                    id: employeeName
                }
            }
            Divider {

            }
            Header {
                title: qsTr("Employee's Number:")
            }
            Container {
                leftPadding: 20
                Label {
                    id: employeeNumber
                }
            }
            Divider {

            }
        }
    }
    actions: [
        ActionItem {
            title: qsTr("Share")
            ActionBar.placement: ActionBarPlacement.OnBar

            onTriggered: {
                shareAction.trigger("bb.action.SHARE")
            }
        }
    ]
    attachedObjects: [
        Invocation {
            id: shareAction
            query.mimeType: "text/plain"
            query.invokeActionId: "bb.action.SHARE"
            query.data&colon; "Employee details: " + employeeName.text + " " + employeeNumber.text
            query.onQueryChanged: {
                query.updateQuery()
            }
        }
    ]
}

 The employeeDetail is the page in which you can design how you wish; this page is what is pushed onto the stack when you click an item in the list view. 

 

I hope this helps you to understand what you were asking Smiley Happy 

New Developer
Posts: 3
Registered: ‎06-05-2014
My Device: z10
My Carrier: TMobile

Re: Displaying xml data in a listview

Thanks for your prompt response. I'll go through the sample to try and understand what is going on. It should be very helpful - cheers!