QML ListView da JSON

Oggi vediamo come riempire una ListView in QML prendendo i dati in formato JSON dal web.

Per prendere i dati useremo Javascript e AJAX.

Questa è una delle cose che mi piace di più di QML: usare Javascript in una app per desktop!

Prima di tutto vediamo il file main.qml, dove c'è tutta la parte grafica:

import QtQuick 2.0
import QtQuick.Controls 1.0
import "script.js" as Script

ApplicationWindow {
    id: mainWindow
    title: "App"
    visible: true
    width: 600
    height: 600

    Component.onCompleted: Script.load()

    ListModel { id: listModelJson }

    Rectangle {
        height: parent.height
        width: parent.width
        ListView {
            id: listViewJson
            x: 0
            y: 0
            width: 600
            height: 592
            delegate: Rectangle {
                width: parent.width
                height: 70
            }
            model: listModelJson
        }
    }
}

Come vedete tra gli import c'è anche il nostro file Javascript (che dopo andremo a creare).

Poi dopo le impostazioni della finestra usiamo l'evento onCompleted per richiamare la nostra funzione load (che si trova nel file script.js).

Sotto impostiamo il ListModel (anche questo riempito con Javascript).

Poi impostiamo un Rectangle con la ListView.

Bene, a questo punto siamo pronti per vedere la funzione load; create un file JS, che verrà salvato in Other Files.

Dentro avrete una cosa del genere:

function load() {
    listModelJson.clear();
    var xhr = new XMLHttpRequest();
    xhr.open("GET","http://www.sito.com/file.php", true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == xhr.DONE) {
            if (xhr.status == 200) {
                var jsonObject = JSON.parse(xhr.responseText);
                for (var i in jsonObject) {
                    listModelJson.append({
                                             "title" : jsonObject[i].title,
                                             "author" : jsonObject[i].author,
                                             "editor" : jsonObject[i].editor,
                                             "price" : jsonObject[i].price,
                                             "isbn" : jsonObject[i].isbn,
                                             "note" : jsonObject[i].note
                                         });
                }
            }
        }
    }
    xhr.send();
}

Si tratta di una classica chiamata AJAX ad un file remoto che espone i dati in JSON.

Facciamo il parsing della stringa e usiamo un ciclo for per prendere i dati che ci servono.

Questi dati li appendiamo al ListModel (listModelJson).

In esecuzione di programma verrà lanciata la funzione load che si occuperà di riempire il model; questo verrà passato alla ListView.

Un eccellente esempio di interoperabilità tra desktop e web!!

EDIT 19 aprile

Oggi ho avviato un nuovo progetto QML, ma tutto ciò non funzionava, in quanto midiceva che non trovava il file Javascript.

Alla fine ho notato che va inserito nel file qml.qrc; non so dirvi se dipende dalle ultime versioni, ma va modificato anche questo file.

Potete farlo direttamente da QtCreator: tasto destro -> Open in Editor -> Add -> Add Files.