Interface Homme-Machine & JAVA Formation «Informatique et sciences du numérique» Pierre Chauvet pierre.chauvet@uco.fr 1
Pourquoi Java? La programmation d une IHM Java repose sur des principes classiques (cf C++, Delphi, C#, ) Nombreuses classes et composants dans les librairies de base (AWT, SWING) Nombreux didacticiels et cours sur Internet (http://java.developpez.com/) Beaucoup de composants libres réalisés par la communauté (http://www.javafr.com/, http://java-source.net/, ) Utiliser moteur de recherche avec mot clé «Java» + fonction recherchée 2
Plan de la séance 1. Eléments de base d une IHM Java Composants de base Gestionnaires de positionnement 2. Composants SWING Exemples/exercices 3. Evènements & Ecouteurs Principes programmation évènementielle Listeners Java Exemples/exercices 4. Window Builder Pro EDI, Installation Exemples/exercices 3
Eléments de base d une IHM Java 4
Interface Homme Machine (IHM) IHM = Interface homme machine Interface, nom féminin Graphic User Interface (GUI) Tout programme n a pas obligatoirement d interface Tout programme nécessitant une intervention humaine doit avoir une IHM ergonomique L homme doit avoir la maîtrise du déroulement du programme 5
Définition : l ergonomie Faciliter l utilisation du logiciel: Les formulaires doivent être concis Pas de désordre Ne pas faire remplir un champ en bas puis remonter Les champs sémantiquement proche doivent être physiquement proches Les saisies doivent être assistées autant que possible Les couleurs Sont utiles si elles ont un sens Ne doivent pas cracher Exemple: http://www.univ-pau.fr/~lompre/index.htm pour la science de l ergonomie 6
Définition : une API Une application program interface (API) est un ensemble de classes regroupées par leur proximité fonctionnelle. En java, elle se présente sous la forme d un paquetage (package) ou d un ensemble de paquetages Pour concevoir une IHM, Java offre deux API principales java.awt (Abstract Window Toolkit) est l ancienne, à n utiliser que quand on n a pas d équivalent dans la nouvelle javax.swing doit être utilisée prioritairement Le mélange inconsidéré des deux peut provoquer des erreurs impossibles à identifier 7
Définition : la fenêtre Classe javax.swing.jframe Ce qui va être affiché et qui contient la totalité de l interface Chaque fenêtre contient un unique panneau La fenêtre peut supporter des menus Une application peut utiliser plusieurs fenêtres différentes (JDialog, JInternalFrame) 8
Exemple : la fenêtre fenêtre: JFrame JFrame frame = new JFrame(); frame.settitle( Ma Fenêtre ); frame.setresizable(true); frame.setdefaultcloseoperation(jframe.exit_on_close); 9
Définition : un panneau Classe javax.swing.jpanel Le panneau est le principal conteneur utilisé sous Java, dans lequel vont être disposés d autres panneaux, et les autres composants (boutons, libellés, ) Il est muni d un gestionnaire de mise en page (layout) panneau: JPanel JPanel panel = new JPanel(); panel.setlayout(new BorderLayout()); panel.setbackground(color.gray); panel.setpreferredsize(new Dimension(500,50); panel.setborder(new EmptyBorder(5,5,5,5)); 10
Définition : un gestionnaire de mise en page Rôle : disposer dans le panneau les objets qu il va contenir A chaque panneau doit être associé son gestionnaire en fonction de la mise en page souhaitée Choix très important pour maintenir ergonomie et portabilité Le gestionnaire en X Y doit être réservé aux cas particuliers des interfaces de dessin (cartographie, graphes ) En anglais, un layout Jamais de nom 11
Définition : un libellé Classe javax.swing.jlabel Zone où est inscrit un texte que seul le programme peut manipuler. Donne des informations du programme vers l utilisateur Rarement un nom, sauf s il doit être manipulé par le programme Libellé: JLabel JLabel label01 = new JLabel( LIBELLE ); panel.add(label01); 12
Définition : un champ de saisie Classe javax.swing.jtextfield Zone où est inscrit un texte que le programme et l utilisateur peuvent tous deux manipuler. Zone de saisie, dont la fonction est généralement indiquée par un libellé Toujours un nom significatif car il est obligatoirement manipulé par le programme Champ de saisie: JTextField JTextField tf01 = new JTextField( ZONE DE SAISIE ); panel.add(tf01); 13
Définition : un bouton Classe javax.swing.jbutton un bouton à cliquer (texte, icône) utilisé pour déclencher une action Déclenche une action de l utilisateur vers le programme Toujours un nom significatif car il est obligatoirement manipulé par le programme Bouton: JButton JButton bt01 = new JButton( BOUTON ); panel.add(bt01); 14
Code de la fenêtre 15
Définition : un menu Classe javax.swing.jmenubar Classe javax.swing.jmenu Liste hiérarchique de commandes (de type bouton) utilisé pour déclencher une action Déclenche une action de l utilisateur vers le programme Toujours un nom significatif car il est obligatoirement manipulé par le programme 16
Construction d un menu Menu: JMenu JMenu menu01 = new JMenu( Menu_01 ); barre.add(menu01); Barre de menu: JMenuBar JMenuBar barre = new JMenuBar(); frame.setmenubar(barre); Séparateur: JSeparator menu01.add(new Jseparator()); Item de menu: JMenuItem JMenuItem menuitem01 = new JMenuItem( Menu_Item_01 ); menu01.add(menuitem01); Items avec boîte à cocher: JCheckBoxMenuItem, JRadioButtonMenuItem Comme un JMenuItem 17
Un peu de méthode L IHM peut être créée en saisissant du code Pénible, mais parfait contrôle du code Les outils de développement java disposent d outils de conception de l IHM Par simple positionnement des objets, on dessine l IHM et le code est généré Mais, au début, on en oublie l organisation de son IHM Pour commencer, une interface doit être dessinée à la main, avec identification de tous les panneaux et de leur gestionnaire de mise en page 18
java.awt.borderlayout Disposition en fonction des bords et du centre Ce qui sera disposé dans le panneau le sera au: North, South, East, West, Center 5 possibilités seulement donc 5 objets dans un tel panneau Généralement sert à disposer d autres panneaux Au nord : le panneau des boîtes de boutons Au sud : une ligne d indication Ailleurs, l essentiel de l IHM 19
java.awt.gridlayout Défini une grille de n lignes et m colonnes Souvent 2 colonnes À gauche pour les libellés À droite pour le champ de saisie associé 20
java.awt.flowlayout Défini une disposition automatique des composants Les composants sont disposés sur une ligne jusqu à ce que cette ligne soit pleine puis sur la ligne suivante En cas de modification de la forme de la fenêtre, l arrangement est recalculé À réserver pour une disposition d objets de tailles égales (boutons par exemple) Gestionnaire par défaut 21
Exemple 22
Exemple analysé JFrame BorderLayout FlowLayout au nord avec un JLabel GridLayout au centre avec 3 lignes et deux colonnes, À gauche, 3 JLabel À droite, 2 JTextField et une JComboBox FlowLayout au sud avec deux JButton 23
Principaux composants visuels SWING 24
Hiérarchie des composants JComponent classe dont dérivent tous les composants JPanel AbstractButton JLabel JTextComponent JList JComboBox * JButton JToggleButton JMenuItem JTextField JCheckBox JRadioButton JCheckBoxMenuItem JRadioButtonMenuItem JMenu * JTextComponent JTextComponent JTextComponent JFrame JDialog 25
Références internet sur le développement d IHM en JAVA Documentation de la société Oracle (assure la maintenance de Java) http://docs.oracle.com/javase/tutorial/ui/features/components.html Tutoriaux sur developpez.com (je recommande les cours de J.-M. Doudoux) http://java.developpez.com/cours/ Cours de I. Charon (telecom-paris) http://perso.telecom-paristech.fr/~hudry/coursjava/index.html Forums avec de nombreux exemples (RoseIndia par exemple: http://www.roseindia.net/java/index.shtml) 26
Autres composants SWING (1) JCheckBox JCheckBox b= new JCheckBox( Chin ); b.setselected(true); JComboBox String[] items = { "Bird", "Cat", "Dog", "Rabbit", "Pig" }; JComboBox b= new JComboBox(items); b.setselectedindex(4); JRadioButton JRadioButton b= new JRadioButton( Pig ); b.setselected(true); JList DefaultListModel listmodel = new DefaultListModel(); listmodel.addelement("jane Doe"); listmodel.addelement("john Smith"); listmodel.addelement("kathy Green"); JList list = new JList(listModel); JSlider JSlider b= new JSlider(JSlider.HORIZONTAL,min,max,init); b.setmajortickspacing(10);b.setminortickspacing(1); b.setpaintticks(true); b.setpaintlabels(true); JSpinner 27
Autres composants SWING (2) JTextArea JTextArea b= new JTextArea(10,40); b.settext( This is ); b.seteditable(true); JTabbedPane JTabbedPane b= new JTabbedPane(); b.addtab( Tab 1,icon,panel1, tip text ); JToolBar JToolBar b = new JToolBar(); b.add(button); b.add(separator); JTree JProgressBar JProgressBar b=new JProgressBar(0,10); b.setvalue(5); b.setstringpainted(true); JScrollPane panel.add(new JScrollPane(textArea),BorderLayout.CENTER); 28
Boîtes de dialogue SWING JFileChooser JFileChooser fc = new JFileChooser(); int returnval = fc.showopendialog(frame); if (returnval == JFileChooser.APPROVE_OPTION) { File file = fc.getselectedfile(); } JColorChooser Color newcolor = JColorChooser.showDialog( frame, "Choose Background Color", initcolor); JOptionPane JOptionPane.showMessageDialog(frame, "Eggs are not supposed to be green."); 29
Exercice 1: Réaliser l IHM d un lecteur de fichier texte La fenêtre de l application est composée d un panel au nord avec le bouton OUVRIR, d un panel au centre qui contient un javax.swing.jtextarea Voir corrigé 30
Evènements & Ecouteurs 31
La programmation évènementielle Le programme est conçu comme un ensemble d objets qui agissent sur eux-mêmes et/ou leur environnement en réponse à des évènements provenant d eux-mêmes et/ou de leur environnement Environnement du programme : tous les systèmes qui peuvent interagir avec le programme, c est-à-dire d autres programmes, des matériels (imprimante), des utilisateurs Exemples d évènements: Clic de l utilisateur sur un bouton (environnement -> objet) Mise à jour zone de texte (objet -> objet) 32
Evènements et écouteurs Evènement = objet qui contient toute l information nécessaire pour que les objets et systèmes à l écoute de l émetteur de l évènement puissent réagir correctement Un objet A ne peut réagir à un évènement émis par un objet B que si A est «à l écoute» de B notion de LISTENER (écouteur) en JAVA. En JAVA: Tout évènement dérive de la classe java.util.eventobject Tout écouteur implémente l interface java.util.eventlistener 33
Clic sur Bouton (solution 1) Quand on clique sur le bouton, le texte affiché sur le bouton est modifié 34
Clic sur Bouton (solution 2) Quand on clique sur le bouton, le texte affiché sur le bouton est modifié 35
Clic sur Menu (solution 1) Réponse à l évènement généré lors d un clic sur un item de Menu 36
Clic sur Menu (solution 2) Réponse à l évènement généré lors d un clic sur un item de Menu 37
Les Actions L action «Ouvrir un fichier» peut être effectuée à partir d un menu, d un bouton dans la toolbar, La classe javax.swing.abstractaction permet de s assurer que l icône et le texte affichés, ainsi que le code exécuté, seront les mêmes quelque soit le composant graphique déclencheur. Procédure: dériver AbstractAction (par ex: OuvrirAction) puis affecter son instance aux composants déclencheurs. Voir: http://docs.oracle.com/javase/tutorial/uiswing/misc/action.html 38
Quelques évènements & écouteurs standards de SWING Interface Type d évènement Méthodes à implémenter Evènement correspondant à une action void actionperformed(actionevent e) ActionListener telle que: enfoncer un bouton, sélection d'un item dans un menu Composant rendu invisible, composant déplacé, void componenthidden(componentevent e) void componentmoved(componentevent e) ComponentListener changement de taille du composant, void componentresized(componentevent e) composant rendu visible void componentshown(componentevent e) FocusListener Le composant reçoit le focus clavier, le composant perd le focus clavier void focusgained(focusevent e) void focuslost(focusevent e) MouseListener WindowListener Click souris dans un composant, entrée dans un composant, sortie d'un composant, bouton pressé sur un composant, bouton relâché sur un composant void mouseclicked(mouseevent e) void mouseentered(mouseevent e) void mouseexited(mouseevent e) void mousepressed(mouseevent e) void mousereleased(mouseevent e) Evènement sur une fenêtre void windowactivated(windowevent e) void windowclosed(windowevent e) void windowdeiconified(windowevent e) void windowiconified(windowevent e) void windowopened(windowevent e) 39
Exercice 2: Compléter l IHM du lecteur de fichier texte Lorsqu on clique sur le bouton OUVRIR, on affiche le contenu du fichier dans la zone texte Voir corrigé 40
Window Builder Pro Présentation sur l outil de développement visuel d IHM Window Builder Pro, plug-in pour Eclipse. 41