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

Patrick Reuter, LaBRI/INRIA26/03/2008 1 Les Interfaces Graphiques 27 Février 2009 Patrick Reuter Maître de conférences LaBRI/INRIA, Université Bordeaux.

Présentations similaires


Présentation au sujet: "Patrick Reuter, LaBRI/INRIA26/03/2008 1 Les Interfaces Graphiques 27 Février 2009 Patrick Reuter Maître de conférences LaBRI/INRIA, Université Bordeaux."— Transcription de la présentation:

1 Patrick Reuter, LaBRI/INRIA26/03/ Les Interfaces Graphiques 27 Février 2009 Patrick Reuter Maître de conférences LaBRI/INRIA, Université Bordeaux 2 1/3/2007 1

2 Patrick Reuter, LaBRI/INRIA26/03/ Les interfaces graphiques et les périphériques matériels permettent l'interactivité entre – un programme (composé d'un ensemble de fonctions), et – un utilisateur. Interface Utilisateur

3 Patrick Reuter, LaBRI/INRIA26/03/ Avant…

4 Patrick Reuter, LaBRI/INRIA26/03/ Avant …

5 Patrick Reuter, LaBRI/INRIA26/03/ Maintenant …

6 Patrick Reuter, Université Bordeaux 227/02/ GUI : Graphical user Interface (WIMP : Window Icon Menu Pointer) p.ex. Gnome, kde, linux, Macos X, Win* Photo : gimp GUI : Interface Graphique Utilisateur

7 Patrick Reuter, Université Bordeaux 227/02/ But : Permettre une interactivité avec un programme de manière « plus simple » et plus intuitive. Elle repose sur trois parties : les entrées, les sorties, le lien GUI : Interface Graphique Utilisateur

8 Patrick Reuter, Université Bordeaux 227/02/ Les entrées : récupération des informations auprès de l'utilisateur frappe au clavier, déplacement de la souris, widget, etc. Les sorties : l'affichage des données et de l'état du système. Fenetre, bouton, menu, widget Le lien: entre les actions de l'utilisateur et les actions effectives sur le coeur du programme. Ouvrir un fichier, met le fichier en mémoire GUI : Interface Graphique Utilisateur

9 Patrick Reuter, LaBRI/INRIA26/03/ Programmation évènementielle La programmation événementielle est un concept différent de la programmation fonctionnelle ou impérative Il sagit de permettre une interaction non-linéaire, plusieurs événements peuvent être produits avec un ordre différent. exécution choix Programmation fonctionnelle Programmation évènementielle

10 Patrick Reuter, LaBRI/INRIA26/03/ Programmation évènementielle Les composants dune applications événementielle interagissent entre eux et avec lenvironnement. Il communiquent en réponse à des événements. Les événements sont captés par le système et sont transmis aux « écouteurs » (listener). Cest vous qui mettez en place les « écouteurs ».( implements )

11 Patrick Reuter, LaBRI/INRIA26/03/ Programmation évènementielle Pour réaliser des interfaces, il est impératif de programmer de manière evénementielle et donc de prévoir les évènements. Dans ce but, vous devez connaître les capacités de votre interface et les événements quelle peut générer.

12 Patrick Reuter, LaBRI/INRIA26/03/ Routines de communication Événement (souris, clavier, etc.) Control View Model Comment Concevoir un programme ? Java (Swing) Java Séparez les classes de la gestion du modèle et celle de linterface graphique P.ex. base de données,

13 Patrick Reuter, LaBRI/INRIA26/03/ Modèle-Vue-Contrôleur (MVC) Motif de conception pour le développement d'applications logicielles qui sépare – le modèle de données, – l'interface utilisateur et – la logique de contrôle. Ce motif a été mis au point en 1979 par Trygye Reenskang, qui travaillait alors sur Smalltalk dans les laboratoires de recherche Xerox PARC.

