Interface Homme-Machine
& JAVA
Pierre Chauvet
[email protected]
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 du cours
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 : 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 = Barre de menu: JMenuBar
new JMenu(‘’Menu_01’’); JMenuBar barre = new JMenuBar();
barre.add(menu01); frame.setMenuBar(barre);
Séparateur: JSeparator
menu01.add(new Jseparator());
Items avec boîte à cocher:
JCheckBoxMenuItem ,
JRadioButtonMenuItem
Comme un JMenuItem…
Item de menu: JMenuItem
JMenuItem menuItem01 =
new JMenuItem(‘’Menu_Item_01’’);
menu01.add(menuItem01);
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
*
JTextField
JButton JToggleButton JMenuItem
JCheckBoxMenuItem JRadioButtonMenuItem JMenu
JCheckBox JRadioButton
*
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 JComboBox
JCheckBox b= new JCheckBox(’’Chin’’); String[] items = { "Bird", "Cat", "Dog", "Rabbit", "Pig" };
b.setSelected(true); JComboBox b= new JComboBox(items);
b.setSelectedIndex(4);
JRadioButton JList
JRadioButton b= new JRadioButton(’’Pig’’); DefaultListModel listModel = new DefaultListModel();
b.setSelected(true); listModel.addElement("Jane Doe");
listModel.addElement("John Smith");
listModel.addElement("Kathy Green");
JList list = new JList(listModel);
JSlider JSpinner
JSlider b= new JSlider(JSlider.HORIZONTAL,min,max,init);
b.setMajorTickSpacing(10);b.setMinorTickSpacing(1); 27
b.setPaintTicks(true); b.setPaintLabels(true);
Autres composants SWING (2)
JTabbedPane
JTabbedPane b= new JTabbedPane();
JTextArea b.addTab(‘’Tab 1’’,icon,panel1,’’tip text’’);
JTextArea b= new JTextArea(10,40);
b.setText(‘’This is…’’); b.setEditable(true);
JToolBar
JToolBar b = new JToolBar();
b.add(button); b.add(separator);
JTree
JProgressBar
JProgressBar b=new JProgressBar(0,10); JScrollPane
b.setValue(5);
panel.add(new JScrollPane(textArea),BorderLayout.CENTER);
b.setStringPainted(true);
28
Boîtes de dialogue SWING
JFileChooser
JFileChooser fc = new JFileChooser(); JColorChooser
int returnVal = fc.showOpenDialog(frame); Color newColor =
if (returnVal == JFileChooser.APPROVE_OPTION) { JColorChooser.showDialog( frame, "Choose
File file = fc.getSelectedFile(); Background Color", initColor);
}
JOptionPane
JOptionPane.showMessageDialog(frame, "Eggs are
not supposed to be green.");
29
Exercice : 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)
telle que:
ActionListener
enfoncer un bouton,
sélection d'un item dans un menu
Composant rendu invisible, void componentHidden(ComponentEvent e)
composant déplacé, void componentMoved(ComponentEvent e)
changement de taille du composant, void componentResized(ComponentEvent e)
ComponentListener
composant rendu visible void componentShown(ComponentEvent e)
Le composant reçoit le focus clavier, void focusGained(FocusEvent e)
FocusListener le composant perd le focus clavier void focusLost(FocusEvent e)
Click souris dans un composant, void mouseClicked(MouseEvent e)
entrée dans un composant, void mouseEntered(MouseEvent e)
MouseListener sortie d'un composant, void mouseExited(MouseEvent e)
bouton pressé sur un composant, void mousePressed(MouseEvent e)
bouton relâché sur un composant void mouseReleased(MouseEvent e)
Evènement sur une fenêtre void windowActivated(WindowEvent e)
void windowClosed(WindowEvent e)
WindowListener void windowDeiconified(WindowEvent e)
void windowIconified(WindowEvent e)
void windowOpened(WindowEvent e)
39
Exercice : 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
