Introduzione a Qt Quick™ - sereno-labs

Edizione BETA 

INTRODUZIONE A QT QUICK 

2011 | Paolo Sereno 

Introduzione a Qt Quick -beta- Page 1

Introduzione 

a 

Qt Quick 

Edizione BETA 

Paolo Sereno 


EDIZIONE BETA: Giugno 2011 

Nokia, Qt, Qt Quick ed i rispettivi loghi sono marchi registrati di 

Nokia Corporation in Finlandia e resto del mondo. 

L’immagine di copertina è una mia creazione, ottenuta mediante un 

software di computer graphics. 

Questo document è rilasciato con licenza Creative Commons 

Attribution-Share Alike 3.0. 

Per ulteriori informazioni potete trovare a questo indirizzo i 

termini della licenza: 

http://creativecommons.org/licenses/by-sa/3.0/legalcode 


Indice 

Prefazione ................................................................................................................................................................ 6 

Cosa è Qt Quick ..................................................................................................................................................... 7 

Breve storia .............................................................................................................................................................. 8 

A cosa serve ........................................................................................................................................................... 11 

Procurarsi Qt Quick ............................................................................................................................................. 12 

Installazione MS Windows ............................................................................................................................. 12 

Una prima occhiata a Qt Creator ....................................................................................................................... 21 

QML ................................................................................................................................................................... 25 

Un minimo di sintassi ...................................................................................................................................... 27 

Elementi base ........................................................................................................................................................ 28 

Rettangoli........................................................................................................................................................... 28 

Colori ................................................................................................................................................................. 33 

Gradienti di colore ....................................................................................................................................... 36 

Immagini ............................................................................................................................................................ 39 

Trattamento delle immagini ....................................................................................................................... 41 

Testo................................................................................................................................................................... 43 

Input Testuali .................................................................................................................................................... 45 

Comporre gli elementi di base ............................................................................................................................ 46 

Anchors ............................................................................................................................................................. 47 

Margins .............................................................................................................................................................. 51 

Interazione utente ................................................................................................................................................. 54 

Mouse ................................................................................................................................................................. 54 

MouseArea .................................................................................................................................................... 54 

Mouse Hover ................................................................................................................................................ 58 

Tastiera ............................................................................................................................................................... 60 

Esercizio ............................................................................................................................................................ 63 

Animazioni ............................................................................................................................................................. 64 

NumberAnimation ........................................................................................................................................... 65 

PropertyAnimation .......................................................................................................................................... 67 

Easing Curve ................................................................................................................................................ 69 

ColorAnimation ................................................................................................................................................ 71 

RotationAnimation .......................................................................................................................................... 73 

Gruppi di animazioni ....................................................................................................................................... 76 

SequentialAnimation ................................................................................................................................... 76 

ParallelAnimation ........................................................................................................................................ 78 

PauseAnimation................................................................................................................................................ 79 

Stati e Transizioni ................................................................................................................................................. 79 

Custom Items ........................................................................................................................................................ 83 

Definire un Custom Item ................................................................................................................................ 83 

Usare un Custom Item .................................................................................................................................... 84 

Proprietà di un Custom Item.......................................................................................................................... 85 

Signals&Slots ......................................................................................................................................................... 88 

Segnali di un Custom Item.............................................................................................................................. 91 

Conclusione ........................................................................................................................................................... 92 


Presentazione dell’edizione “beta” 

La decisione di rilasciare una versione beta di questo libro, nasce 

dall’esigenza di condividerne i contenuti sin dalle fasi iniziali della 

sua stesura. In questo modo, tutti i lettori possono contribuire 

lanciando idee o chiedendo approfondimenti circa gli aspetti ritenuti 

più interessanti e partecipare così alla realizzazione di un libro 

chiaro e completo su questo nuovo ambiente open source per la 

creazione di applicazioni software per smartphone, dispositivi 

embedded e desktop. 

Per inviare commenti, richieste o chiarimenti, potete lasciarmi un 

feedback sulla pagina “contatti” del mio blog: 

http://www.sereno-labs.com/contact 

Oppure è anche possibile iscriversi al forum della community che ho 

fondato alcuni anni or sono: 

http://www.qt-italia.org/forum/ 

Su questo forum, sarà possibile scambiare pareri, dubbi ed opinioni 

con i circa 450 iscritti (in continuo aumento) che frequentato la 

community. 

Approfitto inoltre di questa occasione per comunicare che da 

qualche tempo ho iniziato a presentare alcuni miei talk su Qt, Qt 

Quick e le tecniche per la realizzazione di GUI evolute, durante gli 

eventi “open source” organizzati dai diversi Linux User Group in 

Italia; chi è interessato ad organizzare una mia partecipazione a 

questi eventi mi può mandare un messaggio all’indirizzo sopra. 

paolo 


PREFAZIONE 

Da diversi anni i cultori del movimento open source e coloro che per 

professione o per passione scrivono applicazioni per PC, cellulari e 

tablet seguono le vicende dell’ambiente di sviluppo software 

