Introduzione A QT Quick (Italian)

Edizione BETA
INTRODUZIONE A QT QUICK
Introduzione a Qt Quick -beta-
2011 | Paolo Sereno
Page 1
Introduzione a Qt Quick
Edizione BETA
Paolo Sereno
Page 2
EDIZIONE BETA: Giugno 2011
Nokia, Qt, Qt Quick ed i rispettivi loghi sono marchi registrati di Nokia Corporation in Finlandia e resto del mondo. Limmagine 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
Page 3
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
Page 4
Presentazione delledizione beta

La decisione di rilasciare una versione beta di questo libro, nasce dallesigenza 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 allindirizzo sopra. paolo
Page 5
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 dellambiente 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 lambiente 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, lintroduzione di Qt Quick ha permesso infatti di estendere lecosistema 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 linsieme degli strumenti necessari e la voglia di mettersi in gioco (o mettersi a giocare).
Page 6
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.
Page 7
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
Page 8
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,
Page 9
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.
Page 10
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 lapplication framework Qt di Nokia. Qt Quick non richiede luso 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.
Page 11
PROCURARSI QT QUICK
Come scritto in precedenza Qt Quick uno strumento gratuito, messo a disposizione da Nokia con lintento 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:
Page 12
Premiamo Next ed avremo:
Page 13
Se vogliamo installare Qt nella cartella C:\QtSDK possiamo mantenere limpostazione predefinita, altrimenti cambieremo il path in base alla nostra preferenza. Lasciamo tutte le altre impostazioni invariate, avremo quindi il check sulla installazione di Default (lopzione 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.
Page 14
A questo punto possiamo premere Next.
Page 15
Possiamo lasciare Qt SDK come shortcut nel nostro menu di avvio delle applicazioni e premere quindi nuovamente Next.
Page 16
E finalmente possiamo avviare linstallazione.
Page 17
Loperazione di installazione richieder un certo tempo, al termine del quale verr presentata la finestra seguente:
Page 18
Premiamo ora Next.
Page 19
A questo punto il nostro ambiente di lavoro pronto per luso. Proviamo ora a fare pratica con lambiente di sviluppo, ovvero Qt Creator.
Page 20
UNA PRIMA OCCHIATA A QT CREATOR

Qt Creator lambiente 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 dellinterfaccia utente Debug: modalit di debug dellapplicazione
Page 21
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 dellapplicazione
Page 22
Search Result: selezionando questo visualizzare i risultati dellultima ricerca Application Output: visualizzazione dellapplicazione in esecuzione
comando output
si da
possono console
degli
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 lambiente Qt SDK. In modalit Welcome, selezioniamo gli esempi di Qt Quick e fra essi QML UI Components. Lesempio che andremo a selezionare Flipable, come visibile in figura seguente.
Page 23
Dopo aver selezionato lesempio, 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 dellapplicazione flipable: sul nostro monitor la finestra
Per comprendere il funzionamento dellesempio proviamo a fare click su una qualsiasi delle due carte da gioco presenti nella finestra; verr proposta unanimazione interamente realizzata con Qt Quick mediante il linguaggio QML.
Page 24
QML
QML un linguaggio dichiarativo per elementi di interfaccia utente, esso cio descrive di quali elementi si compone linterfaccia, come sono costruiti questi elementi e come si comportano in reazione agli eventi generati dallutente (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
Page 25
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 uninterfaccia molto semplice di questo tipo:
Page 26
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 { .... }
Page 27
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 lambiente Qt Quick mediante listruzione 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 dellapplicazione che stiamo scrivendo non cambi.
Page 28
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
Page 29
combinare elementi uno allinterno dellaltro. Per capire il concetto di annidamento di elementi modifichiamo il nostro programma nel modo seguente:
import QtQuick 1.0 Rectangle { width: 640; height:480 color: "green" 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:
Page 30
Come si pu osservare, lannidamento del secondo rettangolo allinterno del corpo di istruzioni del primo ha generato graficamente un secondo rettangolo (di colore rosso) allinterno 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 allinterno del rettangolo contenitore; le coordinate di questo punto sono infatti x: 160; y: 120 Rectangle { color: "red" width : 320; height: 240 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:
Page 31
Ovvero il punto pi alto pi a sinistra corrisponde allorigine del sistema di coordinate. Per comprendere meglio questo concetto proviamo a modificare il secondo rettangolo nel modo seguente:
Rectangle { color: "red" width : 320; height: 240 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.
Page 32
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: <tabella colori-nomi> Un modo pi efficace per specificare i colori rappresentato dalluso 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: #<rr><gg><bb> 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 dallambiente 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)
Page 33
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) width : 320; height: 240 x: 0; y:0 }
E la nostra applicazione sar
Page 34
Proviamo ora ad eseguire una combinazione delle informazioni riportate in questo paragrafo scrivendo questo programma QML:
import QtQuick 1.0 Rectangle { width: 640; height:480 color: "green" Rectangle { color: "red" width : 120; height: 240 x: 140; y:120 } Rectangle { color: "#00ff00" width : 120; height: 240 x: 260; y:120 } Rectangle { color: Qt.rgba(0,0,1,1) width : 120; height: 240 x: 380; y:120 } } Il risultato saranno 3 rettangoli affiancati, uno di coore rosso, uno di colore verde e uno di colore blu.
Page 35
GRADIENTI DI COLORE
Uno degli effetti pi interessanti per rendere gradevoli le interfacce utente luso 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 dellinterfaccia 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: import QtQuick 1.0 Rectangle { width: 640; height:480 gradient: Gradient { GradientStop { position: 0.0; color:
"blue"
Page 36
} GradientStop { position: 1.0; color: } } } Il risultano che otteniamo il seguente:
"green"
Mediante la sintassi gradient: Gradient { GradientStop { position: 0.0; color: } GradientStop { position: 1.0; color: } }
"blue" "green"
Specifichiamo quindi un gradiente lineare dal colore blu al colore verde.
Page 37
Un gradiente in Qt Quick infatti costituito da un certo numero di punti (o position) in cui viene fissato un colore. Nel nostro caso, lorigine 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 lesempio visto prima aggiungendo un ulteriore punto o posizione: import QtQuick 1.0 Rectangle { width: 640; height:480 gradient: Gradient { GradientStop { position: 0.0; color: } GradientStop { position: 0.5; color: } GradientStop { position: 1.0; color: } } } Abbiamo ora tre positioni
"gray" "white" "gray"
GradientStop { position: 0.0; color: "gray" } GradientStop { position: 0.5; color: "white" } GradientStop { position: 1.0; color: "gray" } 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:
Page 38
IMMAGINI
Il caricamento delle immagini una funzione molto semplice e potente di Qt Quick. Unimmagine pu rappresentare lo sfondo di una nostra applicazione o un qualsiasi controllo grafico (pulsanti, barre di scorrimento etc...). Vediamo come caricare unimmagine in Qt Quick. import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Image { x:270; y:225 source: "image.png" } }
Page 39
La sintassi QML per caricare un file immagine : Image { <propriet> } Nel nostro caso Image { x:270; y:225 source: "image.png" } Abbiamo specificato una posizione dellimmagine allinterno del rettangolo contenitore mediante x:270; y:225 ed abbiamo indicato il file contenente limmagine mediante source: "image.png". Come risultato otterremo la segunete finestra:
Page 40
TRATTAMENTO DELLE IMMAGINI

Qt Quick consente di ridimensionare e ruotare le immagini. Ridimensionamento Per ridimensionare unimmagine sufficiente definire un fattore di scala mediante la sintassi scale:. Nellesempio sopra riportato avremo pertanto
import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Image { x:270; y:225 source: "image.png" scale: 3.0 } } Il cui risultato visibile in figura seguente:
Page 41
Come si pu osservare, la dimensione dellimmagine notevolmente aumentata in consweguenze del fatto che stato specificato un fattore di scala uguale a 3.0.
Rotazione Per ruotare unimmagine sufficiente definire un valore di rotazione espresso in gradi, mediante la sintassi rotation:. Il nostro esempio diventer perci: import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Image { x:270; y:225 source: "image.png" rotation: 45.0 } } Il cui risultato visibile in figura seguente:
Page 42
Come si pu osservare, limmagine 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 linserimento 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 { <propriet> }
Page 43
Allinterno del corpo dellelemento 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, lallineamento del testo, lo stile.
Page 44
Qt Creator ci viene in aiuto ancora una volta presentandoci una dialog box ogni volta che posizioniamo il cursore allinterno 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
Lelemento 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 { <propriet> } Un semplice esempio pu essere:
Page 45
import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" TextInput { x:320; y:240; width: 200
text: } } "editabile"
Che produrr il seguente risultato lanciando lapplicazione da Qt Creator
COMPORRE GLI ELEMENTI DI BASE

