ESG Société de systèmes et de logiciels. Solutions pour IHM optimisée en rendu

Transcription

1 ESG Société de systèmes et de logiciels Solutions pour IHM optimisée en rendu

2 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 2

3 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 3

4 Introduction Conception film d animation 1 - Story-board 2 - Croquis 3 - Réalisation finale Conception Interface Homme Machine t Spécifications - Techniques (comportement) - Ergonomiques Conception Design simple IHM fonctionnelle 4

5 Structure du Framework Qt 4.7.x Environnement de développement : Qt Creator & Qt Designer Créateur d applications pour plateformes différentes de la plateforme de compilation Outils de simulation de plateformes cibles 5

6 Les détails de la bibliothèque La bibliothèque Qt 6

7 Les détails de la bibliothèque Qt Core (Classes de base) - Modèle objet de Qt, gestionnaire d'évènements (système de signaux/slots) - Classes d'entrées/sorties : gestion des fichiers, des flux, des répertoires... - Gestion des threads - Outils nécessaires de Qt : qmake (par exemple) 7

8 Les détails de la bibliothèque Qt GUI (création interfaces graphiques) - Widgets classiques (boutons, case à cocher, ligne d'édition, menus...) - Style natif sur toutes les plateformes 8

9 Les détails de la bibliothèque Qt OpenGL (objets accélérés par matériel) - Intégration d objets OpenGL dans les applications Qt - QGLWidget : s'utilise comme un widget (avec évènements clavier/souris) 9

10 Capacités graphiques Capacités 2D Capacités 3D 10

11 Qt Webkit Module Webkit - Utilisation d un moteur de rendu HTML 5 - Support de l HTML, XHTML, SVG et CSS QWebview 11

12 Mouvements tactiles Qt permet de gérer le Multitouch tactile Des gestuelles standards implémentées dans l API «touch» Configuration de gestuelles personnalisées 12

13 Qt Mobility Connectivité/Téléphonie SMS messagerie Navigation GPS & Cartes de navigation 13

14 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 14

15 2 - Couplage Qt Outil UML Framework graphique Couplage : IHM finale 15

16 2 - Couplage Qt Outil UML IHM.exe 16

17 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 17

18 3 Réalisation Design d IHM 1 - Qt Designer 2 - QGraphicsScene 3 - Qt Quick - Widgets de type «applications bureaux» - Profil : «designer» - Langage CSS - Accélération OpenGL - Profil : «Développeur logiciel» - Code source - Accélération OpenGL - Profil : «designer» - Rapide à mettre en œuvre - Langage de description : QML Aucune méthode n est exclusive 18

19 3 Réalisation Design d IHM Qt Quick Réalisation Design IHM - Langage QML - Animations - Organisation objets graphiques - Réalisation d objets graphiques Implémentation logique d IHM - Langage C/C++ 19

20 3 Réalisation Design d IHM Qt Quick 20

21 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 21

22 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 22

23 5 Intégration médias Fichier de ressource : «.qrc» Système de fichiers disponible Ressources.qrc - Images - Vidéos - Musiques Méthode QDir Chemins relatifs à l exécutable Livraison d un fichier «ressources.qrc» pour un thème d IHM L utilisateur ne peut créer son thème lui-même Livraison de fichiers médias nécessaires Personnalisation de l IHM par l utilisateur 23

24 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 24

25 6 IHM multilinguiste Principe : 25

26 6 IHM multilinguiste Principe : Intégration méthode «tr()» Modification fichier de projet «.pro» Implémentation de l interface homme-machine. 26

27 6 IHM multilinguiste Principe : Intégration méthode «tr()» Modification fichier de projet «.pro» - TRANSLATIONS = nomprojet_en.ts Génération des fichiers de langues 27

28 6 IHM multilinguiste Principe : QtLinguist Traduction des chaînes de caractères 28

29 6 IHM multilinguiste Principe : Traduction des chaînes de caractères 29

30 6 IHM multilinguiste Principe : 30

31 6 IHM multilinguiste Principe : Compilation de la traduction Intégration du fichier de langage 31

32 6 IHM multilinguiste Principe : Utilisation de l objet «QTranslator» Intégration du fichier de langage 32

33 Plan de la présentation 1 Introduction & Framework Qt 2 Couplage Qt Outil UML 3 Réalisation Design d IHM 4 Construction d une librairie d objets 5 Intégration de médias 6 IHM Multilinguiste 7 Comparaison Toolkits graphiques 33

34 1 Design et logique d IHM GTK+ Qt EFL Framework écrit en langage C Conception Design : QML (proche du JavaScript) Conception Design : Edje (proche du CSS) Conception Design et Comportement : - C/C++ - JAVA - ADA - Python - Perl Conception Comportement IHM : langage C++ Implémentation possible en JAVA Conception Comportement IHM : langage C Implémentation possibles : - Python - JavaScript - Perl - C/C++ 34

35 2 Contenu des frameworks GTK+ Qt EFL Nombreuses fonctionnalités : - Bureautique - Multimédia - Localisation GPS - Réseaux informatiques & télécoms (3G, ) - Web & Base de données Accélération OpenGL Fonctionnalités moins larges - Multimédia - Bureaux - Réseaux Accélération OpenGL aucune modification de code Outils de conceptions disponibles Peu d outils de conception - SDK (ex : QtDesigner & QtCreator) Très peu de documentation Documentation très riche - elearning & Tutoriaux - Démonstrations 35

36 3 Cibles & Sponsors GTK+ Qt EFL Framework orienté Bureaux Framework orienté Bureaux & Mobiles Sponsorisé par Nokia Framework orienté - Gestion tactile - Fluidité des IHM - Esthétisme (modification de «skin») Sponsorisé par Free et Samsung Bibliothèque graphique multiplateformes (Linux, Windows, MacOS X, Android, IOS, ) OS de type bureaux (Server X, Wayland, Cocoa, Explorer Windows) Qt embedded framebuffer virtuel Multiplateformes Minimal Linux Distribution - 64 Mo RAM MHz ARM Core Mobiles, bureaux, systèmes de jeux 36

37 4 Démonstrations GTK+ Qt EFL Bureau Gnome Bureau KDE Enlightment Maemo Freebox v6 37

38 Fin de la présentation FIN 38