IHM & MVC

Ahcène Bounceur
ISEN/UBO
2011
 Coordonnées
 Ahcène Bounceur
 Maître de conférences (UBO)
 Bureau Lc208 du bâtiment C (département
informatique)
 Téléphone : 02 98 01 (62 17)
 Mail : Ahcene.Bounceur@univ-brest.fr
 Plan du cours
 4 séances
◦ Séance 1 : l’IHM et Netbeans
◦ Séance 2 : SWING
◦ Séance 3 : Fenêtres et Applets
◦ Séance 4 : Mon propre objet
◦ Séance 5 : Projet (Jeu : ElementZ Lite)
 IHM ?
 L'interface Homme-machine ou Interaction
Humain-Machine (IHM) étudie la façon dont
les humains interagissent avec les ordinateurs
ou entre eux à l'aide d'ordinateurs,
ainsi que la façon de concevoir des systèmes
informatiques qui soient ergonomiques.
 C'est-à-dire efficaces, faciles à utiliser ou plus
généralement adaptés à leur contexte
d'utilisation.
 Constituant standard d’une IHM
 Fenêtres
 Menus
 Boites de dialogues
 Contrôles
 Curseur (souris, mains, stylet, …)
 Constituant standard d’une IHM
 Contrôles
◦ boutons : sélection d’une ou plusieurs options
◦ ascenseurs : déplacements, quantités
◦ listes déroulantes : choix (prédéfinis ou non)
◦ zones de saisie de texte (+ validation)
◦ valeurs par défaut des contrôles
◦ …
 Tâches standards
 gestion des entrées
 gestion du focus
 gestion d’une fenêtre
 gestion de plusieurs fenêtres
 gestion des interactions élémentaires
 Tâches standards
 Interaction élémentaires
◦ Pointage
 déplacer le curseur sur une zone de l'écran
◦ Sélection
 appuyer puis relâcher le bouton de la souris
(+shift/ctrl/alt/…)
◦ Tracé
 appuyer sur le bouton, déplacer le curseur, relâcher le
bouton
 Attention : possibilité de conflit entre la sélection et
le tracé
 Tâches standards
 tâches possibles par manipulation directe :
◦ saisie de valeurs
◦ sélection d'un ou plusieurs objets
◦ déclenchement de commandes
◦ défilement de documents
◦ spécification d'arguments et propriétés
◦ transformations graphiques
 Tâche de saisie
 Textes
◦ boîte de saisie
 Quantités
◦ valeur au clavier
◦ aiguille, curseur, etc.
 Positions
◦ pointage, clic, double-clic
 Tracés
◦ échantillonnage de positions
 Tâches de sélection
 dans un ensemble variable :
◦ par pointage
◦ dans une liste
◦ par saisie d'un nom
 dans un ensemble fixe :
◦ par menu
◦ exclusive : boutons radio
◦ binaire : cases à cocher
 Tâches de sélection
 améliorations :
◦ sélection multiple (lasso, "shift-clic", etc.)
◦ combinaison de techniques
 ex : saisie + pointage  recherche d'une page d'aide
d’un mot-clé
◦ pointage  gravité (pointage d'objets de petite
taille)
◦ Menus  séparateurs, rubriques grisées,
raccourcis clavier
 Tâches de déclenchement
 Boutons
◦ actif / grisé
◦ texte / image
◦ options
 cliquer-tirer (drag-and-drop)
 entrée gestuelle
 Tâches de défilement
 barres de défilement
◦ avantage : rapide sur de longs documents
◦ inconvénient : sens de défilement = sens inverse
des flèches
 défilement direct
◦ avantage : intuitif
◦ inconvénient : peut être fastidieux sur de longs
documents
 défilement automatique
◦ fonction de la position du curseur
 Tâches de spécification
d’arguments et de propriétés
 boîtes de dialogue
