Usare il BusyIndicator in QML

Il BusyIndicator, in QML, è un componente che ci permette di visualizzare il classico loading quando avviamo una determinata operazione.

Di primo acchitto non è proprio intuitivo il suo utilizzo.

Oggi ne vediamo un esempio; lo avviaremo alla pressione di un tasto che avvia una richiesta remota tramite Javascript.

Quindi, questo il componente:

    BusyIndicator {
        running: false
        id: busyGlobal
        anchors.centerIn: parent
    }

Come vedete abbiamo impostato il running su false, in modo che inizialmente sia invisibile.

Poi su un Button avviamo lo script Javascript, che farà le sue operazioni.

Ad esempio:

var baseUrl = "http://localhost:8080/";
var xhr;

function cercaConto() {
    if (val !== '' && val.length >= 4) {
        busyGlobal.running = true;
        xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                if (xhr.status == 200) {
                    var jsonObject = JSON.parse(xhr.responseText);
                    for (var i in jsonObject) {
                        console.log(.....);
                    }
                    busyGlobal.running = false;
                } else {
                    busyGlobal.running = false;
                    messageDialog.show("ERRORE", "NESSUNA CONNESSIONE O SERVIZIO INATTIVO!");
                }
            }
        }
        xhr.open("GET", baseUrl, true);
        xhr.send();
    } else {
        messageDialog.show("ERRORE", "INSERIRE UN VALORE DI ALMENO 4 CARATTERI!");
    }
}

Qui eseguiamo una richiesta AJAX.

In questo contesto non è molto importante cosa ci facciamo con la risposta; quello che è importante è notare come avviamo e stoppiamo il BusyIndicator.

Enjoy!