14 Patrick Reuter, LaBRI/INRIA26/03/ Modèle-Vue-Contrôleur (MVC) la Vue : correspond à l'interface avec laquelle l'utilisateur interagit. Les résultats renvoyés par le modèle sont dénués de toute présentation mais sont présentés par les vues. Plusieurs vues peuvent afficher les informations d'un même modèle. La vue n'effectue aucun traitement, elle se contente d'afficher les résultats des traitements effectués par le modèle, et de permettre à l'utilisateur d'interagir avec elles.

15 Patrick Reuter, LaBRI/INRIA26/03/ Modèle-Vue-Contrôleur (MVC) Le Modèle : représente le comportement de l'application : traitements des données, interactions avec la base de données, etc. Il décrit les données manipulées par l'application et définit les méthodes d'accès.

16 Patrick Reuter, LaBRI/INRIA26/03/ Modèle-Vue-Contrôleur (MVC) le Contrôleur : prend en charge la gestion des événements de synchronisation pour mettre à jour la vue ou le modèle Il n'effectue aucun traitement, ne modifie aucune donnée, il analyse la requête du client et se contente d'appeler le modèle adéquat et de renvoyer la vue correspondant à la demande Routines de communication

17 Patrick Reuter, LaBRI/INRIA26/03/ Modèle-Vue-Contrôleur (MVC) Résumé : – lorsqu'un client envoie une requête à l'application: celle-ci est analysée par le contrôleur ce contrôleur demande au modèle approprié d'effectuer les traitements, puis renvoie la vue adaptée

18 Patrick Reuter, LaBRI/INRIA26/03/ Control Routines de communication Vue Modèle 1) Il faut connaître le modèle et son fonctionnement 2) Définir le contrôle que lon veut faire (ouvrir, fermer, afficher, etc.) sur le modèle 3) Faire un croquis de linterface pour définir les widgets (menu, bouton, label, etc.) à utiliser et leurs caractéristiques (nom, position, etc.) Concevoir une interface

19 Patrick Reuter, LaBRI/INRIA26/03/ JAVA, langage de programmation de SUN utilise deux bibliothèques pour vous aider à développer des interfaces graphiques : AWT (ne s'utilise plus) SWING Interface Graphique avec Java Buttons Spinner Menu

20 Patrick Reuter, Université Bordeaux 227/02/ Documentation en ligne : The Jfc Swing Tutorial: A Guide to Constructing Guis (31 mars 2004) de Kathy Walrath, et al prix : EUR 59,19 SWING Frame

21 Patrick Reuter, Université Bordeaux 227/02/ SWING est en sus de AWT, mais en réutilise quelques parties. Il est inclu dans le SDK (software Development Kit) de JAVA depuis la version 1.2. SWING est contenu dans le package : javax.swing. import javax.swing. import java.awt.*; import java.awt.event.*; SWING est indépendant du système d'exploitation (Mac, Windows, Linux, …) on garde donc une portabilité des programmes. SWING

22 Patrick Reuter, LaBRI/INRIA26/03/ Les applications SWING se développent de la même manière que toutes les applications JAVA en utilisant les classes de la bibliothèque SWING: objets, classes, héritages Interface Graphique avec Java Programmer une interface n'est pas donc pas différent que programmer un ensemble de classe comme la classe « Cercle », p.ex.

23 Patrick Reuter, LaBRI/INRIA26/03/ Concevoir linterface: 1ère partie (Vue)

24 Patrick Reuter, LaBRI/INRIA26/03/ Modèle Vue Control Événement (souris, clavier, etc.) Routines de communication Java Java (Swing) Concevoir linterface: 1ère partie (Vue)

25 Patrick Reuter, LaBRI/INRIA26/03/ import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); } FenetreView.java 1) Écrire le code java 2) compilation 3) Exécution Interface Graphique avec Java

26 Patrick Reuter, LaBRI/INRIA26/03/ import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); } FenetreView.java 1) Écrire le code java Interface Graphique avec Java Importation Constructeur Instanciation de lobjet