gratuito ed open source Qt ( http://qt.nokia.com/). 

Nato originariamente come insieme di librerie di sviluppo software 

multipiattaforma, ovvero insieme di funzioni software disponibili per 

i più comuni sistemi operativi, da alcuni anni il Qt Application 

Framework è diventato l’ambiente di lavoro di riferimento per tutti 

coloro che scrivono applicazioni di interfaccia grafica (e non solo). 

A partire dal 2010 si è affermato un nuovo modo di scrivere 

applicazioni multimediali con Qt, l’introduzione di Qt Quick ha 

permesso infatti di estendere l’ecosistema di sviluppatori software 

anche a chi non ha particolari competenze di programmazione, 

metodologie object oriented e sviluppo software. Con Qt Quick è 

sufficiente imparare un numero limitato di regole e grazie alla 

disponibilità di strumenti informatici di ausilio alla creazione di 

programmi, chiunque può dar sfogo alla propria creatività e scrivere 

applicazioni di effetto. E’ sufficiente un computer di medie 

prestazioni su cui installare gratuitamente l’insieme degli strumenti 

necessari e la voglia di mettersi in gioco (o mettersi a giocare). 


COSA È QT QUICK 

E’ parte del Qt Application framework di Nokia ed è un insieme di 

strumenti per la realizzazione rapida (da cui il nome Quick) di 

applicazioni multimediali multipiattaforma. 

Qt Quick è composto da: 

Un linguaggio (QML) 

Una piattaforma di supporto allo sviluppo (Qt application 

framework) 

Un ambiente di sviluppo (Qt Creator) 

Qt Quick è disponibile gratuitamente sul sito Nokia e può essere 

usato da chiunque per scrivere applicazioni per PC, telefonini, tablet 

e dispositivi embedded. La particolare licenza di Qt Quick (GPL v3, 

LGPL v2) lo rende uno strumento aperto per lo sviluppo di qualsiasi 

applicazione evoluta senza la necessità di conoscere linguaggi di 

programmazione e i molti dettagli tipici dello sviluppo software. 


BREVE STORIA 

Il toolkit Qt fu inizialmente sviluppato dai fondatori della Trolltech, 

Haavard Nord ed Eirik Chambe Eng. Lo sviluppo di un toolkit in 

C++ per la realizzazione di Graphical User Interface (GUI) iniziò nel 

1988, per conto di un'azienda svedese, che commissionò il lavoro ai 

due ricercatori e due anni più tardi, venne completato lo sviluppo di 

un'applicazione per la gestione di una banca dati di immagini, 

ottenute da apparecchiature mediche ad ultrasuoni; poiché questa 

applicazione doveva permettere l'esecuzione dell'interfaccia utente 

su sistemi MS Windows, Mac e UNIX, gettò le basi di quello che 

oggi è uno dei punti di forza di Qt: la portabilità del codice sorgente 

su diverse piattaforme o, come si dice correntemente, lo sviluppo 

“cross-platform”. 

Nel 1991 si iniziò a scrivere le prime classi di Qt a seguito dell'idea 

di implementazione del meccanismo di Signals&Slots, un semplice 

ma potente modo per far comunicare tra loro le classi del toolkit. 

Nel 1993, dopo aver trascorso due anni a lavorare sul progetto 

senza contratti e senza stipendio, Haavard ed Eirik resero 

disponibile il primo kernel grafico e decisero di entrare in affari 

presentando al mondo “il miglior GUI toolkit in C++ 

multipiattaforma”. 

Il 1994 non iniziò nel migliore dei modi e si dovette attendere sino 

ad aprile 1995 per avere il primo contratto; il nome Qt venne scelto 

perché la lettera 'Q', tra i caratteri disponibili su Emacs, piaceva ad 

Haavard e la lettera 't' venne aggiunta per rappresentare la parola 

inglese “toolkit” (letteralmente l'insieme di strumenti di lavoro). 

Il 20 maggio venne rilasciata la versione 0.90 del toolkit e resa 

disponibile su sunsite.unc.edu, sei giorni dopo venne annunciata sul 

newsgroup comp.os.linux.announce. 

Questa fu la prima release pubblica di Qt, essa poteva essere usata 

sia per lo sviluppo di interfacce grafiche per MS Windows, sia per 


Linux ed offriva le stesse API su entrambe le piattaforme. Qt fu 

reso disponibile secondo due licenze d'uso sin dal primo giorno: la 

licenza commerciale serviva per lo sviluppo di applicazioni 

commerciali o “close source” e la free software edition per lo 

sviluppo di applicazioni open source. 

Nel marzo 1996, l'agenzia spaziale europea (ESA) divenne il 

secondo cliente della Trolltech e da questo momento iniziò un 

periodo che portò in breve tempo al rilascio della versione 0.97 

(maggio), della versione 1.0 (settembre) e prima della fine 

dell'anno si giunse alla versione 1.1 usata da otto diversi clienti. 

Nell'aprile 1997 il fondatore del progetto KDE, Mattias Ettrich decise 

di adottare Qt per il suo progetto e, con il rilascio della versione 

1.2, il toolkit Qt divenne lo standard “de facto” per la realizzazione 

di GUI in C++ per Linux. 

Nel 1998, Mattias decise di entrare a far parte del team di 

sviluppatori Trolltech e contribuì al rilascio della versione 2.0. 

Questa versione conteneva un gran numero di cambi 

nell'architettura e rappresentò un notevole balzo in avanti nella 

realizzazione di un toolkit stabile e maturo; vennero aggiunte 

quaranta nuove classi, tra cui il supporto per l'UNICODE e 

nell'agosto del 1999 vinse il LinuxWorld award come miglior libreria 

software. 

L'anno 2000 segna l'ingresso sul mercato dell'ambiente 

Qt/embedded, concepito appositamente per supportare la 

piattaforma Linux/embedded. In quell'anno, Trolltech decise di 

cambiare la sua politica di licenza da QPL (politica open source 

appositamente redatta dalla Trolltech) a favore della ben più nota 

ed accettata GPL. Questo cambiamento venne accolto con 

entusiasmo dalle comunità open source (KDE per prima) di tutto il 

mondo. 

Il nuovo attesissimo balzo in avanti avvenne nel 2001 con il rilascio 

della versione 3.0. Qt era ora disponibile per MS Windows, UNIX, 


Linux, Embedded Linux e Mac OS X. Qt 3.0 aggiunse quarantadue 

nuove classi e il codice superò le 500.000 linee. 

Dal 2001 al 2005 si è passati attraverso diverse releases che hanno 

fatto del toolkit Qt un mito tra gli sviluppatori (open source e non) 

di tutto il mondo, sia per le eccellenti caratteristiche tecniche del 

prodotto, sia per la politica di rilascio del prodotto aperta e 

lungimirante 

Nel 2008 Nokia acquista Trolltech e rilascia Qt sotto LGPL. Al 

momento della stesura di questo libro la release di Qt è la 4.7.3. 


A COSA SERVE 

Qt Quick è un ambiente di sviluppo molto semplice che non richiede 

particolare esperienza di programmazione e che può essere usato 

per scrivere applicazioni per telefonini, tablet e qualsiasi dispositivo 

embedded compatibile con l’application framework Qt di Nokia. Qt 

Quick non richiede l’uso di compilatori perchè un linguaggio basato 

su JavaScript e quindi viene interpretato dalla macchina sui cui 

viene eseguito. 

Il suo scopo è quindi quello di permettere a chiunque di cimentarsi 

nella realizzazione di applicazioni grafiche (giochi, strumenti di 

social network, gestione dei dati personali etc...) in breve tempo e 

con poca fatica. 


PROCURARSI QT QUICK 

Come scritto in precedenza Qt Quick è uno strumento gratuito, 

messo a disposizione da Nokia con l’intento di creare un ecosistema 

di programmatori in grado di scrivere applicazioni per i propri 

cellulari (ma non solo cellulari) ed aumentare la massa critica dei 

suoi utenti per proteggere il mercato da famosi concorrenti. 

INSTALLAZIONE MS WINDOWS 

Per procurarsi Qt Quick occorre per prima cosa collegarsi a questo 

indirizzo: 

http://qt.nokia.com/qtquick/ 

e scaricare il seguente file (corrispondente alla versione Qt SDK 1.1 

al momento della stesura di questo libro): 

http://get.qt.nokia.com/qtsdk/Qt_SDK_Windows_online_v1_1_en.exe 

Dopo aver scaricato il file di installazione, eseguirlo mediante 

doppio click del mouse da file explorer. 

La prima finestra che ci verrà proposta sarà: 


Premiamo Next ed avremo: 


Se vogliamo installare Qt nella cartella C:\QtSDK possiamo 

mantenere l’impostazione predefinita, altrimenti cambieremo il path 

in base alla nostra preferenza. 

Lasciamo tutte le altre impostazioni invariate, avremo quindi il 

check sulla installazione di Default (l’opzione Custom è per utenti 

esperti) e non andremo ad attivare il comando di Remove old Qt 

Creator settings. A questo punto premiamo Next. 

Per poter utilizzare Qt è necessario leggere ed accettare la licenza 

proposta. 


A questo punto possiamo premere Next. 


Possiamo lasciare Qt SDK come shortcut nel nostro menu di avvio 

delle applicazioni e premere quindi nuovamente Next. 


E finalmente possiamo avviare l’installazione. 


L’operazione di installazione richiederà un certo tempo, al termine 

del quale verrà presentata la finestra seguente: 


Premiamo ora Next. 


A questo punto il nostro ambiente di lavoro è pronto per l’uso. 

Proviamo ora a fare pratica con l’ambiente di sviluppo, ovvero Qt 

Creator. 


UNA PRIMA OCCHIATA A QT CREATOR 

Qt Creator è l’ambiente di sviluppo integrato di Nokia per sviluppare 

applicazioni Qt Quick in modo rapido e semplice. 

Lanciamo Qt Creator dal menu start: 

La finestra principale di Qt Creatorè così composta: 

Sulla sinistra è visibile la toolbar delle modalità di funzionamento: 

Welcome: modalità introduttiva. E’ possibile creare un 

progetto,aprirne uno esistente o richiamare progetti di esempio per 

Qt e Qt Quick 

Edit: modalità editor di testo 

Design: modalità per il design grafico dell’interfaccia utente 

Debug: modalità di debug dell’applicazione 


Projects: modalità di impostazioni del progetto corrente 

Help: modalità per la visualizzazione della documentazione in linea. 

Sulla stessa toolbar, nella parte inferiore trovano posto i comandi 

di Build, Run e Debug 

La parte inferiore della finestra riporta invece un controllo di input 

per le operazioni di ricerca e successivamente quattro pulsanti di 

comando per la visualizzazione degli output nei seguenti contesti: 

Build Issues: messaggi di output a seguito di problemi nelle 

operazioni di Build dell’applicazione 


Search Result: selezionando questo comando si possono 

visualizzare i risultati dell’ultima ricerca 

Application Output: visualizzazione degli output da console 

dell’applicazione in esecuzione 

Compile Output: messaggi di errore nella fase di compilazione dei 

sorgenti C++ 

Prima di procedere con la presentazione del linguaggio QML, 

proviamo a lanciare un esempio tra quelli forniti con il l’ambiente Qt 

SDK. 

In modalità Welcome, selezioniamo gli esempi di Qt Quick e fra essi 

QML UI Components. L’esempio che andremo a selezionare è 

“Flipable”, come visibile in figura seguente. 


Dopo aver selezionato l’esempio, il progetto Flipable verrà aperto. 

Premiamo ora la combinazione di tasti CTRL+R, corrispondente al 

comando di Run o in alternativa facciamo click sul comando run. 

In breve tempo comparirà sul nostro monitor la finestra 

dell’applicazione flipable: 

Per comprendere il funzionamento dell’esempio proviamo a fare 

click su una qualsiasi delle due carte da gioco presenti nella 

finestra; verrà proposta un’animazione interamente realizzata con 

Qt Quick mediante il linguaggio QML. 


QML 

QML è un linguaggio dichiarativo per elementi di interfaccia utente, 

esso cioè descrive di quali elementi si compone l’interfaccia, come 

sono costruiti questi elementi e come si comportano in reazione agli 

eventi generati dall’utente (pressioni sul display touchscreen etc...). 

Una qualsiasi interfaccia utente realizzata con QML può essere 

schematizzata come una gerarchia ad albero di tutti gli elementi di 

interfaccia caratterizzati da proprietà peculiari. 

Rectangle 

Text Image 

Che si traduce in questa struttura della nostra applicazione 


Rectangle 

(proprietà: dimensioni, colore...) 

Text 

(proprietà: font, colore, dimensioni) 

Image 

(proprietà: posizione, file immagine) 

Che fornirà sul display del nostro telefonino o tablet o dispositivo 

compatibile un’interfaccia molto semplice di questo tipo: 


UN MINIMO DI SINTASSI 

Prima di iniziare a scrivere i nostri primi programmi con Qt Quick, 

dobbiamo sapere che occorre rispettare un minimo numero di 

regole peer rispettare la sintassi del linguaggio QML. 

Per ora ci basti sapere che un qualsiasi elemento di Qt Quick è 

composto dal suo identificativo e poi da un corpo contenente le sue 

proprietà. In altre parole 

Elemento { 

.... 

} 


ELEMENTI BASE 

RETTANGOLI 

Gli elementi di interfaccia utente basilari del linguaggio QML, il 

linguaggio di programmazione impiegato da Qt Quick sono molto 

semplici: 

Rettangoli 

Colori 

Immagini 

Testo 

Mediante questi semplici elementi è già possibile realizzare alcuni 

programmi di esempio per capire come funziona Qt Quick. 

Iniziamo con il nostro primo esempio. Apriamo un nuovo file con Qt 

Creator ed avremo ad esempio il nostro primo file “prova.qml” 

Per prima cosa occorre importare l’ambiente Qt Quick mediante 

l’istruzione seguente: 

import QtQuick 1.0 

grazie a questa istruzione, Qt Creator è ora in grado di riconoscere 

la sintassi del programma che andiamo a scrivere ed impiegare le 

interfacce di programmazione (API) necessarie. Il fatto di 

specificare una versione di Qt Quick consente di ottenere le 

funzionalità desiderate e garantire che il comportamento 

dell’applicazione che stiamo scrivendo non cambi. 


Scriviamo ora il nostro primo rettangolo: 

Rectangle { 

width: 640; height:480 

color: "green" 

} 

Proviamo ora ad eseguire questo primo esempio e premiamo il 

tasto (triangolo verde) sulla destra in basso del nostro monitor. Qt 

Creator inizierà ad eseguire il codice che abbiamo scritto e ci 

presenterà questa finestra a video: 

Come possiamo osservare, è stata creata una finestra di colore 

verde. Questa finestra contiene il nostro rettangolo di 640x480 

pixel di colore verde. 

Una proprietà interessante dei rettangoli di Qt Quick è data dalla 

possibilità di eseguire degli annidamenti, in tal modo si possono 


combinare elementi uno all’interno dell’altro. Per capire il concetto 

di annidamento di elementi modifichiamo il nostro programma nel 

modo seguente: 


Rectangle { 



} 

Rectangle { 

color: "red" 

width : 320; height: 240 

x: 160; y:120 

} 

A questo punto premendo il tasto di esecuzione programmi 

(triangolo verde) avremo la finestra di figura seguente: 


Come si può osservare, l’annidamento del secondo rettangolo 

all’interno del corpo di istruzioni del primo ha generato 

graficamente un secondo rettangolo (di colore rosso) all’interno del 

nostro primo rettangolo di colore verde. 

Infatti, il secondo elemento che abbiamo aggiunto al nostro 

programma è un rettangolo di colore rosso, di dimensioni 320x240 

(width: 320; height: 240) posizionato in un punto ben preciso 

all’interno del rettangolo contenitore; le coordinate di questo punto 

sono infatti x: 160; y: 120 

Rectangle { 

color: "red" 


x: 160; y:120 

} 

Prima di proseguire occorre fare una precisazione sul sistema di 

coordinate usato da Qt Quick. Come abbiamo visto, specificando le 

proprietà del rettangolo rosso x: 160; y: 120, abbiamo eseguito un 

posizionamento del vertice “alto-sinistro” del rettangolo alle 

coordinate 160,120. Il sistema di coordinate a due dimensioni di Qt 

Quick è il seguente: 


Ovvero il punto più alto è più a sinistra corrisponde all’origine del 

sistema di coordinate. 

Per comprendere meglio questo concetto proviamo a modificare il 

secondo rettangolo nel modo seguente: 

Rectangle { 

color: "red" 


x: 0; y: 0 

} 

Premiamo ora il tasto di esecuzione ed avremo: 

Il nostro secondo rettangolo rosso che è stato posizionato alle 

coordinate X:0 e Y:0 ora si trova nella parte più in alto e a sinistra 

del rettangolo contenitore. 


COLORI 

Per gli esempi di paragrafo precedente abbiamo impiegato due 

rettangoli di colore rosso e verde. Qt Quick permette di definire i 

colori impiegando 3 differenti sintassi. 

Il metodo più diretto ed immediato consente di specificare i colori 

come valori testuali (stringhe) corrispondenti ai nomi dei colori 

nella lingua inglese (“red”, “green”, “blue”). Questo metodo, 

benchè semplice non consente di specificare una vasta gama di 

colori. I colori predefiniti sono infatti in numero limitato e sono 

riportati nella tabella seguente: 

 

Un modo più efficace per specificare i colori è rappresentato dall’uso 

di una terna di numeri corrispondenti ai livelli dei colori primari 

(rosso, verde e blu) che compongono il colore che si vuole ottenere. 

In tal caso la sintassi da impiegare è la seguente: 

# 

Dove rr, gg, bb sono valori esadecomali espressi su due digits. 

Avremo pertanto 256 possibili combinazioni (da 00 a FF) per ogni 

colore primario, per un totale di 2 ^24 ovvero (16.777.216) 

tonalità di colore. 

Un terzo modo per specificare i colori impiega una funzione messa a 

disposizione dall’ambiente di programmazione Qt, ovvero la 

funzione rgba che consente di specificare oltre ai livelli dei clori 

primari (r,g,b), anche il valore di opacità del colore stesso. I valori 

di opacità che possono essere espressi vanno dal valore 0.0 

(trasparente) al valore 1.0 (massima opacità). 

Per specificare un colore mediante la funzione rgba la sintassi è la 

seguente: 

Qt.rgba(r,g,b,a) 


Alcuni esempi sono quindi 

Qt.rgba(0, 0, 0, 1) //colore nero con massima opacità 

Qr.rgba(0, 1, 0, 1) //colore verde con massima opacità 

Qr.rgba(0, 1, 0, 0.5) //colore rosso con opacità del 50% 

Proviamo ora a modificare il nostro secondo rettangolo in questo 

modo: 

Rectangle 

{ 

color: Qt.rgba(1,0,0,0.5) 


x: 0; y:0 

} 

E la nostra applicazione sarà 


Proviamo ora ad eseguire una combinazione delle informazioni 

riportate in questo paragrafo scrivendo questo programma QML: 


Rectangle 

{ 



Rectangle 

{ 

color: "red" 


x: 140; y:120 

} 

Rectangle 

{ 

color: "#00ff00" 


x: 260; y:120 

} 

Rectangle 

{ 

color: Qt.rgba(0,0,1,1) 


x: 380; y:120 

} 

} 

Il risultato saranno 3 rettangoli affiancati, uno di coore rosso, uno 

di colore verde e uno di colore blu. 


GRADIENTI DI COLORE 

Uno degli effetti più interessanti per rendere gradevoli le interfacce 

utente è l’uso di gradienti di colore. I colori “solidi” come abbiamo 

visto a paragrafo precedente non si prestano per mimare effeti di 

ombreggiature o addirittura dare agli elementi dell’interfaccia un 

aspetto metallico, plastico o liquido. Qt Quick ci consente di 

specificare dei gradienti di colore per rendere più interessanti gli 

oggetti grafici delle nostre interfacce mediante una sintassi del 

linguaggio QML molto semplice. 

Riprendiamo il nostro esempio e questa volta usiamo un gradiente: 


Rectangle 

{ 


gradient: Gradient { 

GradientStop { 

position: 0.0; color: "blue" 


} 

} 

} 


position: 1.0; color: "green" 

} 

Il risultano che otteniamo è il seguente: 

Mediante la sintassi 



position: 0.0; color: "blue" 

} 


