Interface HommeInterface Homme--Machine & JAVAMachine & JAVAFormation «Formation « Informatique Informatique et sciences du et sciences du numériquenumérique »»

1

Pierre Chauvetpierre.chauvet@uco.fr

Pourquoi Java ?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/)(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éancePlan 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

3. Evènements & Ecouteurs• Principes programmation évènementielle• Listeners Java• Exemples/exercices

4. Window Builder Pro• EDI, Installation• Exemples/exercices

Eléments de base d’une IHM Java

4

Interface Homme Machine (IHM)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’ergonomieDé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

6

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

Définition : une Définition : une APIAPI

� 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

7

� 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

Définition : la fenêtreDéfinition : la fenêtre

� Ce qui va être affiché et qui contient la totalité de l’interface

� Chaque fenêtre contient un unique panneau

Classe javax.swing.JFrame

8

� 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)

Exemple : la fenêtreExemple : la fenêtre

9

fenêtre: JFrameJFrame frame = new JFrame();frame.setTitle(‘’Ma Fenêtre’’);frame.setResizable(true);frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Définition : un panneauDéfinition : un panneau

� 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, …)

Classe javax.swing.JPanel

10

• et les autres composants (boutons, libellés, …)

� Il est muni d’un gestionnaire de mise en page (layout)

panneau: JPanelJPanel 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));

Définition : un gestionnaireDéfinition : un gestionnairede mise en pagede 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é

11

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

Définition : un libelléDéfinition : un libellé

� Zone où est inscrit un texte que seul le programme peut manipuler.

� Donne des informations du programme vers l’utilisateur

Classe javax.swing.JLabel

12

� Donne des informations du programme vers l’utilisateur

� Rarement un nom, sauf s’il doit être manipulé par le programme

Libellé: JLabelJLabel label01 = new JLabel(‘’LIBELLE’’);panel.add(label01);

Définition : un champ de saisieDéfinition : un champ de saisie

� Zone où est inscrit un texte que le programmeet l’utilisateur peuvent tous deux manipuler.

� Zone de saisie, dont la fonction est généralement indiquée par un libellé

Classe javax.swing.JTextField

13

par un libellé

� Toujours un nom significatif car il est obligatoirement manipulé par le programme

Champ de saisie: JTextFieldJTextField tf01 = new JTextField(‘’ZONE DE SAISIE’’);panel.add(tf01);

Définition : un boutonDéfinition : un bouton

� un bouton à cliquer (texte, icône) utilisé pour déclencher une action

� Déclenche une action de l’utilisateur vers le programme

Classe javax.swing.JButton

14

� Toujours un nom significatif car il est obligatoirement manipulé par le programme

Bouton: JButtonJButton bt01 = new JButton(‘’BOUTON’’);panel.add(bt01);

Code de la fenêtreCode de la fenêtre

15

Définition : un Définition : un menumenu

� Liste hiérarchique de commandes (de type bouton) utilisé pour déclencher une action

� Déclenche une action de l’utilisateur vers le programme

Classe javax.swing.JMenuBarClasse javax.swing.JMenu

16

� Déclenche une action de l’utilisateur vers le programme

� Toujours un nom significatif car il est obligatoirement manipulé par le programme

Construction d’un menuConstruction d’un menu

Barre de menu: JMenuBarJMenuBar barre = new JMenuBar();frame.setMenuBar(barre);

Menu: JMenuJMenu menu01 =

new JMenu(‘’Menu_01’’);barre.add(menu01);

Séparateur: JSeparator

17

Item de menu: JMenuItemJMenuItem menuItem01 =

new JMenuItem(‘’Menu_Item_01’’);menu01.add(menuItem01);

Séparateur: JSeparatormenu01.add(new Jseparator());

Items avec boîte à cocher: JCheckBoxMenuItem ,

JRadioButtonMenuItemComme un JMenuItem…

Un peu de méthodeUn 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

18

• 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

java.awt.BorderLayoutjava.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

19

� 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

java.awt.GridLayoutjava.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

• À droite pour le champ de saisie associé

java.awt.FlowLayoutjava.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é

21

l’arrangement est recalculé

� À réserver pour une disposition d’objets de tailles égales (boutons par exemple)

� Gestionnaire par défaut

ExempleExemple

22

Exemple analyséExemple analysé

BorderLayout

FlowLayout au nord avec un JLabel

JFrame

23

FlowLayout au sud avec deux JButton

GridLayout au centre avec 3 lignes et deux colonnes,

À gauche, 3 JLabelÀ droite, 2 JTextField et

une JComboBox

Principaux composants Principaux composants visuels SWINGvisuels SWING

24