27 Patrick Reuter, LaBRI/INRIA26/03/ SWING : création Elle se fait principalement en 5 étapes : 1. Création dune fenêtre (par héritage) 2. Récupération du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout

28 Patrick Reuter, LaBRI/INRIA26/03/ Création de la fenêtre par lhéritage de JFrame SWING: étape 1 JFrame Container Layout Container Widget import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); }

29 Patrick Reuter, LaBRI/INRIA26/03/ JFrame est un composant de haut niveau, il contiendra toute lapplication, cest la première brique de linterface. Pour lutiliser et simplifier le code, on implémente une nouvelle classe qui hérite de JFrame. Une JFrame possède un conteneur par défaut. Pour hériter de JFrame : - on crée une nouvelle classe (ici Fenetre) qui hérite (extends) de JFrame. - Toujours créer un constructeur pour pouvoir insérer les éléments dans cette fenêtre. SWING : JFrame

30 Patrick Reuter, LaBRI/INRIA26/03/ Applet Frame Composants SWING (1/4) Dialog JFrame Container Layout Container Widget

31 Patrick Reuter, LaBRI/INRIA26/03/ Appel du constucteur de la classe mère SWING: étape 1 JFrame Container Layout Container Widget import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); }

32 Patrick Reuter, LaBRI/INRIA26/03/ SWING : création Elle se fait principalement en 5 étapes : 1. Création dune fenêtre (par héritage) 2. Récupération du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout

33 Patrick Reuter, LaBRI/INRIA26/03/ Extraction du container de la fenetre (JFrame) JFrame Container Layout Container Widget SWING: étape 2 import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); }

34 Patrick Reuter, LaBRI/INRIA26/03/ Le conteneur est lobjet en Java qui permet dafficher plusieurs objets graphiques. On peut insérer un ou plusieurs objets dans un même conteneur. Les objets sont placés dans le conteneur suivant les règles imposées par le layout (voir suite). Par la suite, pour réaliser des interfaces plus complexes, on insère des conteneurs dans dautres conteneurs pour spécifier plusieurs politiques de placement. Les conteneurs les plus souvent utilisés sont les JPanels. SWING : Conteneur Container Layout

35 Patrick Reuter, LaBRI/INRIA26/03/ Le panneau est un conteneur intermédiaire invisible. Il a pour finalité de positionner daprès son layout les composants, boutons et les labels (JScrollPane, JTabbedPane). Son layout par défaut est un FlowLayout. Classe JPanel : déclaration et instanciation : JPanel panel = new JPanel(); SWING : JPanel

36 Patrick Reuter, LaBRI/INRIA26/03/ Composants SWING (2/4) Panel Tabbed pane Tool bar Split pane Scroll pane JFrame Container Layout Container Widget

37 Patrick Reuter, LaBRI/INRIA26/03/ SWING : création Elle se fait principalement en 5 étapes : 1. Création dune fenêtre (par héritage) 2. Récupération du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout

38 Patrick Reuter, LaBRI/INRIA26/03/ Mise en place dun gestionnaire de placement : SWING: étape 3 JFrame Container Layout Container Widget import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); }

39 Patrick Reuter, LaBRI/INRIA26/03/ Les « layout » permettent de positionner les élèments avec une politique de placement des objets. Les layouts sont toujours liès aux conteneurs (JPanels, Tabbed pane). SWING : Layout

40 Patrick Reuter, LaBRI/INRIA26/03/ Composants SWING (3/4) JFrame Container Layout Container Widget

41 Patrick Reuter, LaBRI/INRIA26/03/ Il sont par défaut dans tous les composants (JFrame, JPanel). Il existe 7 types : FlowLayout, BorderLayout, GridLayout, BoxLayout, GridBagLayout, SpringLayout et le CardLayout. Chaque layout est une classe Java : Pour créer un layout : déclaration puis instanciation FlowLayout flo = new FlowLayout(); Les composants utilisent souvent par défaut un BorderLayout (JFrame, JDialog, JApplet). Les Layouts sont utilisés surtout avec les panneaux (JPanel) et les fenêtres : On peut affecter un layout dans un panneau au moment de linstanciation : JPanel panel = new JPanel(new BorderLayout()); Affectation d'un layout dans le conteneur dune fenêtre "frame": Container pan = frame.getContentPane(); pan.setLayout(new FlowLayout()); SWING : Layout

