La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Conception dIHM en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes contrat Creative Commons Paternité-Pas d'Utilisation.

Présentations similaires


Présentation au sujet: "Conception dIHM en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes contrat Creative Commons Paternité-Pas d'Utilisation."— Transcription de la présentation:

1 Conception dIHM en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique 2.0 France License

2 Conception dIHM en Java Concepts Généraux

3 3 Java et les interfaces graphiques interactives Langage conçu d'emblée avec une interface graphique interactive Ajout de mécanismes spécifiques pour les interfaces inner classes 2 interfaces et 2 modèles graphiques en standard Beaucoup d'exemples, de documentations et d'expérience.

4 4 Application graphique interactive : architecture Les boîtes à outils 2D sont maintenant très stéréotypées 3 composants système de fenêtrage API graphique gestion de l'arbre d'affichage et d'interaction Organisation sous forme d'objets

5 5 Le système de fenêtrage Accès partagé à l'écran Subdivision de l'écran en fenêtres Chaque fenêtre est positionné (x, y, z) et dimensionnée (largeur x hauteur) Modèle graphique d'affichage Modèle d'événements Communication entre les applications Gestion de ressources spécifiques

6 6 Les API graphiques Dans une fenêtre, une application dessine en utilisant des fonctions qui prennent des paramètres 2 catégories en 2D orientée pixel orientée "dimension réelle", ou "indépendante de la résolution" Richesse variable suivant les plate formes

7 7 La gestion de l'arbre d'affichage Afficher = appeler une succession de fonctions graphiques Représentation sous forme d'un arbre d'affichage (ou graphe directe acyclique) On affiche récursivement, en profondeur d'abord, tous les nœuds de l'arbre On modifie l'arbre pour changer l'affichage puis on réaffiche

8 8 La gestion de l'interaction Les dispositifs d'entrée génèrent des événements (petit bloc mémoire contenant un type, un temps, une fenêtre cible et des détails suivant le type) La boîte à outils achemine l'événement vers un nœud cible Le nœud gère l'événement, ce qui peut modifier l'état de l'arbre d'affichage On passe à l'événement suivant

9 9 Acheminement des événements Positionnel (souris) on regarde quel est le nœud de l'arbre le plus près de la position On l'envoie au plus prés, qui renvoie a son père s'il ne veut pas le gérer Non positionnel (clavier) si un nœud à le "focus", on lui envoie traduction d'une touche en caractère(s) ou action sinon, on cherche une cible gestion des raccourcis clavier

10 10 Les composants graphiques interactifs Le nœud est capable de s'afficher et de gérer les événement On lui ajoute une interface de communication suivant sa sémantique bouton, label, menu, ligne de texte, etc. On appelle ce nœud communicant un composant ou widget ou gadget ou objet de contrôle.

11 11 Organisation sous forme d'objets Les langages à objets permettent de représenter ces nœuds comme des objets ayant une interface Tous les nœuds héritent d'une classe de base (Component dans Java) Chaque composant particulier spécifie une interface particulière adaptée à sa sémantique

12 12 Principales différences entre les GUIs Il existe un grand nombre de boîtes à outils graphiques interactives (Graphical User Interfaces ou GUI) Langage / portabilité / performances / mécanismes de communications / extensibilité / rapidité de développement / robustesse Pas de "meilleur" mais des spécialisations Lire le chapitre consacré aux GUIs

13 13 Les boîtes à outils graphiques interactives de Java Java propose deux boîtes à outils graphiques : AWT (Abstract Window Toolkit), simple, petite et limitée SWING, cohérente, grosse et extensible. Les deux peuvent s'utiliser dans les applets SWING facilite la transition à partir d'AWT.

14 Conception dIHM en Java AWT

15 15 Java AWT Interface indépendante de la plate-forme API simple (simpliste) Composants peu nombreux Apparence pauvre Relativement rapide Similaire sur toutes les plate-formes

16 16 Organisation d AWT Packages java.awt et java.applet Classes de composants (dérivées de Component) Composants conteneurs Composants « feuille » Classes de gestionnaire dévénements Myriade de classes utilitaires Image, Color, Cursor, Dimension, Font, etc.