position: 1.0; color: "green" 

} 

} 

Specifichiamo quindi un gradiente lineare dal colore blu al colore 

verde. 


Un gradiente in Qt Quick è infatti costituito da un certo numero di 

punti (o position) in cui viene fissato un colore. Nel nostro caso, 

l’origine del gradiente è di colore blu (position: 0.0; color: "blue") 

e la fine del gradiente, corrispondente al valore di position 1.0 è di 

colore verde (position: 1.0; color: "green"). 

Complichiamo ora l’esempio visto prima aggiungendo un ulteriore 

punto o posizione: 


Rectangle 

{ 




position: 0.0; color: "gray" 

} 


position: 0.5; color: "white" 

} 



} 

} 

} 

Abbiamo ora tre positioni 



} 


position: 0.5; color: "white" 

} 



} 

In origine il gradiente assume colore grigio (“gray”); al centro, 

ovvero in position : 0.5 assume il colore bianco (“white”) e al 

termine (position: 1.0) nuovamente il colore grigio. Il risultato di 

tale gradiente sarà: 


IMMAGINI 

Il caricamento delle immagini è una funzione molto semplice e 

potente di Qt Quick. Un’immagine può rappresentare lo sfondo di 

una nostra applicazione o un qualsiasi controllo grafico (pulsanti, 

barre di scorrimento etc...). 

Vediamo come caricare un’immagine in Qt Quick. 


Rectangle 

{ 


color: "white" 

Image { 

x:270; y:225 

source: "image.png" 

} 

} 


La sintassi QML per caricare un file immagine è: 

Image { 

} 

 

Nel nostro caso 

Image { 

x:270; y:225 


} 

Abbiamo specificato una posizione dell’immagine all’interno del 

rettangolo contenitore mediante x:270; y:225 ed abbiamo indicato 

il file contenente l’immagine mediante source: "image.png". 

Come risultato otterremo la segunete finestra: 


TRATTAMENTO DELLE IMMAGINI 

Qt Quick consente di ridimensionare e ruotare le immagini. 

Ridimensionamento 

Per ridimensionare un’immagine è sufficiente definire un fattore di 

scala mediante la sintassi scale:. 

Nell’esempio sopra riportato avremo pertanto 


Rectangle 

