Qt On Mobile. User Group C++ Francophone Paris Blackberry Developer Group. Introduction à Qt. Paris, le 5 juin 2013

Transcription

1 Qt On Mobile User Group C++ Francophone Paris Blackberry Developer Group Paris, le

2 Vue d ensemble Bibliothèque graphique Ensemble d outils de développement multi-plateforme Fondamentaux de Qt Modèle vue Histoire de Qt IO (XML, SQL, réseau) Installation Web (wbekit, JSON) Outils de Qt Animations QObject moc Meta-object Interface graphique Qt Quick Architecture object, hiérachie Éléments graphique Qt Widgets Interaction Qt Quick État et transtion Painting Animations Settings, ressource, translation Modules (controls, sensors) Dialogue Intégration C++

3 Présentation Guillaume Belz Biochimiste, CHU Lyon Sud Développement d outils d analyse protéomique pour la recherche contre le cancer Ancien responsable de la rubrique C++ sur Developpez.com Auteur participant à Créer des applications avec Qt 5 Les essentiels (d-booker.fr) Site : guillaumebelz.wordpress.com

4 Histoire de Qt Les débuts : Qt 1 (1995) à Qt 3 (2001) Trolltech Qt 4 (2005) : réorganisation majeure des modules Période Nokia (2008 à 2012) : ajout de la licence LGPL forte orientation vers les mobiles Performances Qt Quick Digia (depuis 2012) : Qt 5 Open gouvernance

5 Installer Qt 5 Téléchargement Desktop Platforms Windows Linux/X11 Mac OS X Embedded platforms Embedded Linux (DirectFB, EGLFS, KMS, and Wayland) Windows Embedded (Compact and Standard) Real-Time Operating Systems, such as QNX, VxWorks and INTEGRITY Mobile platforms Android ios Windows 8 (WinRT) BlackBerry 10

6 Le Qt SDK Le framework Qt Core (QObject) UI (widgets, graphics, OpenGL) IO (fichier, BdD, réseau) Multimédia Qt Quick Web (Webkit, JSON) Qt Creator Qmake Designers Test Qt Installer Framework

7 Les modules Essentials Qt Core : classes non graphiques de base Qt GUI : classes graphiques de base (OpenGL) Qt Widgets : widgets Qt Quick / Qt QML : Qt Quick 2 Qt Multimedia : audio, vidéo, radio, caméra Qt Network : réseau Qt SQL : bases de données Qt WebKit : intégration de WebKit

8 Les modules Add-Ons Active QtWindows : ActiveX et COM (Windows) Qt Concurrent : programmation concurrente Qt D-Bus : inter-process (Linux) Qt Graphical Effects : effets graphiques Qt Quick 2 (shaders) Qt Image Formats : format image supplémentaires : TIFF, MNG, TGA, WBMP Qt OpenGL : widget OpenGL (Qt Gui) Qt Print Support : imprimantes Qt Declarative : Qt Quick 1 (Qt Quick) Qt Script : JavaScript (Qt QML) Qt SVG : afficher des images SVG Qt XML, Qt XML Patterns : XPath, XQuery, XSLT, validation XML

9 Futurs modules Qt Quick Controls (Qt 5.1) : widgets Qt Quick Layouts (Qt 5.1) : layouts Qt Sensors (Qt 5.1) : capteurs Qt Serial Port (Qt 5.1) : accès ports série Qt 3D (Qt 5.2?) : scène 3D Qt Mobility (?) : contacts, SMS, agenda

10 Qt Widgets : Hello world // main.cpp #include "mainwindow.h" #include <QApplication> int main(int argc, char *argv[]) // mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> class MainWindow : public QMainWindow { { QApplication a(argc, argv); Q_OBJECT public: MainWindow w; MainWindow(QWidget *parent = 0) : QmainWindow(parent) {} w.show(); return a.exec(); } ~MainWindow() {} } ; #endif // MAINWINDOW_H

11 QObject QMetaObject : informations sur le QObject (introspection) Signaux et slots Structure hiérarchique Propriétés Internationalisation Events Dynamic cast Chaîne de compilation spécifique (moc)

