les images - unice.frdeptinfo.unice.fr/~renevier/ancien/ihm/2009-2010/2010/... · 2010-03-10 ·...
TRANSCRIPT
![Page 2: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/2.jpg)
[email protected] IHM, L2I et L2MI
Java.awt.Image
• Objet représentant les images
• Pour les obtenir :
– javax.swing.ImageIcon
• Constructeur avec le nom du fichier
• Méthode getImage
– java.awt.Toolkit
• Pas de constructeur, mais une méthode statique getDefaultToolkit()
• méthode getImage("nomdufichier");
![Page 3: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/3.jpg)
[email protected] IHM, L2I et L2MI
java.awt.Graphics (bis)
• Contexte graphique (« morceau d’écran »)
• Permet de dessiner
– Changer de crayon : setColor
– drawRect, drawOval, drawPolygon, drawString, fillRect, fillOval
– drawImage(img, x, y, ImageObserver)
• Obtenu automatiquement (repaint(), redimensionnement, etc.)
![Page 4: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/4.jpg)
[email protected] IHM, L2I et L2MI
Java.awt.image.BufferedImage
• C’est une java.awt.Image
• Création simpleBufferedImage(int width, int height, int imageType)
– Largeur, hauteur
– TYPE_3BYTE_BGR, TYPE_4BYTE_ABGR...
• Pour dessiner dedans public Graphics2D createGraphics()
– Un Graphics2D est un Graphics
![Page 5: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/5.jpg)
[email protected] IHM, L2I et L2MI
Double-buffering en AWT
• java.awt.image.BufferedImage– buffImg = new BufferedImage(width, height,
type);
– type : BufferedImage.TYPE_4BYTE_ABGR par exemple
• Dans paint(Graphics g) :– Graphics grph = buffImg.createGraphics();
– // on dessine dans grph
– g.drawImage(buffImg, 0, 0, null)
![Page 7: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/7.jpg)
[email protected] IHM, L2I et L2MI
Pourquoi des processus ?
• Pour être plus rapide
• Pour ne pas bloquer un processus (interface).
![Page 8: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/8.jpg)
[email protected] IHM, L2I et L2MI
Processus Basic
• Utilisation de l’interface Runnable
– Méthode public void run( )
• Utilisation de Thread
– new Thread(<une instance Runnable>);
• À l’exécution
– Méthode start( ) qui lance le processus
– Méthode yield( ) pour passer la main (via le scheduler)
– Sleep pour attendre (cf deux transparents plus loin)
![Page 9: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/9.jpg)
[email protected] IHM, L2I et L2MI
Arrêter un processus
• Java recommande l’utilisation de boolean pour les processus « long »
public void run( ) {
// code
while( ! canceled) {
// code
}
// code
}
![Page 10: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/10.jpg)
[email protected] IHM, L2I et L2MI
Attendre
import java.util.concurrent.*;
public void run() {try {
while(! canceled) {// Old-style:// Thread.sleep(100);// Java SE5/6-style:TimeUnit.MILLISECONDS.sleep(100);
}} catch(InterruptedException e) {
System.err.println("Interrupted");}
}
![Page 11: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/11.jpg)
[email protected] IHM, L2I et L2MI
Partage de ressource
• Problème d’accès concurrent…
• Mot clef synchronized– Sur une méthode
– ou un morceau de code
• Lorsqu’un processus veut exécuter un code syncronisé– La jvm vérifie si le verrou est disponible,
– Lui donne et
– Le rend disponible à la fin
• Un seul verrou par classe
• Possibilité d’utiliser d’autre verrous – java.util.concurrent.locks.*;
– Interface Lock : lock( ) et unlock( )
![Page 12: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/12.jpg)
[email protected] IHM, L2I et L2MI
Les animations graphiques
• Un thread
• Durée finie ou infinie
• Appel à repaint
• Évolution du composant graphique
• Deux exemples
– Anim
– Balle
![Page 13: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/13.jpg)
[email protected] IHM, L2I et L2MI
Quelques objets swing
Border (Cadre autour des éléments)
Tabbed Panes (onglets)
Radio Button et ButtonGroup
http://java.sun.com/docs/books/tutorial/uiswing/TOC.html
![Page 14: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/14.jpg)
[email protected] IHM, L2I et L2MI
Objectifs
• Manipulation d’éléments de haut niveau
• Facilité d’évolution
• Quelques design patterns…
![Page 15: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/15.jpg)
[email protected] IHM, L2I et L2MI
Border (Cadre autour des éléments)
• javax.swing.border
• http://java.sun.com/docs/books/tutorial/uiswing/components/border.html
• Méthode setBorder (JComponent)
• Constructeur de classe ou fabrique (avax.swing.BorderFactory)
• Différent type : LineBorder (trait plein), TittledBorder (avec un titre), BevelBorder(chanfrein, angle oblique), etc.
![Page 16: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/16.jpg)
[email protected] IHM, L2I et L2MI
Tabbed Panes (Onglets)
• Avoir simplement une gestion d’onglet : class javax.swing.JTabbedPane
• http://java.sun.com/docs/books/tutorial/uiswing/components/tabbedpane.html
– addTab(String, Component)
– addTab(String, Icon, Component)
– addTab(String, Icon, Component, String)
![Page 17: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/17.jpg)
[email protected] IHM, L2I et L2MI
Aperçu du BoxLayout
• Organisation – Vertical : container.setLayout(new BoxLayout(container,
BoxLayout.PAGE_AXIS));– Horizontal : ligne. setLayout(new BoxLayout(ligne,
BoxLayout.LINE_AXIS));
• Alignement des bords : – setAlignmentX(Component.LEFT_ALIGNMENT); pour aligner les
bords gauche
• Insertion de « blancs » pour remplir…– container.add(Box.createVerticalGlue()); – ligne.add(Box.createHorizontalGlue());
• Insertion de « blancs » pour espacer…– container.add(Box.createRigidArea(new Dimension(5,5)));
![Page 18: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/18.jpg)
[email protected] IHM, L2I et L2MI
Radio Button et ButtonGroup
• Radio Button : – JRadioButton(String)
– JRadioButton(String, boolean)
– JRadioButton(Icon)
– JRadioButton(Icon, boolean)
– JRadioButton(String, Icon)
– JRadioButton(String, Icon, boolean)
• Pour en sélectionner un parmi n : GroupButton– new ButtonGroup()
– add(<radio button>)
![Page 19: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/19.jpg)
[email protected] IHM, L2I et L2MI
Introduction à l’organisation du code
• Indépendance morpion – ihm
• Notion de controleur
• Besoin d’une structure de programmation pour échanger des informations, résoudre des conflis…
![Page 20: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/20.jpg)
[email protected] IHM, L2I et L2MI
Quelques objets swing
Tableaux de données (JTable)
Menu et Menu Contextuel (JMenu / JPopMenu)
Contenu Dynamique (CardLayout)
Choisir un Fichier (JFileChooser)
![Page 21: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/21.jpg)
[email protected] IHM, L2I et L2MI
JTable
• Affichage de données dans un tableau.
– Texte
– Rendu personnalisé
– (édition personnalisée)• http://java.sun.com/docs/books/tutorial/uiswing/components/table.html
![Page 22: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/22.jpg)
[email protected] IHM, L2I et L2MI
JTable : construction• Un tableau d’objet : les données
– à deux dimensions (ligne, colonne)
– Contenu hétérogène
• Un tableau de String : les titres– à une dimension (colonne)
– Le nom des colonnes, Cohérence des tailles des tableaux
• Contruction// films : Object[ ][ ] et nomDesColonnes : Object[ ]
JTable jt = new JTable(films, nomDesColonnes);
JFrame fen = new JFrame(); fen.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Container container = fen.getContentPane();
• utilisation « simple »container.add(jt.getTableHeader(), BorderLayout.PAGE_START);
container.add(jt, BorderLayout.CENTER);
• utilisation « JScrollPane »JScrollPane jscp = new JScrollPane();
jscp.setViewportView(jt);
container.add(jscp);
![Page 23: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/23.jpg)
[email protected] IHM, L2I et L2MI
Personnalisation du rendu
• Interface logicielle TableCellRendererpublic Component getTableCellRendererComponent(
JTable table, Object donnee,
boolean isSelected, boolean hasFocus,
int row, int column)
• Association class (des données) avec l’objet utilisé pour le rendu
jt.setDefaultRenderer(Img.class, new MyRender());
– Img : la donnée à représenter
– MyRender : la classe qui implements TableCellRenderer
![Page 24: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/24.jpg)
[email protected] IHM, L2I et L2MI
Personnalisation du rendu (suite)
• Besoin de préciser le type (class) en fonction de la colonne
– class MyTableModel extends AbstractTableModel
– Méthodepublic Class getColumnClass(int c) {
return getValueAt(0, c).getClass();
}
• Construction des tablesjt = new JTable(new MyTableModel(films, nomDesColonnes));
![Page 25: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/25.jpg)
[email protected] IHM, L2I et L2MI
Menu dans les JFrame
• JMenuBar qui porte les JMenu• Les JMenu portent les
– JMenuItem– JRadioButtonMenuItem, etc. (ButtonGroup)– JSeparator
• Ajout de raccourci (Alt+Q)item.setMnemonic(KeyEvent.VK_Q);
• Ajout du texte du raccourci dans le menuitem.setAccelerator(KeyStroke.getKeyStroke(
KeyEvent.VK_Q,ActionEvent.ALT_MASK));
![Page 26: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/26.jpg)
[email protected] IHM, L2I et L2MI
Menu Contextuel
• Généralement par clic droit (Windows)
• Un JPopupMenu porte des – JMenuItem
– JRadioButtonMenuItem, etc. (ButtonGroup)
– JSeparator
• MouseListener sur les élèments avec le menu contextuel (mousePressed et mouseReleased) avec le code suivant :
if (e.isPopupTrigger()) {
popup.show(e.getComponent(), e.getX(), e.getY());
}
![Page 27: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/27.jpg)
[email protected] IHM, L2I et L2MI
Changer le contenu d’une zone
• CardLayout• http://java.sun.com/docs/books/tutorial/uiswing/layout/card.html
• add dans le container avec une String en second paramètre
cards = new JPanel(new CardLayout());
cards.add(card1, "element1");
• Pour montrer CardLayout cl = (CardLayout)(cards.getLayout());
cl.show(cards, "element1"); // montre card1
• Pour les onglets : JTabbedPane
![Page 28: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/28.jpg)
[email protected] IHM, L2I et L2MI
Choisir un fichier
• JFileChooser• http://java.sun.com/docs/books/tutorial/uiswing/components/filechooser.html
JFileChooser fc = new JFileChooser();
public void actionPerformed(ActionEvent e)
{
int returnVal = fc.showOpenDialog(FileChooserDemo.this);
if (returnVal == JFileChooser.APPROVE_OPTION)
{
File file = fc.getSelectedFile();
Image = Toolkit.getDefaultToolkit().getImage(file. getCanonicalPath());
// … traitement de l’image choisie
} else {
// … traitement en cas d’annulation
}
}
![Page 29: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/29.jpg)
[email protected] IHM, L2I et L2MI
Filtrage de fichier• fc.setAcceptAllFileFilterUsed(false);
– Par défaut tout accepter
• fc.addChoosableFileFilter(new <FileFilter>());• FileFilter interface pour filterpublic boolean accept(File f) {
if (f.isDirectory()) {
return true;
}
String extension = getExtension(f);
if (extension != null) {
return ( extension.equals("jpeg") || extension.equals("jpg") ||
extension.equals("png") || extension.equals("bmp") ) ;
}
return false;
}
public String Description() { // The description of this filter.
return "filtre d’image" ;
}
![Page 30: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/30.jpg)
[email protected] IHM, L2I et L2MI
getExtension
public String getExtension(File f) {
String ext = null;
String s = f.getName();
int i = s.lastIndexOf('.');
if (i > 0 && i < s.length() - 1) {
ext = s.substring(i+1).toLowerCase();
}
return ext;
}
}
c.f.
http://java.sun.com/docs/books/tutorial/uiswing/components/filechooser.html
![Page 31: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/31.jpg)
[email protected] IHM, L2I et L2MI
Architecture Logicielle des IHM
Principes de basesModèle MVCModèle PAC
Avec des transparents repris des cours de l’équipe IIHM du LIG
![Page 32: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/32.jpg)
[email protected] IHM, L2I et L2MI
Une architecture, pourquoi faire ?
• Organiser le code (rangement)
• Simplifier (diviser pour régner)
• Organiser le travail– Itératif
– Parallèle (fusion)
• Modifier (une partie)
• Ré-utiliser
• Notion : modularité, évolutivité, flexibilité
![Page 33: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/33.jpg)
[email protected] IHM, L2I et L2MI
IHM et architecture
• Séparation possible – Code pour IHM
– Code « Métier »
• Exemple – IHM différente pour une Gestion d’un stock de
chaussure ou de bibelots ?
– Linux sous gnome ou kde, le système change-t-il ?
• Objectif : éviter de tout modifier si on change la partie fonctionnel ou la partie IHM
![Page 34: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/34.jpg)
[email protected] IHM, L2I et L2MI
Découpage par Abstraction
• Séparation IHM / NF
– Noyau fonctionnel (ou Functional Core ou partie Métier)
• Besoin d’interface logicielle pour découpler (indépendance) des deux parties
NF IHM
NF IHM
Partie de l’IHM
concrète
Partie de l’IHM
concrète
Partie de l’IHM
concrète
Pierre
PaulJacques
Partie de l’IHM
concrète
![Page 35: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/35.jpg)
[email protected] IHM, L2I et L2MI
Architecture : MVC
• Smalltalk [Goldberg et Robson 1979-1983]
• Cause : difficultés de conception des applications fortement interactives
• Réponse : modularisation
– Model : modélisation (données et comportement)
– View : représentation manipulable de l'objet
– Control : interprétation des entrées
![Page 36: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/36.jpg)
[email protected] IHM, L2I et L2MI
MVC : meilleure conception
• Séparer dans le code– les données (le Modèle),
– La ou les Vues,
– Le Contrôle
• V s’abonne à M
• C s’abonne à V
• C modifie M
• Interfaces logicielles
http://sis36.berkeley.edu/projects/streek/talks/mvc/images/talks/mvc/mvc-structure-generic.gif
![Page 37: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/37.jpg)
[email protected] IHM, L2I et L2MI
MVC : meilleure conception
• Plusieurs vues possibles synchronisées,
• Plusieurs contrôles possibles (exemple : clavier, souris, joypad),
• Données isolées (BD, fichiers, etc…)
• Bien entendu :– Nécessité de définir des interfaces communes
entre le modèle, la vue et le contrôleur,
– Java fournit en standard un certain nombre d’outils…
![Page 38: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/38.jpg)
[email protected] IHM, L2I et L2MI
Les classes Observer / Observable
Observer
"Arthur"
Observer
"Martin"
Observer
"Fred"
S ’enregistre
S ’enregistreObservableObservable1. Arthur
Observable1. Arthur
2. Martin
![Page 39: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/39.jpg)
[email protected] IHM, L2I et L2MI
Observer / Observable
Exemple : un timer
class Test {
Timer timer;
Test() {
timer = new Timer();
Toto toto = new Toto();
timer.addObserver(toto);
}
public static void main(String[] args) {
Test t = new Test();
t.timer.run();
}
}
toto est
écouteur
du timer
![Page 40: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/40.jpg)
[email protected] IHM, L2I et L2MI
java.util.Observer
Toto est un observateur
class Toto implements java.util.Observer {
public void update(Observable o,
Object arg) {
System.out.println("Temps : "
+ ((Timer)o).getSeconds()
+ " secs");
}
}Tous les observateurs doivent
posséder une méthode
update(…)
![Page 41: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/41.jpg)
[email protected] IHM, L2I et L2MI
java.util.Observable
Exemple
class Timer extends java.util.Observable {
private long zzz = 1000;
private long zero;
Timer(long zzz) {
this.zzz = zzz;
}
public void run () throws InterruptedException {
zero = System.currentTimeMillis();
while (true) {
setChanged();
notifyObservers(new
Long(System.currentTimeMillis()
- zero));
Thread.sleep(zzz);
}
}
}
Les observables doivent
être d’une sous-classe de
Observable
On prévient les observateurs, ça
appelle update(…)
![Page 42: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/42.jpg)
[email protected] IHM, L2I et L2MI
Limite de MVC
• Dans la cas d’une vue multiple, nous disposons d’un pattern
• Pour le reste ? – Besoins d’un cadre
– Jusqu’à 80% du code concerne les interfaces
– Il faut viser la réutilisation et faciliter la maintenance / l’évolution
– Comment faire collaborer des MVC ensemble(solution pour l’IHM)
![Page 43: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/43.jpg)
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents pour l’IHM
• Un système interactif = une collection d’unités de calcul spécialisés (agents)
• Un agent
– a un état
– a une expertise
– est capable d’émettre et de réagir à des événements
• Un agent en contact direct avec l’utilisateur = un interacteur
• Quelquefois agent = interacteur
![Page 44: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/44.jpg)
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents pour l’IHM ...
• Motivations• Modularité et parallélisme
– conception itérative (modifiabilité)– dialogue à plusieurs fils– mise en œuvre des collecticiels
• Correspondance avec l’approche à objets– catégorie d’agents (réactifs) -> classe– événement -> méthode– encapsulation : l’agent (l’objet) est seul à modifier directement
son état– mécanisme de sous-classe -> modifiabilité
• Exemple : MVC (modulo pb de hierarchie)
![Page 45: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/45.jpg)
[email protected] IHM, L2I et L2MI
PAC : Un modèle hiérarchisé d’agent
• [Coutaz 88]
• Trois facettes :– Présentation (C + V de MVC), le V de ALV
– Abstraction (M de MVC)
– Contrôle : communication entre agent et expression des dépendances (liaison) entre A et P (le L de ALV)
• Hiérarchisation : – Arbre : relation père-fils
– Heuristique de conception
– Communication par message
![Page 46: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/46.jpg)
[email protected] IHM, L2I et L2MI
Architecture : Modèles à agents
• PAC
Aspects réalisation
• Aucune recommandation
• dépend de la plate-formed’accueil
• 1 agent = 1 module C au minimum, 1 objet ou 1 objet par facette (comme MVC)
![Page 47: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/47.jpg)
[email protected] IHM, L2I et L2MI
Un exemple d’application de PAC
Capturer un objet (réalité cliquable)
Voir les deux vidéos : utilisatrice (équipement) et capture (déroulement du scénario)
![Page 48: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/48.jpg)
[email protected] IHM, L2I et L2MI
Exemple de hiérarchie PAC
Hiérarchie PACDonnées à afficher
(ANF)
Données numériques
localisées (ANF)
Objets
sauvés
Caméra
Localisation
Orientation
Terrain
augmenté
Réalité
cliquable
Représentation
physique
Passerelle
Représentation
numérique
![Page 49: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/49.jpg)
[email protected] IHM, L2I et L2MI
Représentation
physique Représentation
numérique
hiérarchie PAC
Réalité
cliquable
Exemple de circulation de message
Passerelle
Evénements
souris (stylet)M1’
M2
M2
M2
M2’M2’’
M1
![Page 50: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/50.jpg)
[email protected] IHM, L2I et L2MI
Exemple d’implémentation PAC
• Classe Abstraite pour le controleur– Implémentation par défaut de certaines méthodes
• Interfaces logicielles pour l’Abstraction et la Présentation – Possibilité d’héritage
• Communication par message – Une « String » pour identifier le type de message
– Un objet en attachement (peut être n’importe quoi)
– Traitement : test sur le type de message et traitement adéquate (cast sur l’attachement)
![Page 51: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/51.jpg)
[email protected] IHM, L2I et L2MI
Exemple d’Abstraction et de Présentation
package PAC;
public interface Abstraction {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object
attachement);
}
package PAC;
public interface Presentation {
public void affecteControleur(Controleur c);
public void recoitMessage(String type, Object
attachement);
}
![Page 52: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/52.jpg)
[email protected] IHM, L2I et L2MI
Exemple de Controleurpackage PAC;
import java.util.ArrayList;
public abstract class Controleur {
protected Abstraction a;
protected Presentation p;
protected ArrayList<Controleur> enfants = new ArrayList<Controleur>();
protected Controleur parent;
public abstract void recoitMessageControleur(String type, Object attachement);
public abstract void recoitMessagePresentation(String type, Object attachement);
public abstract void recoitMessageAbstraction(String type, Object attachement);
public void affecteParent(Controleur p) { this.parent = p; }
public void ajouteEnfant(Controleur arg0) {
if (! enfants.contains(arg0)) {
enfants.add(arg0);
arg0.affecteParent(this);
}
}
protected void dispatchDownMessage(String type, Object att) {
for (Controleur c : enfants) { c.recoitMessageControleur(type, att); }
}
protected void dispatchUpMessage(String type, Object att) {
if (parent != null) parent.recoitMessageControleur(type, att);
}
}
![Page 53: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/53.jpg)
[email protected] IHM, L2I et L2MI
Règles Heuristiques
• Ensemble de règles heuristiques pour construire la hiérachie d'agents PAC à partird’une maquette
– À l’origine dans le Contrôleur de Dialogue dansPAC-Amodeus
• Source Modèle d’architecture des systèmesinteractifs, chapitre 7.
![Page 54: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/54.jpg)
[email protected] IHM, L2I et L2MI
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Wall
Environment Zone Region Preferences
?
Place
Route
Movable Object
Static Object
Point
.
x
Anchor x (m):
Anchor y (m):
Mouse x (m): 12
Mouse y (m): 15
Length (m):
Wall
Environment Zone Region Preferences
ChaleurEnvironnement
![Page 55: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/55.jpg)
[email protected] IHM, L2I et L2MI
R2 : Vue multiple
• Agent vue multiple d'une "œuvre"
• Un superagent garantit la cohérence visuelle
![Page 57: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/57.jpg)
[email protected] IHM, L2I et L2MI
D’autres Heuristiques
• R1 : fenêtre = un agent
• R3 : Palette de concepts – Une palette de classes de concept = un agent
– Une barre de menu = un agent
• R4 : zone d’édition – Une zone d’édition = un agent
– Condition : être suffisamment complexe
• R5 : correspondance agent / concept– Un concept complexe = un agent
![Page 58: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/58.jpg)
[email protected] IHM, L2I et L2MI
Heuristiques de liaison
• R6 : d’une fenêtre à une autre
– Les deux sont sous le même agent parent commun
• R9 : Ciment syntaxique
– Agent ciment pour "analyse syntaxique distribuée”
![Page 59: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/59.jpg)
[email protected] IHM, L2I et L2MI
R9 : Ciment syntaxique
• Agent ciment pour "analyse syntaxique distribuée"
• Un superagent cimente les actions distribuées
superagent ciment
agent agentagent
action de l'utilisateur
action de l'utilisateur
action de l'utilisateur
![Page 60: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/60.jpg)
[email protected] IHM, L2I et L2MI
Heuristiques de simplification
• R10 : un agent fils unique peut être regroupé avec son père
– Attention à la modularité / réutilisation / évolution
• R11 : un agent dont la fonction est réalisée par un objet de la boîte à outils graphique devient un composant de la présentation de son père.
![Page 61: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/61.jpg)
[email protected] IHM, L2I et L2MI
Corollaire de R11
• Un objet d’interaction non implémenté par la plate-forme -> un agent
Un espace de travail -> un agent
Un objet mur -> un agent
![Page 62: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/62.jpg)
[email protected] IHM, L2I et L2MI
Exemple de développement : TROCprojet France Telecom – IIHM (clips, LIG)
• Définition du jeu
– Qui joue
– Contexte du jeu
– Règle du jeu
• Arbre de tâche
Analyse des besoins
Conception
Conception logicielle
Codage
Tests unitaires
Tests d’intégration
Tests utilisateur
Evaluation
ergonomique
Note : le cycle de vie d’une interface est ici représenté en V et
sans retour sur les étapes précédentes de manière
analytique…
![Page 70: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/70.jpg)
[email protected] IHM, L2I et L2MI
La conception :les spécifications externes
(introduction)
Comment faire la maquette (1/2)
![Page 72: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/72.jpg)
[email protected] IHM, L2I et L2MI
Services généraux
• Aide
– factuelle (qu’est-ce que c’est ?)
– Aide procédurale (comment faire pour ?)
![Page 73: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/73.jpg)
[email protected] IHM, L2I et L2MI
Services généraux
• Aide
– factuelle (qu’est-ce que c’est ?)
– procédurale (comment faire pour ?)
– contextuelle
![Page 74: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/74.jpg)
[email protected] IHM, L2I et L2MI
Services généraux
• Copier-coller
• Défaire-refaire– encourage l’exploration
– Si pas possible: prévenir l’utilisateur.
• Valeurs par défaut(performances)
– statiques mais ajustables
– dynamiques (dernière valeur utilisée)
• Personnalisation(préférences)
![Page 75: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/75.jpg)
[email protected] IHM, L2I et L2MI
Services généraux
Retour d ’information (feedback)
Immédiat
Informatif
![Page 76: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/76.jpg)
[email protected] IHM, L2I et L2MI
Services généraux
Retour d ’information (feedback)
Processus long
Honnêteté
Correction d ’erreur
![Page 77: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/77.jpg)
[email protected] IHM, L2I et L2MI
Pour le reste…
• QOC : Question Option Critère [McLean]
– Aide à la prise de décision
Question
Option 1
Option 2
Option n
Critère 1
Critère 2
Critère m
![Page 78: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/78.jpg)
[email protected] IHM, L2I et L2MI
Exemple : pour le loto
• Représentation de la grille
– Tableau à cocher
– Tableau de checkboxes
– 6 champs textes
– 6 menus déroulants
![Page 79: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/79.jpg)
[email protected] IHM, L2I et L2MI
Meilleur représentation de la grille ?
Représentation de la grille
Cohérenceavec l’existant
Facilité de programmation
Accessibilité
Rapiditéde choix
![Page 81: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/81.jpg)
[email protected] IHM, L2I et L2MI
Compatibilitécritères ergonomiques (1/7)
• Respect (intégration et cohérence) du contexte d’utilisation (environnement de l’utilisateur)
– Langage utilisateur
• Vocabulaire
• Libellé unique
– Respect de l’activité
• Pas de surcharge cognitive
• Accès "direct" aux commandes
[Bastien & Scapin]
![Page 82: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/82.jpg)
[email protected] IHM, L2I et L2MI
Guidagecritères ergonomiques (2/7)
• Assister l’utilisateur dans l’utilisation de l’IHM– Incitation
• Griser les commandes non disponibles
• Fournir une liste des éléments disponibles
• Donner le format de saisie
– Regroupement / distinction des informations
– Retour d’information (immédiat)
– Lisibilité• Police de caractère (4 max)
• Lettre sombre sur fond clair
• Phrase assez long (point de fixation)
[Bastien & Scapin]
![Page 83: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/83.jpg)
[email protected] IHM, L2I et L2MI
Homogénéitécritères ergonomiques (3/7)
• Cohérence globale de l’IHM, logique d’utilisation
– Schéma d’agencement
– Sémantique d’interaction constante
– Vocabulaire
[Bastien & Scapin]
![Page 84: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/84.jpg)
[email protected] IHM, L2I et L2MI
Flexibilitécritères ergonomiques (4/7)
• Capacité de l’IHM à s’adapter
– Multi-modalité
– Personnalisation
– Raccourcit
[Bastien & Scapin]
![Page 85: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/85.jpg)
[email protected] IHM, L2I et L2MI
Contrôle (par l’) Utilisateurcritères ergonomiques (5/7)
• Maîtrise de l’IHM par l’utilisateur
– Validation des commandes importantes ou irréversibles
– Interruption des processus longs
– Retour en arrière
[Bastien & Scapin]
![Page 86: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/86.jpg)
[email protected] IHM, L2I et L2MI
Traitement des erreurscritères ergonomiques (6/7)
• Objectifs : minimiser les interruptions• Trois types d’erreurs
– Erreur de perception (mise en évidence, ressemblance)– Erreur de raisonnement (transition – cohérence, mémoire :
reconnaître plutôt que se souvenir)– Erreur d’action (loi de Fitz, Erreur de touche / de sélection, allers-
retours clavier-souris)
• Prévention (guidage, contrôle utilisateur)• Correction
– Signaler le plus tôt possible– Retour en arrière, interruption– Message explicatif et correctif– Aide en ligne disponible
[Bastien & Scapin]
![Page 87: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/87.jpg)
[email protected] IHM, L2I et L2MI
Concisioncritères ergonomiques (7/7)
• Capacité de l’IHM à réduire les efforts perceptifs, mémoriels et cognitifs des utilisateurs
– Ne pas surcharger d’information
– Limiter le nombre d’action• Minimiser les saisies
• Eviter les textes trop verbeux
• Ne pas demander à l’utilisateur ce qu’il voudrait que l’IHM fasse
• Limiter la mémorisation d’informations d’une fenêtre (étape) à une autre
[Bastien & Scapin]
![Page 88: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/88.jpg)
[email protected] IHM, L2I et L2MI
Perception de l’écran
• Découverte en "Z"
• Regroupement en zone1. Très visible, peu accessible
2. Très visible
3. Peu accessible
4. Très accessible
5. La plus visible et accessible
6. Très accessible
7. Peu accessible
8. Peu visible, peu accessible
9. Peu accessible
1 2 3
654
7 8 9
![Page 89: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/89.jpg)
[email protected] IHM, L2I et L2MI
Organisation de la fenêtre
• Classement par ordre d’importance par ordre de lecture
Commandes
Message à lecture optionnelle
Outils ZONE DE TRAVAIL
![Page 90: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/90.jpg)
[email protected] IHM, L2I et L2MI
Utilisation des couleurs
• Perception centrée sur le jaune-vert
– bleu (périphérique) pour encadrer
– bleu saturé à éviter pour du texte et petits objets
– Couleurs saturées (claires) pour les fonds
• Codage d’un état
– Utilisation de 7 (+/- 2) couleurs maximum
– Utilisation avec une autre mise en valeur
– Respecter l’interprétation culturelle
![Page 91: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/91.jpg)
[email protected] IHM, L2I et L2MI
Icônes
• Utilisation pour des commandes fréquentes
• Utilisation conjointe à un libellé
• Limitation du nombre (12 au mieux, 20 max)
• Construction à différents niveaux d’abstraction– Ressemblance (bouton stop des premiers navigateurs)
– Descriptif (bouton de justification des éditeurs)
– Exemple (bouton souligner S)
– Caricatural (bouton d’impression)
– Analogie (couper = ciseaux, sauver = disquette)
– Symbolique (image abstraite : logo de sport)
– Arbitraire (bouton "actualiser" des navigateur)
[J.F. Nogier]
Difficulté d’interprétation
![Page 92: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/92.jpg)
[email protected] IHM, L2I et L2MI
Mise en évidence
• Efficacité implique exception
• Durée déterminée par le besoin de mise en évidence
• Perception visuelle (ICS)– Inversion vidéo
– Police de caractère, structure du texte
– Taille
• Respect de la perception de la l’état de l’objet (ne pas induire de fausse idée)
• Clignotement, animation, son– À utiliser avec parcimonie
– Offrir la possibilité de l’arrêter
[J.F. Nogier]
![Page 93: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/93.jpg)
[email protected] IHM, L2I et L2MI
Message
• Affirmatif
• Forme Active
• Constructif (non critique)
• Sans impasse
• Respecter l’ordre des actions– Cliquez sur continuer après avoir insérer le cd
• Sans ambiguïté
• Cohérent avec le reste de l’IHM
![Page 95: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/95.jpg)
[email protected] IHM, L2I et L2MI
Hall of Shame
http://homepage.mac.com/bradster/iarchitect/shame.htm
![Page 96: Les images - unice.frdeptinfo.unice.fr/~renevier/ancien/IHM/2009-2010/2010/... · 2010-03-10 · option IHM, L2I et L2MI Philippe.Renevier@unice.fr 22 JTable : construction • Un](https://reader034.vdocuments.net/reader034/viewer/2022050418/5f8da0d0eb2985013733d171/html5/thumbnails/96.jpg)
[email protected] IHM, L2I et L2MI
Hall of Shame
Système d’onglets dans onglets pas
très clair
Hilite = homophones en
néerlandais…Pb d’îcones…
Replace doit-il être dans « Search » ?