{ 



Image { 

x:270; y:225 


scale: 3.0 

} 

} 

Il cui risultato è visibile in figura seguente: 


Come si può osservare, la dimensione dell’immagine è 

notevolmente aumentata in consweguenze del fatto che è stato 

specificato un fattore di scala uguale a 3.0. 

Rotazione 

Per ruotare un’immagine è sufficiente definire un valore di rotazione 

espresso in gradi, mediante la sintassi rotation:. 

Il nostro esempio diventerà perciò: 


Rectangle 

{ 



Image { 

x:270; y:225 


rotation: 45.0 

} 

} 

Il cui risultato è visibile in figura seguente: 


Come si può osservare, l’immagine risulta ruotata in senso orario di 

45 gradi. 

TESTO 

Un elemento molto importante di qualsiasi interfaccia utente è il 

testo. Il testo viene usato per visualizzare informazioni o per 

richiedere l’inserimento di dati. Qt Quick fornisce un semplice e 

potente meccanismo per la gestione del testo. 

La sintassi per specificare elementi di testo in Qt Quick è: 

Text { 

 

} 


All’interno del corpo dell’elemento si trovano le proprietà che 

desideriamo impostare per il nostro testo. Ad esempio con la 

sintassi seguente 

} 

Text { 

x:320; y:240 

text: "testo" 

font.pointSize: 16 

Otterremo come risultato: 

Come si può immaginare, le possibilità di personalizzazione del 

testo sono molteplici con Qt Quick. Si va dalla possibilità di 

selezionare il font, la dimensione, il colore, l’allineamento del testo, 

lo stile. 


Qt Creator ci viene in aiuto ancora una volta presentandoci una 

dialog box ogni volta che posizioniamo il cursore all’interno di un 

elemento text. 

Tramite questa dialog box possiamo impostare tutte le opzioni del 

testo senza doverci ricordare a memoria tutte le opzioni. 

INPUT TESTUALI 

L’elemento TextInput rappresenta un semplice elemento di test 

editabile che ottiene il focus quando viene eseguito un click del 

mouse (o altro puntatore) su di esso. 

Anche in questo caso la sintassi è molto semplice: 

TextInput { 

 

} 

Un semplice esempio può essere: 



Rectangle 

{ 



TextInput { 

x:320; y:240; width: 200 

text: "editabile" 

} 

} 

Che produrrà il seguente risultato lanciando l’applicazione da Qt 

Creator 

COMPORRE GLI ELEMENTI DI BASE 

Dopo la panoramica di paragrafo precedente sugli elementi base di 

un’interfaccia grafica con Qt Quick, occupiamoci ora di comporre 

questi elementi per realizzare la nostra applicazione. 

La composizione di elementi avviene mediante i meccanismi di 

layout imlementati e a cui possiamo accedere mediante gli Anchors. 


ANCHORS 

Gli anchors sono usati per posizionare ed allineare gli elementi 

dell’interfaccia utente. Un Anchors può riferirsi ad un altro elemento 

oppure ad un Anchor di un altro elemento. 

Proviamo ad esempio ad usare un anchors di un elemento di testo 

inserito in un rettangolo, più precisamente, usiamo un anchors.right 

e lo “ancoriamo” al lato destro del rettangolo contenitore (definito 

anche genitore) e cioè parent.right. Come nella porzione di 

programma QML seguente: 


Rectangle 

{ 



Text { 

y:240; 

text: "testo" 


anchors.right: parent.right 

} 

} 

Il risultato che otterremo sarà: 


Come possiamo osservare, il nostro “testo” si trova in posizione 

destra più o meno a metà altezza (y: 240) del rettangolo genitore. 

Analogamente, l’istruzione anchors.left: parent.left sposterà il 

nostro “testo” sul lato destro del rettangolo contenitore (genitore). 

Qt Quick mette a disposizione un ampio numero di anchors che 

incontreremo nel resto di questo libro, essi consentiranno di 

ancorare un elemento in qualsiasi posizione secondo lo schema di 

principio seguente: 


Un’altro modo per posizionare un elemento è mediante la modalita 

di centerIn. In questo modo infatti chiediamo di ancorare un 

elemento grafico esattamente al centro di un altro elemento 

contenitore. 

Se consideriamo ad esempio questa porzione di programma QML 


Rectangle 

{ 



id: rectangle1 

Text { 

text: "testo" 


anchors.centerIn: rectangle1 

} 

} 

Che darà come risultato: 


In questo caso, vediamo infatti che il testo risulta perfettamente 

centrato orizzontalmente e verticalmente all’internon del rettangolo 

bianco contenitore. Il meccanismo di centrIn di anchors ha infatti 

tenuto conto di tutte le grandezze in gioco, ovvere la lunghezza e 

l’altezza del testo per calcolarne la posizione iniziale all’interno del 

rettangolo contenitore. 

L’esempio sopra riportato ci ha introdotto una nuova caratteristica 

di QML, ovvero l’uso di identificatori (id) per referenziare gli 

elementi della nostra interfaccia utente. 

E’ stata infatti introdotta l’istruzione 

id: rectangle1 

all’interno dell’elemento rectangle. Da questo punto in poi del 

nostro programma QML, potremo identificare il rettangolo 

contenitore in un modo alternativo all’uso di parent, bensi 

chiamandolo per nome (rectangle1). Il suo id è stato infatti usato 

nell’istruzione 



per ancorare il nostro elemento di Text (testo) al centro del 

rettangolo contenitore (rectangle1). 

Il meccanismo di id è una funzionalità molto importante di QML è 

consente di mettere in relazione gli elementi dell’applicazione 

grafica tra di loro. 

Nell’esempio sopra riportato si può constatare l’equivalenza delle 

due istruzioni 


anchors.centerIn: parent 

tuttavia non è sempre possibile in un’applicazione stabilire delle 

relazioni tra elemento genitore ed elemento figlio, si possono infatti 

presentare delle situazioni in cui le relazioni vanno stabilite tra 

elementi che non hanno una relazione parentale “verticale” ed in tal 

caso l’uso del meccanismo di id è l’unico modo per creare una 

relazione. 

MARGINS 

L’uso di Margins consente di aggiungere degli spazi specificando 

delle distanze in pixel o tramite elementi connessi tra loro con 

Anchors. 

In figura seguente viene riportano uno schema di principio per il 

meccanismo dei margini 


Vediamo un semplice esempio. 


Rectangle 

{ 



Text { 

text: "testo" 


anchors.left: parent.left 

anchors.leftMargin: parent.width/8 

anchors.verticalCenter: parent.verticalCenter 

} 

} 

Che verrà visualizzato con la seguente finestra: 


La porzione di codice più significativa è: 

anchors.left: parent.left 

anchors.leftMargin: parent.width/8 


La prima istruzione è già nota, ci permette di ancorare il nostro 

elemento di testo nella parte a sinistra all’interno del rettangolo 

contenitore. Con la seconda istruzione precisiamo al gestore di 

layout di Qt Quick che l’elemento di testo verrà posizionato con un 

margine a sinistra pari ad un ottavo dell’ampiezza del rettangolo 

contenitore e quindi non immediatamente al bordo sinistro e infine 

la terza e ultima istruzione posiziona verticalmente al centro del 

rettangolo contenitore il testo. 


INTERAZIONE UTENTE 

Realizzare un’applicazione dotata di interfaccia grafica significa 

consentire uno scambio di informazioni tra l’applicazione e l’utente. 

Il transito di queste informazioni è ovviamente bidirezionale, 

l’utente richiede all’applicazione l’esecuzione di compiti specifici 

mediante comandi di vario tipo e ne visualizza i risultati sul display. 

Per questa interazione è quindi fondamentale poter ricevere i 

comandi dell’utente mediante i più comuni dispositivi di input, 

ovvero mouse (o touchscreen) e tastiera. 

I tipi di input possibili sono fondamentalmente 

Eventi del mouse (movimenti, click, drag) 

Eventi di tastiera 

MOUSE 

MOUSEAREA 

Qt Quick permette l’interazione con il mouse mediante del “mouse 

area”, ovvero porzioni del display entro cui avvengono eventi di 

input provocati dal cursore. Vediamo un semplice esempio per 

comprendere il concetto di mouse area e di conseguenza come 

interagire con il mouse (o altro dispositivo di puntamento). 


Rectangle 

{ 



Text { 

text: "Premi qui" 


anchors.horizontalCenter: parent.horizontalCenter 


} 

MouseArea { 

anchors.fill: parent 

onPressed: parent.color = "red" 


} 

} 

onReleased: parent.color = "white" 

In questo semplice programma di esempio è stato introdotto un 

nuovo elemento: MouseArea. 

Anche MouseArea è contenuto nel rettangolo genitore ed in 

particolare mediante l’istruzione 


andiamo a specificare che l’area sensibile agli eventi del mouse 

corrisponderà all’intera area del rettangolo genitore. 

L’istruzione seguente 

onPressed: parent.color = "red" 

rappresenta l’azione che vogliamo far compiere alla nostra 

applicazione quando viene premuto il pulsante sinistro del mouse (o 

viene premuto il touchscreen) nella MouseArea. In questo caso 

l’effetto sarà quello di far cambiare il colore del rettangolo 

contenitore. Infine, mediante l’istruzione 

onReleased: parent.color = "white" 

al successivo rilascio del pulsante, il colore del rettangolo tornerà a 

bianco. 

Il risultato di questo piccolo programma scritto in QML sarà quindi 

quello visibile in figura seguente. 


Lo sfondo di colore rosso della finestra indica appunto che è stato 

generato un evento di input (in questo caso è stato premuto il 

pulsante sinistro del mouse) nella MouseArea. 

Proviamo ora ad unire alcuni dei concetti esposti in questo capitolo 

nella seguente applicazione QML: 


Rectangle 

{ 



Text { 





id: testo 

} 

MouseArea { 

anchors.fill: testo 

onPressed: testo.color="red" 


} 

} 

onReleased: testo.color="black" 

L’uso della id:testo ci permetterà di catturare gli eventi del mouse 

in corrispondenza dell’area di testo e tramite onPressed e 

onReleased andremo a cambiare il colore dell’elemento Text. 

Qt Quick consente di generare eventi sulla pressione del bottone 

sinistro del mouse, tuttavia è possibile cambiare il comportamento 

predefinito modificando la proprietà acceptedButtons. In 

particolare, qualora si volessero accettare gli eventi generati dalla 

pressione sia del pulsante sinisto, sia del pulsante destro si può 

impostare tale propprietà nel modo seguente: 

acceptedButtons: Qt.LeftButton | Qt.RightButton 

In questo modo, combinando mediante l’operatore logico OR ( | ) i 

due valori Qt.LeftButton e Qt.RightButton, la mouseArea 

corrispondente genererà eventi di onPressed e onReleased 

premendo un qualsiasi pulsante (destro o sinistro) del mouse. 

Per accettare invece eventi solamente dal pulsante destro sarà 

sufficiente scrivere: 

acceptedButtons: Qt.RightButton 

Per consentire all’applicazione di esempio, riportata in precedenza, 

di interagire con entrambi i pulsanti del mouse sullaMouseArea 

definita dovremo perciò scrivere: 

MouseArea { 

acceptedButtons: Qt.LeftButton | Qt.RightButton 


onPressed: testo.color="red" 

onReleased: testo.color="black" 

} 


MOUSE HOVER 

Una MouseArea può generare altri eventi di input oltre a quelli già 

visti in precedenza onPressed e onReleased, in particolare essa può 

generare eventi ogni volta che il cursore passa sull’area stessa; in 

questo caso si parla di eventi di mouse hover. 

Riprendendo l’esempio precedente proviamo ora ad aggiungere una 

nuova funzione al nostro testo: quando il cursore del mouse verrà 

osizionato sopra l’area corrispondente al testo stesso, esso dovrà 

assumere il colre verde, per poi tornare di colore nero quando il 

cursore lascerà l’area. 

In QML l’applicazione sarà: 


Rectangle 

{ 



Text { 





color: mouse_area.containsMouse ? "green" : 

"black" 

id: testo 

} 

MouseArea { 

id: mouse_area 

acceptedButtons: Qt.LeftButton|Qt.RightButton 


hoverEnabled: true 

} 

} 

Le istruzioni utili per realizzare questa nuova funzione sono 

color: mouse_area.containsMouse ? "green" : "black" 


nel corpo dell’elemento Text e l’istruzione: 

hoverEnabled: true 

nel corpo della MouseArea. 

Come è facile intuire, impostare la proprietà hoverEnabled al valore 

booleano true equivale ad abilitare la funzionalità di Mouse Hover, 

per cui quando il cursore verrà posizionato in corrispondenza del 

testo, Qt quick genererà un evento all’elemento Text. 

L’istruzione più interessante, per il nostro scopo, è invece la prima 

in quanto impiega un operatore di confronto 

(mouse_area.containsMouse ?) per attribuire un colore verde o 

nero. 

Occorre per prima cosa osservare che mouse_area è l’identificativo 

della MouseArea creata in precedenza. Nel suo corpo infatti è stato 

inserita l’istruzione id: mouse_area che ci consentirà di fare 

riferimento ad essa con il suo nome. L’uso di 

mouse_area.containsMouse non è altro che un modo per leggerne 

la proprietà (containsMouse appunto) e in caso affermativo 

andremo ad impostare il colore verde (“green”) per il testo o 

alternativamente nero (“black”). L’uso dell’operatore “?”, ben noto 

a chi conosce i linguaggi C e C++, non è altro che un modo per 

eseguire un’operazione di confronto (if). Nel caso l’argomento posto 

prima del “?” sia di valore vero (in termini di logica booleana = 

true) verrà restituito il valore a sinistra del “:”, in caso negativo 

verrà restituito il valore a destra. 

Nel caso in oggetto, quando il cursore è posizionato all’interno della 

MouseArea (ovvero mouse_area.containsMouse è true), alla 

proprietà color verrà assegnato “green”, in caso contrario verrà 

assegnato “black”. 

Il risultato, nel caso di cursore posizionato sul testo “Premi qui” 

sarà quindi quello di figura seguente: 


TASTIERA 

La tastiera rappresenta quel dispositivo di input vitale per inserire 

qualsiasi tipo di dato alfanumerico. Qt Quick accetta input da 

tastiera mediante gli elementi TextInput (già incontrato in un 

precedente esempio del libro) e TextEdit, oltre a ciò, la tastiera 

rappresenta uno strumento utile per la navigazione tra gli elementi 

(si pensi ai tasti freccia ad esempio) in cui si può spostare il focus 

dell’applicazione per inserire dati di tipo diverso. 

NB: Focus 

Attribuire il focus ad un elemento di input è un aspetto molto 

importante dell’applicazione, in quanto permette di navigare tra i 

differenti elementi alfanumerici per inserire i propri dati o effettuare 

le proprie scelte. 

Nel caso di un’applicazione con un solo TextInput il focus è 

assegnato automaticamente, ma nel caso in cui ci siano più 

elementi TextInput occorre realizzare dei meccanismi per passare 

da un elemento ad un altro. 


Consideriamo ora un semplice esempio con due elementi di 

TextInput e vediamo come attribuire il focus ad uno di essi e fornire 

all’utente la consapevolezza di qual’è l’elemento selezionato. 


Rectangle 

{ 



TextInput { 

anchors.left: parent.left; y:16 


text: "Input 1"; font.pixelSize: 32 

color: focus ? "black" : "gray" 

focus:true 

} 

TextInput { 





} 

} 

Nel programma di esempio, sono stati inseriti due elementi 

TextInput (con testo Input 1 e Input 2) aventi una proprietà 

particolare: assumono un colore diverso a seconda che essi 

abbiamo o meno il focus. L’istruzione 


come già visto in precedenza rappresenta un operatore di confronto 

sulla proprietà di focus. Nel caso l’elemento abbia il focus (in pratica 

l’utente ha eseguito un click del mouse sull’elemento TextInput) 

allora il colore del testo sarà nero per consentire una chiara 

identificazione dell’elemento in cui verranno inseriti tutti i caratteri 

che andremo a digitare sulla tastiera. In caso contrario il colore del 

testo sarà grigio, significando appunto che quell’elemento non ha il 

focus e quindi non riceve i caratteri della tastiera. 


L’istruzione: 

focus:true 

del primo TextInput consente di attribuire il focus a questo 

elemento all’avvio della nostra applicazione di esempio. 

A questo punto è possibile realizzare un meccanismo per la 

navigazione dei due TextInput mediante l’uso del tasto Tab. In 

questo modo, premendo tale tasto sposteremo il focus da un 

elemento all’altro e vedremo di volta in volta cambiare il colore del 

testo selezionato. 

Modificando il programma QML dell’esempio precedente nel modo 

seguente 


Rectangle 

{ 



TextInput { 


id: testo1 





focus:true 

KeyNavigation.tab: testo2 

} 

TextInput { 

id:testo2 





KeyNavigation.tab: testo1 

} 

} 

Come si può osservare, i due elementi di testo sono stati identificati 

mediante i rispettivi identificatori (id) come testo1 e testo2. 

L’istruzione KeyNavigation.tab: è stata impiegata per spostare il 

focus usando come per la navigazione il tasto tab. Ovviamente è 

sempre possibile usare un altro tasto per queste operazioni di 

navigazione, ma occorre ricordarsi che esistono delle regole di 

“buon comportamento” di un’interfaccia grafica alle quali non ci 

spossiamo sottrarre. Ai nostri utenti non piacerà avere 

un’applicazione totalmente fuori standard e che li obbligherà a 

ricordare delle combinazioni di tasti inusuali rispetto alla pratica 

comune. 

Un’alternativa accettabile al tasto Tab per quest’applicazione è l’uso 

ei tasti freccia su/giu. In questo caso le istruzioni che dovremo 

scrivere saranno: 

KeyNavigation.down: testo2 

KeyNavigation.up: testo1 

ESERCIZIO 


Scrivere un programma QML per muovere un’immagine qualsiasi 

all’interno di un rettangolo mediante I tasti freccia 

(up/Down/Left/Right). 

Il risultato dovrà quindi essere simile a figura seguente: 

ANIMAZIONI 

Le animazioni sono effetti visivi che si applicano a qualsiasi 

elemento di QML e permettono di “dar vita” alla nostra applicazione 

muovendo, ruotando, ridimensionando i conponenti grafici sul 

display. L’uso di animazioni all’interno di applicazioni dotate di 

interfaccia utente è una conquista relativamente recente, grazie 

all’aumento delle prestazioni dei moderni processori e all’arrivo sul 

mercato di veri e propri computer tascabili come i cellulari e tablet. 

Le caratteristiche principali delle animazioni di Qt Quick possono 

essere così riassunte: 

Ogni elemento visibile di un’applicazione può essere animato 


Ogni animazione può essere programmata per realizzare dei 

movimenti con carateristiche diverse (movimenti lineari, 

rimbalzi, effetto molla o elastico) 

Un’animazione si può applicare a tutte le proprietà di un 

elemento grafico (posizione, colore, dimensioni...) 

Qt Quick offre un numero di animazioni preconfezionate a cui è 

possibile aggiungerne altre modificate ad hoc. 

NUMBERANIMATION 

Iniziamo subito con un primo esempio molto semplice di 

NumberAnimation 


Rectangle 

{ 



} 

Rectangle { 


color: "red" 

x:0; y:120 

} 

NumberAnimation on x { 

from: 0; to: 160 

duration:1000 

} 

In questo esempio l’applicazione è composta da due rettangoli 

annidati. Il rettangolo più interno (di colore rosso) verrà spostato 

sull’asse x dalla posizione 0 alla posizione 160 grazie all’animazione 

NumberAnimation 

NumberAnimation on x { 


} 

from: 0; to: 160 

duration:1000 

Come si può osservare quest’animazione è applicata sulla proprietà 

x (la posizione sull’asse orizzontale) del rettangolo interno e farà in 

modo che la posizione variwerà dal valore 0 al valore 160 (from: 

0; to: 160) in un tempo di 1000 millesimi di secondo 

(duration:1000) 

Il risultato al termine di quest’animazione è visibile nelle due figure 

seguenti: 


PROPERTYANIMATION 

Una qualsiai proprietà di un elemento grafico può essere animata 

mediante una PropertyAnimation. A tale scopo consideriamo il 

seguente esempio. 


Rectangle 

{ 



Rectangle { 


color: "red" 

x:160; y:120 

id: rettangolo 

} 

PropertyAnimation { 

target: rettangolo 

properties: "width, height" 

from: 0; to: 240 

duration:1000 

running: true 

} 

} 


Come si può intuire, in questo caso la PropertyAnimation si applica 

sul rettangolo rosso (target: rettangolo) e riguarda le proprietà 

width ed height. In altre parole, in un intervallo di tempo di 1000 

millisecondi (duration:1000) le dimensioni fisiche width ed height 

del rettangolo varieranno dal valore 0 al valore 160 (in questo caso, 

a termine animazione avremo un quadrato di lat 160 pixel). 

L’ultima istruzione nel corpo della PropertyAnimation (running:true) 

rappresenta l’abilitazione all’esecuzione dell’animazione stessa. 

L’applicazione di un valore booleano false alla proprietà running 

corrisponde quindi a mantenere disabilitata l’animazione (occorre 

pertanto ricordare che una PropertyAnimation non va in esecuzione 

automaticamente). 

Graficamente il risultato di questo programma QML sarà: 

e al termine dell’animazione: 


EASING CURVE 

Una caratteristica interessante di propertyAnimation è la possibilità 

di effettuare le animazioni con un inviluppo dato dalle easing curve. 

Ogni animazione può così mimare effetti realistici come rimbalzi, 

effetti molla o elastico etc. Per meglio comprendere questo 

comportamento consideriamo questo esempio: 


Rectangle 

{ 



Rectangle { 


color: "red" 

x:160; y:120 


} 

PropertyAnimation { 


properties: "width, height" 

from: 0; to: 240 

duration:1000 

running: true 


} 

} 

easing.type: "OutElastic" 

In questo caso è stata aggiunta l’istruzione 

easing.type: "OutElastic" 

che fornisce all’animazione stessa un comportamento particolare; il 

ridimensionamento avverrà infatti con un’oscillazione (durante la 

variazione da 0 a 240 pixel), come se il rettangolo fosse dotato di 

caratteristiche elastiche. 

Qui di seguito si riportano tutte le easing curve disponibilil in Qt 

Quick: 

Linear 

InQuad 

OutQuad 

InOutQuad 

OutInQuad 

InCubic 

OutCubic 

InOutCubic 

OutInCubic 

InQuart 

OutQuart 

InOutQuart 

OutInQuart 

InQuint 

OutQuint 

InOutQuint 

OutInQuint 

InSine 

OutSine 

InOutSine 


OutInSine 

InExpo 

OutExpo 

InOutExpo 

OutInExpo 

InCirc 

OutCirc 

InOutCirc 

OutInCirc 

InElastic 

OutElastic 

InOutElastic 

OutInElastic 

InBack 

OutBack 

InOutBack 

OutInBack 

InBounce 

OutBounce 

InOutBounce 

OutInBounce 

La gamma di effetti che è possibile applicare alle animazioni è 

molto ampia, questo è un indubbio vantaggio nella realizzazione di 

giochi o effetti visivi per tablet e cellulari. 

COLORANIMATION 

La ColorAnimation, come facilmente intuibile dal nome, è 

un’animazione sul colore di un elemento grafico. Il codice QML per 

realizzare quest’ animazione è rappresentato dal blocco 

ColorAnimation{...}. La porzione di codice QML di seguito riportato 

permette di creare un’animazione sul colore dell’elemento 

rettangolo (target:rettangolo), partendo da un colore iniziale, 

espresso mediante la funzione Qt.rgba(0,0.5,0,1), ad un colore 

finale Qt.rgba(1,1,1,1). La duranta dell’animazione sarà di un 


secondo (1000 millisecondi) e verrà attivata automaticamente 

mediante lìistruzione running:true. 

ColorAnimation { 


property: "color" 

from: Qt.rgba(0,0.5,0,1) 

to: Qt.rgba(1,1,1,1) 

duration: 1000 

running: true 

} 

Il programma QML di esempio permette di animare il colore di 

sfondo della finestra passando da un colore nero abianco in un 

tempo di due secondi. 


Rectangle 

{ 




ColorAnimation { 


property: "color" 

from: Qt.rgba(0,0,0,1) 

to: Qt.rgba(1,1,1,1) 


running: true 

} 

} 

L’animazione passerà quindi da un colore nero come in figura 

seguente: 


A termine animazione si avrà invece: 

ROTATIONANIMATION 

La RotationAnimation è un’animazione ottenuta tramite la rotazione 

di un elemento grafico. Il codice QML per realizzare quest’ 

animazione è rappresentato dal blocco RotationAnimation{...}. La 


porzione di codice QML di seguito riportato permette di creare 

un’animazione di rotazione da un angolo di partenza di 45° ad un 

angolo finale di 315° (from: 45; to: 315), impiegando come 

direzione di rotazione (direction: RotationAnimation.Shortest) la 

“via più breve” per passare dall’angolo iniziale a quello finale. La 

durata di quest’animazione sarà di un secondo (duration: 1000). 

RotationAnimation on rotation { 

from: 45; to: 315 

direction: RotationAnimation.Shortest 


} 

La proprietà direction può assumere i sguenti valori: 

RotationAnimation.Numerical: la rotazione viene eseguita con 

interpolazione ineare tra i valori inziali e finali. Una variazione 

da 10° a 350° verrà effettuata ruotando di 340° in senso 

orario 

RotationAnimation.Clockwise: la rotazione viene eseguita 

sempre in senso orario tra i valori iniziale e finale 

RotationAnimation.Counterlockwise: la rotazione viene 

eseguita sempre in senso antiorario tra i valori iniziale e finale 

RotationAnimation.Shortest: la rotazione verrà effettuata in 

modo da minimizzare l’animazione. Una variazione da 10° a 

350° produrrà una rotazione di 20° in senso antirario 

L’esempio di seguito riportato permette di creare un’animazione che 

farà compiere una rotazione di mezzo giro (180°) all’immagine 

“rocket.png” 


Rectangle 

{ 




} 


Image { 

id: ball 

source: "rocket.png" 


smooth: true 

RotationAnimation on rotation { 

from: 0; to: 180 

direction: RotationAnimation.Shortest 


} 

} 

L’immagine di partenza sarà quindi la seguente 

A termine animazione l’immagine sarà così ruotata: 


GRUPPI DI ANIMAZIONI 

Le animazioni di base descritte precedentemente possono essere 

raggruppate per ottenere effetti combinati sugli elementi grafici di 

un’aplicazione; si possono applicare sequenze di animazioni su uno 

o più elemento o eseguire più animazioni in parallelo. Qt Quick 

fornisce infatti due modi diversi per rappruppare le animazioni: 

SequentialAnimation 

ParallelAnimation 

Il primo tipo consente di eseguire in sequenza differenti animazioni, 

mentre il secondo consente l’applicazione parallela di più animazioni 

su uno stesso elemento grafico. 

SEQUENTIALANIMATION 

Come sempre, il miglior modo per comprendere un concetto è 

vederne l’immediata applicazione con un semplice esempio ed 

anche in questo caso realizzaremo un semplice programma QML 

adatto allo scopo. 


L’animazione che si vuol realizzare si compone di due parti: nella 

prima parte dell’animazione, l’immagine che compare sul monitor 

verrà ridimenzionata da un valore 100% ad un valore 50% e al 

termine del ridimensionamento verrà fatta svanire riducendone 

l’opacità dal valore massimo a zero. 

Il codice QML che realizza questa doppia animazione è il seguente: 


Rectangle 

{ 



Image { 

id: rocket 



} 

} 

SequentialAnimation { 

} 

NumberAnimation { 

target: rocket; properties: "scale" 

from: 1.0; to: 0.5; duration: 1000 

} 


target: rocket; properties: "opacity" 


} 