◦ modales ou non modales
◦ au moins 2 boutons : OK et Cancel
◦ possibilités de rubriques à onglet
 boîtes d'alerte
◦ non sollicitées par l'utilisateur
◦ le plus souvent modales
 boîtes de propriétés
◦ affichage permanent
◦ pas de validation
 Tâches de transformation
 Translation
 Rotation
 Zoom
…
 MVC
 MVC a été utilisé dès les débuts de
l’informatique interactive, largement connue
par l’apparition du système Smalltalk-80 aux
laboratoires Xerox de Palo-Alto.
 MVC
 M : Modèle
◦ Il regroupe les données sur lesquelles on souhaite agir,
ou que l’on souhaite présenter
 V :Vue
◦ Il s’agit de représentation graphique hiérarchique
s’appuyant sur un ensemble de composants tels que
boutons, listes, champs de saisie, etc.
 C : Contrôleur
◦ C’est le mécanisme qui détermine les interactions entre
l’utilisateur et le modèle
◦ Ils ont une organisation hiérarchique qui suit celle des
vues. Ils permettent de définir la gestion d’évènements
clavier ou souris dans un cadre standardisé
MVC
Vue Contrôleur

Évènements
Listener

Accès aux
données
Mise à jour Modification
des champs Modèles des données
Class
Variables

Méthodes
Netbeans : nouveau projet
Netbeans : type du projet
Netbeans : configuration
Netbeans : exécution
 Netbeans : création d’une fenêtre

Ne pas cocher

Attention : cette méthode n’est pas obligatoire !

Netbeans : création d’une fenêtre
Netbeans : création d’une fenêtre
Netbeans : création d’une fenêtre
Netbeans : création d’une fenêtre
Voir la fenêtre

Exécution
Netbeans : type du projet
Netbeans : configuration
Netbeans : exécution
exécuter

Voir la fenêtre
Netbeans

Voir la fenêtre Exécution

 Dans ce cours :
 N’utilisez pas Java Desktop Application
Netbeans : environnement (IDE)
Netbeans : palette (de widgets)
Netbeans : propriétés
Netbeans : première fenêtre
Netbeans : première fenêtre
Netbeans : les évènements
Netbeans : les évènements
 Netbeans : évènements
private void changerLaCouleur(java.awt.event.MouseEvent evt) {
Color couleur = null;
String couleurTexte = "";
if (rb_jaune.isSelected()) {
couleur = Color.yellow;
couleurTexte = rb_jaune.getText();
}
if (rb_orange.isSelected()) {
couleur = Color.orange;
couleurTexte = rb_orange.getText();
}
if (rb_rouge.isSelected()) {
couleur = Color.red;
couleurTexte = rb_rouge.getText();
}
...
rectangleColore.setBackground(couleur);
couleurLabel.setText(couleurTexte);
}
Netbeans : exécution
 TP 1
 Améliorer cette application :
◦ Les couleurs du rectangle seront modifiées au
moment où l’on clique sur le bouton radio
◦ Remplacer les boutons radio par des boutons
◦ Remplacer les boutons radio par une liste
◦ Remplacer les boutons radio par des boutons
colorés
◦ Utiliser JColorChooser

Color couleur = JColorChooser.showDialog(

this,
"Choisissez une couleur …",
Color.red);

◦ D’autres idées seront les bienvenues …

 TP 1 : indications
 Widgets :
◦ jToolbar
◦ jButton
 background
 text
 border
 buttonGroup
 maximumSize
 minimumSize
 contentAreaFilled
◦ buttonGroup
◦ separator
◦ jPanel
 À quoi sert la propriété tooltip ?
 TP 1 : suite
 Changer la couleur du rectangle en se
basant sur les couleurs de type RGB.
Utiliser le constructeur :
 Color c = new Color (R,G,B) où R,G,B
sont des entiers
 Utiliser le composant jSlider
 Trouver l’évènement à utiliser ?
Questions