Создание пользовательского списка с использованием данных json в Blackberry 10 с использованием QML

Question

Я получаю данные JSON из веб-службы ниже:

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

Теперь я хочу создать кастом ListView используя эти данные JSON, с заголовком и изображением.

Я перепробовал много примеров для этого. Некоторые из ссылок приведены ниже:

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

Но я до сих пор не могу найти какие-либо решения. Можете ли вы помочь мне решить эту проблему?

Answer 1

Создание списка - достаточно простая задача. Это немного сложнее, потому что вы хотите показать изображение из Интернета, поэтому вы должны использовать собственный класс для этого. Загрузите WebImageView.cpp и WebImageView.h и добавьте их внутрь /src каталог (если вы хотите взглянуть на весь проект или просто следуйте моим указаниям).

Добавьте следующее внутри applicationui.cpp включить новый класс

#include "WebImageView.h"

и внутри ApplicationUI(bb::cascades::Application *app) добавлять

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

так что ваш QML может получить доступ к этому классу.

Это полный рабочий образец 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();
    }
}

Я надеюсь, что это помогло. Вам также нужно это внутри вашего.pro файла

LIBS   += -lbbdata
QT += network

Если вы хотите, вы можете импортировать этот проект и использовать его.