42 Patrick Reuter, LaBRI/INRIA26/03/ Le même code donnera des résultats différents suivant le Layout utilisé. SWING : Layout import java.awt.*; import javax.swing.*; public class JPanel5Boutons extends JPanel { private static String [] layout={"BoxLayout","GridLayout","GridBagLayout", "FlowLayout","BorderLayout","SpringLayout","CardLayout"}; public JPanel5Boutons(String type) { super(); int i=0; int nbLayout = 7; String [] text={"Button 1","Button 2","Button 3","Long-Named Button 4","Button 5"}; for(i=0; i < 7; i++) if(type.equals(layout[i])) nbLayout = i+1; switch(nbLayout) { case 1: System.out.println("création avec BoxLayout"); setLayout(new BoxLayout(this,BoxLayout.Y_AXIS)); break; case 2: System.out.println("création avec GridLayout"); setLayout(new GridLayout(2,3)); break; case 3: System.out.println("création avec GridBagLayout"); GridBagLayout g = new GridBagLayout(); setLayout(g); break; case 4: System.out.println("création avec FlowLayout"); setLayout(new FlowLayout()); break; case 5: System.out.println("création avec BorderLayout"); setLayout(new BorderLayout()); break; case 6: System.out.println("création avec SpringLayout"); setLayout(new SpringLayout()); break; case 7: System.out.println("création avec CardLayout"); setLayout( new CardLayout(5,3)); for(i=0; i < 5; i++) { JButton button = new JButton(text[i]); add(button,text[i]); } break; default: System.out.println("Type non reconnu : " + type); } if(nbLayout!=7) for(i=0; i < 5; i++) { JButton button = new JButton(text[i]); add(button); } public static void main(String[] args) { JFrame.setDefaultLookAndFeelDecorated(true); //Create seven windows. for(int i=0; i < 7; i++) { JFrame frame = new JFrame(layout[i]); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Set up the content pane. frame.setContentPane(new JPanel5Boutons(layout[i])); //Display the window. frame.pack(); frame.setVisible(true); }

43 Patrick Reuter, LaBRI/INRIA26/03/ Le BorderLayout possède 5 zones déterminées par les points cardinaux (north, south, east, west) et le centre (center). SWING : BorderLayout

44 Patrick Reuter, LaBRI/INRIA26/03/ Il positionne tous les composants sur une colonne ou une ligne. Il aligne les composants et respecte la taille maximun. SWING : BoxLayout

45 Patrick Reuter, LaBRI/INRIA26/03/ C'est le « layout » par défaut des « JPanel ». Les composants sont insérerés de gauche à droite. Si la largeur est trop petite, il passe à la ligne suivante. SWING : FlowLayout

46 Patrick Reuter, LaBRI/INRIA26/03/ Il positionne les composants dans une grille (ligne, colonne) et adapte la taille des boutons au plus grand composant. SWING : GridLayout

47 Patrick Reuter, LaBRI/INRIA26/03/ SWING : création Elle se fait principalement en 5 étapes : 1. Création dune fenêtre (par héritage) 2. Récupération du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout

48 Patrick Reuter, LaBRI/INRIA26/03/ Insertion dun widget dans le panneau avec la politique définie par le layout: SWING: étape 4 JFrame Container Layout Container Widget import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); }

49 Patrick Reuter, LaBRI/INRIA26/03/ Composants SWING (4/4) Buttons Combo box List Spinner Menu Slider Text field JFrame Container Layout Container Widget

50 Patrick Reuter, LaBRI/INRIA26/03/ SWING : création Elle se fait principalement en 5 étapes : 1. Création dune fenêtre (par héritage) 2. Récupération du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout

51 Patrick Reuter, LaBRI/INRIA26/03/ Insertion dun widget dans le panneau avec la politique définit par le layout: SWING: étape 5 JFrame Container Layout Container Widget import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new FenetreView("simple"); } Arranger les composantes

