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

Like this? Share it with your network

Share

Qtday Introduzione a qt quick

on

  • 854 views

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

Statistics

Views

Total Views
854
Views on SlideShare
795
Embed Views
59

Actions

Likes
0
Downloads
12
Comments
0

3 Embeds 59

http://www.qtday.it 54
http://kyk.it 3
http://feeds.feedburner.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Qtday Introduzione a qt quick Presentation 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