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

POO3 Introduction aux IHM et à la réflexivité Java Anne-Marie Dery Audrey Occello responsable du.

Présentations similaires


Présentation au sujet: "POO3 Introduction aux IHM et à la réflexivité Java Anne-Marie Dery Audrey Occello responsable du."— Transcription de la présentation:

1 POO3 Introduction aux IHM et à la réflexivité Java Anne-Marie Dery Audrey Occello responsable du

2 Le matériel progresse sans cesse et se diversifie (station, téléphone portable, table interactive, …) Lhomme lui ne change pas ou presque : il a plus dexigences (linformatique lui est familière) Mais ses capacités de perception et daction sont limitées ATTENTION Rejet pur et simple par les utilisateurs Coût d'apprentissage (formation) Perte de productivité Utilisation incomplète (manque à gagner). Coût de maintenance, Perte de crédibilité. IHM de plus en plus importante Pourquoi ?

3 Les besoins en IHM Des Interfaces flexibles De bons programmeurs au niveau IHM et architecture Cours logiciel + réflexivité + boîtes à outils Des interfaces utilisables prise en compte des usages (SI5) Des interfaces adaptées au support visé bonne connaissance technologique (SI5) Le design : non enseigné Les designers collaborent avec les informaticiens

4 Premier cours dIHM (SI3 / SI4) Architecture Logicielle IHM – NF Boite graphique Swing Un détour par la réflexivité Boite graphique GWT Cours en amphi Machine fermée (supports format papier) Un TP fil rouge Des rendus réguliers Une revue de code en fin de TPs Un examen avec documents papiers à suivre Un parcours IHM et des modules pour aller plus loin (SI5) Positionnement dans le cursus

5 Ce que vous allez utiliser de Java LAPI java Lhéritage Les exceptions Les threads Les inner classes Quelques flashback ou look forward avant de commencer le vif du sujet

6 Les packages les plus importants LAPI – Les bibliothèques graphiques java.awt.* - 1ère boite à outil de java Éléments de base : Component(et Graphics) - Container et Layout (LayoutManager) java.swing.* - extension (dabord JFC puis intégré depuis jdk 1.2) faire que tout fonctionne de manière identique partout – Les événements Chaque élément graphique subit des événements : principe du CallBack appel aux écouteurs par l'écouté lorsque lévénement se produit java.awt.event.* et java.swing.event – La réflexivité java.reflect.* - les classes qui décrivent les concepts de java

7 Lhéritage bibliothèques graphiques

8 Lhéritage introspection et réflexivité java java.lang.reflect.* des classes : Object AccessibleObject Constructor Field Method Array InvocationTargetException Modifier ReflectPermission une interface : Member

9 Les classes internes Outil supplémentaire : autre forme dhéritage avec masquage de limplémentation (y compris au package) Qui permet la définition de «callback» à la volée Utile pour la programmation événementielle Se définit :dans une classe, dans une méthode, entre { } ou en paramètre (anonyme) Linner a accès aux éléments de la classe qui linclut Création dune instance dune inner classe –.new ( ) –Ex : Bebete.Etat result = bebete.new Etat(); Avec Bebete une classe contenant une classe interne Etat et bebete une instance de la classe Bebete LInner dans un bloc dinstruction Ne peut pas être utilisée en dehors de la méthode Utile pour personnaliser des objets sans créer de classe (masquer limplémentation).

10 Exemple de classe interne Regardez le tutorial Sur les inner classes - llnw.oracle.com/javase/tutorial/java/javaOO/innerclasses.html Sur les event : llnw.oracle.com/javase/tutorial/uiswing/events/generalrules.html

