Блог

Я получаю данные 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

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

Создание списка — достаточно простая задача. Это немного сложнее, потому что вы хотите показать изображение из Интернета, поэтому для этого вам нужно использовать пользовательский класс. Скачать 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
 

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