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).