Hace unos días navegando por los proyectos públicos en Nokia Developer, me tope con un fork de QJson que incluye ciertas modificaciones para poder integrar QJson de forma mas natural con QML, antes ya había escrito como consumir JSON con QML, pero usar esta versión de QJson es mucho mas simple y eficiente.

Para empezar, lo primero que hay que hacer es bajar el proyecto y copiarlo en una carpeta con nombre el QJson en la carpeta raíz de nuestro proyecto.

Luego en el .pro de nuestro proyecto debemos hace un include al .pri de QJson.

include(./QJson/json.pri)

También en el .pro hay que declarar que vamos a usar la función network.

QT += network

En el main.cpp de nuestra app solo hay que crear los includes para QtDeclarative y para QJson y registrar el Type.

#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"

#include <QtDeclarative>
#include "QJson/qjson.h"

Q_DECL_EXPORT int main(int argc, char *argv[])
{
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    qmlRegisterType<QJson>("QJson", 1, 0, "QJson");

    QmlApplicationViewer viewer;
    viewer.setMainQmlFile(QLatin1String("qml/QColor/main.qml"));
    viewer.showExpanded();

    return app->exec();
}

En la parte QML empezamos agregando un import a QJson, luego crearemos un objeto QJSon y por ultimo vamos a declarar que cuando se dispare el evento Component.onCompleted se le asignara la url a parsear al objeto QJson y luego iteraremos la data resultante de la consulta he iremos asignando lo valores obtenidos a los campos correspondientes del modelo.

import QtQuick 1.1
import QJson 1.0
import com.nokia.symbian 1.1

Page {
    id: mainPage

    ListModel {
        id:colorsModel
    }

    Component {
        id:colorsDelegate
        ListItem {
            height: 100
            Image {
                id:icon
                smooth: true
                width: parent.width
                height: parent.height
                source: imageUrl
                Rectangle {
                    width:parent.width
                    height: 28
                    color:"#000"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    opacity: 0.750
                    ListItemText {
                        role: "SubTitle"
                        text:title +" by " + userName
                        horizontalAlignment: Text.AlignHCenter
                    }
                }
            }
        }
    }

    ListView {
        anchors.fill: parent
        model: colorsModel
        delegate: colorsDelegate
    }

    QJson {
        id: json
        onError: {
            console.log("line:"+line)
            console.log("message:"+message)
        }
    }

    Component.onCompleted: {
        var data = json.parse("http://www.colourlovers.com/api/palettes/new&format=json")

        for(var p in data){
            colorsModel.append({
                                   "title"   : data[p]["title"]
                                   ,"userName"  : data[p]["userName"]
                                   ,"imageUrl": data[p]["imageUrl"]
                               })
        }
    }
}

Para este ejemplo use el API de ColorLovers para poder consultar las ultimas paletas que se han agregado a su DB, el resultado de este pequeño ejemplo pueden apreciarlo en la siguiente imagen.

Hace un tiempo escribí sobre lo fácil que es consumir XML con QML, hoy le toca el turno a JSON, consumir JSON con QML requiere un poco mas de trabajo comparado con XML, pero no mucho mas.

Pasemos al código, lo primero que haremos sera crear un archivo data.js que contendrá la lógica que poblara al Model con los datos, para este ejemplo vamos a usar el API de Wikileaks para mostrar un listado con los últimos cables liberados, lo siguiente es agregar el ListModel, el Delegate cuyo código esta al final y no necesita muchos comentarios, el ListView que mostrara los datos y vamos a disparar la función getLatestCables() cuando la view se haya cargado.

main.qml

import QtQuick 1.0
import "data.js" as Data

Rectangle {
    width:360
    height:640

    Component.onCompleted:Data.getLatestCables();

    ListModel {
        id:cablesModel
    }

    CablesDelegate {
        id:cablesDelegate
    }

    Item {
        id:cablesList
        anchors.fill:parent

        ListView {
            model:cablesModel
            delegate:cablesDelegate
            anchors.fill:parent
        }
    }
}

La magia que no es mucha, pasa aquí, esto es simple y puro JavaScript, utilizaremos un XMLHttpRequest para acceder al feed con los datos, luego lo parseamos e iremos agregando uno a uno los datos al Model.

data.js

function getLatestCables(){
    var xhr = new XMLHttpRequest;
    xhr.open("GET", "http://api.leakfeed.com/v1/cables/latest.json");
    xhr.onreadystatechange = function() {
        if (xhr.readyState == XMLHttpRequest.DONE) {
            var a = JSON.parse(xhr.responseText);
            for (var c in a) {
                var i = a[c];
                cablesModel.append({identifier: i.identifier, classification: i.classification, office: i.office, subject: i.subject});
            }
        }
    }
    xhr.send();
}

CablesDelegate.qml

import QtQuick 1.0

Component {

    Rectangle {
        border.color:"#b7b7b7"
        border.width:1
        width:parent.width
        height:cableIdentifier.height + cableOffice.height + cableClass.height + cableSubject.height + 10
        color:"#fff"

        Item {
            width:parent.width
            height:parent.height

            Grid {
                rows:4
                width:parent.width
                anchors.verticalCenter:parent.verticalCenter
                anchors.left:parent.left
                anchors.leftMargin:5
                anchors.right:parent.right
                anchors.rightMargin:5

                Text {
                    id:cableIdentifier
                    text:identifier
                    font.bold:true
                    font.pixelSize:18
                    smooth:true
                    color:"#333"
                }

                Text {
                    id:cableOffice
                    color:"#0076A3"
                    text:office
                    font.pixelSize:18
                    font.bold:true
                    smooth:true
                }

                Text {
                    id:cableClass
                    color:"#aa1317"
                    text:classification
                    font.pixelSize:16
                    font.bold:true
                    smooth:true
                }

                Text {
                    id:cableSubject
                    text:subject
                    font.pixelSize: 14
                    wrapMode:Text.WrapAtWordBoundaryOrAnywhere
                    width:parent.width
                    smooth:true
                    color:"#333"
                }
            }
        }
    }
}

Si todo sale bien, al correr la demo deberíamos obtener como resultado algo parecido a los que se ve en la siguiente imagen.