running: true 

L’animazione complessiva che vogliano realizzare è data dal gruppo 

di animazione SequentialAnimation {...}. Al suo interno si trovano 

due animationi singole (NumberAnimation) di cui la prima sarà 

incaricata di realizzare il ridimensionamento dell’immagine dal 

valore corrente 1.0 ad un valore dimezzato (0.5) e la seconda 

animazione sarà incaricata di far “svanire” l’immagine animandone 


la sua proprietà di opacità dal valore nominale 1.0 al valore nullo 

(0.0). 

Entrambe le animazioni avranno durata di un secondo, per un 

totale quindi di due secondi. 

PARALLELANIMATION 

La ParallelAnimation consente la realizzazione di animazioni in 

parallelo, riprendendo l’esempio precedente sarà quindi possibile 

parallelizzare le due singole animazioni. Il codice QML per realizzare 

ciò farà quindi uso della ParallelAnimation come di seguito riportato. 


Rectangle 

{ 



} 

Image { 

id: rocket 



} 

ParallelAnimation { 


target: rocket; properties: "scale" 


} 


target: rocket; properties: "opacity" 


} 

} 

running: true 

L’animazione complessiva è data dal gruppo ParallellAnimation 

{...}. Al suo interno si trovano due animationi singole 

(NumberAnimation) che verranno eseguite contemporaneamente, 


