Click here to load reader
Upload
develer-srl
View
891
Download
1
Embed Size (px)
DESCRIPTION
Qt Quick for dynamic UI development
Citation preview
Qt Quick for dynamic UI development
Gianni Valdambrini ([email protected])
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.
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.
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 }}
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 JavaScriptcreateComponent e createQmlObject
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?
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!
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.
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.
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:
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.
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(); }}
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.
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.
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!
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/
17
Domande?
??
GRAZIE !GRAZIE !
Contatti
Mail: [email protected]
Phone: +39-055-3984627
Fax: +39 178 6003614
http://www.develer.com
Develer S.r.l.Via Mugellese 1/A
50013 Campi BisenzioFirenze - Italia