Create custom list using json data in Blackberry 10 using QML

Question

I am getting JSON data from the web service below:

"List1": [
        {
            "id": "1",
            "title": "Title1",
            "picture":"myURL"
        },
        {
            "id": "2",
            "title": "Title2",
            "picture":"myURL" 
        }
]

Now, I want to create a custom ListView using this JSON data, with the title and image.

I have tried many examples for this. Some of links are given below:

http://qt-project.org/wiki/JSONListModel http://developer.blackberry.com/native/documentation/cascades/device_platform/data_access/using_data_source.html

But, I still cannot find any solutions. Can you please help me to solve this issue?

Answer 1

Creating a list is simple enough task. It's a bit harder because you want to show image from the internet, so you have to use a custom class for this. Download WebImageView.cpp and WebImageView.h and add them inside /src directory (if you want to take a look at the whole project or just follow my steps).

Add the following inside applicationui.cpp to include new class

#include "WebImageView.h"

and inside ApplicationUI(bb::cascades::Application *app) add

qmlRegisterType<WebImageView>("org.labsquare", 1, 0, "WebImageView");

so your QML can access this class.

This is a complete working sample of QML:

import bb.cascades 1.2
import bb.data 1.0
import org.labsquare 1.0

NavigationPane {
    id: nav
    Page {
        Container {
            ListView {
                dataModel: dataModel 
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        content: Container {
                            Label {
                                text: ListItemData.title
                            }
                            WebImageView {
                                url: "http://adev.si/files/"+ListItemData.picture
                            }
                        }
                    }
                ]
                attachedObjects: [
                    GroupDataModel {
                        id: dataModel
                        grouping: ItemGrouping.None
                    },
                    DataSource {
                        id: dataSource
                        source: "http://adev.si/files/someData.json"
                        remote: true
                        onDataLoaded: {
                            dataModel.insertList(data.List1)
                        }
                    }
                ]
            }
        }
    }
    onCreationCompleted: {
        dataSource.load();
    }
}

I hope this helped. You also need this inside your .pro file

LIBS   += -lbbdata
QT += network

If you want to you can import this project and use it.