iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 21 Charte graphique

Définition iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 22  La charte graphique regroupe l’ensemble des informations graphiques utilisées dans l’application, plus généralement, par l’entreprise. C'est la norme à respecter pour communiquer. Elle comprend, entre autres, les éléments suivants la ou les police(s) d’écriture les couleurs les tailles minimales de texte etc, …  La charte permet de donner une uniformité et une cohérence à l’application. Elle est souvent complémentaire du logo, en est une déclinaison ou un complément  Disposer d'une charte graphique définie assure une image forte, un esprit unique facilement reconnaissable par les utilisateurs de l’application

Swing (1/2) iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 23  Swing est un package Java qui fournit des composants d’interfaces graphiques totalement indépendants de la plate-forme d’exécution. Ces composants, appelés composants légers, ont la même apparence et le même comportement sur toutes les plate- formes  Tous les composants de Swing ne sont pas légers car il est nécessaire, à un moment donné, de communiquer avec la plate-forme d’exécution pour demander l’affichage des fenêtres. Il existe donc quatre composants lourds (JFRame, JDialog, JWindow et JApplet) qui sont des conteneurs de base spécifiques à chaque plate-forme tous les composants légers de Swing héritent de la classe Jcomponent JComponent hérite de la classe Container, donc tout composant Swing peut contenir d’autres composants …

Swing (2/2) iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 24  Les conteneurs de base de Swing contiennent plusieurs surfaces d’affichage (panes)  L’organisation des surfaces peut se présenter ainsi la contentPane contient tous les composants habituels de l’interface (boutons, champs de saisie, …) la menuBar est une surface réservée à une barre de menu, qui prend place en haut de la partie visible de la fenêtre la glassPane est une surface transparente au dessus des autres surfaces qui permet d’afficher temporairement des informations (par exemple des aides contextuelles) la layeredPane est un ensemble de surfaces superposées, qui contient au départ la contentPane et la menuBar (mais à laquelle on peut ajouter d’autres surfaces comme des menus pop-up par exemple) menuBar contentPane autres surfaces (pop-up, …) glassPane

MVC (1/2) iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 25  L’architecture MVC (Modèle-Vue-Contrôleur) permet de concevoir des interfaces graphiques modulaires en séparant clairement les trois composants d’une éléments d’interfaces le modèle est une représentation de l’état de l’objet par un ensemble de données (par exemple un variable booléenne pour l’état d’une case à cocher) la vue est la manière dont l’état de l’objet est représenté à l’écran (par exemple un case à cocher peut être représentée par si la case est cochée) le contrôleur définit la réaction de l’objet aux actions de l’utilisateur (que se passe-t-il lorsque l’utilisateur clique sur une case à cocher par exemple)  L’architecture MVC est utilisée par Swing pour rendre l’interface ouverte et configurable. Chaque objet d’interface Swing est associé à deux objets un objet modèle, qui traite de l’état du composant un objet d’interface qui gère la vue (le look) et le contrôle (le feel)

MVC (2/2) iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 26  Étant donné l’architecture MVC mise en place dans Swing, le changement de look and feel d’un composant passe par le changement d’objet d’interface Objet modèleComposantObjet d’interface Look and feel 2 Look and feel 1

WIMP iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 27  Le WIMP (Window Icon Menu Pointer) est un concept qui est à la base de l’interface utilisateur de nombreuses applications actuelles Window : concerne le multi-fenêtrage et la division de l’espace de travail. Cela permet de dépasser les limites physiques de l’écran et d’exécuter plusieurs applications en parallèle Icone : l’icône favorise l’usage de la communication visuelle, avec une reconnaissance rapide des fonctions proposées Menu : un menu permet de définir une action qui peut être réalisée sur un objet sélectionné (implémentation du processus objet –action permettant plusieurs actions successives sur un objet sélectionné) Pointer : le pointeur permet de sélectionner des objets. Sa représentation picturale (flèche, sablier, …) peut changer selon la fonction en cours d’exécution

Modèle d’écran (1/2) iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 28  Le charte graphique utilisée est résumée dans le modèle d’écran suivant Barre d’état Zone de travail Barre de boutons Barre de menus

Modèle d’écran (2/2) iup MIAGe 3° année Projet MIAGe Toulouse – Groupe 29  Les éléments suivants sont à respecter Valeurs par défaut : les valeurs par défaut du système sont utilisées, en ce qui concerne la couleurs, la police, … Barre de menus : les menus présents correspondent aux cas d’utilisation identifiés ainsi qu’aux fonctions utilitaires classiques d’une application WIMP Barre d’outils : des raccourcis pour les fonctionnalités les plus utilisées sont à placer dans cet espace Zone de travail : les écrans de saisie et de consultation sont à insérer dans cette zone Barre d’état : les messages d’indication du traitement en cours sont affichés à cet endroit  Les sources du modèle d’écran sont présents dans