LOG2420 on d'interfaces utilisateur Boîtes à outils pour

LOG2420 ― Analyse et concep on d'interfaces

Introduction Composants RétroactionOrganisation Disposition Configuration

LOG2420 Analyse et concep on d interfaces

utilisateur

Boîtes à outils pour la construction d'interfaces

lutilisateur

Michel C. Desmarais, François Lemieux

é fGénie informatiqueÉcole Polytechnique de Montréal

Automne 2010Automne, 2010

LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Boîtes à outils pour la construction d'interfaces utilisateur 1/43

Boîtes à outils pour la construction d'interfaces utilisateur


utilisateur

1 Introduction1. Introduction

2. Composants

3. Organisation

4 Di i i4. Disposition

5. Configuration

6. Rétroaction


Les boîtes à outils Introduction Composants RétroactionOrganisation Disposition Configuration

Extension aux systèmes de fenêtrage de baseBibliothèque de composants dédiées à la construction d'interfacesConstruite comme une couche supplémentaire au‐dessus du

tè d f êt d bsystème de fenêtrage de basePrend en charge une grande partie de la gestion des événements

Pourquoi des boîtes à outils ?Pourquoi des boîtes à outils ?Pour travailler avec un langage de plus haut niveau qui accélère la conception et la faciliteParce qu’on retrouve souvent les mêmes éléments dans uneParce qu on retrouve souvent les mêmes éléments dans une interfacePour produire des interfaces plus normalisées


ArchitectureIntroduction Composants RétroactionOrganisation Disposition Configuration


Architecture – Exemple: Windows X (X11)Introduction Composants RétroactionOrganisation Disposition Configuration


Les boîtes à outils Introduction Composants RétroactionOrganisation Disposition Configuration

Logiciel libreQtGTK+Java AWT et SwingJava AWT et SwingJava SWT (Eclipse ‐ IBM)

CommercialMFC (Microsoft Foundation Classes) : Windows 95/98/NT/.net, possibilité de Unix et MacMacApp, OpenStep (Cocoa) : Macpp p p ( )

Il en existe plusieurs dizaines (voir www.free‐soft.org/guitool )




utilisateur

1 Introduction1. Introduction

2. Composants

3. Organisation

4 Di i i4. Disposition

5. Configuration

6. Rétroaction


Types de composantsIntroduction Composants RétroactionOrganisation Disposition Configuration

Les composants d'une boîte à outils sont appelés p ppGadgiciels ou Widgets (window gadget) ou contrôles (Apple, Microsoft) ou X Toolkit (Window X)Un Widget c'est :

Un objet, donc fonctions et données, interactif qui représente un élément courant d'interface utilisateur graphique commeun élément courant d interface utilisateur graphique comme par exemple: bouton poussoir, barre de défilement, menu…Une « brique » réutilisable et configurable servant à la construction de la partie interface d'une applicationconstruction de la partie interface d'une application


BoutonIntroduction Composants RétroactionOrganisation Disposition Configuration

Bouton de commandeDéclenche une fonctionnalité immédiateDéclenche une fonctionnalité immédiatePeut être:

du texte, un ou deux mots, iou une image

ou les deuxDans une fenêtre,

l d déf é éOK est la commande par défaut et est activé par « Entrée »Annuler est activé avec « Échap »Il n’y y a pas de touche d’accès rapide pour ces deux composants

Bouton à basculeSignale l’état courantEst préféré à la case à cocher ou à la case à option par souci deEst préféré à la case à cocher ou à la case à option par souci de cohérence


Case à cocher et case à optionsIntroduction Composants RétroactionOrganisation Disposition Configuration

Case à cocherManipule une variable booléennePeut‐être une action, un état ou une propriétéPeut être utilisée dans un menuPeut indiquer un état pour une partie des éléments d’un groupe

Cases à options p(boutons radio)

Sont utilisées en groupeManipule une variableManipule une variable discrète ayant:

• Plus de deux états• Deux états distincts• Deux états distincts


Glissoir et barre de progressionIntroduction Composants RétroactionOrganisation Disposition Configuration

GlissoirManipule une variable pcontinue bornéePermet une rétroaction instantanéePréférer un champs numérique

