• Like
Qtday  Introduzione a qt quick
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Qtday Introduzione a qt quick

  • 567 views
Published

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

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
567
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
12
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Introduzione a Qt QuickGianni 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 lidea 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 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. 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 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 unaltra 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
  • 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 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
  • 17. Domande?? 17
  • 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