di cui la prima consentirà di realizzare il ridimensionamento 

dell’immagine e la seconda farà “svanire” l’immagine. Entrambe le 

animazioni avranno durata di un secondo (mille millisecondi), 

l’animazione risultante sarà quindi anch’essa di un secondo. 

PAUSEANIMATION 

Come si è visto nei paragrafi precedenti è possibile combinare 

diverse animazioni in sequenza e in parallelo. Esistono situazioni in 

cui è desiderabile inserire delle pause, a tale scopo è possibile 

ricorrere ad un’animazione particolare, la PauseAnimation. Come si 

intuisce dal nome, quest’animazione non fa nulla, serve solamente 

per introdurre delle pause all’interno di sequenze. 

Come si può intuire, l’unica proprietà di una PauseAnimation è la 

sua durata. Il codice di esempio sotto riportato illustra una 

PauseAnimation di 1 secondo (espresso in millisecondi) 

PauseAnimation { 


} 

STATI E TRANSIZIONI 

Il meccanismo di Stati e Transizioni rappresenta un formalismo utile 

per definire l’evolversi di un’applicazione in base ai comandi utente 

e/o agli stati interni. Si tratta in altre parole della realizzazione di 

una macchina a stati, concetto molto applicato in ogni applicazione 

dell’informatica in quanto consente di modellizzare il 