si l’espace est manquant Si l’usage du clavier est plus appropriég p pp p

Barre de progressionAffiche la progression

E t d’ é ti l t d l dét i éEn pourcentage d’une opération lente de longueur déterminée

D’une opération de durée pindéterminée


Champ de texteIntroduction Composants RétroactionOrganisation Disposition Configuration

Boîte ou champ de textepermet de saisir ou de modifier des valeurs non‐contraintes

Du texteDes valeurs numériques

Peut proposer Un format de donnéesUn masque de saisie

Zone de texteZone de textePermet la saisie de textes sur plusieurs lignesp gN’offre pas de mise en forme


ListesIntroduction Composants RétroactionOrganisation Disposition Configuration

Listes: permet l’affichagede plusieurs itemsde plusieurs itemsZone de liste

Tous les items sont visiblesbl bAccessibles avec barre

de défilementListe déroulante

L’item sélectionné est visibleLes autres sont accessibles paraccessibles par un bouton

Liste combinéeS t l li t dé l tSe comporte comme la liste déroulanteL’item visible est dans un champ éditable


Onglet, tableau et arbreIntroduction Composants RétroactionOrganisation Disposition Configuration

OngletPrésentation d’écrans ayant un lien entre euxSouvent utilisés pour des optionsPeut être placé au haut ou au bas de l’écran

TableauZone de liste sophistiquéeZone de liste sophistiquéeInformation organisée en lignes et colonnes et placée dans des cellulesPermet la manipulationPermet la manipulation d’éléments

SélectionÉditionCopieS iSuppressionTriEtc.

ArbreE bl hié hi d d é l d 3 iEnsemble hiérarchique de données e plus de 3 niveauxPour des utilisateurs avancésAvec éléments escamotables


Menu déroulantIntroduction Composants RétroactionOrganisation Disposition Configuration

Menu déroulantConceptuellement assez semblable au boutonConceptuellement assez semblable au bouton poussoirManipule une variable discrète ou déclenche une fonctionnalitéPlus commode pour offrir un grand nombre de choixN'occupe pas d'espace permanent

Permet de sauver de l'espace Plus fastidieux d'utilisation Oblige la mémorisation

Information souvent cachéeInformation souvent cachéeMenu contextuel

Offre les possibilités d’un menu dont les items sont disponibles pour un objet sélectionnésont disponibles pour un objet sélectionné


Barre d’outil et rubanIntroduction Composants RétroactionOrganisation Disposition Configuration

Barre d'outilsl‘é i l tl‘équivalent d'un menu mais occupe un espace permanent (donc pas de mémorisation)Raccourcis d’un menu les plus utiles

RubanBarres d’outils organisées en onglet qui offre la majorité des fonctionnalités de l’application


Éléments de fenêtreIntroduction Composants RétroactionOrganisation Disposition Configuration

Barre titre Contrôles de fenêtre

Lorsque la taille est modifiable• Réduire: bouton sur barre des tâches • Niveau inférieur: taille personnalisée précédente

Fermer : pour les fenêtres principales et secondairesAide : pour les fenêtres secondaires

TitreFenêtre principale : Icône Nom du document – Nom de l’applicationFenêtre secondaire: Nom du document – Nom de l’application (facultatif)

Barre d’étatBarre d étatAffiche des informations sur le statut de l’application

Barre de défilementPermet de parcourir les contenu d’un composant qui n’est pas visible à l’écran


DialoguesIntroduction Composants RétroactionOrganisation Disposition Configuration

Composant autonome apparaissant dans une fenêtre secondaire

Pour activer une fonctionnalitéPour interroger l’utilisateurPour informer l’utilisateur

Deux modes d'interaction :Suspend l'application jusqu‘à sa complétion (modal)Fonctionne de façon parallèle à l'application (non‐modal)

Exemples de dialogues courants :Boîte de messageBoîte de sélection d'un fichierBoîte de contrôle d'impressionpBoîte à onglets




utilisateur

1 I t d ti1. Introduction

2. Composants

3. Organisation

4. Disposition

5 C fi i5. Configuration

6. Rétroaction


