Qt Quick è il nuovo rivoluzionario ambiente di sviluppo per realizzare applicazioni fluide, interagendo in modo ottimale con i designer per curare al massimo il look & feel
1. Introduzione a Qt Quick
Gianni Valdambrini (aleister@develer.com)
Nokia Certified Qt Specialist
2. Qt Quick
Qt Quick è un framework pensato appositamente per costruire
UI dinamiche per dispositivi mobili o touchscreen.
In Qt5 sarà la tecnologia chiave nello sviluppo di GUI
con Qt – anche per Desktop!
E' realizzato “sopra” le Qt in modo da sfruttarne i pregi ed
ereditarne le funzionalità (es: accelerazione hardware,
internazionalizzazione, risorse, ecc..).
Nasce con l'idea di rendere (finalmente!) semplice la
collaborazione fra designer e programmatori.
2
3. Cos'è QML?
E' un linguaggio dichiarativo utilizzato da Qt Quick,
costruito come estensione di JavaScript.
Fornisce un'alta integrazione con il Qt Object Model
Supporta la network transparency e i property bindings.
Permette di realizzare applicazioni miste QML/C++ o
migrazioni graduali.
3
4. Un linguaggio dichiarativo
Piuttosto che descrivere come cambiare la UI in modo
imperativo (setta quello, fai quell'altro) descrive la UI in
termini di proprietà (quell'altezza è sempre la metà di
quell'altra).
Rectangle {
width: 200
height: 200
color: "white"
Rectangle {
width: parent.width
height: parent.height / 2
color: “red”
anchors.top: parent.top
}
}
4
5. Gli Elementi
La UI è composta da uno o più elementi di vario tipo,
ciascuno dei quali avente determinate proprietà.
E' possibile utilizzare gli elementi predefiniti in QML oppure
definirne di nuovi, chiamati componenti.
Ogni componente andrà definito in un file separato,
chiamato documento QML.
Un componente dovrebbe essere strutturato in modo
da essere riusabile!
Gli elementi possono essere caricati anche dinamicamente,
attraverso le funzioni JavaScript
createComponent e createQmlObject 5
6. Gli Elementi
Non tutti gli elementi sono visuali, alcuni sono logici e possono
implementare svariate funzionalità.
Alcuni dei principali elementi predefiniti:
Item, Rectangle, Image, Text, TextInput, TextEdit
PropertyAnimation, NumberAnimation, ..
Timer, MouseArea, Loader, Qt, WorkerScript
ListView, PathView, GridView
Ma sono solo questi?
6
7. Gli Elementi
Non tutti gli elementi sono visuali, alcuni sono logici e possono
implementare svariate funzionalità.
Alcuni dei principali elementi predefiniti:
Item, Rectangle, Image, Text, TextInput, TextEdit
PropertyAnimation, NumberAnimation, ..
Timer, MouseArea, Loader, Qt, WorkerScript
ListView, PathView, GridView
Ma sono solo questi? Qml components!
7
8. Le proprietà
Ogni componente è rappresentato dagli elementi che lo
compongono e dalle proprietà definite in esso.
Tali proprietà possono essere “ereditate” oppure possono
essere definite ex-novo.
La definizione di una nuova proprietà implicitamente definisce
anche un segnale al quale è possibile registrarsi per essere
informati di un cambiamento di valore della proprietà stessa.
8
9. Le proprietà
Le proprietà sono tipate, e come tali è possibile assegnare ad
una proprietà solo valori dello stesso tipo.
E' possibile creare dei bindings in modo che il valore di una
proprietà sia in qualsiasi momento lo stesso di un'altra
proprietà o il risultato di una funzione JavaScript.
9
10. Elementi e posizionamento
QML mette a disposizione alcuni semplici elementi logici con il
quale posizionarne altri visuali:
Row, Column, Grid, Repeater
In alternativa è possibile ottenere più flessibilità utilizzando le
ancore:
10
11. Stati e transizioni
La UI può avere più stati nei quali le proprietà possono
assume diversi valori.
Ciò che non è definito in uno stato fa parte dello stato
di partenza, implicitamente sempre definito
Gli altri stati sono definiti come il cambiamento di
alcune proprietà degli elementi del documento
Le transizioni fra stati definiscono il modo in cui le proprietà
cambiano per passare da uno stato ad un altro.
11
13. Alcuni tool per QML
Designer: integrato in QtCreator dalla versione 2.1
QMLViewer: un utile tool per testare le interfacce scritte
interamente in QML (o parti di essa).
Debugger: integrato in QtCreator.
13
14. Integrazione con il C++
Qualsiasi tipo può essere registrato ed esposto al Qml
mediante la macro qmlRegisterType e la creazione di un
apposito plugin.
Singole istanze di oggetti possono essere esportate al
Qml mediante il metodo setContextProperty()
Attenzione a non scrivere codice QML come se fosse
imperativo, ottenendo codice meno efficiente e più
complesso.
14
15. Integrazione con il C++
E' anche possibile chiamare da QML metodi in C++
appartenenti a sottoclassi di QObject o agganciarsi da QML a
segnali emessi.
Ma è anche possibile fare il contrario, chiamando dal C++
metodi in QML e addirittura navigare nel tree di un documento
QML
Attenzione: usare solo per debug!
15
16. Per saperne di più
La documentazione della versione di sviluppo:
http://developer.qt.nokia.com/doc/qt-4.8/qtquick.html
La mailing list dedicata:
http://lists.qt.nokia.com/mailman/listinfo/qt-qml
Il blog di Qt, dove trovare news su QML e su tutto il mondo Qt:
http://labs.qt.nokia.com/
16
