Qt Quick for dynamic UI development

1. Qt Quick for dynamic UI
development
Gianni Valdambrini (aleister@develer.com)

2. Qt Quick
 Qt Quick è un framework pensato appositamente per
costruire UI dinamiche per dispositivi mobili o
touchscreen.
 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
heigth: parent.width / 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, GestureArea
 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, GestureArea
 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 non
visuali con il quale posizionarne altri:
 Row, Column, Grid
 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.
 Le transizioni fra stati definiscono il modo in cui le
proprietà cambiano per passare da uno stato ad un
altro.
11

12. Stati e transizioni
 Esempio:
Rectangle {
function changeState() {
page.state = page.state == "" ? "clicked" : "";
}
id: page
width: 200
height: 200
color: "white"
states : [
State {
name: "clicked"
PropertyChanges { target: page; color: "red"; }
}
]
MouseArea {anchors.fill: parent; onClicked: changeState(); }
}
12

13. Alcuni tool per QML
 Designer: integrato in QtCreator dalla versione 2.1
 QMLViewer: un 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 derivato da QObject può essere registrato
ed esposto al QML come proprietà mediante l'utilizzo
della macro qmlRegisterType.
 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://doc.qt.nokia.com/latest/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

17. Domande?
? 17

18. GRAZIE !
Develer S.r.l.
Via Mugellese 1/A
50013 Campi Bisenzio
Firenze - Italia
Contatti
Mail: info@develer.com
Phone: +39-055-3984627
Fax: +39 178 6003614
http://www.develer.com