17 Conception dIHM en Java SWING

18 18 Java SWING SWING implémente tous les composants en Java SWING offre plusieurs mécanismes originaux, pratiques et puissants SWING peut se programmer à plusieurs niveaux SWING est très gros et souvent lent.

19 19 Programmation avec Java SWING Généralités sur Java SWING SWING et AWT Concepts de SWING Une application Java SWING pas à pas TPs Les composants standards de SWING Créer ses propres composants

20 20 SWING et AWT SWING cohabite avec AWT et utilise le minimum de ses services Tous les composants sont redéfinis AWT n est pas régulier pas de canvas dans un menu SWING est totalement régulier tout conteneur peut afficher tout objet graphique

21 21 Concepts de SWING Séparation du composant et de son apparence plusieurs apparences existent: Windows, Unix, Mac et « Metal » L apparence par défaut dépend de la plate forme Séparation du composant et de son modèle Séparation du composant et de son modèle de sélection

22 22 Concepts de SWING Basé sur des containers générique gère collection de composants design Pattern composite

23 23 Programmation SWING Package javax.swing Relativement proche de AWT pour faciliter la migration, ajout « J » avant le nom des classes:

24 24 Construction d une application Construire un arbre d objets dérivés de « JComponent » Attacher des gestionnaires d événements Ce sont les gestionnaires d événements qui feront les actions et modifieront les composants