52 Patrick Reuter, LaBRI/INRIA26/03/ Arranger les composantes Pourquoi cette étape ? – Seulement quand SWING connaît toutes les composantes de la mise en page, les positions peuvent être attribué – Compatibilité avec les différentes résolution décran PC PC portable PDA Téléphone portable..

53 Patrick Reuter, LaBRI/INRIA26/03/ Arranger les composantes Egalement possible : JLabel titreLabel = new JLabel("Space Invaders"); titreLabel.setLocation(10,10); pan.add(titreLabel);

54 Patrick Reuter, LaBRI/INRIA26/03/ Swing Swing est un boîte doutils de IG pour Java. Est partie des Java Foundation Classes (JFC). Swing inclues une IG (Graphical User Interface (GUI)) et des Widgets comme boutons, menu, … « Swing supports pluggable look and feel – not by using the native platform's facilities, but by roughly emulating them. This means you can get any supported look and feel on any platform. The disadvantage of lightweight components is slower execution. The advantage is uniform behavior on all platforms. »

55 Patrick Reuter, LaBRI/INRIA26/03/ SWING: mise en page plus complexe import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JPanel pan1 = new JPanel(); pan1.setLayout(new BoxLayout(pan1,BoxLayout.Y_AXIS)); JPanel pan2 = new JPanel(); pan2.setLayout(new BoxLayout(pan2,BoxLayout.X_AXIS)); JButton button1 = new JButton("bouton 1"); JButton button2 = new JButton("bouton 2"); JButton button3 = new JButton("bouton 3"); JButton button4 = new JButton("bouton 4"); pan1.add(button1); pan1.add(button2); button2.setText("nouveau nom"); pan2.add(button3); pan2.add(button4); pan.add(pan1); pan.add(pan2); this.pack(); this.setVisible(true); } pan1 pan2 pan

56 Patrick Reuter, LaBRI/INRIA26/03/ Concevoir linterface: 2ème partie (Event)

57 Patrick Reuter, LaBRI/INRIA26/03/ Model Vue Control Événement (souris, clavier, etc.) Routines de communication Concevoir un programme : 2 partie

58 Patrick Reuter, LaBRI/INRIA26/03/ Lévénement et laction Les évènements sont les interventions de lutilisateurs sur linterface graphique à laide des périphériques (par exemple : clavier, souris) -Frappe au clavier -Clic de souris -Mouvement de la souris Laction est la traduction par un composant (widget, bouton) de lévènement. Elle peut être traitée ou pas par le programme. Swing propose des interfaces (au sens Génie logiciel) à implémenter pour traiter les évènements en fonction des composants. Cest vous qui choisissez les événements à traiter…

59 Patrick Reuter, LaBRI/INRIA26/03/ Lévènement et laction Exemple pour un Bouton : Chaque bouton a « son » action !! Après action sur le bouton Traitement : Changement de nom (géré par le programmeur) Evènement : appuyer sur le bouton (géré par Swing) Action : actionPerformed Action : aucune

60 Patrick Reuter, LaBRI/INRIA26/03/ Après avoir créé la partie visible de linterface (Vue), il faut lier les actions réalisées avec le modèle. Il faut gérer les évènements (souris, clavier, etc.) : - les « intercepter » : lier une action à un composant (bouton, list, tableau, etc.) - les « interpréter » : implémenter linterface correspondant Avec Swing, vous devez implémenter une interface pour chaque signal. Par exemple pour actionner un bouton : l'interface est ActionListener dont la seule méthode est actionPerformed. Rappel : Utilisation du mot clef « implements », et vous devez implémenter toutes les méthodes de l'interface. Gestion des événements