11 Les processus légers ou threads La classe Thread new Thread( ); –Méthode start( ) qui lance le processus –Méthode yield( ) pour passer la main (via le scheduler) Pour être plus rapide et Pour ne pas bloquer un processus (interface). Utilisation de linterface Runnable –Méthode public void run( ) utilisation de boolean pour les processus «long» public void run( ) { // code while( ! canceled) { // code } // code } import java.util.concurrent.*; public void run() { try { while(! canceled) { TimeUnit.MILLISECONDS.sleep(100); } } catch(InterruptedException e) { System.err.println("Interrupted"); } Cf. cours internet et réseaux et cours appli. concurrentes

12 Exemples Vous pouvez aller regarder La partie du tutorial java consacrée à ce point : Le pointeur donné par M. Riveill :

13 Organiser le code (rangement) Simplifier (diviser pour régner) Organiser le travail Modifier (une partie) Ré-utiliser Notions : modularité, évolutivité, flexibilité Séparation possible –Code pour IHM –Code «Métier» Exemple –IHM différente pour une Gestion dun stock de chaussures ou de bibelots ? –Linux sous gnome ou kde, le système change-t-il ? Objectif : éviter de tout modifier si on change la partie fonctionnelle ou la partie IHM Architecture Logicielle et IHM : Pourquoi ?

14 Un problème classique

15 Des architectures logicielles Tous les modèles partent du principe : un système interactif comporte une partie interface et une partie application pure Cette dernière est souvent appelée noyau fonctionnel. Le noyau fonctionnel est considéré comme préexistant, et les modèles de systèmes interactifs décrivent essentiellement la partie interface, ainsi que ses relations avec les objets du domaine. La plupart des modèles identifient au moins trois types d'éléments : un ``coté utilisateur' (présentations), un ``côté noyau fonctionnel' (interfaces du noyau fonctionnel, abstractions, modèles), et des éléments articulatoires (contrôleurs, adaptateurs). Système interactif utilisateur

16 Des architectures logicielles : modèles architecturaux Seeheim Premier modèle (groupe de travail à Seeheim en 1985) - destiné au traitement lexical des entrées et sorties dans les interfaces textuelles – a servi de base à beaucoup d'autres modèles. Retour sémantique direct utilisateur NF

17 Des architectures logicielles : modèles architecturaux Arch utilisateur Composant d'interaction - ensemble des widgets (objets interactifs) + communications avec les périphériques physiques – Composant de présentation - représentation logique des widgets indépendante de la plate-forme. Contrôleur de dialogue - responsable du séquencement des tâches et du maintien de la consistance entre les vues multiples. Adaptateur du domaine - responsable des tâches dépendantes du domaine qui ne font pas partie du noyau fonctionnel mais qui sont nécessaires à sa manipulation par l'utilisateur. Noyau fonctionnel représente la partie non interactive de l'application. Le modèle Arch [1992] composants et 3 types de données objets du domaine objets du domaine objets de présentation objets d'interaction

18 Des architectures logicielles : modèles à agents utilisateur Le modèle MVC (Modèle, Vue, Contrôleur) Smalltalk [Goldberg and Robson, 1981].Goldberg and Robson, 1981 modifiabilité + conception itérative + compatibilité avec les langages à objets. les systèmes interactifs = une hiérarchie d'agents. Un agent MVC = un modèle, une ou plusieurs vues, et un ou plusieurs contrôleurs modèle = noyau fonctionnel de l'agent. (entier, chaîne de caractères ou objets) Le modèle notifie les vues à chaque fois que son état est modifié par le noyau ou par ses contrôleurs. La vue (constituée d'objets graphiques) maintient une représentation du modèle pour l'utilisateur, mise à jour à chaque notification d'état. Le contrôleur reçoit et interprète les événements utilisateur, les répercutant sur le modèle (modification de son état) ou sur la vue (retour instantané).

19 Des architectures logicielles : modèles à agents PAC utilisteur modèle à agents PAC (Présentation, Abstraction, Contrôle) [Coutaz, 1987] = hiérarchie d'agents.Coutaz, 1987 présentation = comportement en entrée et en sortie de l'agent pour l'utilisateur. Abstraction = la partie sémantique de l'agent. Contrôle = consistance entre la présentation et l'abstraction,. Abstraction : équivalent modèle de MVC, présentation : fusion des composants vue et contrôleur. Le composant contrôle n'a pas d'existence explicite dans le modèle MVC. le modèle PAC peut être appliqué à plusieurs niveaux d'un système interactif. Une application interactive peut ainsi être décrite comme une hiérarchie d'agents disposés sur plusieurs couches d'abstractions PAC/Amodeus = Arch + Pac avec hiérarchie PAC dans le contrôleur

20 Zoom : Architecture MVC Smalltalk[Goldberg et Robson ] –Model : modélisation (données et comportement) –View: représentation manipulable de l'objet –Control : interprétation des entrées Séparer dans le code –les données (le Modèle), –La ou les Vues, –Le Contrôle V sabonne à M C sabonne à V C modifie M et V

21 Le contrôleur au centre de la communication

22 Plusieurs vues – 1 modèle

23 Exemple

24 Pour voir le code complet es/javase/mvc/

25 Observer Observable

26 Motivation Un effet de bord fréquent de la partition dun système en une collection de classes coopérantes est la nécessité de maintenir la consistance entre les objets reliés entre eux. On ne veut pas obtenir la consistance en liant étroitement les classes, parce que cela aurait comme effet de réduire leur réutilisabilité.

27 Moyen Définir une dépendance de 1 à n entre des objets telle que lorsque létat dun objet change, tous ses dépendants sont informés et mis à jour automatiquement

28 Quand lappliquer Lorsquune abstraction possède deux aspects dont lun dépend de lautre. – Lencapsulation de ces aspects dans des objets séparés permet de les varier et de les réutiliser indépendamment. – Exemple : Modèle-Vue-Contrôleur Lorsquune modification à un objet exige la modification des autres, et que lon ne sait pas a priori combien dobjets devront être modifiés. Lorsquun objet devrait être capable dinformer les autres objets sans faire dhypothèses sur ce que sont ces objets,

29 Besoin dévénements Le pattern Observer décrit – comment établir les relations entre les objets dépendants. Les objets-clés sont – la source Peut avoir nimporte quel nombre dobservateurs dépendants Tous les observateurs sont informés lorsque létat de la source change – lobservateur. Chaque observateur demande à la source son état afin de se synchroniser

30 Structure

31 Collaborations

32 Bénéfices Utilisation indépendante des sources et des observateurs. – On peut réutiliser les sources sans réutiliser les observateurs et vice- versa. – On peut ajouter des observateurs sans modifier la source et les autres observateurs. Support pour la communication broadcast – La source ne se préoccupe pas du nombre dobservateurs.

33 Implémentations Java du pattern Une classe et une interface : class Observable {... } et interface Observer Un objet Observable doit être une instance de la classe qui dérive de la classe Observable Un objet observer doit être instance dune classe qui implémente linterface Observer void update(Observable o, Object arg); Des listeners : ajouter des listerners, notifier les listeners avec des événements, réagir aux événements

34 Observer-Observable et Listeners

35 Exemple de Listener jan.newmarch.name/java/replayJava/paper.htm

36 Listeners Supported by Swing Components ing/events/intro.html

37 Des éléments graphiques : Component Définition dun élément graphique avec une dimension, une position Des Coordonnées (Origine coin supérieur gauche, x (width) vers la droite et y (height) vers le bas) Des morceaux décrans : Graphics Contexte graphique Permet de dessiner –Changer de crayon : couleur, formes géométriques, images, chaînes de caractères - Automatiquement redimensionnés, réaffichés Que trouve-t-on dans les librairies graphiques ? Des éléments graphiques Contenant Container : qui contiennent dautres éléments graphiques organisés Du Formattage : LayoutManager Définition de lorganisation En ligne, en tableau, avec des contraintes,etc

38 Hiérarchie Swing

39 Aperçu de Swing Arch swing_palettes.html

40 Aperçu de Swing Les Containers Les containers Ont un LayoutManager –add / remove dun Component –Unicité de lieu –Indice des components Méthodes à connaître repaint() ! validate() ! setEnabled(true / false) : activé / désactivé (Rectangle) getBounds / setBounds(x,y, w, h) : positionne et dimensionne getWidth() : largeur / getHeight() : hauteur getX() et getY() : obtenir une coordonnée setVisible(true / false) getBackground et setBackground [objet Color, définition RGB]

41 Aperçu de Swing Des composants JComponent Hérite de Container Méthodes de commodité getSize retourne une Dimension setSize : une Dimension ou deux entiers –Une position getLocation retourne un Point setLocation avec un Point ou deux entiers –Coordonnées Origine au coin supérieur gauche x (width) vers la droite et y (height) vers le bas –Méthode public void paint(Graphicsg ) –setPreferredSize –setDoubleBuffered(true/false) / isDoubleBuffered() –setOpaque(true / false) Dessin à lécran : paint appelle –paintComponent –paintBorder –paintChildren Les boutons – JButton /JToggleButton / JCheckBox / JRadioButton –java.awt.ButtonGroup (méthode add) Les champs textuels – JTextField/ JTextArea Etc…

42 Aperçu de Swing et aussi… Les îcones : javax.swing.ImageIcon créer avec le nom dun fichier image par exemple Menus : les JMenuBar, JMenu, JMenuItem Les Layout :Basé sur PreferredSize ou une maximisation de lélément BorderLayout –par défaut dans une fenêtre –ajout en précisant la zone –add("North", comp) FlowLayout : en ligne GridLayout : en tableau GridBagLayout : avec des contraintes etc.

43 Exemple import javax.swing.*; import java.awt.*; import java.awt.event.*; import java.util.*; public class SwingButton extends JApplet { public void init() { // Swing adds JComponents to the containers JcontentPane Container contentPane = getContentPane(); // Create an instance of JButton JButton button = new JButton("A Button"); // Add the button to the contentPane. contentPane.add(button); } }

44 Rappel sur le patron MVC Impose une séparation en 3 couches : – M : représente les données de lapplication. Définit interaction avec la base de données et le traitement des données – V : représente linterface utilisateur. Effectue aucun traitement, ne fait que laffichage des données (fournit par M). Possibilité davoir plusieurs vues pour un même M – C : gère linterface entre le modèle et le client. Interprète la requête de ce dernier pour lui envoyer la vue correspondante. Effectue la synchronisation entre le modèle et les vues 44

45 Synchronisation entre la vue et le modèle Se fait par lutilisation du pattern Observer. Permet de générer des événements lors dune modification du modèle et dindiquer à la vue quil faut se mettre à jour 45

46 Synchronisation entre la vue et le modèle 46

47 Schéma dinteraction Ce modèle permet de : –Changer une couche sans altérer les autres. Par exemple remplacer Swing par SWT sans porter atteinte aux autres couches. Idem pour le modèle –Synchroniser les vues. Toutes les vues qui montrent la même chose sont synchronisées 47

48 Mise en garde La mise en œuvre de MVC dans une application nest pas une tâche aisée : –Introduit un niveau de complexité assez élevée –Implique une bonne conception dès le départ Peut prendre du temps au développement En faire gagner lors de lévolution de lapplication Conseillée pour les moyennes et grandes applications amenées à être maintenues, étendues et pérennes 48

49 Mise en place Exemple assez simple dune application qui permet de modifier un volume. Plusieurs vues pour représenter le volume et après toutes modifications, toutes les vues devront être synchronisées. Conseils : dans une grosse application, il est important de faire différents packages pour les différentes préoccupations 49

50 Le modèle : la base 50 public class VolumeModel { private int volume; public VolumeModel(){ super(); volume = 0; } public int getVolume() { return volume; } public void setVolume(int volume) { this.volume = volume; }

51 Pour la notification Pour permettre la notification de changement de volume, on utilise des listeners On crée donc un nouveau listener (VolumeListener) et un nouvel événement (VolumeChangeEvent) 51

52 Le listener et levent 52 import java.util.EventListener; public interface VolumeListener extends EventListener { public void volumeChanged(VolumeChangedEvent event); } import java.util.EventObject; public class VolumeChangedEvent extends EventObject{ private int newVolume; public VolumeChangedEvent(Object source, int newVolume){ super(source); this.newVolume = newVolume; } public int getNewVolume(){ return newVolume; }

53 Implémentation du système découteurs dans le modèle (1/2) 53 import javax.swing.event.EventListenerList; public class VolumeModel { private int volume; private EventListenerList listeners; public VolumeModel(){ this(0); } public VolumeModel(int volume){ super(); this.volume = volume; listeners = new EventListenerList(); } public int getVolume() { return volume; } public void setVolume(int volume) { this.volume = volume; fireVolumeChanged(); }

54 Implémentation du système découteurs dans le modèle (2/2) 54 public void addVolumeListener(VolumeListener listener){ listeners.add(VolumeListener.class, listener); } public void removeVolumeListener(VolumeListener l){ listeners.remove(VolumeListener.class, l); } public void fireVolumeChanged(){ VolumeListener[] listenerList = (VolumeListener[]) listeners.getListeners(VolumeListener.class); for(VolumeListener listener : listenerList){ listener.volumeChanged( new VolumeChangedEvent(this, getVolume())); }

55 Ce que lon a maintenant Le modèle est maintenant capable davertir tous ses écouteurs à chaque changement de volume En fonction de lapplication, il est possible dimaginer plusieurs listeners par modèles et dautres événements dans les listeners (par exemple quand le volume dépasse certains seuils) Remarque : le modèle peut devenir très vite conséquent 55

56 Pré-requis pour le contrôleur Pour éviter dêtre dépendant de Swing, on va créer une classe abstraite représentant une vue de volume 56 public abstract class VolumeView implements VolumeListener{ private VolumeController controller = null; public VolumeView(VolumeController controller){ super(); this.controller = controller; } public final VolumeController getController(){ return controller; } public abstract void display(); public abstract void close(); }

57 Le Contrôleur Manipulera des objets de type View et non plus de type Swing Un seul contrôleur sera créé dans un soucis de simplicité puisque les 3 vues font la même chose. Dans le cas de vues complètement différentes, il est fortement conseillé dutiliser plusieurs contrôleurs 57

58 Les vues Nous supposons 3 vues (dans le cadre du cours, nous nen montrerons qu une) : –Une vue permettant de modifier le volume avec un champ de texte et valider par un bouton –Une vue permettant de modifier le volume à laide dune jauge + bouton pour valider –Une vue listant les différents volumes Toutes ces vues sont représentées par une JFrame 58

59 Contrôleur (1/2) 59 public class VolumeController { public VolumeView fieldView = null; public VolumeView spinnerView = null; public VolumeView listView = null; private VolumeModel model = null; public VolumeController (VolumeModel model){ this.model = model; fieldView = new JFrameFieldVolume(this, model.getVolume()); spinnerView = new JFrameSpinnerVolume(this, model.getVolume()); listView = new JFrameListVolume(this, model.getVolume()); addListenersToModel(); } private void addListenersToModel() { model.addVolumeListener(fieldView); model.addVolumeListener(spinnerView); model.addVolumeListener(listView); }

60 Contrôleur (2/2) 60 public void displayViews(){ fieldView.display(); spinnerView.display(); listView.display(); } public void closeViews(){ fieldView.close(); spinnerView.close(); listView.close(); } public void notifyVolumeChanged(int volume){ model.setVolume(volume); }

61 Les vues Nous allons faire 3 vues (dans le cadre du cours, nous nen montrerons qu une) : –Une vue permettant de modifier le volume avec un champ de texte et valider par un bouton –Une vue permettant de modifier le volume à laide dune jauge + bouton pour valider –Une vue listant les différents volume Toutes ces vues sont représentées par une JFrame 61

62 JFrameField (1/3) 62 import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.text.NumberFormat; import javax.swing.*; import javax.swing.text.DefaultFormatter; public class JFrameFieldVolume extends VolumeView implements ActionListener{ private JFrame frame = null; private JPanel contentPane = null; private JFormattedTextField field = null; private JButton button = null; private NumberFormat format = null; public JFrameFieldVolume(VolumeController controller) { this(controller, 0); } public JFrameFieldVolume(VolumeController controller, int volume){ super(controller); buildFrame(volume); }

63 JFrameField (2/3) 63 private void buildFrame(int volume) { frame = new JFrame(); contentPane = new JPanel(); format = NumberFormat.getNumberInstance(); format.setParseIntegerOnly(true); format.setGroupingUsed(false); format.setMaximumFractionDigits(0); format.setMaximumIntegerDigits(3); field = new JFormattedTextField(format); field.setValue(volume); ((DefaultFormatter)field.getFormatter()).setAllowsInvalid(false); contentPane.add(field); button = new JButton("Mettre à jour"); button.addActionListener(this); contentPane.add(button); frame.setContentPane(contentPane); frame.setTitle("JFrameSpinnerVolume"); frame.pack(); }

64 JFrameField (3/3) public void close() { frame.dispose(); public void display() { frame.setVisible(true); } public void volumeChanged(VolumeChangedEvent event) { field.setValue(event.getNewVolume()); } public void actionPerformed(ActionEvent arg0) { getController().notifyVolumeChanged(Integer.parseInt(field.getValue().toString())); }


Télécharger ppt "POO3 Introduction aux IHM et à la réflexivité Java Anne-Marie Dery Audrey Occello responsable du."

Présentations similaires


Annonces Google