Hiérarchie des composantsHiérarchie des composants

JComponentclasse dont dérivent tous les composants

JPanel AbstractButton JLabel JTextComponent JList JComboBox *

JTextFieldJToggleButton JMenuItemJButton

JCheckBoxJCheckBoxMenuItem

JRadioButtonJMenuJRadioButtonMenuItem

JTextField

*JTextComponent JTextComponent JTextComponent JFrame JDialog

25

Références internet Références internet sur le développement d’IHM en JAVAsur 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)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)Autres composants SWING (1)

JCheckBoxJCheckBox b= new JCheckBox(’’Chin’’);b.setSelected(true);

JComboBoxString[] items = { "Bird", "Cat", "Dog", "Rabbit", "Pig" };JComboBox b= new JComboBox(items);b.setSelectedIndex(4);

27

JRadioButtonJRadioButton b= new JRadioButton(’’Pig’’);b.setSelected(true);

JSliderJSlider b= new JSlider(JSlider.HORIZONTAL,min,max,init);b.setMajorTickSpacing(10);b.setMinorTickSpacing(1); b.setPaintTicks(true); b.setPaintLabels(true);

JListDefaultListModel listModel = new DefaultListModel(); listModel.addElement("Jane Doe"); listModel.addElement("John Smith"); listModel.addElement("Kathy Green"); JList list = new JList(listModel);

JSpinner

Autres composants SWING (2)Autres composants SWING (2)

JTextAreaJTextArea b= new JTextArea(10,40);b.setText(‘’This is…’’); b.setEditable(true);

JToolBar

JTabbedPaneJTabbedPane b= new JTabbedPane();b.addTab(‘’Tab 1’’,icon,panel1,’’tip text’’);

28

JTree

JToolBarJToolBar b = new JToolBar();b.add(button); b.add(separator);

JProgressBarJProgressBar b=new JProgressBar(0,10);b.setValue(5);b.setStringPainted(true);

JScrollPanepanel.add(new JScrollPane(textArea),BorderLayout.CENTER);

Boîtes de dialogue SWINGBoîtes de dialogue SWING

JFileChooser

29

JFileChooserJFileChooser fc = new JFileChooser();int returnVal = fc.showOpenDialog(frame);if (returnVal == JFileChooser.APPROVE_OPTION) {

File file = fc.getSelectedFile();}

JOptionPaneJOptionPane.showMessageDialog(frame, "Eggs are not supposed to be green.");

JColorChooserColor newColor = JColorChooser.showDialog( frame, "Choose Background Color", initColor);

Exercice 1: Réaliser l’IHM Exercice 1: Réaliser l’IHM d’un lecteur de fichier texted’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

30

Voir corrigé

Evènements & Ecouteurs

31

La programmation évènementielleLa 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

32

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)

Evènements et écouteursEvè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

33

� 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

Clic sur Bouton (solution 1)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)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)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)Clic sur Menu (solution 2)

� Réponse à l’évènement généré lors d’un clic sur un item de Menu

37

Les ActionsLes 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

38

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

Quelques évènements & écouteurs Quelques évènements & écouteurs standards de SWINGstandards de SWING

Interface Type d’évènement Méthodes à implémenter

ActionListener

Evènement correspondant à une action telle que:

enfoncer un bouton, sélection d'un item dans un menu

void actionPerformed(ActionEven t e)

ComponentListener

Composant rendu invisible, composant déplacé, changement de taille du composant, composant rendu visible

void componentHidden(ComponentEvent e) void componentMoved(ComponentEven t e) void componentResized(ComponentEven t e) void componentShown(ComponentEven t e)

39

FocusListener Le composant reçoit le focus clavier, le composant perd le focus clavier

void focusGained(FocusEven t e) void focusLost(FocusEven t e)

MouseListener

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(MouseEven t e) void mouseEntered(MouseEven t e) void mouseExited(MouseEvent e) void mousePressed(MouseEvent e) void mouseReleased(MouseEvent e)

WindowListener

Evènement sur une fenêtre void windowActivated(WindowEvent e) void windowClosed(WindowEvent e) void windowDeiconified(WindowEvent e) void windowIconified(WindowEvent e) void windowOpened(WindowEven t e)

Exercice 2: Compléter l’IHM Exercice 2: Compléter l’IHM du lecteur de fichier textedu lecteur de fichier texte

� Lorsqu’on clique sur le bouton OUVRIR, on affiche le contenu du fichier dans la zone texte

40

Voir corrigé

Window Builder Pro

Présentation sur l’outil de développement visuel

41

Présentation sur l’outil de développement visuel d’IHM Window Builder Pro, plug-in pour Eclipse.