61 Patrick Reuter, LaBRI/INRIA26/03/ Evénement et leurs écouteurs (listener) associés Liste des interfaces Interface écouteurEvénementméthode MouseListener Lutilisateur a relaché le bouton de la sourismouseReleased Le pointeur de la souris est entré dans le composantmouseEntered Le pointeur de la souris est sorti du composantmouseExited Clic complet de la souris (pression et relachement sans mouvement entre les deux) mouseClicked Lutilisateur a appuyer sur un bouton de la sourismousePressed ActionListener Utilisateur clique sur un bouton, presse enter dans un champ texte ou sélectionne un champ dans un menu actionPerfomed KeyListener Utilisateur clique sur une touche Utilisateur relâche une touche keyPressed keyReleased Autres interfaces écouteurs : ItemListener, TextListener, MouseMotionListener, WindowListener

62 Patrick Reuter, LaBRI/INRIA26/03/ Nous voulons réaliser une fenêtre avec un bouton, qui affiche « bonjour » sur la sortie standard. Evènement : bouton enfoncé Action : afficher le message à lécran Modèle : aucun Concevoir une interface : 2 partie

63 Patrick Reuter, LaBRI/INRIA26/03/ Gestion de laction sur un bouton : 1) Création du bouton : JButton button; button = new JButton("Click Me"); 2) On attache la gestion de lévénement (Listener Type) à ce bouton (cf Tableau précédent) : button.addActionListener(new FenetreEvent()); bouton.addActionListener(…..); // syntaxe addXXX(); où XXX est linterface écouteur 3) Implémentation de l'interface : public class MyClass implements ActionListener Une classe portant le nom de l'évènement implémente la classe liée (Implements ActionListener) (plus propre et « Génie logiciel ») Gestion des événements

64 Patrick Reuter, LaBRI/INRIA26/03/ Le traitement de laction est gérée par une classe qui hérite de linterface. !! La difficulté de cette technique réside dans le passage dargument. Gestion des événements : 2 e méthode

65 Patrick Reuter, LaBRI/INRIA26/03/ Création de la classe FenetreEvent qui implémente l'interface ActionListener import java.awt.*; import java.awt.event.*; import javax.swing.*; class FenetreEvent implements ActionListener { public FenetreEvent () { System.out.println("My action Event : appel constructeur"); } public void actionPerformed(ActionEvent e) { System.out.println("ActionCommand ::: " + e.getActionCommand() + ":::: reçu"); } } Gestion des événements : 2 e méthode On code l'action de la Méthode actionPerformed On implémente l'interface ActionListener