Organisation hiérarchiqueIntroduction Composants RétroactionOrganisation Disposition Configuration

Une boîte à outils peut représenter les Widgetsp p gsous forme d'une hiérarchie de classes


Organisation hiérarchiqueIntroduction Composants RétroactionOrganisation Disposition Configuration

Une application utilise les Widgets de la boîte à pp goutils en construisant une hiérarchie d'instances.


Exemple d’applicationIntroduction Composants RétroactionOrganisation Disposition Configuration

Fenêtre principale construite avec plusieurs composantsBarre des menus

Barre d’outilsBarre d outils

Menu déroulant

Zone d’affichage

Barre d’étatBarre d état




utilisateur


2. Composants

3. Organisation

4. Disposition

5 C fi ti5. Configuration

6. Rétroaction


DispositionIntroduction Composants RétroactionOrganisation Disposition Configuration

Certaines composants comme les dialogues contiennent plusieurs autres composantsLa disposition de chaque p qcomposant à l'intérieur peut être déterminée :

de façon absoluede façon absoluede façon relative à l'aide de contraintes géométriques entre composants de taille fixecomme le précédent mais avec en plus des contraintes géométriques pour chaque composante, de taille variablevariable


Disposition absolueIntroduction Composants RétroactionOrganisation Disposition Configuration

Méthode simple et rapide d’aménagement des composants à l'intérieur d'une fenêtre de dialoguecomposants à l intérieur d une fenêtre de dialogueRéagit plus ou moins bien à la modification de la taille de la fenêtre mère du contenant

Ex.: boîte de dialoguesolution : écrire du code application recalculant la position et la taille des composants qui sera exécuté suite p p qà un événement de modification de la taille de la fenêtre mère


Disposition relative : traverses et ressortsIntroduction Composants RétroactionOrganisation Disposition Configuration

La position d'un composant peut être définie par rapport à la position d'une autre composante: à gauche,par rapport à la position d une autre composante: à gauche, à droite, en haut ou en bas par rapport au bord de la fenêtre qui la contient fixée à la bordure gauche, droite, du haut ou du bassous forme de contraintes géométriques entre les composants

Le positionnement et dimensionnement des composants peuvent être automatisés suite à une modification de la taille de la fenêtre mèresolution : métaphore des traverses et ressorts


Disposition relative : compression et étirementIntroduction Composants RétroactionOrganisation Disposition Configuration

On peut aussi fournir des informations quant à la taille (hauteur largeur) minimale‐maximale‐idéale de(hauteur, largeur) minimale‐maximale‐idéale de chaque composant, indiquant jusqu‘à quel point on peut les comprimer ou les étirerLa taille finale d'un composant peut varier en fonction de sa nature

Ex: la longueur de l‘étiquette pour un bouton poussoir ou duEx: la longueur de l étiquette pour un bouton poussoir ou du contexte selon les dimensions de la fenêtre mère


Exemple : Disposition Java SwingIntroduction Composants RétroactionOrganisation Disposition Configuration

La classe Jcomponent dont dérivent toutes les composantes définit les propriétés:p p

bounds, minimumSize, maximumSize, preferredSizeAbsolue

tous les composants de la bibliothèque Java Swing peuvent être p q g ppositionnés et dimensionnés à l'aide de la méthode setBounds()

RelativeUtilise des gestionnaires de géométrie

Exemple: BoxLayout(widget,f X AXIS,Y AXISg )plusieurs types de contenants existent, avec leurs routines de création

Exemple: createHorizontalBox(), createVerticalBox()ces contenants ont des méthodes pour insérer un espace de taille fixeces contenants ont des méthodes pour insérer un espace de taille fixe

(createHorizontalStrut(), createVerticalStrut())ou variable(createHorizontalGlue(), createVerticalGlue())



BoxLayout, createHorizontalBox()1. Calcule la hauteur du composant le plus hautp p2. Tente d’agrandir verticalement tous les composants jusqu’à cette

hauteur3. Lorsqu’un composant n’atteint pas cette taille, un alignement est

demandé avec un appel de getAlignmentY qui alignera ledemandé avec un appel de getAlignmentY qui alignera le composant verticalement

4. Les largeurs préférées de chaque composant sont obtenues et additionnées

