Java IHM
Java IHM
Java IHM
& JAVA
Pierre Chauvet
pierre.chauvet@uco.fr
1
Pourquoi 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
7
Définition : la fenêtre
Classe javax.swing.JFrame
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
Libellé: JLabel
JLabel label01 = new JLabel(‘’LIBELLE’’);
panel.add(label01);
12
Définition : un champ de saisie
Classe javax.swing.JTextField
Classe javax.swing.JButton
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());
17
Un peu de méthode
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
20
java.awt.FlowLayout
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
*
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
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
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)
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