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

  • Published on
    03-Apr-2015

  • View
    102

  • Download
    0

Embed Size (px)

Transcript

<ul><li> Page 1 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 1 Les Interfaces Graphiques 27 Fvrier 2009 Patrick Reuter Matre de confrences LaBRI/INRIA, Universit Bordeaux 2 http://www.labri.fr/perso/preuter/ig/ 1/3/2007 1 </li> <li> Page 2 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 2 Les interfaces graphiques et les priphriques matriels permettent l'interactivit entre un programme (compos d'un ensemble de fonctions), et un utilisateur. Interface Utilisateur </li> <li> Page 3 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 3 Avant </li> <li> Page 4 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 4 Avant </li> <li> Page 5 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 5 Maintenant </li> <li> Page 6 </li> <li> Patrick Reuter, Universit Bordeaux 227/02/2009 6 GUI : Graphical user Interface (WIMP : Window Icon Menu Pointer) p.ex. Gnome, kde, linux, Macos X, Win* Photo : gimp GUI : Interface Graphique Utilisateur </li> <li> Page 7 </li> <li> Patrick Reuter, Universit Bordeaux 227/02/2009 7 But : Permettre une interactivit avec un programme de manire plus simple et plus intuitive. Elle repose sur trois parties : les entres, les sorties, le lien GUI : Interface Graphique Utilisateur </li> <li> Page 8 </li> <li> Patrick Reuter, Universit Bordeaux 227/02/2009 8 Les entres : rcupration des informations auprs de l'utilisateur frappe au clavier, dplacement de la souris, widget, etc. Les sorties : l'affichage des donnes et de l'tat du systme. 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 mmoire GUI : Interface Graphique Utilisateur </li> <li> Page 9 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 9 Programmation vnementielle La programmation vnementielle est un concept diffrent de la programmation fonctionnelle ou imprative Il sagit de permettre une interaction non-linaire, plusieurs vnements peuvent tre produits avec un ordre diffrent. excution choix Programmation fonctionnelle Programmation vnementielle </li> <li> Page 10 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 10 Programmation vnementielle Les composants dune applications vnementielle interagissent entre eux et avec lenvironnement. Il communiquent en rponse des vnements. Les vnements sont capts par le systme et sont transmis aux couteurs (listener). Cest vous qui mettez en place les couteurs .( implements ) </li> <li> Page 11 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 11 Programmation vnementielle Pour raliser des interfaces, il est impratif de programmer de manire evnementielle et donc de prvoir les vnements. Dans ce but, vous devez connatre les capacits de votre interface et les vnements quelle peut gnrer. </li> <li> Page 12 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 12 Routines de communication vnement (souris, clavier, etc.) Control View Model Comment Concevoir un programme ? Java (Swing) Java Sparez les classes de la gestion du modle et celle de linterface graphique P.ex. base de donnes, </li> <li> Page 13 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 13 Modle-Vue-Contrleur (MVC) Motif de conception pour le dveloppement d'applications logicielles qui spare le modle de donnes, l'interface utilisateur et la logique de contrle. Ce motif a t mis au point en 1979 par Trygye Reenskang, qui travaillait alors sur Smalltalk dans les laboratoires de recherche Xerox PARC. </li> <li> Page 14 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 14 Modle-Vue-Contrleur (MVC) la Vue : correspond l'interface avec laquelle l'utilisateur interagit. Les rsultats renvoys par le modle sont dnus de toute prsentation mais sont prsents par les vues. Plusieurs vues peuvent afficher les informations d'un mme modle. La vue n'effectue aucun traitement, elle se contente d'afficher les rsultats des traitements effectus par le modle, et de permettre l'utilisateur d'interagir avec elles. </li> <li> Page 15 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 15 Modle-Vue-Contrleur (MVC) Le Modle : reprsente le comportement de l'application : traitements des donnes, interactions avec la base de donnes, etc. Il dcrit les donnes manipules par l'application et dfinit les mthodes d'accs. </li> <li> Page 16 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 16 Modle-Vue-Contrleur (MVC) le Contrleur : prend en charge la gestion des vnements de synchronisation pour mettre jour la vue ou le modle Il n'effectue aucun traitement, ne modifie aucune donne, il analyse la requte du client et se contente d'appeler le modle adquat et de renvoyer la vue correspondant la demande Routines de communication </li> <li> Page 17 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 17 Modle-Vue-Contrleur (MVC) Rsum : lorsqu'un client envoie une requte l'application: celle-ci est analyse par le contrleur ce contrleur demande au modle appropri d'effectuer les traitements, puis renvoie la vue adapte </li> <li> Page 18 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 18 Control Routines de communication Vue Modle 1) Il faut connatre le modle et son fonctionnement 2) Dfinir le contrle que lon veut faire (ouvrir, fermer, afficher, etc.) sur le modle 3) Faire un croquis de linterface pour dfinir les widgets (menu, bouton, label, etc.) utiliser et leurs caractristiques (nom, position, etc.) Concevoir une interface </li> <li> Page 19 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 19 JAVA, langage de programmation de SUN utilise deux bibliothques pour vous aider dvelopper des interfaces graphiques : AWT (ne s'utilise plus) SWING Interface Graphique avec Java Buttons Spinner Menu </li> <li> Page 20 </li> <li> Patrick Reuter, Universit Bordeaux 227/02/2009 20 Documentation en ligne : http://java.sun.com/docs/books/tutorial/uiswing/mini/index.html The Jfc Swing Tutorial: A Guide to Constructing Guis (31 mars 2004) de Kathy Walrath, et al prix : EUR 59,19 SWING Frame </li> <li> Page 21 </li> <li> Patrick Reuter, Universit Bordeaux 227/02/2009 21 SWING est en sus de AWT, mais en rutilise 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 indpendant du systme d'exploitation (Mac, Windows, Linux, ) on garde donc une portabilit des programmes. SWING </li> <li> Page 22 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 22 Les applications SWING se dveloppent de la mme manire que toutes les applications JAVA en utilisant les classes de la bibliothque SWING: objets, classes, hritages Interface Graphique avec Java Programmer une interface n'est pas donc pas diffrent que programmer un ensemble de classe comme la classe Cercle , p.ex. </li> <li> Page 23 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 23 Concevoir linterface: 1re partie (Vue) </li> <li> Page 24 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 24 Modle Vue Control vnement (souris, clavier, etc.) Routines de communication Java Java (Swing) Concevoir linterface: 1re partie (Vue) </li> <li> Page 25 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 25 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) Excution Interface Graphique avec Java </li> <li> Page 26 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 26 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 </li> <li> Page 27 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 27 SWING : cration Elle se fait principalement en 5 tapes : 1. Cration dune fentre (par hritage) 2. Rcupration du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout </li> <li> Page 28 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 28 Cration de la fentre par lhritage 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"); } </li> <li> Page 29 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 29 JFrame est un composant de haut niveau, il contiendra toute lapplication, cest la premire brique de linterface. Pour lutiliser et simplifier le code, on implmente une nouvelle classe qui hrite de JFrame. Une JFrame possde un conteneur par dfaut. Pour hriter de JFrame : - on cre une nouvelle classe (ici Fenetre) qui hrite (extends) de JFrame. - Toujours crer un constructeur pour pouvoir insrer les lments dans cette fentre. SWING : JFrame </li> <li> Page 30 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 30 Applet Frame Composants SWING (1/4) Dialog JFrame Container Layout Container Widget </li> <li> Page 31 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 31 Appel du constucteur de la classe mre 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"); } </li> <li> Page 32 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 32 SWING : cration Elle se fait principalement en 5 tapes : 1. Cration dune fentre (par hritage) 2. Rcupration du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout </li> <li> Page 33 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 33 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"); } </li> <li> Page 34 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 34 Le conteneur est lobjet en Java qui permet dafficher plusieurs objets graphiques. On peut insrer un ou plusieurs objets dans un mme conteneur. Les objets sont placs dans le conteneur suivant les rgles imposes par le layout (voir suite). Par la suite, pour raliser des interfaces plus complexes, on insre des conteneurs dans dautres conteneurs pour spcifier plusieurs politiques de placement. Les conteneurs les plus souvent utiliss sont les JPanels. SWING : Conteneur Container Layout </li> <li> Page 35 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 35 Le panneau est un conteneur intermdiaire invisible. Il a pour finalit de positionner daprs son layout les composants, boutons et les labels (JScrollPane, JTabbedPane). Son layout par dfaut est un FlowLayout. Classe JPanel : dclaration et instanciation : JPanel panel = new JPanel(); SWING : JPanel </li> <li> Page 36 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 36 Composants SWING (2/4) Panel Tabbed pane Tool bar Split pane Scroll pane JFrame Container Layout Container Widget </li> <li> Page 37 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 37 SWING : cration Elle se fait principalement en 5 tapes : 1. Cration dune fentre (par hritage) 2. Rcupration du container 3. Modification du Layout 4. Insertion des widgets dans le conteneur 5. Arranger les composantes Widget JFrame Container Layout </li> <li> Page 38 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 38 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"); } </li> <li> Page 39 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 39 Les layout permettent de positionner les lments avec une politique de placement des objets. Les layouts sont toujours lis aux conteneurs (JPanels, Tabbed pane). SWING : Layout </li> <li> Page 40 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 40 Composants SWING (3/4) JFrame Container Layout Container Widget </li> <li> Page 41 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 41 Il sont par dfaut 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 crer un layout : dclaration puis instanciation FlowLayout flo = new FlowLayout(); Les composants utilisent souvent par dfaut un BorderLayout (JFrame, JDialog, JApplet). Les Layouts sont utiliss surtout avec les panneaux (JPanel) et les fentres : 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 fentre "frame": Container pan = frame.getContentPane(); pan.setLayout(new FlowLayout()); SWING : Layout </li> <li> Page 42 </li> <li> Patrick Reuter, LaBRI/INRIA26/03/2008 42 Le mme code donnera des rsultats diffrents 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 &lt; 7; i++) if(type.equals(layout[i])) nbLayout = i+1; switch(nbLayout) { case 1: System.out.println("cration avec BoxLayout"); setLayout(...</li></ul>

Recommended

View more >