5. Lorsque la largeur totale est inférieure à la largeur du Box, les composants • sont étirés jusqu’à la largeur maximale• Sont placés de gauche à droite sans espaces supplémentaires deSont placés de gauche à droite sans espaces supplémentaires de

séparation• Lorsque la largeur totale préférée est supérieure à celle du Box, les

composants sont réduits jusqu’à la largeur minimale et si l’espace manque encore, ils ne sont pas affichés.



// Création d'un contenantBox box = Box.createHorizontalBox();

// Création des composants en spécifiant la tailleJButton b1 = new JButton ("OK");b1.setPreferredSize(new Dimension(50,10));b1.setPreferredSize(new Dimension(50,10));JButton b2 = new JButton ("Annuler");

// Inscription des composantsb dd(b1)box.add(b1);box.add(Box.createHorizontalStrut(50));box.add(b2);

// Association du gestionnaire de géométriebox.setLayout(new BoxLayout (box, BoxLayout.X_AXIS));

java sun com/docs/books/tutorial/uiswing/layout/box htmljava.sun.com/docs/books/tutorial/uiswing/layout/box.html




utilisateur


2. Composants

3. Organisation

4. Disposition

f5. Configuration

6. Rétroaction


Configuration des composantsIntroduction Composants RétroactionOrganisation Disposition Configuration

Certains attributs d'un composant sont modifiables par le concepteur d'application ou par l'utilisateur

Exemple: couleur d'avant‐ et d'arrière‐plan, police, étiquette, taille de la bordure

D'autres ne le sont pas Exemple: forme arrondie d'un bouton ou toute apparence spécifique àExemple: forme arrondie d un bouton ou toute apparence spécifique à une boîte à outils donnée ou au système d’exploitation

Cette possibilité de configuration permet la conception de composants plus génériques et offre beaucoup de flexibilitéComment configurer un composant:

Par des appels de fonction, lors de la création Par un mécanisme de préférences modifiables par l'utilisateur à travers l'interface de l'applicationl'interface de l'applicationEn spécifiant certains paramètres optionnels à la ligne de commandeen modifiant un fichier de ressources pour l'application

Exemple: fichier .inip


Configuration des composants (suite)Introduction Composants RétroactionOrganisation Disposition Configuration

Une ressource ou un attribut de composant est une donnée contenant de l'information sur son interface:donnée contenant de l information sur son interface: surtout son apparence, mais aussi son comportementSa dissociation du code permet

L'utilisation d'un éditeur de ressources De rendre la configuration accessible aux concepteurs visuels d'interfacesDe modifier la configuration sans pour autant devoir recompiler l'application

La syntaxe de spécification de ressources permetLa syntaxe de spécification de ressources permet souvent d'indiquer une ressource commune à un groupe de composants

l l défExemple: une valeur par défaut


Configuration des composants: comparaisonIntroduction Composants RétroactionOrganisation Disposition Configuration

Dans le codegarantit la valeur d'une ressource critiqueg qtoute modification requiert recompilation

À l'interfaceContrôle sur la flexibilité offerteÀ recommencer à chaque exécution

À la ligne de commandeFlexibilité et facilité d'utilisationLaborieux lorsqu’on a un grand nombre de ressources à paramétrer

Dans un fichierFlexibilité et personnalisation d'une applicationp ppRapidité de modificationUne mauvaise configuration peut rendre l'application inopérante ou dangereuseL d é i éLes erreurs de syntaxe ne sont pas nécessairement rapportées


Configuration : Java SwingIntroduction Composants RétroactionOrganisation Disposition Configuration

Spécification de propriétés individuelles dans le code:

Exemple: bouton.setBackground(Color.black) ;

Spécification de propriétés individuelles dans le d d tcode pour un groupe de composants:

Exemple: UIManager.put(Button.background,Color.black) ;




utilisateur


2. Composants

3. Organisation

4. Disposition

5. Configuration

6. Rétroaction


Modes de rétroaction des composantsIntroduction Composants RétroactionOrganisation Disposition Configuration

