Qt On Mobile User Group C++ Francophone Paris Blackberry Developer Group Paris, le
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++
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
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
Installer Qt 5 Téléchargement http://qt-project.org/downloads 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
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
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
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
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
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
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)
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
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.
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
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
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
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
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") } }
Qt Quick Objectif Accessible aux designers Deux langages QML : déclaratif pour UI JavaScript : paramétrer comportement Affichage : qmlscene, QquickView QQmlEngine, QQmlContext, QQmlComponent
Qt Quick Designer
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
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
É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 {} }
É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 {} }
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 } }
Qt Sensors
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
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
Conclusion Peut-on faire les mêmes choses qu avant avec Qt? Est-on aussi productif avec Qt? Que va apporter Qt?