Rapido, intuitivo, potente: Qt Quick all'assalto delle User Interfaces

Rapido, intuitivo, potente: Qt Quick all'assalto delle User Interfaces Alessandro La Rosa http://www.jappit.com

Di che si parla? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Speaker ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Cos'è Qt Quick? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Strumenti di sviluppo ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Qt SDK Qt Creator Qt Designer Qt Simulator

Devices ,[object Object],[object Object],[object Object],[object Object],[object Object],v

QML Dichiarativo Aspetto e comportamento UI Struttura ad albero (DOM-like) Estendibile con QML o C++

QML – Basics import QtQuick 1.0 Rectangle { width: 200; height: 200 color: "blue" Image { anchors.centerIn: parent source: "qt-logo.png" } } ,[object Object],[object Object]

QML – Basics import QtQuick 1.0 Rectangle { width : 200; height : 200 color : "blue" Image { anchors.centerIn: parent source: "qt-logo.png" } } ,[object Object],[object Object],[object Object]

QML - Elementi ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

QML – Proprietà Rectangle { id : root (4) width : 360; height : 360 (1) property variant myList: [ "QML" , "Rocks!" , 3] (2) onWidthChanged : console.log( "Proprietà di tipo Script" ) Text { text : root.myList[0] + " " + parent.myList[1]; font : { bold : false; italic : true} (3) } } ,[object Object],[object Object],[object Object],[object Object]

QML – Proprietà Rectangle { id : root width : 360; height : 360 property variant myList: [ "QML" , "Rocks!" , 3] onWidthChanged : console.log( "Proprietà di tipo Script" ) Text { text : root.myList[0] + " " + parent.myList[1]; font : { bold : false; italic : true} } } ,[object Object],[object Object],[object Object],[object Object],[object Object]

Alcune proprietà fondamentali ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Il property Binding ,[object Object],[object Object],[object Object],Questi sono binding Questi NO! Rectangle { id : root ; width : 360; height : 360 Rectangle { id : redRect width : root.width / 2 height : root.height / 2 } Component.onCompleted : { redRect.width = root.width / 2 redRect.height = root.height / 2 } }

Comporre la User Interface ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Layout basati su anchor Rectangle { width : 200; height : 200; color : "red" Rectangle { width : 100; height : 100; color : "blue" anchors.top : parent.top anchors.horizontalCenter : parent.horizontalCenter anchors.topMargin : 10 anchors.horizontalCenterOffset : -20 } } ,[object Object],[object Object],[object Object],[object Object],[object Object]

Elementi Positioner Column { anchors.centerIn : parent Rectangle { width : 100; height : 100; color : "red" } Rectangle { width : 100; height : 100; color : "blue" } Rectangle { width : 100; height : 100; color : "green" } } ,[object Object],[object Object],[object Object]

Proprietà x, y, width e height Rectangle { width : 200; height : 200; color : "red" Rectangle { color : "blue" width : 100 height : 100 x : 50 y : 80 } } ,[object Object],[object Object]

Interazione Utente – Touch ,[object Object],[object Object],[object Object],[object Object],Rectangle { width : 200; height : 200; color : "red" MouseArea { anchors.fill : parent onPressed : parent.color = "blue" onReleased : parent.color = "red" } }

Interazione Utente – Touch ,[object Object],[object Object],[object Object],[object Object],Rectangle { width : 200; height : 200 color : myMouseArea.pressed ? "blue" : "red" MouseArea { id : myMouseArea drag.target : parent anchors.fill : parent } }

Interazione Utente – Tastiera ,[object Object],[object Object],[object Object],[object Object],[object Object],Rectangle { width : 100; height : 100; focus : true; Keys.onPressed : if (event.key == Qt.Key_Left) console.log( "LEFT" ) Keys.onUpPressed : console.log( "UP" ) }

Gestione del focus ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Estendere QML con nuovi componenti ,[object Object],[object Object],[object Object],[object Object],RoundedTextInput.qml Rectangle { radius : 5 color : "blue" property string text: textInput.text TextInput { id : textInput color : "white" anchors.fill : parent ; anchors.margins : 5 } }

Estendere QML con nuovi componenti ,[object Object],[object Object],[object Object],[object Object],main.qml Rectangle { width : 300; height : 300 RoundedTextInput { height : 60 width : parent.width text : "Some default text" } }

