Introduzione a Qt 5¶

Il focus di Qt5¶

Qt 5 è una versione completamente rinnovata rispetto alla release di grande successo di Qt 4. Con la versione 4.8, Qt 4 ha ormai 7 anni. Era quindi il momento di rendere un toolkit eccezionale ancora migliore. Qt 5 è incentrato sui seguenti aspetti:

• Grafica eccellente: Qt Quick 2 si appoggia su OpenGL (ES) e utilizza un’implementazione basata su scene graph. Questa nuova composizione dello stack grafico consente di raggiungere nuovi livelli in termini di effetti grafici, combinati ad una semplicità di utilizzo mai vista prima in questo campo.

• Produttività degli sviluppatori: QML e JavaScript sono gli strumenti principali per la creazione delle UI. Il back-end sarà gestito dal codice in C++. La divisione netta tra JavaScript e C++ consente iterazioni rapide sia per gli sviluppatori front-end, che possono così concentrarsi sulla creazione di interfacce utente eleganti, sia per gli sviluppatori back-end in C++, che si possono concentrare su stabilità, performance ed estensioni del runtime.

• Portabilità cross-platform: Con la tecnologia consolidata della Qt Platform Abstraction, è ora possibile portare Qt su una gamma più ampia di piattaforme in maniera più semplice e rapida. Qt 5 si fonda sul concetto di Qt Essentials e di Add-ons, che consente agli sviluppatori OS di concentrarsi sui moduli essenziali e permette inoltre di ottenere dei runtime di dimensioni inferiori.

• Sviluppo Open: Qt è ora veramente un progetto di tipo open-governance, ospitato su Qt-Project. Lo sviluppo è open e guidato dalla community.

Qt Quick¶

Qt Quick è il termine onnicomprensivo per la tecnologia dell’interfaccia utente utilizzata in Qt5. Qt Quick di per sé è una collezione di diverse tecnologie:

• QML - Linguaggio markup per interfacce utente

• JavaScript - Il linguaggio di scripting dinamico

• Qt C++ - La libreria c++ avanzata altamente portabile

Similmente ad HTML, QML è un linguaggio di markup. E’ costituito da tags che in QtQuick vengono chiamati elementi, i quali vengono racchiusi in parentesi graffe Item {}. E’ stato progettato fin dall’origine per la creazione di interfacce utente, per la velocità e per essere di facile lettura per gli sviluppatori. L’interfaccia utente può essere potenziata tramite l’utilizzo di codice JavaScript. Qt Quick è facilmente estendibile con funzionalità native custom tramite Qt C++. Sinteticamente, la UI dichiarativa viene chiamata front-end e le parti native vengono chiamate back-end. La distinzione permette di separare le operazioni native e computazionalmente onerose di un’applicazione dalla parte dell’interfaccia grafica.

In un progetto tipico, il front-end viene sviluppato in QML/JavaScript, mentre il codice back-end, che si interfaccia col sistema e si occupa del lavoro pesante, viene sviluppato usando Qt C++. Ciò permette una divisione naturale tra gli sviluppatori più orientati al design e gli sviluppatori funzionali. Tipicamente, il back-end viene testato utilizzando il testing framework proprio di Qt, e viene quindi esportato per l’utilizzo da parte degli sviluppatori front-end.

Assimilare un’Interfaccia Utente¶

Usando QtQuick, creeremo ora una semplice interfaccia utente che dimostra alcuni aspetti del linguaggio QML. Il risultato finale sarà una girandola con le pale che ruotano.

Cominciamo da un documento vuoto che chiamiamo main.qml. Tutti i file QML conterranno l’estensione .qml. Essendo un linguaggio di markup (come l’HTML) un documento QML deve avere uno e uno solo elemento radice che, nel nostro caso, è l’elemento Image, che ha larghezza e altezza basate sulla geometria dell’immagine di sfondo:

import QtQuick 2.5

Image {
    id: root
    source: "images/background.png"
}

Poiché il QML non pone alcun tipo di restrizione sul tipo di elemento che può essere l’elemento radice, utilizziamo un elemento Image con la proprietà source (sorgente) settata all’immagine di background.

Gli elementi in primo piano dell’interfaccia utente (l’asta e la girandola) sono localizzati in immagini separate.

L’asta (pole) va posizionata al centro orizontale dello sfondo, verso il basso. E la girandola (pinwheel) va posizionata al centro dello sfondo.

Di regola l’interfaccia utente sarà composta da molti elementi di tipo differente, e non solo immagini come in questo esempio.

Image {
    id: root
    ...
    Image {
        id: pole
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        source: "images/pole.png"
    }

    Image {
        id: wheel
        anchors.centerIn: parent
        source: "images/pinwheel.png"
    }
    ...
}