comportamento di un’apparecchiatura, un sistema complesso 

(sistemi industriali, aeronautici) o una qualsiasi situazione in cui a 

fronte di un evento l’applicazione può portarsi da uno stato ad un 

altro. 

Per meglio comprendere il concetto astratto di macchina a stati, 

consideriamo un semplice semaforo dotato di una luce verde ed 

una luce rossa. A luce rossa illuminata, il semaforo sarà in stato di 

“STOP”, a luce verde illuminata, il semaforo sarà in stato di “GO”; il 


funzionamento del semaforo non prevede alcuno stato in cui 

entrambe le luci sono illuminate. Proviamo ora a realizzare 

un’applicazione con QML per visualizzare questo semaforo e 

cambiarne lo stato ad ogni click del mouse. L’eveto “click” del 

mouse assume quindi un significato concettuale importante per la 

nostra macchina a stati, esso infatti sarà l’evento che farà passare il 

semafono da STOP a GO e viceversa; esso provocherà quindi la 

transizione da uno stato all’altro. 

Il comportamento della macchina a stati “semaforo” viene 

solitamente schematizzato mediante un diagramma in cui i due 

stati STOP e GO sono rappresentati dai due ovali e le transizioni da 

uno stato all’altro mediante le due frecce in senso opposto. 

Schematicamente abbiamo quindi creato una macchina a stati che 

modellizza il semaforo sopra descritto. Vediamo ora la sua 

traduzione in linguaggio QML. 


Rectangle 

{ 


color: "black" 


Rectangle { 

width: 150; height: 250 

anchors.centerIn: rettangolo 

states: [ 


State { 

name: "stop" 

PropertyChanges { target: rosso; color: 

"grey" } 

PropertyChanges { target: verde; color: 

"green" } 

}, 

State { 

name: "go" 


"red" } 


"grey" } 

} 

] 

Rectangle { 

id: rosso 

x: 25; y: 15; width: 100; height: 100 

color: "red" 

} 

Rectangle { 

id: verde 

x: 25; y: 135; width: 100; height: 100 

color: "grey" 

} 

MouseArea { 


onClicked: parent.state == "stop" ? 

parent.state = "go" : parent.state = "stop" 

} 

} 

} 

La realizzazione grafica del semaforo è ottenuta mediante due 

elementi rectangle, uno di colore rosso e uno di colore verde, 

identificati rispettivamente come “rosso” e “verde”, tuttavia il 

semaforo si presenterà all’avvio del programma con la sola luce 

rossa illuminata (per cui il colore del rettangolo “verde” all’inizio 

sarà in realtà grigio). 


La realizzazione del meccanismo di stati e transizioni avviene 

mediante due blocchi di istruzioni, il blocco states[...] consente di 

definire tutti gli stati dell’applicazione, per quanto riguarda invece la 

realizzazione delle transizioni si ricorre all’implementazione di una 

MouseArea{...} al cui interno verranno effettuati i controlli 

necessari per effettuare la variazione di stato. 

Iniziamo dapprima con l’implementazione degli stati STOP e GO : 

states: [ 

State { 

name: "stop" 


"grey" } 


"green" } 

}, 

State { 

name: "go" 


"red" } 


"grey" } 

} 

] 

All’interno del blocco states trovano quindi posto i due stati del 

nostro semaforo: “stop” e “go”. 


CUSTOM ITEMS 

I custom items rappresentano un modo per creare elementi 

riusabili, essi devono essere definiti in files QML separati, 

rispettando la regola un solo custom item per ogni file e possono 

essere usati come qualsiasi altro elemento di QML. Una 

caratteristica importante dei custom items riguarda la possibilità di 

associarne un numero di versione in modo tale da garantire il 

comportamento funzionale quando usato in programmi diversi. 

DEFINIRE UN CUSTOM ITEM 

Supponiamo di voler realizzare un semplice Custom Item con 

capacità di editor a linea. Salvando questo Custom Item nel file 

LineEdit.qml andiamo ad identificare un nuovo elememento di nome 

LineEdit appunto che potrà essere usato in tutte i nostri programmi 

QML. 

Vediamo il codice QML per realizzare questo Custom Item 


Rectangle { 

border.color: "green" 


radius: 4; smooth: true 

TextInput { 


anchors.margins: 5 

text: "Enter text..." 


font.pixelSize: parent.height - 4 

} 

} 

Come si può osservare, il codice QML di LineEdit è un normale 

codice QML di un elemento rettangolo contenente al suo interno un 

TextInput. 


Il file LineEdit.qml dovrà far parte del nostro progetto qml, come 

riportato dalla finestra projects sul lato sinistro di Qt Creator: 

Data una struttura così semplice, vediamo ora come utilizzare il 

custom Item e successivamente introdurremo la possibilità di 

definire nuove proprietà del nostro elemento. 

USARE UN CUSTOM ITEM 

Per usare LineEdit in qualsiasi programma QML potremo scrivere il 

codice seguente: 


Rectangle { 

width: 400; height: 100; color: "lightblue" 

LineEdit { 



width: 300; height: 50 

} 

} 


Il risultato del nostro programma è visibile in figura seguente: 

Possiamo infatti osservare la finestra con colre di sfondo azzurro 

che contiene il nostro Custom Item di nome LineEdit 

Il nostro Custom Item è ora visibile, è possibile scrivere un testo 

arbitrario al suo interno, ma esso non espone nessuna proprietà. In 

altre parole non abbiamo modo di leggere il contenuto di LineEdit. 

Serve pertanto un modo per rendere disponibili le proprietà dei 

Custom Item agli eltri elementi di un programma QML. 

PROPRIETÀ DI UN CUSTOM ITEM 

Il modo per rendere disponibili le proprietà di un Custom Item è 

molto semplice, è sufficiente riportare nel file contenente il nostro 

Custom Item la sintassi 

Syntax: property [: ] 

Per ogni proprietà che si vuol rendere disponibile per l’elemento 

creato. 


Nel caso di LineEdit il codice del programma QML diventerà: 


Rectangle { 

border.color: "green" 


radius: 4; smooth: true 

TextInput { 

id: text_input 


anchors.margins: 2 

text: "Enter text..." 


font.pixelSize: parent.height - 4 

} 

property string text: text_input.text 

} 