Les composantes doivent être capables de signaler à l' li ti l é é t i d i tl'application les événements qui se produisent au niveau de l'interface. Plusieurs méthodes de rétroaction sont envisageables :rétroaction sont envisageables :

Les gestionnaires d‘événementsLes fonctions de rappelLes fonctions de rappelLes macros de connexion événements‐méthodesL i t i ( i l d l t )Les signaux et prises (signals and slots )Les fonctions virtuelles surchargées


Rétroaction : Les gestionnaires d‘événementsIntroduction Composants RétroactionOrganisation Disposition Configuration

Une routine acceptant directement tous les é é t dét té l tè d f êtévénements détectés par le système de fenêtrage quel que soit leur type.Un seul point de traitement pour tous les typesUn seul point de traitement pour tous les types d‘événementRemet tout le travail entre les mains duRemet tout le travail entre les mains du programmeur de l'application


Rétroaction : Les fonctions de rappelIntroduction Composants RétroactionOrganisation Disposition Configuration

Fonctions séparées des classes et possédant une interface normaliséeUn composant contient, dans sa définition, un certain nombre de conditions auxquelles le programmeur peut associer des fonctions de rappel, par exemple :

Le composant vient d‘être activé (ActivateCallback pour un Pushbutton)L‘état du composant vient d‘être basculé (ToggleButton)L l d t i t d h (V l Ch dC llb kLa valeur du composant vient de changer (ValueChangedCallback pour un Scale)

Une fonction de rappel est donc appelée en réponse à un événement prévu et prédéfini pour un composantévénement prévu et prédéfini pour un composantEn C, les fonctions de rappel doivent avoir une signature fixe, mais le compilateur n'est pas en mesure de vérifier si c'est bien le cas, ce qui peut causer des erreurs lors dec est bien le cas, ce qui peut causer des erreurs lors de l'exécution.


Rétroaction : Les macros de connexion Introduction Composants RétroactionOrganisation Disposition Configuration

Méthode utilisée par les MFC (Microsoft F d ti Cl ) t é é tFoundation Class ) pour connecter un événement (message) à une méthode d'une classeMéthode très peu orientée objetMéthode très peu « orientée‐objet »Utilise le préprocesseur de C pour générer les connexionsconnexionsDifficile à lire et à comprendreNé it l' tili ti d' til d' id à lNécessite l'utilisation d'un outil d'aide à la conception pour la construction de l'interface


Rétroaction : Les signaux et prises Introduction Composants RétroactionOrganisation Disposition Configuration

Mécanisme propre à Qt pour établir la connexion entre :U diti dét i é l d l' li tiUne condition déterminée par le programmeur de l'application Une méthode quelconque d'un objet

Les signaux et les prises sont définis au niveau de la classeg pUn signal définit la signature de la méthode qui pourra être appeléeUn signal ne définit pas une méthode comme telleUne prise (slot) est une méthode normale d'une classeLa signature de la prise doit correspondre exactement à la signature du signal sur lequel le programmeur veut la brancherbrancher


Rétroaction : Les signaux et prises Introduction Composants RétroactionOrganisation Disposition Configuration

Chaque classe définissant un signal ou une prise doit être traitée à l'aide du compilateur moc afin deêtre traitée à l aide du compilateur moc afin de produire une spécification acceptable pour le compilateur C++Un signal peut être émis n'importe où dans une méthode de la classe qui déclare le signal à l'aide de la macro emitmacro emitLa connexion entre un signal et une prise est établie à l'aide de la méthode statique connectl aide de la méthode statique connectQObject : :connect(emetteur,SIGNAL(nom signal),recepteur.SLOT(nom prise) ) ;


Rétroaction : Les fonctions virtuelles surchargées


Adopté par Java SwingMéth d t è i té bj tMéthode très « orientée‐objet »Permet un accès efficace au modèle de données:

les fonctions sont membres de la sous classe dules fonctions sont membres de la sous‐classe du composant choisi

Ce mécanisme, lorsqu'il est utilisé pour traiter tous les événements dans une application, exige, par exemple, de sous‐classer chaque bouton pour traiter l‘événementtraiter l événementButtonPress : problème de mise en application à très grande échelleg


Documents

LOG2420 on d'interfaces utilisateur Boîtes à outils pour