Java IHM

Télécharger au format pdf ou txt
Télécharger au format pdf ou txt
Vous êtes sur la page 1sur 41

Interface Homme-Machine

& JAVA

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

Vous aimerez peut-être aussi