Qt Quick for dynamic UI development

1,173 views

Published on

Qt Quick for dynamic UI development

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,173
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Qt Quick for dynamic UI development

  1. 1. Qt Quick for dynamic UI developmentGianni Valdambrini (aleister@develer.com)
  2. 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 lidea di rendere (finalmente!) semplice la collaborazione fra designer e programmatori. 2
  3. 3. Cosè QML? E un linguaggio dichiarativo utilizzato da Qt Quick, costruito come estensione di JavaScript. Fornisce unalta 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. 4. Un linguaggio dichiarativo Piuttosto che descrivere come cambiare la UI in modo imperativo (setta quello, fai quellaltro) descrive la UI in termini di proprietà (quellaltezza è sempre la metà di quellaltra). Rectangle { width: 200 height: 200 color: "white" Rectangle { width: parent.width heigth: parent.width / 2 color: “red” anchors.top: parent.top } } 4
  5. 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. 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. 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. 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. 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 unaltra proprietà o il risultato di una funzione JavaScript. 9
  10. 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. 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. 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. 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. 14. Integrazione con il C++ Qualsiasi tipo derivato da QObject può essere registrato ed esposto al QML come proprietà mediante lutilizzo della macro qmlRegisterType. Attenzione a non scrivere codice QML come se fosse imperativo, ottenendo codice meno efficiente e più complesso. 14
  15. 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. 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. 17. Domande?? 17
  18. 18. GRAZIE ! Develer S.r.l. Via Mugellese 1/A 50013 Campi Bisenzio Firenze - ItaliaContattiMail: info@develer.comPhone: +39-055-3984627Fax: +39 178 6003614http://www.develer.com

×