66 Patrick Reuter, LaBRI/INRIA26/03/ Création de la classe FrameBase, fenêtre principale contenant tous les objets, l'appel à l'affichage et la fonction main import java.awt.*; import javax.swing.*; public class FenetreView extends JFrame { public FenetreView(String nom) { super(nom); Container pan = this.getContentPane(); pan.setLayout(new GridBagLayout()); JLabel label; label = new JLabel("Hello ESTIA"); pan.add(label); JButton button; button = new JButton("Click Me"); button.addActionListener(new FenetreEvent()); pan.add(button); this.pack(); this.setVisible(true); } public static void main(String s[]) { FenetreView f = new Fenetre("simple"); } Gestion des événements : 2 e méthode On attache l'écouteur au bouton

67 Patrick Reuter, LaBRI/INRIA26/03/ Concevoir linterface: 3ème partie (Control)

68 Patrick Reuter, LaBRI/INRIA26/03/ Model Vue Control Événement (souris, clavier, etc.) Routines de communication Concevoir linterface: 3ème partie (Control)

69 Patrick Reuter, LaBRI/INRIA26/03/ évènement Vue Modèle traitement Control Affiche bonjour à lécran Concevoir linterface: 3ème partie (Control)

70 Patrick Reuter, LaBRI/INRIA26/03/ Utillisation dun Controleur Le modèle MVC permet davoir une séparation plus importante entre le modèle et linterface et facilite la gestion des événements. Le controleur permet de gérer des programmes plus complexes de manière plus simple. Il connaît létat de tous les éléments de lapplication à tous moments, il peut être assimilé à un « superviseur ».

71 Patrick Reuter, LaBRI/INRIA26/03/ LoginView + LoginView(LoginController lc); + getLogin(); + getPassword(); + void afficherMessage(String msg); + void afficher(); JTextField _login; JPasswordField _ JFrame LoginEvent + LoginEvent(LoginController lc); + actionPerformed(ActionEvent e); LoginController _loginController; ActionListener LoginModel + LoginModel(String nomFichier); + boolean estValide(String login, String mdp); String _nomFichier; LoginController + LoginController(); + void start(); + void boutonValider(); LoginModel _loginModel; LoginView_loginView; LoginRun + void main(String[] args); Exemple en UML : Fenêtre de login

72 Patrick Reuter, LaBRI/INRIA26/03/ Concevoir linterface: 4ème partie (Model)

73 Patrick Reuter, LaBRI/INRIA26/03/ Modèle Le modèle est un programme classique en java qui ne doit contenir aucun appel à la bibliothèque de swing. Il doit pouvoir être utilisable sans interface graphique. Par exemple, la gestion dun stock, on crée toutes les méthode permettant de gérer le stock (ajouter, enlever, compter, etc.) : - On peut lutiliser dans une fonction main classique - Ou lutiliser via une interface Concevoir linterface: 4ème partie (Model)

74 Patrick Reuter, LaBRI/INRIA26/03/ Modèle Vue Control évènement traitement Concevoir une interface -Vous devez respecter la séparation de chaque partie (surtout ne pas mettre de code de la biliothèque Java-Swing dans le modèle) -Vous devez garder une cohérence dans linterface graphique (c-à-d bon positionnement des widgets, ne pas faire un bouton « ouvrir » qui ferme lapplication ;-) )

75 Patrick Reuter, LaBRI/INRIA26/03/

76 Patrick Reuter, LaBRI/INRIA26/03/ Conventions Pour la lisibilité, utilisez toujours l'indentation. Pour chaque exercice, créer un nouveau répertoire avec le nom exerciceX.Y qui contiendra les fichiers.java nécessaires. Chaque fichier qui utilise la bibliothèque SWING doit faire les importations suivantes import javax.swing.*; import java.awt.*; import java.awt.event.*; Choisissez des noms des classes avec des lettres en majuscule, des noms de variables avec des lettres en miniscules. Dans un fichier, vous allez définir une seule classe. Le nom de ce fichier sera le nom de la classe suivi de l'extension.java N'utilisez jamais des caractères spéciaux ni des accents dans vos noms de fichiers/classes/variables.

77 Patrick Reuter, LaBRI/INRIA26/03/ Conventions En utilisant le concept MVC, rajouter au nom de la classe le mot {View} s'il s'agit d'une classe qui s'occupe de la vue, le mot Model s'il s'agit d'une classe Modèle, le mot Control s'il s'agit d'une classe Control (= Action), et le mot Event s'il s'agit d'une classe qui implémente un écouteur, ainsi que le mot Run s'il s'agit d'une classe contenant la méthode main. Pour chaque nouvelle classe de Java SWING que vous utilisez (comme par exemple JFrame, JButton,...), consultez systématiquement son manuel afin de découvrir ses possibilités

78 Patrick Reuter, LaBRI/INRIA26/03/ Pièges à éviter Attention nom du fichier = nom de la classe Une classe --- Un fichier Attention à la casse


Télécharger ppt "Patrick Reuter, LaBRI/INRIA26/03/2008 1 Les Interfaces Graphiques 27 Février 2009 Patrick Reuter Maître de conférences LaBRI/INRIA, Université Bordeaux."

Présentations similaires


Annonces Google