12 Events, signaux, slots Evenement : boucle de traitement Créer : dériver de QEvent, type() Emettre : postevent(), sendevent() Traiter : eventfilter(), void xxxevent(qxxxevent), accept(), ignore() Signaux et slots : couplage faible Créer un signal : signals: void unsignal(int) ; Émettre un signal : emit unsignal(10) ; Créer un slot : public slots: void unslot(int); Connecter : connect(object1, SIGNAL(unSignal(int)), object2, SLOT(unSlot(int)); Multithread par event

13 Widgets Rendu plate-forme dépendant Affichage : QLabel, QProgressBar, QLineEdit, etc. Mise en forme : QStyle, QFont, StyleSheets, etc. Interaction : QPushButton, QSlider, QLineEdit, etc. Main window : QMainWindow, QMenu, QstatusBar, etc. Organisation : QTabBar, QdockWidget, QMdiArea, etc. Alignement : QLayout Dialogues : QFileDialog, QMessageBox, QInputDialog, etc. Dessin : QPainter, QBrush, QImage, etc. Rich text : QtextDocument, QtextEdit, etc.

14 IODevice, sérialisation Lecture-écriture sur devices (fichiers, réseau) en binaire (QDataStream) ou texte (QtextStream) Versionning, plate-forme indépendant (endian) Écriture QFile file("file.dat"); file.open(qiodevice::writeonly); QDataStream out(&file); // we will serialize the data into the file out << QString("the answer is"); // serialize a string out << (qint32)42; // serialize an integer Lecture QFile file("file.dat"); file.open(qiodevice::readonly); QDataStream in(&file); // read the data serialized from the file QString str; qint32 a; in >> str >> a; // extract "the answer is" and 42

15 Modèle-vue Model-View-Delegate Communication par signaux Modèles : QAbstractItemModel QStringListModel QStandardItemModel QFileSystemModel QSqlQueryModel, QSqlTableModel, and QSqlRelationalTableModel Vues : QAbstractItemView QListView QTableView QtreeView Delegates : QAbstractItemDelegate, QstyledItemDelegate Widgets : QListWidget, QTreeWidget, QTableWidget

16 Qt Graphics Architecture Modèle (QGraphicsScene) et vue (QGraphicsView) Organisation hiérarchique des items : group, path, polygon, rect, text, pixmap, widgets, etc. QGraphicsScene scene; scene.addtext("hello, world!"); QGraphicsView view(&scene); view.show(); Fonctionnalités : Transformation Events Collision (bounding rect) Drag & Drop

17 En vrac Internationalisation : tr(), Qt Linguist Drag & drop Ressources <!DOCTYPE RCC> <RCC version="1.0"> <qresource prefix="/"> <file>main.qml</file> <file>images/background.png</file> </qresource> </RCC> COW (copy-on-write, implicit sharing) Plugins

18 Qt Quick : Hello world MenuItem { import QtQuick 2.1 import QtQuick.Controls 1.0 text: qstr("exit") import QtQuick.Window 2.0 ontriggered: Qt.quit(); } ApplicationWindow { } title: qstr("hello World") } width: 640 Button { height: 480 text: qstr("hello World") menubar: MenuBar { anchors.centerin: parent Menu { title: qstr("file") } }

19 Qt Quick Objectif Accessible aux designers Deux langages QML : déclaratif pour UI JavaScript : paramétrer comportement Affichage : qmlscene, QquickView QQmlEngine, QQmlContext, QQmlComponent

20 Qt Quick Designer

21 Scenegraph Performances : utiliser l accélération matérielle Problème : coût important lors des changements de contextes Solution : Organisation hiérarchique Regroupement contexte multi-threads

22 Concepts Signal handler Simplifier l utilisation des events et signaux/slots Expression JS appelée lors de la réception d un signal MouseArea { onclicked: Qt.quit() } height: width < 100? 100 : width * 2 Property binding Pas d affectation mais liaison dynamique entre propriétés Rectangle { Rectangle { width: parent.width / 2 Height: parent.height / 3 } } Propriété Id : identifier les éléments

23 Éléments de base Affichage : Rectangle, Text, Image, etc. Interaction : MouseArea, TextInput, Keys, etc. Positionnement : anchors, layouts anchors.fill: parent anchors.bottom: unelement.top Row { Rectangle {}; Rectangle {} } RowLayout { Rectangle {}; Rectangle {} }

24 États, transition, animations États Machine à états, pour chaque élément state : "state 1" states : [ State { name: "state 1" }, State { name: "state 2" } ] PropertyChanges { target: myitem; color: "lightblue"} Transitions transitions: [ Transition { from: "state 1" ; to: "state 2" }, Transition { From: "*" ; to: "state 2" } ] Animations PropertyAnimation, ColorAnimation, NumberAnimation, RotationAnimation ColorAnimation { to: "yellow"; duration: 1000 } Behavior Behavior on x { PropertyAnimation {} }

25 Qt Sensors Utilisateur : QSensor et QSensorReading Nouveau capteur : QsensorBackend Utilisation C++ : // start the sensor QSensor sensor("qaccelerometer"); sensor.start() ; // later QSensorReading *reading = sensor.reading(); qreal x = reading->property("x").value<qreal>(); Utilisation Qt Quick : Accelerometer { id: accel active: true onreadingchanged: { var x: accel.reading.x } }

26 Qt Sensors

27 En vrac Model-view : TableView, Particules Effets graphiques BrightnessContrast { source: "images/image.jpg" brightness: 0.5 contrast: 0.5 } ShaderEffect { VertexShader: "..." FragmentShader: "..." } WebKit Multimédia : Son Vidéo Caméra Radio Base de données Réseau

28 Créer des composants En QML // Button.qml import QtQuick 2.0 Rectangle { width: 100; height: 100 MouseArea { anchors.fill: parent onclicked: console.log("button clicked!") } } En Javascript // myscript.js function getrandom(previousvalue) { return Math.floor(previousValue + Math.random() * 90) % 360; } En C++ QObject : Q_PROPERTY, Q_SIGNALS, Q_SLOTS, Q_INVOKABLE, Q_ENUMS, qmlregistertype QML scene : QQuickView, QSGxxx (node, material, geometry, texture) Créer des éléments Qt Quick : QQuickItem

29 Conclusion Peut-on faire les mêmes choses qu avant avec Qt? Est-on aussi productif avec Qt? Que va apporter Qt?