Per posizionare la girandola al centro utilizziamo una proprietà complessa chiamata anchor. L’ancoraggio permette di specificare relazioni geometriche tra oggetti che hanno relazione padre-figlio e fratelli. Es.: Posizionami al centro di un altro elemento (anchors.centerIn:parent). Da entrambe le parti, sono disponibili le seguenti relazioni: left, right, top, bottom, centerIn, fill, verticalCenter e horizontalCenter. E’ necessario che le relazioni siano concordanti: per esempio, non ha senso ancorare il lato sinistro (left) di un elemento al lato superiore (top) di un altro elemento.

Quindi, andiamo a settare la girandola come centrata rispetto al genitore (parent), l’immagine di sfondo.

Per rendere questa dimostrazione più interessante, potremmo ora rendere la scena interattiva. L’idea è quella di rotare la girandola quando l’utente preme il tasto del mouse da qualche parte nella scena.

Per fare questo, utilizziamo l’elemento MouseArea e gli attribuiamo le stesse dimensioni dell’elemento radice.

Image {
    id: root
    ...
    MouseArea {
        anchors.fill: parent
        onClicked: wheel.rotation += 90
    }
    ...
}

L’area del mouse emette dei segnali (signals) quando l’utente clicca al suo interno. E’ possibile intercettare questo segnale sovrascrivendo la funzione onClicked. Nel caso specifico, facciamo riferimento alla girandola e ne modifichiamo la rotazione di +90 gradi.

Ora la girandola ruota, ma non in modo fluido. La proprietà rotation cambia immediatamente. Invece, vorremmo che la proprietà cambiasse di 90 gradi in un arco di tempo. A questo punto entrano in gioco le animazioni. Un’animazione definisce come il cambio di una proprietà debba essere distribuito lungo un periodo di tempo. Per abilitare questo comportamento, utilizziamo un tipo di animazione chiamato property behavior. Il Behaviour (comportamento) specifica un’animazione per una certa proprietà che si applica ad ogni cambiamento di quella proprietà. In breve, ogni volta che la proprietà cambia, l’animazione viene lanciata. Questo è solo uno dei tanti modi che esistono per dichiarare un’animazione in QML.

Image {
    id: root
    Image {
        id: wheel
        Behavior on rotation {
            NumberAnimation {
                duration: 250
            }
        }
    }
}

Ora, ogniqualvolta la proprietà rotation della girandola cambia, essa verrà animata utilizzando una NumberAnimation della durata di 250 ms. Ovvero, ogni rotazione di 90 gradi impiegherà 250 ms.

Ora la girandola ha già un aspetto molto migliore. Spero che questo esempio ti abbia dato una prima impressione di come funzioni la programmazione in Qt Quick.

I moduli Qt¶

I Qt Essentials modules sono obbligatori per ogni piattaforma che supporta Qt. Essi forniscono le basi per sviluppare un’applicazione Qt 5 moderna utilizzando Qt Quick 2.

Core-Essential Modules

Il set minimo di moduli Qt 5 per iniziare la programmazione in QML.

Moduli Addon Qt

Oltre ai moduli essenziali, Qt offre agli sviluppatori software moduli addizionali che non fanno parte della distribuzione. Ecco un breve elenco di moduli addizionali disponibili.

• Qt 3D - Una serie di API che rendono la programmazione grafica 3D semplice e dichiarativa.

• Qt Bluetooth - API in C++ e QML per piattaforme che utilizzano la tecnologia wireless Bluetooth.

• Qt Contacts - API in C++ e QML per accedere alle rubriche e ai database dei contatti.

• Qt Location - Mette a disposizione posizionamento, mappe, navigazione e ricerca dei luoghi tramite interfacce QML e C++. back-end NMEA per il posizionamento

• Qt Organizer - API in C++ e QML per accedere agli eventi dell’agenda (memo, eventi, etc.).

• Qt Publish and Subscribe

• Qt Sensors - Accesso ai sensori tramite interfacce QML e C++.

• Qt Service Framework - Permette alle applicazioni di leggere, sfogliare e sottoscrivere notifiche di cambiamento.

• Qt System Info - Per accedere alle informazioni e capacità del sistema.

• Qt Versit - Supporto per i formati vCard e iCalendar.

• Qt Wayland - Solo per Linux. Include l’API Qt Compositor (server), e il plugin per piattaforme Wayland (clients).

• Qt Feedback - Riscontro tattile e audio alle azioni degli utenti.

• Qt JSON DB - Un sistema di immagazzinamento dati non basato su SQL.

Piattaforme Supportate¶

Qt supporta numerose piattaforme. Tutte le maggiori piattaforme sia desktop che embedded sono supportate. Tramite la Qt Application Abstraction, oggi risulta più semplice portare Qt sulla tua piattaforma, se necessario.

Testare Qt 5 su una piattaforma è dispendioso in termini di tempo. Un sottoinsieme delle piattaforme è stato selezionato dal qt-project per costituire il gruppo delle piattaforme di riferimento. Queste piattaforme vengono testate approfonditamente per assicurarne la qualità. Ma attenzione: non esiste codice completamente privo di errori.