25 25 Exemple import java.awt.*; import javax.swing.*; class hwSwing { public static void main(String args[]) { JFrame f = new JFrame("Hello World"); Jlabel texte = new JLabel("Hello World"); f.getContentPane().add(texte); f.pack(); f.setVisible(true); }

26 26 Autre approche import java.awt.*; import javax.swing.*; public class Test { public static void main(String args[]) { Simple f = new Simple(); f.pack(); f.setVisible(true); } public class Simple extends JFrame { Jlabel texte = new JLabel("Hello World"); public Simple() { getContentPane().add(texte); } }

27 27 explications Création de l arbre de composants : JFrame + JLabel ou JButton Déclaration des actions: addEventHandler + création d une « inner class » Calcul du placement des composants: pack Affichage

28 28 Mon premier Composant JFrame fenêtre principale JDialog fenêtre de dialogue (modale) Jwindow show() hide() ou dispose() toFront() ou toBack() setTitle(titre !) setSize(int, int)et setResizable(false)

29 29 Les autres composants

30 30 Jlabel Javax.swing.Jlabel descriptif : texte statique + image exemple : devant un champ de saisie Jlabel jl = new Jlavel(Label 1); ou jl.setText(Label 1); // ->.getText() jl.setIcon(new ImageIcon(java.gif)); jl.setVerticalTextPosition(SwingConstants.BOTTOM) jl.setHorizontalTextPosition(SwingConstants.CENTER);

31 31 JTextField Javax.swing.JTextField saisie de texte (non typé) JTextField jt = new JTextField(Thomas); String nom = new String(Thomas); jt.setText(nom); jt.setColumns(nom.length()); jt.copy(); jt.cut(); jt.paste();

32 32 JButton Bouton simple à états JButton jb= new Jbutton(OK,new ImageIcon(boc.gif)); jb.setRolloverIcon(new ImageIcon(cob.gif)); jb.setPressedIcon(new ImageIcon(ocb.gif)); jb.setDisabledIcon(new ImageIcon(obc.gif)); jb.setMnemonic(o); // ALT + o jb.setBorderPainted(false); jb.setFocusPainted(false); jb.doClick();

33 33 JmachinButton JToggleButton deux états (setIcon et setSelectedIcon) JCheckBox cases à cocher JRadioButton dans un groupe de bouttons radio penser à regarder Abstract Button

34 34 Exemple de Radio ButtonGroup grp = new ButtonGroup(); JRadioButton r1 = new JRadioButton(it1); JRadioButton r2 = new JRadioButton(it2); r2.setSelected(true); grp.add(r1); grp.add(r2);

35 35 Le modèle de bouton poussoir Modèle utilisé pour les CheckBox, RadioButton et Button Plusieurs niveaux d utilisation gère l état du bouton, au repos, sous le pointeur, appuyé et relâché. Gère la notification vers les listeners Gère l envoie d un événement « action »

36 36 Le modèle de bouton poussoir (2) public interface ButtonModel extends ItemSelectable { attribute boolean armed; attribute boolean selected; attribute boolean enabled; attribute boolean pressed; attribute boolean rollover; attribute int mnemonic; attribute String actionCommand; attribute ButtonGroup group; listener ActionListener; listener ItemListener; listener ChangeListener; }

37 37 JComboBox Liste déroulante (ouverte ou fermée) vector ou tableau dobjets passés en paramètres JComboBox cb = new JComboBox( items); cb.setMaximumRowCount(4); cb.setEditable(true); // JTextField

38 38 JMenu Une instance de JMenuBar par Jframe setJMenuBar(JMenuBar mb); Plusieurs Jmenu par JMenuBar add(JMenu jm); Plusieurs JMenuItem/JCheckboxMenu par Jmenu add(JMenuItem mi); addSeparator(); Structurez !!!

39 39 JPanel Jpanel conteneur JScrollPane un seul composant ! barres de défilement JScrollPane sp = new JScrollPane(); sp.add(monJLabel); sp.setViewportView (monJLabel); composants implémentant Scrollable class MonLabel extends Jlabel implements Scrollable Panel ScrollPane

40 40 Les composants de SWING DialogFrameSplit paneTabbed Pane Tool bar Internal frame Layered pane

41 41 Composants de Swing File chooser Color chooser Table TextTree List Slider Progress bar Tool tip

42 42 Capacités communes des composants (dés)activation isEnabled()setEnabled(…) (in)visible setVisible(…)isVisible() module le coût de linstanciation dun container ! tailles réelle et souhaitable Dimension getSize() ou Dimension getSize(Dimension r) setSize(…) Dimension getPreferredSize() ; setPreferredSize(Dimension r);

43 43 Factory Bordures Border mbd= new Border( BorderFactory.createEtchedBorder() BorderFactory.createLoweredBevelBorder() BorderFactory.createTitledBorder(Titre !) etc… ); monJbutton.setBorder(mbd); Curseur Cursor nc = new Cursor(Cursor.CROSSHAIR_CURSOR); monJbutton.setCursor(nc);

44 44 Couleurs new Color (r,g,b) new Color (r,g,b,a) 0 -> 255 a=255 opaque monJbutton.setBackground(Color.white); //constantes monJbutton.setForeground(Color.black); monJbutton.setOpaque(true);

45 45 Quelques difficultés à retenir Conteneurs de fenêtre : ne pas ajouter directement avec "add" mais ajouter avec "getContentPane()" Pas de multi-threading, sauf autorisation explicite dans la documentation

46 46 Pourquoi getContentPane ? Les containers Swing ont un JRootPane monContainer.getContentPane().add(...) composants « lourds » : JDialog, JFrame, JWindow Root pane

47 47 La classe JComponent Tool tip Bords Actions associées aux touches Propriétés Accès aux handicapés Double buffer

48 Conception dIHM en Java Swing : la gestion du placement des composants

49 49 Calcul du placement Le placement est calculé dans les conteneurs Soit les composants sont placés explicitement (x, y, largeur, hauteur) Soit ils sont gérés par un « LayoutManager » qui calcul ces paramètres dynamiquement besoins du composant (taille min, max, normale) + positionnement relatif

50 50 Mise en place d un gestionnaire de placement Les conteneurs définissent la méthode setLayout(layoutManager) pour changer le gestionnaire par défaut Le gestionnaire par défaut change d une classe de conteneur à une autre La méthode pack() déclenche le calcul du placement La méthode invalidate() rend le placement courant invalide

51 51 Les gestionnaires de placement... FlowLayout Place les composants de gauche à droite CardLayout Superpose les composants GridLayout Découpe en une grille régulière sur laquelle les composants sont placés GridBagLayout Découpe en une grille et place les composants sur une ou plusieurs cases

52 52...ou Layout Manager BorderLayout Découpe en 5 régions: south, north, east, west, center Aucun :.setBounds(x,y,h,l);

53 Conception dIHM en Java La gestion dévènements

54 54 Parcours des événements Plusieurs boucles envoient des événements dans une file unique System.getSystemEventQueue() Un Thread lit la file et distribue les événements à la racine de l arbre des composants associé à la fenêtre de l événement L événement est acheminé au composant auquel il est destiné

55 55 Gestion des actions Associer une action à un événement 2 types d événements issu du système de fenêtrage (bas niveau) issu d un composant ou dun sous-système Java (haut niveau) 2 niveaux de gestion dérivation des composants association de gestionnaires dactions

56 56 Les événements Package java.awt.event.* Héritent de la classe java.awt.AWTEvent identificateur (numéro unique) consumed (a-t-il été utilisé?) source (qui l'a émis) Envoyés dans une file unique Toolkit.getSystemEventQueue() Lus par un thread spécique

57 57 Types dévénements

58 58 Dérivation d un composant (obsolète) Redéfinition de la méthode processEvent(AWTEvent e) Test de la classe de l événement if (e instanceof FocusEvent) processFocusEvent((FocusEvent)e); else super.processFocusEvent(e); Ne pas oublier d appeler super sinon, rien ne marche plus.

59 59 Association de gestionnaires d actions Pour chaque famille d événements, une interface « listener » est définie MouseListener, MouseMoveListener, KeyListener, etc. Chaque classe composant définit « add Listener( Listener ) Frame Button ActionListener actionPerformed( ActionEvent e) addActionListener( ActionListener)

60 60 Les listeners Chaque composant peut renvoyer certains événements à l'application si elle le demande Le renvoi se fait par un Listener actionListener, AdjustmentListener, FocusListener, InputMethodListener, ItemListener, KeyListener, MouseListener, MouseMotionListener, TextListener, WindowListener

61 61 Exemple public class MyClass implements MouseListener {... someObject.addMouseListener(this);... public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void mouseClicked(MouseEvent e) {...//Event handler implementation goes here... } }

62 62 Les adaptateurs Les Adapters sont des classes concrètes qui facilitent l'utilisation des Inner Classes Pour chaque Listener ayant plusieurs méthodes, un Adapter est défini Il implémente toutes les méthodes en ne faisant rien Seules les méthodes faisant quelque chose doivent être implémentés par des inner classes

63 63 Exemple adapté public class MyClass extends MouseAdapter {... someObject.addMouseListener(this);... public void mouseClicked(MouseEvent e) { //Event handler implementation goes here... }

64 64 Rappel sur les "inner classes" Existent depuis Java versions classe définie dans l'espace de nommage d'une autre classe classe définie dans le contexte d'une autre classe classe anonyme définie au fil du code dans le contexte courant

65 65 Syntaxe des inner classes class a { static class B { … } …} class a { class B { … } …} class a { type method(args) { … Thread t = new Thread() { void run() { … } }; …} }

66 66 Définition d un Listener 4 méthodes Définition dune classe qui implémente linterface ActionListener Définition de linterface ActionListener dans la classe qui gère laction Utilisation des « inner classes », définition à la volée du code Utilisation d un classe « Adapter » pour ne pas avoir à définir toutes les méthodes

67 67 Inner classes public class MyClass extends Applet {... someObject.addMouseListener(new MyAdapter());... class MyAdapter extends MouseAdapter { public void mouseClicked(MouseEvent e) {...//Event handler implementation goes here... } }

68 68 Anonymous Inner classes public class MyClass extends Applet {... someObject.addMouseListener( new MouseAdapter() { public void mouseClicked(MouseEvent e) { //Event handler implementation goes here... } } );... }

69 Conception dIHM en Java Graphique & Swing

70 70 Graphics Java définit deux interfaces pour le graphique passif: Graphics et Graphics2D Graphics implémente un modèle graphique très simple et orienté pixel Graphics2D implémente un modèle graphique sophistiqué indépendant de la résolution On peut aussi créer une image et créer un graphique pour dessiner dessus

71 71 Capacités d un Graphics Les attributs sont: Color, PaintMode, Font, clip, origin, taille Les primitives graphiques sont: line, rect, roundRect, oval, arc, polyline, polygon, string, image On peut tracer le contour ou remplir les rect, roundRect, oval, arc et polygones On ne peut pas changer l épaisseur des traits ou faire des pointillés par exemple.

72 72 Les couleurs Modèle simple: 3 composants rouge, vert et bleu Modèle complexe : ColorSpace, Color et ColorModel ColorSpace est un espace de couleur (RGB, CIEXYZ, etc) Color représente une couleur dans un espace de couleur ColorModel spécifie comment une image code la couleur

73 73 Les Images Image: tableau de pixels peut être chargé du WEB ou d un fichier créé pour accélérer laffichage créé pour éviter des clignottements créé pour dessiner dedans Plusieurs niveaux d API Ici, le plus simple.

74 74 Création d une image Dans Component: Image img = createImage(largeur, hauteur) Pour dessiner dedans, créer un Graphics : Graphics g = img.createGraphics(); g.setBackground(getBackground()); On peut ensuite dessiner dans g On peut dessiner limage sur le graphics courant.

75 75 Chargement d une image java.awt.Toolkit.getImage(String file); java.awt.Toolkit.getImage(URL url); createImage fait la même chose mais ne partage pas les images Attention, dans une applet, getImage ne marche que sur le répertoire de l URL de l applet

76 76 Affichage d une image Graphics.drawImage(Image img, int x, int y, ImageObserver o); Plusieurs autres version qui retaillent l image java.awt.image.ImageObserver interface boolean imageUpdate(Image i, int info, int x, int y, int w, int h) appelé lors d un chargement incrémental d image

77 77 Les polices de caractères Java utilise des caractères Unicode (16 bits) Les polices traduisent des suites de caractères en suite de glyphes affichables Une police a un nom, un style et une taille noms systèmes: Dialog, DialogInput, Monospaced, Serif, SansSerif, Symbol Styles: PLAIN, BOLD, ITALIC La famille est gérée en interne

78 78 Les métriques de polices Ascenthauteur / ligne de base Leadingavance / début à gauche charWidthlargeur d un caractère charsWidthlargeur de plusieurs caractères

79 79 Capacités d un Graphics2D (Java2D) Dérive dun Graphics Ajoute les attributs suivants: composite, paint, stroke, RenderingHints, transform Les primitives obéissent à la transformation affine installée Les « stroke » et « paint » définissent les attributs d affichage des remplissages et des traits.

80 80 Les objets géométriques de Java2D Package java.awt.geom.* Définit les objets de gestion de la géométrie et leurs interfaces

81 81 Les transformations affines Spécifie à la fois l échelle en X et Y, la rotation, la translation et des déformations affines Les transformations se composent Une transformation courante est appliquée aux primitives graphiques

82 82 Les formes Ligne, rectangle, arcs, ellipse, polygone, etc. Courbes quadratiques et cubiques Area

83 83 Les courbes cubiques Courbes de Bézier Relativement facile à contrôler

84 84 Les "area" Permet de calculer avec des Shapes: intersection ajout, soustraction, différence symétrique Lent mais puissant

85 85 La notion de "Path" Forme définie par son contour point de départ suite de lignes ou courbes levé du crayon fermeture On peut remplir ou tracer le Path On peut itérer le long du Path suite de segments typés connus

86 86 Les traits Nombreux attributs: épaisseur, style de fin (end cap), style de join (join style), pointillé BasicStroke : transformer un trait en son contour (pour lui appliquer un remplissage)

87 87 Les remplissages Couleur pleine Composition avec mélange (translucide) Texture Gradient Pochoir

88 88 Imprimer avec Java2D public void actionPerformed(ActionEvent e) { if (e.getSource() instanceof JButton) { PrinterJob printJob = PrinterJob.getPrinterJob(); printJob.setPrintable(this); if (printJob.printDialog()) { try { printJob.print(); } catch (Exception ex) { ex.printStackTrace(); }

89 Conception dIHM en Java Créer un nouveau composant

90 90 Modifier lAffichage Deux cas de figure: composant primitif, l affichage est laissé au « peer » composant redéfini, l affichage est géré par update et paint En principe, seul le Canvas est censé être dérivé pour modifier son affichage L affichage se fait sur une surface graphique, le « Graphics »

91 91 Les composants spécifiques SWING Dériver de JComponent paint appelle paintComponent, paintBorder et paintChildren On peut changer lun des trois ou paint directement Similaire à AWT On peut utiliser Java2D

92 92 Récupération dun Graphics Pas de composant ZonedeDessin rafraichissement : public static void main(...) { […} JPanel pa = new JPanel(); Graphics g = pa.getGraphics(); g.drawOval(10,10,50,50); // centre supérieur gche }

93 93 Dessiner à tous les coups Public class MonPanel extends JPanel { public void PaintComponent(Graphics g) { super.paintComponent(g); g.drawOval(10,10,50,50); }

94 Conception dIHM en Java MVC en Swing

95 95 Comment être multi ? Plusieurs vues : DessinListener listDessin = new DessinListener(); CoordListener listCoord = new CoordListener(); maZoneDessin.addMouseMotionListener(listDessin); maZoneDessin.addMouseMotionListener(listCoord); Coordonnées : 83 28

96 Conception dIHM en Java Les composants évolués dans Swing

97 97 Le modèle de liste Utilisé pour les listes public interface ListModel { int getSize(); Object getElementAt(int index); Listener ListDataListener; } Facilite l affichage d un conteneur par une liste CellRenderer pour changer l apparence des items

98 98 Création d une liste String[] data = {« un », « deux »}; Jlist l = new JList(data); JList peut être créé avec un modèle ou un tableau (le modèle est créé implicitement) On peut lui changer son CellRenderer On peut lui changer son SelectionModel un ou plusieurs séléctionnés plusieurs contigus ou non le contrôle peut être plus fin

99 99 Le modèle de boîte combiné (combo box) Comme List plus un item sélectionné Le modèle de sélection est « un seul » Peut être modifiable ou non (ajout implicite d un item saisi au clavier dans la liste)

100 100 Le modèle d'intervalle borné BoundedRangeModel Utilisé par les sliders, scrollbar et les progress bars Minimun <= value <= value+extent <= Maximum JScrollBar j = new JScrollBar(myBRModel);

101 101 Le modèle d'arbre JTree TreeModel Object getRoot(), Object getChild(Object parent, int index), int getChildCount(Object parent), boolean isLeaf(Object node), valueForPathChanged(TreePath p, Object newValue), int getIndexOfChild(Object parent, Object child), TreeModelListener Pour déplacer, ajouter ou retirer une colonne dans une table

102 102 Le modèle de table JTable JTable(Object[][] rowData, Object[] columnNames) JTable(Vector rowData, Vector columnNames) new AbstractTableModel() { public String getColumnName(int col) { return columnNames[col].toString(); } public int getRowCount() { return rowData.length; } public int getColumnCount() { return columnNames.length; } public Object getValueAt(int row, int col) { return rowData[row][col]; } public boolean isCellEditable(int row, int col) { return true; } public void setValueAt(Object value, int row, int col) { rowData[row][col] = value; fireTableCellUpdated(row, col); }

103 103 La gestion du texte Gestion simple et configurable Niveau de configuration très poussé Texte simple, Texte HTML, Texte XML? Interface « Document » pour gérer l intérieur d un texte Plusieurs Viewers pour les différentes classes de documents

104 Conception dIHM en Java Imprimer Les Applets

105 105 Imprimer La classe qui imprime dérive de Graphics et doit être passée à la méthode « printAll(Graphics g) » de la racine des composants à imprimer Pour obtenir le Graphics, il faut un java.awt.PrintJob class PrintJob { PrintJob(); void end(); Graphics getGraphics(); … }

106 106 Imprimer (2) Pour obtenir un PrintJob, utiliser un dialogue d impression java.awt.Toolkit.getPrintJob(Frame f, String jobtitle, JobAttributes jobAttributes, PageAttributes pageAttributes) On peut tester dans la méthode « paint » si on affiche à l écran ou si on imprime: if (g instanceof PrintGraphics) …

107 107 Imprimer (3) PrintJob pjob = getToolkit().getPrintJob(frame, "Printing Test", null, null); if (pjob != null) { Graphics pg = pjob.getGraphics(); if (pg != null) { root.printAll(pg); pg.dispose(); // flush page } pjob.end();

108 108 AWT et les applets Les applets sont téléchargées à partir de pages WEB If you were using a Java-enabled browser such as HotJava, you would see dancing text instead of this paragraph. Le classe NervousText doit dériver de Applet dans java.Applet

109 109 Les Applets Applet dérive de Panel Définit les méthodes suivantes: void init() appelé une fois au chargement void start() appelé quand la page saffiche void stop() appelé quand la page disparaît String getParameter(String) récupère un argument passé en paramètre

110 110 Surprises avec les Applets Des mécanismes de sécurité sont activés Le focus nest pas implicitement sur lapplet, elle ne reçoit pas les touches du clavier par défaut Il faut que la taille de la fenêtre soit fixe Lapparence varie d une machine à lautre (les fonts disponibles par exemple).

111 Conception dIHM en Java Conclusion sur Swing

112 112 Conclusion et perspectives Java facilite la construction dapplications graphiques interactives Les APIs sont bien conçues Plusieurs niveaux de complexité Problèmes performances parfois complexité parfois

113 113 Bibliographie Designing the User Interface; Ben Shneiderman, Addison-Wesley 1997; ISBN Developing User Interfaces, Dan R. Olsen, Morgan Kaufmann, 1998; ISBN The Java Class Libraries : Java.Applet, Java.Awt, Java.Beans (Vol 2) P. Chan, R. Lee Addison-Wesley, 1997; ISBN The JFC Swing Tutorial: A Guide to Constructing GUIs K. Walrath, M. Campione; Addison-Wesley, 1999; ISBN Systèmes d'information et Interaction Homme-Machine, Ed. C. Kolski, 2000; Hermes. The Java Tutorial

114 114 Bibliographie java.sun.com tutorials references

115 Conception dIHM en Java Concevoir, cest…

116 116 Organisation graphique d'une interface Connaître les utilisateurs Concevoir avec eux l'interface Se rattacher à des choses connues code de couleurs, organisation spatiale, vocabulaire, etc. Tester les interfaces

117 117 Comment connaître les utilisateurs ? Pas d'introspection: vous n'êtes pas un utilisateur type! Modèle mental de l'utilisateur vs. Modèle d'implémentation Conception participative Use cases Analyse des tâches : que fait-il et comment le fait-il ?

118 118 Faire participer les utilisateurs Dessin d'interfaces sur papier Prototypage rapide et scénarios d'utilisation Cycle de développement en spirale

119 119 Hiérarchisation de l'information Organiser les écrans de manière hiérarchique Utiliser un vocabulaire simple Bien délimiter les zones regrouper les objets similaires détacher les objets différents Faire appel à des graphistes

120 120 Utilisation des couleurs Concevoir avec des niveaux de gris puis passer à la couleur 10% de daltoniens ou autres trouble de la perception Utiliser peu de couleurs Utiliser des teintes pastels et des couleurs complémentaires

121 121 Utilisation des polices de caractères Prendre des polices réglées pour les écrans et non traditionnelles à l'impression Pas d'italique ou de penché mais plutôt du gras Utiliser des couleurs contrastées fond / lettre Faire attention à la taille

122 122 Animations, images et sons Attention à ne pas divertir l'attention L'œil est très sensible aux animations: il est attiré par ce qui bouge il ne peut pas contrôler cette attirance peut provoquer de la fatigue et des maux de tête Image très colorées perturbantes Sons à éviter, sauf pour les erreurs graves redondance pour les erreurs


Télécharger ppt "Conception dIHM en Java Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes contrat Creative Commons Paternité-Pas d'Utilisation."

Présentations similaires


Annonces Google