Property Alias ,[object Object],[object Object],[object Object],[object Object],[object Object],Item { width : 200; height : 200 property alias rectColor: myRect.color rectColor : "blue" // NON FUNZIONA! Rectangle { id : myRect ; anchors.fill : parent } }

Aggiungere segnali ad un componente ,[object Object],[object Object],[object Object],RoundedButton.qml Rectangle { radius : 5; color : "blue" property string text signal buttonClicked Text { anchors.centerIn : parent text : parent.text color : "white" } MouseArea { anchors.fill : parent onClicked : parent.buttonClicked() } }

Definire metodi per un componente RoundedButton.qml Rectangle { radius : 5; color : "blue" property string text function getSomeValue() { return Math.random() } ... } main.qml RoundedButton { id : myButton width : 450; height : 100 text : "Click me" Component.onCompleted : { console.log( myButton.getSomeValue() ); } }

Componenti e moduli ,[object Object],[object Object],[object Object],Struttura folder MyApp |- main.qml |- MyModule / |- Triangle.qml |- Circle.qml |- Ellipsis.qml main.qml import QtQuick 1.0 import "MyModule" Rectangle { width : 300; height : 300 Triangle {...} Circle {...} Ellipsis {...} }

Versioning e named imports qmldir metadata file Triangle 1.0 Triangle.qml Circle 1.0 Circle.qml Ellipsis 1.0 Ellipsis.qml main.qml import QtQuick 1.0 import "MyModule" 1.0 Rectangle { width : 300; height : 300 Triangle {...} } ,[object Object],[object Object],import "MyModule" 1.0 as Shapes Rectangle { width : 300; height : 300 Shapes.Triangle {...} }

Gestire e visualizzare dati ,[object Object],[object Object],[object Object],[object Object],[object Object],ListModel { id : myModel ListElement { nome : "Symbian" } ListElement { nome : "Maemo" } ListElement { nome : "MeeGo" } }

Visualizzazione di un Data Model ListModel { id : myModel ListElement { colore : "blue" } ListElement { colore : "red" } ListElement { colore : "green" } } Row { anchors.centerIn : parent spacing : 20 Repeater { model : myModel delegate : Rectangle { width : 200; height : 200 color : colore Text { text : index; anchors.centerIn : parent} } } } ,[object Object],[object Object],[object Object]

Visualizzazione efficiente: le Views ListModel { id : myModel ListElement { nome : "Symbian" } ListElement { nome : "Maemo" } ListElement { nome : "MeeGo" } } ListView { anchors.fill : parent model : myModel focus : true delegate : Rectangle { color : ListView.isCurrentItem ? "lightblue" : "white" width : parent.width; height : 100 border { width : 1; color : "black" } Text { text : nome; anchors.centerIn : parent} } } ,[object Object],[object Object],[object Object]

Altri Data Model... VisualItemModel { id : myModel Rectangle { width : 800; height : 100; color : "red" } Rectangle { width : 800; height : 100; color : "blue" } Rectangle { width : 800; height : 100; color : "green" } } ListView { anchors.fill : parent; model : myModel } VisualItemModel ListView { anchors.fill : parent model : 100 delegate : Text { text : "Index: " + index } } Anche un Number! ,[object Object],[object Object]

Animare la User Interface ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Animazione esplicita Item { width : 360; height : 360 Image { width : 64; height : 64 source : "myImage.png" NumberAnimation on x { from : 0; to : 200 duration : 3000 easing.type : Easing.OutElastic } } } ,[object Object],[object Object],[object Object],[object Object]

Animazione standalone Item { width : 360; height : 360 Image { id : myImage; width : 64; height : 64; source : "myImage.png" MouseArea { anchors.fill : parent onClicked : myAnimation.running = true } } NumberAnimation { id : myAnimation target : myImage ; properties : "x" from : 0; to : 200; duration : 3000 } } ,[object Object],[object Object],[object Object]

Animazione al variare di una proprietà Item { width : 360; height : 360 Image { id : myImage width : 64; height : 64 ; source : "myImage.png" Behavior on x { NumberAnimation { duration : 3000 } } } Component.onCompleted : { myImage.x = 200 } } ,[object Object],[object Object]

Animazione in un signal handler Item { width : 360; height : 360 Image { id : myImage width : 64; height : 64 ; source : "myImage.png" MouseArea { anchors.fill : parent onClicked : NumberAnimation { target : myImage; properties : "x" to : 200; duration : 3000 } } } } ,[object Object]

Gestire la UI tramite stati ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Definizione di uno stato Rectangle { id : root ; width : 360; height : 360 ; color : "red" states : [ State { name : "pressed" PropertyChanges { target : root color : "blue" } } ] } ,[object Object],[object Object],[object Object]

Attivazione di uno stato Rectangle { id : root ; width : 360; height : 360 ; color : "red" states : […] MouseArea { anchors.fill : parent onPressed : root.state = "pressed" onReleased : root.state = "" } } ,[object Object],[object Object]

Condizioni di uno stato Rectangle { id : root ; width : 360; height : 360 ; color : "red" states : [ State { when : myMouseArea.pressed name : "pressed" PropertyChanges {...} } ] MouseArea { id : myMouseArea anchors.fill : parent } } ,[object Object],[object Object]

Transizioni tra stati Rectangle { [...] transitions : [ Transition { from : "" to : "pressed" PropertyAnimation { target : root; properties : "color" ; duration : 250 } } ] } ,[object Object],[object Object],[object Object]

Animazioni parallele e sequenziali Image { id : myImage width : 64; height : 64; source : "qt-logo.png" SequentialAnimation { running : true; NumberAnimation { target : myImage; properties : "x" from : 0; to : 200; duration : 1000 } ParallelAnimation { NumberAnimation { target : myImage; properties : "rotation" from : 0; to : 90; duration : 1000 } NumberAnimation { target : myImage; properties : "y" from : 0; to : 200; duration : 1000 } } } }

QML e JavaScript ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Esempio di libreria JavaScript function startup() { // cambio il colore dell'elemento con id “root” root.color = "lightblue" ; } function randomNumber() { return Math.random(); } js/MyLibrary.js import "js/MyLibrary.js" as CoreLogic Rectangle { id : root; width : 200; height : 200 Text { text : "Numero casuale: " + CoreLogic.randomNumber(); } Component.onCompleted : CoreLogic.startup(); } main.qml

Estendere QML in C++ ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Utilizzo di un tipo implementato in C++ import QtQuick 1.0 import FormeGeometriche 1.0 Rectangle { width : 300 height : 300 Triangolo { anchors.centerIn : parent width : 200 height : 100 color : "green" } } ,[object Object],[object Object],[object Object]

Implementiamo il nuovo visual item triangleitem.h #include <QDeclarativeItem> class Triangletem : public QDeclarativeItem { Q_OBJECT public : explicit Triangletem ( QDeclarativeItem *parent = 0 ); void paint ( QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = 0 ); }; ,[object Object],[object Object],[object Object]

Definire nuove proprietà triangleitem .h class TriangleItem : public QDeclarativeItem { Q_OBJECT Q_PROPERTY ( QColor color READ color WRITE setColor NOTIFY colorChanged) public : [...] const QColor &color() const ; void setColor ( const QColor & newColor ); signals : void colorChanged(); private : QColor m_color ; }; ,[object Object],[object Object],[object Object]

Costruttore e metodo paint() triangleitem.cpp TriangleItem :: TriangleItem ( QDeclarativeItem *parent) : QDeclarativeItem (parent) { setFlag( QGraphicsItem :: ItemHasNoContents , false); } void TriangleItem :: paint ( QPainter *painter, const QstyleOptionGraphicsItem *option, QWidget *widget) { painter->save(); painter->setBrush( m_color ); QPolygon triangolo; triangolo.putPoints( 0 , 3 , option-> rect .width()/ 2 , 0 , 0 , option-> rect .height(), option-> rect .width(), option-> rect .height()); painter->drawPolygon(triangolo); painter->restore(); } ,[object Object],[object Object],[object Object]

Implementiamo setter e getter triangleitem.cpp const QColor & TriangleItem :: color () const { return m_color ; } void TriangleItem ::setColor(const QColor &newColor) { if ( m_color != newColor) { m_color = newColor; update (); emit colorChanged (); } } ,[object Object],[object Object],[object Object],[object Object],[object Object]

Registrazione del nuovo tipo main.cpp int main (int argc, char *argv[]) { QApplication app(argc, argv); qmlRegisterType< TriangleItem >( "FormeGeometriche" , 1 , 0 , "Triangolo" ); QmlApplicationViewer viewer; viewer.setOrientation( QmlApplicationViewer :: ScreenOrientationAuto ); viewer.setMainQmlFile( QLatin1String ( "qml/MyQtQuickApp/main.qml" )); viewer.showExpanded(); return app.exec(); } ,[object Object],[object Object],[object Object],[object Object]

Aggiungere metodi richiamabili da QML triangleitem.h class TriangleItem : public QDeclarativeItem { public : Q_INVOKABLE QColor randomColor() const; } triangleitem.cpp QColor TriangleItem :: randomColor () const { return QColor (qrand() & 0xff , qrand() & 0xff , qrand() & 0xff ); } main.qml Triangolo { width : 200; height : 100 color : randomColor() } ,[object Object],[object Object]

Aggiungere proprietà custom triangleitem.h class TriangleItem : public QDeclarativeItem { Q_ENUMS ( Style ) public: enum Style { Normal , UpsideDown }; const Style &style() const; void setStyle(const Style &newStyle); private : Style m_style ; } ,[object Object],[object Object],[object Object],[object Object],[object Object]

Utilizzo di proprietà enum triangleitem.cpp void TriangleItem :: paint ( QPainter *painter, const QstyleOptionGraphicsItem *option, QWidget *widget) { painter->save(); painter->setBrush( m_color ); QPolygon triangolo; if ( m_style == UpsideDown ) triangolo.putPoints( 0 , 3 , option-> rect .width()/ 2 , option-> rect .height(), 0 , 0 , option-> rect .width(), 0 ); else triangolo.putPoints( 0 , 3 , option-> rect .width()/ 2 , 0 , 0 , option-> rect .height(), option-> rect .width(), option-> rect .height()); painter->drawPolygon(triangolo); painter->restore(); } triangleitem.cpp Triangolo { anchors.centerIn : parent width : 200; height : 100 color : randomColor() style : Triangolo.UpsideDown }

Velocizziamo lo sviluppo ,[object Object],[object Object],v

Plugin QML di Qt Mobility ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Rapido, intuitivo, potente: Qt Quick all'assalto delle User Interfaces

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Rapido, intuitivo, potente: Qt Quick all'assalto delle User Interfaces

Ähnlich wie Rapido, intuitivo, potente: Qt Quick all'assalto delle User Interfaces (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (9)

Rapido, intuitivo, potente: Qt Quick all'assalto delle User Interfaces