Qml: La sintassi, i componenti, gestione del click/touch

In questo capitolo inizieremo ad usare il Qml così come viene offerto dalle Qt, impararemo la sua sintassi di base, l’uso delle proprietà e la gestione degli eventi.

Sintassi

Il Qml è molto semplice, per creare un oggetto si usa le seguente sintassi:

/* Importiamo QtQuick 2.1 per usare gli oggetti base del Qml */
import QtQuick 2.1

Componente /* Questo è un commento */
{
   prop1: 100
   prop2: "red"

   onEvento: {
      /* Eseguiamo un po' di javascript in risposta a questo evento */
   }
}

Come ho detto prima, è un linguaggio di markup, ogni oggetto è fatto da proprietà ed eventi, è possibile inserire componenti uno dentro l’altro per combinare più oggetti grafici, inoltre è possibile gestire le animazioni sulle proprietà e molto altro.

Il nostro primo oggetto

Il componente base del Qml si chiama “Item”, quest’ultimo contiene delle proprietà di base, come le dimensioni, la visibilità, gli ancoraggi e così via.
Il componente “Item” normalmente non è visibile e di solito viene usato come base per nuovi oggetti oppure come semplice contenitore.
Il componente visibile più vicino ad Item è il “Rectangle”, ha le stesse proprietà di “Item”, però aggiunge una proprietà che permette di settanre il colore, noi andremo a visualizzare questo componente al centro dello schermo di una nostra applicazione Sailfish.

Dopo aver creato un progetto, QtCreator ci mostrerà un sorgente simile a questo:

import QtQuick 2.0
import Sailfish.Silica 1.0
import "pages"

ApplicationWindow
{
    initialPage: Component { FirstPage { } }
    cover: Qt.resolvedUrl("cover/CoverPage.qml")
}

Si fa notare che viene usata Silica.
Un’applicazione Sailfish viene “racchiusa” dentro l’oggetto ApplicationWindow, possiede due proprietà principali: “cover” ed “initialPage”, nel nostro caso ci interessa quest’ultima, l’esempio passa un oggetto chiamato “FirstPage” (lasciamo stare Component { } per il momento, verrà visto più avanti), noi dobbiamo scrivere il nostro codice dentro quell’oggeto (che si trova in pages/FirstPage.qml).

Dopo aver aperto il file FirstPage.qml, cancelliamo tutto quello che si trova dentro l’oggetto Page e poi scriviamo:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page
{
    Rectangle
    {
        width: 200
        height: 100
        color: "red"
        anchors.centerIn: parent
    }
}

Questo codice dice che noi vogliamo un rettangolo rosso 200×100, “anchors.centerIn: …” dice di centrare l’oggetto rispetto a quello genitore (che sarebbe l’oggetto Page).
Compiliamo eseguiamo questo programmino dentro il nostro emulatore Sailfish ed avremo il seguente risultato:

Gestione del click/touch

Gli oggetti Qml non rispondono agli eventi fatti da un mouse o da un tocco sullo schermo, siamo noi a dover gestire tutto.
Per nostra fortuna, viene offerto un componente chiamato MouseArea che possiamo inserire dentro l’oggetto interessato per farlo interagire con noi, utilizzeremo l’esempio precedente per far cambiare colore al rettangolo il risposta ad un tocco o click del mouse:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page
{
    Rectangle
    {
        id: rettangolo /* Diamo un nome al nostro componente */
        width: 200
        height: 100
        color: "red"
        anchors.centerIn: parent

        /* La nostra MouseArea che verrà inserita dentro il rettangolo */
        MouseArea
        {
            /* La MouseArea deve essere grande quanto il nostro rettangolo */
            anchors.fill: parent

            /* Creiamo una funzione in risposta ad un click/touch */
            onClicked: {
                if(Qt.colorEqual(rettangolo.color, "red"))
                    rettangolo.color = "blue";
                else if(Qt.colorEqual(rettangolo.color, "blue"))
                    rettangolo.color = "red";
            }
        }
    }
}