Dopo la panoramica di paragrafo precedente sugli elementi base di uninterfaccia 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.
Page 46
ANCHORS
Gli anchors sono usati per posizionare ed allineare gli elementi dellinterfaccia 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: import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Text { y:240; text: "testo" font.pointSize: 20 anchors.right: parent.right } } Il risultato che otterremo sar:
Page 47
Come possiamo osservare, il nostro testo si trova in posizione destra pi o meno a met altezza (y: 240) del rettangolo genitore. Analogamente, listruzione 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:
Page 48
Unaltro 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 import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" id: rectangle1 Text { text: "testo" font.pointSize: 20 anchors.centerIn: rectangle1 } } Che dar come risultato:
Page 49
In questo caso, vediamo infatti che il testo risulta perfettamente centrato orizzontalmente e verticalmente allinternon del rettangolo bianco contenitore. Il meccanismo di centrIn di anchors ha infatti tenuto conto di tutte le grandezze in gioco, ovvere la lunghezza e laltezza del testo per calcolarne la posizione iniziale allinterno del rettangolo contenitore. Lesempio sopra riportato ci ha introdotto una nuova caratteristica di QML, ovvero luso di identificatori (id) per referenziare gli elementi della nostra interfaccia utente. E stata infatti introdotta listruzione id: rectangle1 allinterno dellelemento rectangle. Da questo punto in poi del nostro programma QML, potremo identificare il rettangolo contenitore in un modo alternativo alluso di parent, bensi chiamandolo per nome (rectangle1). Il suo id stato infatti usato nellistruzione anchors.centerIn: rectangle1
Page 50
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 dellapplicazione grafica tra di loro. Nellesempio sopra riportato si pu constatare lequivalenza delle due istruzioni anchors.centerIn: rectangle1 anchors.centerIn: parent tuttavia non sempre possibile in unapplicazione 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 luso del meccanismo di id lunico modo per creare una relazione.
MARGINS
Luso 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
Page 51
Vediamo un semplice esempio. import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Text { text: "testo" font.pointSize: 20 anchors.left: parent.left anchors.leftMargin: parent.width/8 anchors.verticalCenter: parent.verticalCenter } } Che verr visualizzato con la seguente finestra:
Page 52
La porzione di codice pi significativa : anchors.left: parent.left anchors.leftMargin: parent.width/8 anchors.verticalCenter: parent.verticalCenter La prima istruzione gi nota, ci permette di ancorare il nostro elemento di testo nella parte a sinistra allinterno del rettangolo contenitore. Con la seconda istruzione precisiamo al gestore di layout di Qt Quick che lelemento di testo verr posizionato con un margine a sinistra pari ad un ottavo dellampiezza 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.
Page 53
INTERAZIONE UTENTE
Realizzare unapplicazione dotata di interfaccia grafica significa consentire uno scambio di informazioni tra lapplicazione e lutente. Il transito di queste informazioni ovviamente bidirezionale, lutente richiede allapplicazione lesecuzione di compiti specifici mediante comandi di vario tipo e ne visualizza i risultati sul display. Per questa interazione quindi fondamentale poter ricevere i comandi dellutente 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 linterazione 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). import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Text { text: "Premi qui" font.pointSize: 20 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter } MouseArea { anchors.fill: parent onPressed: parent.color = "red"
Page 54
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 listruzione anchors.fill: parent andiamo a specificare che larea sensibile agli eventi del mouse corrisponder allintera area del rettangolo genitore. Listruzione seguente onPressed: parent.color = "red" rappresenta lazione 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 leffetto sar quello di far cambiare il colore del rettangolo contenitore. Infine, mediante listruzione 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.
Page 55
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: import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Text { text: "Premi qui" font.pointSize: 20 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter id: testo } MouseArea { anchors.fill: testo onPressed: testo.color="red"
Page 56
onReleased: testo.color="black" } } Luso della id:testo ci permetter di catturare gli eventi del mouse in corrispondenza dellarea di testo e tramite onPressed e onReleased andremo a cambiare il colore dellelemento 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 loperatore 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 allapplicazione di esempio, riportata in precedenza, di interagire con entrambi i pulsanti del mouse sullaMouseArea definita dovremo perci scrivere: MouseArea { acceptedButtons: Qt.LeftButton | Qt.RightButton anchors.fill: testo onPressed: testo.color="red" onReleased: testo.color="black" }
Page 57
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 sullarea stessa; in questo caso si parla di eventi di mouse hover. Riprendendo lesempio precedente proviamo ora ad aggiungere una nuova funzione al nostro testo: quando il cursore del mouse verr osizionato sopra larea corrispondente al testo stesso, esso dovr assumere il colre verde, per poi tornare di colore nero quando il cursore lascer larea. In QML lapplicazione sar: import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Text { text: "Premi qui" font.pointSize: 20 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter color: mouse_area.containsMouse ? "green" : "black" id: testo } MouseArea { id: mouse_area acceptedButtons: Qt.LeftButton|Qt.RightButton anchors.fill: testo hoverEnabled: true } } Le istruzioni utili per realizzare questa nuova funzione sono color: mouse_area.containsMouse ? "green" : "black"
Page 58
nel corpo dellelemento Text e listruzione: 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 allelemento Text. Listruzione 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 lidentificativo della MouseArea creata in precedenza. Nel suo corpo infatti stato inserita listruzione id: mouse_area che ci consentir di fare riferimento ad essa con il suo nome. Luso 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). Luso delloperatore ?, ben noto a chi conosce i linguaggi C e C++, non altro che un modo per eseguire unoperazione di confronto (if). Nel caso largomento 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 allinterno 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:
Page 59
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 dellapplicazione per inserire dati di tipo diverso. NB: Focus Attribuire il focus ad un elemento di input un aspetto molto importante dellapplicazione, in quanto permette di navigare tra i differenti elementi alfanumerici per inserire i propri dati o effettuare le proprie scelte. Nel caso di unapplicazione 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.
Page 60
Consideriamo ora un semplice esempio con due elementi di TextInput e vediamo come attribuire il focus ad uno di essi e fornire allutente la consapevolezza di qual lelemento selezionato. import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" TextInput { anchors.left: parent.left; y:16 anchors.right: parent.right text: "Input 1"; font.pixelSize: 32 color: focus ? "black" : "gray" focus:true } TextInput { anchors.left: parent.left; y:64 anchors.right: parent.right text: "Input 2"; font.pixelSize: 32 color: focus ? "black" : "gray" } } 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. Listruzione color: focus ? "black" : "gray" come gi visto in precedenza rappresenta un operatore di confronto sulla propriet di focus. Nel caso lelemento abbia il focus (in pratica lutente ha eseguito un click del mouse sullelemento TextInput) allora il colore del testo sar nero per consentire una chiara identificazione dellelemento 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 quellelemento non ha il focus e quindi non riceve i caratteri della tastiera.
Page 61
Listruzione: focus:true del primo TextInput consente di attribuire il focus a questo elemento allavvio della nostra applicazione di esempio.
A questo punto possibile realizzare un meccanismo per la navigazione dei due TextInput mediante luso del tasto Tab. In questo modo, premendo tale tasto sposteremo il focus da un elemento allaltro e vedremo di volta in volta cambiare il colore del testo selezionato. Modificando il programma QML dellesempio precedente nel modo seguente import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" TextInput {
Page 62
id: testo1 anchors.left: parent.left; y:16 anchors.right: parent.right text: "Input 1"; font.pixelSize: 32 color: focus ? "black" : "gray" focus:true KeyNavigation.tab: testo2 } TextInput { id:testo2 anchors.left: parent.left; y:64 anchors.right: parent.right text: "Input 2"; font.pixelSize: 32 color: focus ? "black" : "gray" KeyNavigation.tab: testo1 } } Come si pu osservare, i due elementi di testo sono stati identificati mediante i rispettivi identificatori (id) come testo1 e testo2. Listruzione 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 uninterfaccia grafica alle quali non ci spossiamo sottrarre. Ai nostri utenti non piacer avere unapplicazione totalmente fuori standard e che li obbligher a ricordare delle combinazioni di tasti inusuali rispetto alla pratica comune. Unalternativa accettabile al tasto Tab per questapplicazione luso ei tasti freccia su/giu. In questo caso le istruzioni che dovremo scrivere saranno: KeyNavigation.down: testo2 KeyNavigation.up: testo1
ESERCIZIO
Page 63
Scrivere un programma QML per muovere unimmagine qualsiasi allinterno 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. Luso di animazioni allinterno di applicazioni dotate di interfaccia utente una conquista relativamente recente, grazie allaumento delle prestazioni dei moderni processori e allarrivo 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 unapplicazione pu essere animato
Page 64
Ogni animazione pu essere programmata per realizzare dei movimenti con carateristiche diverse (movimenti lineari, rimbalzi, effetto molla o elastico) Unanimazione 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 NumberAnimation un primo esempio molto semplice di
import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Rectangle { width: 320; height:240 color: "red" x:0; y:120 NumberAnimation on x { from: 0; to: 160 duration:1000 } } } In questo esempio lapplicazione composta da due rettangoli annidati. Il rettangolo pi interno (di colore rosso) verr spostato sullasse x dalla posizione 0 alla posizione 160 grazie allanimazione NumberAnimation NumberAnimation on x {
Page 65
from: 0; to: 160 duration:1000 } Come si pu osservare questanimazione applicata sulla propriet x (la posizione sullasse 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 questanimazione visibile nelle due figure seguenti:
Page 66
PROPERTYANIMATION
Una qualsiai propriet di un elemento grafico pu essere animata mediante una PropertyAnimation. A tale scopo consideriamo il seguente esempio. import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Rectangle { width: 320; height:240 color: "red" x:160; y:120 id: rettangolo } PropertyAnimation { target: rettangolo properties: "width, height" from: 0; to: 240 duration:1000 running: true } }
Page 67
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). Lultima istruzione nel corpo della PropertyAnimation (running:true) rappresenta labilitazione allesecuzione dellanimazione stessa. Lapplicazione di un valore booleano false alla propriet running corrisponde quindi a mantenere disabilitata lanimazione (occorre pertanto ricordare che una PropertyAnimation non va in esecuzione automaticamente). Graficamente il risultato di questo programma QML sar:
e al termine dellanimazione:
Page 68
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: import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Rectangle { width: 320; height:240 color: "red" x:160; y:120 id: rettangolo } PropertyAnimation { target: rettangolo properties: "width, height" from: 0; to: 240 duration:1000 running: true
Page 69
easing.type: "OutElastic" } } In questo caso stata aggiunta listruzione easing.type: "OutElastic" che fornisce allanimazione stessa un comportamento particolare; il ridimensionamento avverr infatti con unoscillazione (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
Page 70
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, unanimazione 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 unanimazione sul colore dellelemento 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 dellanimazione sar di un
Page 71
secondo (1000 millisecondi) e verr attivata automaticamente mediante listruzione running:true. ColorAnimation { target: rettangolo 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. import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" id: rettangolo ColorAnimation { target: rettangolo property: "color" from: Qt.rgba(0,0,0,1) to: Qt.rgba(1,1,1,1) duration: 2000 running: true } } Lanimazione passer quindi da seguente: un colore nero come in figura
Page 72
A termine animazione si avr invece:
ROTATIONANIMATION
La RotationAnimation unanimazione ottenuta tramite la rotazione di un elemento grafico. Il codice QML per realizzare quest animazione rappresentato dal blocco RotationAnimation{...}. La
Page 73
porzione di codice QML di seguito riportato permette di creare unanimazione 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 dallangolo iniziale a quello finale. La durata di questanimazione sar di un secondo (duration: 1000). RotationAnimation on rotation { from: 45; to: 315 direction: RotationAnimation.Shortest duration: 1000 } 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 lanimazione. Una variazione da 10 a 350 produrr una rotazione di 20 in senso antirario
Lesempio di seguito riportato permette di creare unanimazione che far compiere una rotazione di mezzo giro (180) allimmagine rocket.png import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white"
Page 74
id: rettangolo Image { id: ball source: "rocket.png" anchors.centerIn: parent smooth: true RotationAnimation on rotation { from: 0; to: 180 direction: RotationAnimation.Shortest duration: 1000 } } } Limmagine di partenza sar quindi la seguente
A termine animazione limmagine sar cos ruotata:
Page 75
GRUPPI DI ANIMAZIONI
Le animazioni di base descritte precedentemente possono essere raggruppate per ottenere effetti combinati sugli elementi grafici di unaplicazione; 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 lapplicazione parallela di pi animazioni su uno stesso elemento grafico.
SEQUENTIALANIMATION
Come sempre, il miglior modo per comprendere un concetto vederne limmediata applicazione con un semplice esempio ed anche in questo caso realizzaremo un semplice programma QML adatto allo scopo.
Page 76
Lanimazione che si vuol realizzare si compone di due parti: nella prima parte dellanimazione, limmagine che compare sul monitor verr ridimenzionata da un valore 100% ad un valore 50% e al termine del ridimensionamento verr fatta svanire riducendone lopacit dal valore massimo a zero. Il codice QML che realizza questa doppia animazione il seguente: import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Image { id: rocket anchors.centerIn: parent source: "rocket.png" } SequentialAnimation { NumberAnimation { target: rocket; properties: "scale" from: 1.0; to: 0.5; duration: 1000 } NumberAnimation { target: rocket; properties: "opacity" from: 1.0; to: 0.0; duration: 1000 } running: true } } Lanimazione 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 dellimmagine dal valore corrente 1.0 ad un valore dimezzato (0.5) e la seconda animazione sar incaricata di far svanire limmagine animandone
Page 77
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 lesempio precedente sar quindi possibile parallelizzare le due singole animazioni. Il codice QML per realizzare ci far quindi uso della ParallelAnimation come di seguito riportato. import QtQuick 1.0 Rectangle { width: 640; height:480 color: "white" Image { id: rocket anchors.centerIn: parent source: "rocket.png" } ParallelAnimation { NumberAnimation { target: rocket; properties: "scale" from: 1.0; to: 0.5; duration: 1000 } NumberAnimation { target: rocket; properties: "opacity" from: 1.0; to: 0.0; duration: 1000 } running: true } } Lanimazione complessiva data dal gruppo ParallellAnimation {...}. Al suo interno si trovano due animationi singole (NumberAnimation) che verranno eseguite contemporaneamente,
Page 78
di cui la prima consentir di realizzare il ridimensionamento dellimmagine e la seconda far svanire limmagine. Entrambe le animazioni avranno durata di un secondo (mille millisecondi), lanimazione risultante sar quindi anchessa 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 unanimazione particolare, la PauseAnimation. Come si intuisce dal nome, questanimazione non fa nulla, serve solamente per introdurre delle pause allinterno di sequenze. Come si pu intuire, lunica propriet di una PauseAnimation la sua durata. Il codice di esempio sotto riportato illustra una PauseAnimation di 1 secondo (espresso in millisecondi) PauseAnimation { duration: 1000 }
STATI E TRANSIZIONI
Il meccanismo di Stati e Transizioni rappresenta un formalismo utile per definire levolversi di unapplicazione 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 dellinformatica in quanto consente di modellizzare il comportamento di unapparecchiatura, un sistema complesso (sistemi industriali, aeronautici) o una qualsiasi situazione in cui a fronte di un evento lapplicazione 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
Page 79
funzionamento del semaforo non prevede alcuno stato in cui entrambe le luci sono illuminate. Proviamo ora a realizzare unapplicazione con QML per visualizzare questo semaforo e cambiarne lo stato ad ogni click del mouse. Leveto click del mouse assume quindi un significato concettuale importante per la nostra macchina a stati, esso infatti sar levento che far passare il semafono da STOP a GO e viceversa; esso provocher quindi la transizione da uno stato allaltro. 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 allaltro 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.
import QtQuick 1.0 Rectangle { width: 640; height:480 color: "black" id: rettangolo Rectangle { width: 150; height: 250 anchors.centerIn: rettangolo states: [
Page 80
State { name: "stop" PropertyChanges { target: rosso; color: "grey" } PropertyChanges { target: verde; color: "green" } }, State { name: "go" PropertyChanges { target: rosso; color: "red" } PropertyChanges { target: verde; color: "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 { anchors.fill: parent 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 allavvio del programma con la sola luce rossa illuminata (per cui il colore del rettangolo verde allinizio sar in realt grigio).
Page 81
La realizzazione del meccanismo di stati e transizioni avviene mediante due blocchi di istruzioni, il blocco states[...] consente di definire tutti gli stati dellapplicazione, per quanto riguarda invece la realizzazione delle transizioni si ricorre allimplementazione di una MouseArea{...} al cui interno verranno effettuati i controlli necessari per effettuare la variazione di stato. Iniziamo dapprima con limplementazione degli stati STOP e GO : states: [ State { name: "stop" PropertyChanges "grey" } PropertyChanges "green" } }, State { name: "go" PropertyChanges "red" } PropertyChanges "grey" } } ]
{ target: rosso; color: { target: verde; color:
{ target: rosso; color: { target: verde; color:
Allinterno del blocco states trovano quindi posto i due stati del nostro semaforo: stop e go.
Page 82
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 import QtQuick 1.0 Rectangle { border.color: "green" color: "white" radius: 4; smooth: true TextInput { anchors.fill: parent anchors.margins: 5 text: "Enter text..." color: focus ? "black" : "gray" 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.
Page 83
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: import QtQuick 1.0 Rectangle { width: 400; height: 100; color: "lightblue" LineEdit { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter width: 300; height: 50 } }
Page 84
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 <type> <name>[: <value>] Per ogni propriet che si vuol rendere disponibile per lelemento creato.
Page 85
Nel caso di LineEdit il codice del programma QML diventer: import QtQuick 1.0 Rectangle { border.color: "green" color: "white" radius: 4; smooth: true TextInput { id: text_input anchors.fill: parent anchors.margins: 2 text: "Enter text..." color: focus ? "black" : "gray" 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 dellelemento 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
Page 86
property real slope: 123.456 property bool condition: true property url address: "http://qt.nokia.com/"
Page 87
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
Page 88
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
Page 89
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
Page 90
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 sullelemento stesso (cos come avveniva nel caso di onClicked negli esempi di paragrafo...).
Page 91
CONCLUSIONE
Come risulta evidente dalla sua lettura, questo libro non completo, anzi appena allinizio. I prossimi paragrafi riguarderanno i custom items, lintegrazione con il mondo C++, luso di elementi complessi, il model view, lintegrazione con database e molto altro ancora. Il completamento di questo libro terr conto dei commenti e contributi che arriveranno sul blog dellautore e verr corredato dei files QML degli esempi riportati.
Page 92

Introduzione A QT Quick (Italian)

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Introduzione A QT Quick (Italian)

Caricato da

Copyright:

Formati disponibili

Edizione BETA

Introduzione a Qt Quick -beta-

2011 | Paolo Sereno

Introduzione a Qt Quick -beta-

EDIZIONE BETA: Giugno 2011

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Presentazione delledizione beta

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Premiamo Next ed avremo:

Introduzione a Qt Quick -beta-

Per poter utilizzare Qt necessario leggere ed accettare la licenza proposta.

Introduzione a Qt Quick -beta-

A questo punto possiamo premere Next.

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

E finalmente possiamo avviare linstallazione.

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Premiamo ora Next.

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

UNA PRIMA OCCHIATA A QT CREATOR

La finestra principale di Qt Creator cos composta:

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Che si traduce in questa struttura della nostra applicazione

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

E la nostra applicazione sar

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

} GradientStop { position: 1.0; color: } } } Il risultano che otteniamo il seguente:

Specifichiamo quindi un gradiente lineare dal colore blu al colore verde.

Introduzione a Qt Quick -beta-

"gray" "white" "gray"

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

TRATTAMENTO DELLE IMMAGINI

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-

Come si pu osservare, limmagine risulta ruotata in senso orario di 45 gradi.

Introduzione a Qt Quick -beta-

Text { x:320; y:240 text: "testo" font.pointSize: 16 } Otterremo come risultato:

Introduzione a Qt Quick -beta-

Introduzione a Qt Quick -beta-