Analizziamo in dettaglio la sintassi 

property string text: text_input.text 

in questo modo rendiamo disponibile come proprietà “text” una 

stringa, ovvero una sequenza di caratteri (“string”) il cui valore è 

dato dalla stessa proprietà “.text” dell’elemento TextInput di nome 

text_input. 

Il fatto di “esportare” questa proprietà si rende necessario poichè a 

livello di “LineEdit” non è automatico (e neppure sicuro e pulito da 

un punto di vista della programmazione) accedere ai componenti 

interni del Custom Item. Questo meccanismo si rende quindi 

necessario per definire una sorta di “interfaccia” pubblica che il 

nuovo componente mette a disposizione di tutti. 

A titolo di esempio si riportano qui di seguito alcune definizioni di 

proprietà 

property string product: "Qt Quick" 

property int count: 123 


property real slope: 123.456 

property bool condition: true 

property url address: "http://qt.nokia.com/" 


SIGNALS&SLOTS 

L'intero meccanismo di meta object system, è stato inventato dai 

programmatori della Trolltech (detti anche Trolls, richiamando le 

antiche figure della mitologia norvegese a cui si attribuivano poteri 

magici) per consentire agli utenti del toolkit di scrivere il proprio 

codice sorgente, senza doversi perdere nei dettagli del sistema 

operativo sottostante. 

Il punto cruciale a cui i Trolls dovevano trovare soluzione, era 

quello di far comunicare tra loro gli oggetti C++ della loro libreria, 

senza per questo dover dipendere dai metodi di comunicazione 

nativi (quali ad esempio la gestione degli eventi di MS Windows o di 

X11), in modo da rimanere indipendenti dall'implementazione. 

Prima di addentrarci nell'analisi del meccanismo di comunicazione 

adottato da Qt (chiamato Signals&Slots), cerchiamo di capire in 

cosa consiste il problema. 

Supponiamo di avere una finestra di dialogo contenente due oggetti 

grafici molto semplici, un bottone ed un indicatore visivo 

(immaginiamo, a titolo di esempio, qualcosa di simile alla lampada 

di un semaforo, di colore rosso) e supponiamo inoltre di voler 

dotare la nostra finestra di una semplice funzionalità: quando viene 

eseguito un click del mouse sul bottone grafico (in altre parole, il 

bottone viene “premuto”), il colore del nostro semaforo diventa 

verde. 

Il semplice esempio sopra riportato, ci pone di fronte al problema di 

far comunicare tra loro i nostri due oggetti grafici: il pulsante ed il 

semaforo; in altre parole, quando il pulsante viene premuto, deve 

essere emesso un “segnale” al semaforo, in modo che esso possa 

riconoscere l'evento e cambiare colore. 

In estrema sintesi, il nostro problema di comunicazione può essere 

descritto con le parole di “segnale”, corrispondente all'evento di 

bottone premuto e “cambio colore”, funzione propria dell'oggetto 


grafico semaforo, innescata dal segnale di bottone premuto 

(usando la terminologia Qt, questo è uno “slot”). Allo stato attuale 

delle cose, abbiamo identificato un segnale ed uno slot, ciò che 

ancora ci manca è un metodo per il loro collegamento. Il 

meccanismo di meta object system di Qt, ci viene in soccorso 

offrendoci una funzione (connect), indipendente dalla piattaforma, 

per realizzare questa connessione. 

La breve introduzione fatta al meccanismo di Signals&Slots, ci 

consente di capire l'importanza fondamentale che esso riveste nella 

programmazione Qt; ciò che invece non è ancora stato chiarito è 

perché questo meccanismo deve essere indipendente dalla 

piattaforma. Per poter apprezzare il lavoro svolto dai Trolls, 

gettiamo una rapida occhiata su altri due GUI toolkits molto famosi: 

Motif ed MFC. 

Per entrambi i toolkits, il sistema di gestione delle finestre 

sottostante (X-Window per Motif e MS Windows per MFC), fornisce 

al software applicativo, indicazioni molto “primitive” delle 

interazioni con l'utente. Ad esempio, le informazioni riportate 

possono essere del tipo: “l'utente ha premuto il tasto T”, oppure, 

“l'utente ha premuto il bottone sinistro del mouse alle coordinate 

320, 320”. Come si può capire, partendo da queste informazioni 

basilari, costruire un'applicazione dotata di interfaccia uomo 

macchina molto complessa, richiede un tempo notevole ed inoltre 

tenere sotto controllo un numero elevato di dettagli di basso livello, 

dovuti alla natura della piattaforma sottostante, è spesso causa di 

errori e inevitabilmente si traduce in tempi di sviluppo (e 

debugging) molto lunghi. 

L'esigenza di semplificare la programmazione della piattaforma 

grafica (il window manager) ha portato quindi alla creazione dei due 

toolkits prima citati, che sono divenuti nel tempo il riferimento per il 

mondo Windows e il mondo UNIX. Ciascun toolkit ha presentato la 

propria soluzione ai problemi tipici di programmazione di una 

interfaccia grafica e come spesso accade, nessuno sforzo è stato 


compiuto per uniformare i due ambienti. Come risultato, abbiamo 

ora due toolkits grafici completamente svincolati e incompatibili tra 

loro, per cui scrivere un'applicazione per entrambi i sistemi 

operativi (MS Windows e UNIX-Motif) richiede la stesura di due 

interfacce utenti completamente diverse, con grande spreco di 

risorse per lo sviluppo (e il test). 

Per dare un esempio tangibile di questa diversità, vediamo come è 

stato risolto dai due toolkits il problema della comunicazione e 

vedremo infine come è stato risolto il problema dai Trolls in modo 

elegante e “platform-independent” (indipendente dalla 

piattaforma). 

Motif implementa la comunicazione tramite il meccanismo detto a 

“callback”. Le callback sono funzioni C, dotate di argomenti di 

chiamata predefiniti e vengono “registrate” (in pratica si registra il 

puntatore alla funzione callback da chiamare a fronte di un evento 

del mouse) all'interno di ogni componente grafico (o widget, nella 

terminologia Motif). Chiaramente, ogni widget Motif, deve 

riconoscere un preciso numero di callback, così come deve 

conoscerne il tipo e tutti i parametri (compreso il tipo dei parametri 

stessi), tornando al nostro esempio di partenza, un bottone Motif 

riconoscerà quindi le funzioni di callback per gli eventi di pressione, 

rilascio e click del mouse. 

Supponiamo ora che un bottone Motif venga premuto, il codice al 

suo interno andrà a verificare di quale evento si tratta, lo 

riconoscerà e chiamerà la funzione di callback associata o meglio la 

chiamerà usando il suo puntatore a funzione (il cui indirizzo è stato 

memorizzato in precedenza durante l'operazione di registrazione). 

Lo svantaggio principale di questa implementazione è che se la 

funzione callback (scritta dal programmatore applicativo e quindi 

situato sopra il toolkit stesso) non è perfettamente in linea con 

quanto si attende il toolkit, supponiamo ad esempio che un 

parametro sia un array e che il numero di elementi non sia uguale 

tra quanto si attende il toolkit e quanto è stato scritto dal 


programmatore applicativo, allora l'applicazione potrebbe bloccarsi 

e andare in crash (sappiamo infatti che i compilatori C non 

eseguono controlli sulle dimensioni degli array). 

MFC impiega invece delle macro precostruite per realizzare il 

collegamento tra gli eventi forniti dal gestore delle finestre, 

chiamati anche messaggi nella terminologia Windows, con i metodi 

C++ (che sono praticamente funzioni callback) per la gestione degli 

eventi. Uno degli svantaggi principali che tutti i programmatori MFC 

hanno sperimentato è la complessità del “message system” di MS 

Windows, anche quando ci si avvale degli ambienti di sviluppo 

integrato e dei wizards per la creazione di finestre di dialogo 

basandosi su templates. 

Come si può constatare, il problema della comunicazione è stato 

risolto dai due toolkits in due modi tra loro differenti; in estrema 

sintesi possiamo dire che, in un caso si ricorre a puntatori a 

funzione (Motif), nell'altro ci si appoggia a macro per collegare i 

messaggi di MS Windows ai metodi C++ di gestione degli eventi 

(MFC). 

SEGNALI DI UN CUSTOM ITEM 

Il meccanismo di Signal&Slot del Qt Application Framework può 

essere impiegato in modo molto semplice anche con Qt Quick. 

Tramite esso è quindi possibile dare ad un Custom Item la 

possibilità di generare “segnali” ad esempio quando viene generato 

un evento con il mouse sull’elemento stesso (così come avveniva 

nel caso di onClicked negli esempi di paragrafo...). 


CONCLUSIONE 

Come risulta evidente dalla sua lettura, questo libro non è 

completo, anzi è appena all’inizio. I prossimi paragrafi 

riguarderanno i custom items, l’integrazione con il mondo C++, 

l’uso di elementi complessi, il model view, l’integrazione con 

database e molto altro ancora. Il completamento di questo libro 

terrà conto dei commenti e contributi che arriveranno sul blog 

dell’autore e verrà corredato dei files QML degli esempi riportati.

Introduzione a Qt Quick™ - sereno-labs

Create successful ePaper yourself

Delete template?

Save as template?