Interface avec l’utilisateur

▪ La quasi-totalité des programmes informatiques nécessitent

➢ l’affichage de questions posées à l’utilisateur

➢ l’entrée de données par l’utilisateur au moment de l’exécution

➢ l’affichage d’une partie des résultats obtenus par le traitement informatique

▪ Cet échange d’informations peut s’effectuer avec une interface utilisateur

(UI en anglais) en mode texte (ou console) ou en mode graphique

2
 Interface graphique
▪ Une interface graphique est formée d’une ou plusieurs fenêtres qui
contiennent divers composants graphiques (widgets) tels que
- Boutons

- Menus
- Listes

- champ texte

- etc…

▪ Les interfaces graphiques sont souvent appelées GUI d’après l’anglais Graphical
User Interface

3
 Les API utilisées par les interfaces graphiques en java
▪ AWT(Abstract Window Toolkit, JDK 1.1) et Swing(JDK/SDK 1.2) font partie
de JFC (Java Foundation Classes) qui offre des facilités pour construire des
interfaces graphiques

▪ Swing est construit au-dessus de AWT

• même gestion des événements

• les classes de Swing héritent des classes de AWT

4
 Swing ou AWT?
▪ Tous les composants de AWT ont leur équivalent dans Swing
Mais Swing est plus lourd
➢ en plus joli et plus lent que AWT
➢ avec plus de fonctionnalités
Ne dépend pas du système d’exploitation Dépend du Système d’exploitation

JButton annuler =new JButton("Annuler"); Button annuler =new Button("Annuler");

▪ Swing offre de nombreux composants qui n’existent pas dans AWT

→ Ce cours sera centré sur Swing
5
 Les Containers

▪ Des composants sont destinés spécifiquement à recevoir d’autres éléments

graphiques :
• les containers « top-level » lourds JFrame, JApplet, JDialog, JWindow

• les containers « intermédiaires » légers JPanel, JScrollPane, JSplitPane,

JTabbedPane,

6
Afficher une fenêtre (JFrame)

Ou setTitle(« »)

Ou setBounds(…)

Compacte le contenu de la fenêtre

Annule setSize()

Affiche la fenêtre

7
 Taille d’une fenêtre

▪ pack() donne à la fenêtre la taille nécessaire pour respecter les tailles

préférées des composants de la fenêtre (tout l'écran si cette taille est
supérieure à la taille de l'écran)
▪ Taille ou un emplacement précis sur l'écran (en pixels) :
▪ setLocation(int xhg,int yhg)
▪ setSize(int largeur,int hauteur)
▪ setBounds(int x,int y,int largeur,int hauteur)

▪ Depuis sdk 1.4, setLocationRelativeTo(null) centre une fenêtre

sur l’écran 8
 Fermeture d’une fenêtre

▪ Il est possible de préciser comment un objet JFrame réagit à sa fermeture

grâce à la méthode: setDefaultCloseOperation(constante)

▪ Cette méthode attend en paramètre une valeur qui peut être :

Constante Rôle
DISPOSE_ON_CLOSE détruit la fenêtre
DO_NOTHING_ON_CLOSE rend le bouton de fermeture inactif
HIDE_ON_CLOSE cache la fenêtre
EXIT_ON_CLOSE Quitte le programme

9
 Le « ContentPane »

▪ Avant le JDK 5, les containers « top-level » ne pouvaient contenir

directement d’autres composants

▪ Ils sont associés à un autre container, le « content pane » dans lequel on

ajoutait les composants

▪ On obtient ce content pane par (topLevel est un container lourd ; JFrame par
exemple)

Container contentPane=topLevel.getContentPane();

10
Exemple: Ajouter des composants

11
 Depuis JDK 5
▪ On peut désormais ajouter directement les composants dans un composant
« top-level » :

❖Ce container va en fait déléguer à son content pane qui existe toujours

12
 JPanel

▪ JPanel est la classe mère des containers intermédiaires les plus

simples
▪ Un JPanel sert à regrouper des composants dans une zone d'écran
▪ Il n’a pas d’aspect visuel déterminé ; son aspect visuel est donné
par les composants qu'il contient

13
Layout managers
 Layout managers
▪ L’utilisateur peut changer la taille d’une fenêtre ; les composants de la fenêtre doivent alors
être repositionnés

▪ Les fenêtres (plus généralement les containers) utilisent des gestionnaires de mise en place
(layout manager) pour repositionner leurs composants

▪ Il existe plusieurs types de layout managers avec des algorithmes de placement différents

▪ Quand on ajoute un composant dans un container on ne donne pas la position exacte du

composant

▪ On donne plutôt des indications de positionnement au gestionnaire de mise en place

• explicites (BorderLayout.NORTH)

• ou implicites (ordre d’ajout dans le container)

15
 Changer le Layout manager

▪ Tous les containers ont un gestionnaire de placement par défaut:

• FlowLayout pour la classe JPanel

• BorderLayout pour la classe JFrame

▪ On peut changer ce gestionnaire de placement d’un Container par la

méthode setLayout(LayoutManager) de la classe Container

▪ Depuis le JDK 5 on peut envoyer la méthode setLayout directement à

la fenêtre (elle délègue au content pane)

16
 Types de Layout manager

▪ Les types les plus courants de gestionnaire de mise en place :

• BorderLayout: placer aux 5 points cardinaux

• FlowLayout: placer à la suite

• GridLayout: placer dans une grille

• BoxLayout: placer verticalement ou horizontalement

• GridBagLayout: placements complexes

17
 FlowLayout
▪ La classe FlowLayout place les composants ligne par ligne de gauche à droite.

▪ Chaque ligne est complétée progressivement jusqu'à être remplie, puis passe à la suivante.

▪ Chaque ligne est centrée par défaut.

▪ Constructeurs :
• FlowLayout()

• FlowLayout(int align) : Permet de préciser l'alignement des composants dans le conteneur

(FlowLayout.CENTER,FlowLayout.LEFT, FlowLayout.RIGHT ... ).

• FlowLayout(int align, int hgap, int vgap) :Permet de préciser l'alignement et

l'espacement horizontal et vertical entre les composants (la valeur par défaut est 5 pixels).
18
Exemple FlowLayout

19
 BorderLayout
▪ Avec ce Layout Manager, la disposition des composants est commandée par une mise en page en bordure

qui découpe la surface en cinq zones : North, South, East, West, Center.

▪ On peut librement utiliser une ou plusieurs zones.

▪ BorderLayout consacre tout l'espace du conteneur aux composants. Le composant du milieu dispose de la

place inutilisée par les autres composants.

▪ Si on oublie de spécifier le placement lors de l'ajout d'un composant, celui-ci est placé au centre

▪ Constructeurs :
• BorderLayout( )

• BorderLayout (int hgap,int vgap) Permet de préciser l'espacement horizontal et

vertical entre les composants. 20

Exemple BorderLayout

21
 GridLayout

▪ Ce Layout Manager établit un réseau de cellule identiques qui forment une sorte
de quadrillage invisible : les composants sont organisés en lignes et en colonnes.

▪ Les éléments insérés dans la grille ont tous la même taille. Les cellules du
quadrillage se remplissent de droite à gauche ou de haut en bas.

▪ Constructeurs :
• GridLayout( int row, int cols ) : le premier paramètre (row) est le
nombre de lignes tandis que le deuxième (cols) est le nombre de colonnes.

• GridLayout( int row, int cols, int hgap, int vgap ) : permet de
préciser en plus l'espacement horizontal et vertical entre les composants.
22
Exemple GridLayout

23
Les composants Graphiques Atomiques
 Les Labels (JLabel)
▪ Servent essentiellement à afficher du texte et des images
▪ Constructeurs:
o JLabel(String)
o JLabel(ImageIcon)
o JLabel(String, ImageIcon, int ALIG_HORIZONTAL)

▪ quelques méthodes:
o void setText(String): Permet d'initialiser ou de modifier le texte affiché
o void setForGround(Color):Permet de préciser la couleur du texte
o void setFont(Font):Permet de préciser la police du texte
❖ Font f=new Font(font, style, taille)

25
Exemple JLabel

26
 Zones texte :JTextField & JPasswordField
▪ Destinées pour saisir du texte sur une seule ligne

▪ Constructeurs JTextField:
• JTextField()
• JTextField(String)
• JTextField(int colonne)

▪ quelques méthodes:
• String getText(): Renvoyer le texte saisi
• void setText(String):Modifier le contenu du texte
• void setEditable(boolean):Permet de préciser si les données du composant sont éditables ou non
▪ Constructeurs JPasswordField:
• JPasswordField()

➢ Pour JPasswordField utilisez la méthode char[] getPassword() et non getText()

27
 JTextArea

▪ Utilisé pour afficher ou saisir du texte sur plusieurs ligne.

▪ Constructeurs:
• JTextArea(String)
• JTextArea(int ligne, int colonne)

▪ quelques méthodes:
• void setFont(Font)

• void setForground(Color)

• void setEditable(boolean)// Par défaut le texte est changeable (true)

28
Exemple: zone Texte

Détermine si les lignes longues

doivent ou non être repliées

Détermine si les lignes sont repliées

en fin de mot (true) ou pas

29
 Les boutons: JButton
▪ Un bouton est un composant possédant un label et qu'on peut cliquer dessus

▪ Constructeurs:
• JButton(String)
• JButton(ImageIcon)
• JButton(String,ImageIcon)

▪ quelques méthodes:
• void SetEnabled(boolean) : changer l’état d’activité du bouton
• String getText():retourner le texte contenu dans le bouton
• void setText(String):changer le texte contenu dans le bouton

▪ Le JButton réagit graphiquement au clic

▪ Quand il est désactivé, l’action clic n’a aucun effet

30
Exemple: JButton

31
 Les Boutons: JCheckBox

▪ Utilisés pour le choix des options ou des réponses

▪ Constructeurs:
• JCheckBox(String)
• JCheckBox(String,boolean)

▪ quelques méthodes:
• void setSelected(boolean) : sélectionner (désélectionner) l’option
• boolean isSelected() : Indiquer si le composant est dans l'état sélectionné

32
Exemple: JCheckBox

33
 Les Boutons: JRadioButton
▪ Contrairement au JCheckbox, utilisés pour le choix exclusive (exemple : homme/femme)
▪ Nécessité de placer les choix dans un objet contexte: ButtonGroup
▪ Constructeurs:
• Les mêmes que JCheckbox

▪ Les opérations:
• Les mêmes que pour JCheckBox

▪ ButtonGroup:
• Constructeur: un seul, pas de paramètre
• Ajouter des JRadioButton: add(JRadioButton)

34
Exemple: JRadioButton

35
 Listes déroulantes
▪ En Swing, il existe 2 sortes de listes déroulantes :

▪ JList: liste déroulante assez avancée qui permet d'afficher plusieurs

éléments à la fois.

▪ JComboBox: c'est une liste déroulante normale, de celle que vous voyez
partout dans les applications.

▪ On va se contenter d'utiliser la JComboBox dans ce cours.

36
 Liste: JComboBox
▪ La classe JComboBox permet la sélection d'une seule entrée parmi une séquence

▪ Constructeurs:
• JComboBox()

• JComboBox(Object[] items)

• JComboBox(Vector<?> items)

▪ Principales Méthodes :
• void addItem(Object anObject):ajouter un élément à la liste

• Object getSelectedItem(): retourner l’objet associé au choix actuel

• void setSelectedIndex(int index): sélectionner un élément défini par son numéro

37
Exemple JComboBox

38
 Exercices
1. Ecrire un programme java qui permet d’afficher la fenêtre suivante :

2. Ecrire un programme java qui permet d’afficher la fenêtre suivante :

39
Gestion des événements

40
 Gestion des événements

▪ Dans java, pour qu’un objet puisse répondre à un événement, il faut lui
attacher un écouteur (Listener).

▪ Il existe différents types de Listeners:

• WindowsListener : pour gérer les événement sur la fenêtre
• ActionListener :pour gérer les événements produits sur les composants graphiques.
• KeyListener : pour gérer les événements du clavier
• MouseListener : pour gérer les événements de la souris.

• ….

41
 Gestionnaire d’événement ActionListener
▪ ActionListener est une interface qui définit une seule méthode:
• public void actionPerformed(ActionEvent e);

▪ L’événement actionPerformed est produit quand on valide une action par un clique ou par la
touche de validation du clavier.

▪ Pour gérer cet événement dans une application, il faut créer une classe implémentant l’interface
ActionListener et redéfinir la réponse aux événements utilisateur, produits dans l’interface, dans
la méthode actionPerformed.

▪ La classe implémentant cette interface s’appelle un listener (écouteur) ou un gestionnaire

d’événements.

▪ Quand on clique, par exemple, sur un bouton qui est branché sur cet écouteur, la méthode
actionPerformed de l’écouteur s’exécute
42
 Classe de l'écouteur

▪ Soit C la classe du container graphique qui contient le composant graphique

▪ Plusieurs solutions pour choisir la classe de l'écouteur de ce composant
graphique :
• classe C

• autre classe spécifiquement créée pour écouter le composant :

o classe interne de la classe C : Solution plus extensible : chaque composant (ou chaque type ou
groupe de composants) a sa propre classe écouteur
o classe interne anonyme de la classe C(fréquent) :L'intérêt est que le code de l'écouteur est
proche du code du composant
o classe externe à la classe C
43
 Exercice corrigé

▪ Ecrire une application java/swing qui dit bonjour à un utilisateur.

L’application possède:
• Un bouton qui affiche « bonjour ‘utilisateur’ » dans une étiquette (label)

• Une zone de saisie permettant à l’utilisateur de donner son nom

• Un label pour afficher le résultat

44
Solution 1:classe C

45
Solution 2:classe interne

46
Solution 3:classe interne anonyme

47
 Méthode getSource

▪ La méthode « public Object getSource() » renvoie le composant

d’où est parti l’événement, par exemple un bouton ou un champ de saisie
de texte

▪ Souvent indispensable si l'écouteur écoute plusieurs composants

48
 Exercice corrigé

▪ Ecrire un application java/swing qui permet de:

✓ incrémenter un compteur

✓ Décrémenter un compteur

✓ Mettre à zéro un compteur

▪ L’apparence de cette application est donnée par la figure suivante:

49
Solution

50
 Exercices
1. Ecrire une application java/Swing permettant la conversion euros → dinars et inversement.
L’apparence de cette application est donnée par la figure suivante:

2. Ecrire une application java/Swing intitulée « Calculatrice 1 » permettant de calculer la somme, le

produit, la soustraction et la division de deux réels a et b. L’apparence de cette application est donnée
par la figure suivante:

51
Composant complexe (JTable)
 Introduction
▪ Pour visualiser et manipuler un gros volume d’informations : composants
spécifiques

▪ Les informations peuvent être présentées sous forme de tableau, de liste,

d’arbre ou de graphe

▪ L’API Java Swing propose plusieurs composants pour visualiser les informations :
o JTable, JList, JTree, JGraph,…

53
 MVC: Principes de base
▪ Le modèle d’architecture MVC (Model View Controller) est à la base de nombreux
systèmes de visualisation graphiques

▪ Principe de Base: séparation des rôles

• Le modèle est l’élément principal du composant, il contient les données
• Les vues du composant sont abonnées au modèle : ce sont des visualisations des
données (interfaces utilisateur)
• Le contrôleur assure la synchronisation entre modèle et vues (traitement)

✓La Java Swing repose sur l’architecture MVC

54
 JTable
▪ Un JTable est un composant Swing permettant d'afficher un tableau
formé d'un certain nombre de lignes et d'un certain nombre de colonnes.

▪ En plus des lignes de contenu, le JTable a également une ligne d'en-tête

présentant un titre pour chaque colonne.

▪ En général on met une JTable dans une JScrollPane. Si ce n’est pas

le cas, les en-têtes des colonnes n’apparaissent pas.

Les ascenseurs:
Class : JScrollPane
Constructeur : JScrollPane(Component)
55
 Exemple de table simple

▪ La façon la plus simple, mais pas la meilleure, est de passer directement à JTable un tableau à deux
dimensions pour les données et un tableau à une dimension pour l'en-tête de chaque colonne.

56
 Modèle du tableau
▪ Une chose indispensable à faire lorsqu'on utilise des JTable est d'utiliser un modèle de tableau
pour stocker les données.

▪ Il faut donc créer une classe étendant TableModel.

▪ En pratique, on implémente rarement directement TableModel, mais on hérite plutôt

d'AbstractTableModel et l'on redéfinit les méthodes nécessaires.

▪ Voici les méthodes qu'il faudra redéfinir pour notre modèle de données statique :
• int getRowCount() : doit retourner le nombre de lignes du tableau
• int getColumnCount() : doit retourner le nombre de colonnes du tableau
• Object getValueAt(int rowIndex, int columnIndex) : doit retourner la valeur du
tableau à la colonne et la ligne spécifiées
• String getColumnName(int columnIndex) : doit retourner l'en-tête de la colonne spécifiée

57
 Exemple de tableau avec modèle (1)

▪ Nous allons écrire une application java/swing qui permet d’ajouter et

d’afficher des étudiants dans un tableau. Un étudiant est représenté par son
id, son nom et son prénom. Les étudiants sont sauvegardés dans une liste
(ArrayList).

58
 Exemple de tableau avec modèle (2)
▪ Classe du modèle « TableModele.java »:

59
Exemple de tableau avec modèle (3)

60
 Exercice
On souhaite développer une application de gestion des étudiants, pour ce faire on va suivre les étapes suivantes :
➢ Étape 1 : Développement de la couche métier Dans cette étape on demande de créer :
▪ La classe Etudiant caractérisée par : id, nom, prénom, sexe et filière. Dans cette classe :
o Respecter le principe d'encapsulation,
o Mettre deux constructeurs l'un en précisant l'id et l'autre sans le préciser. Dans ce 2ème cas l’id doit être auto-incrément.
▪ L’interface IGestionEtudiants avec les méthodes suivantes :
o Etudiant ajouterEtudiant(Etudiant e);
o List<Etudiant> rechercherParMC(String mc);
o void trierListeEtudiantsParNom();
o List<Etudiant> listeDesEtudiants();
▪ La classe GestionEtudiants qui implémente l'interface IGestionEtudiants et redéfinir toutes les méthodes de l'interface.
➢ Étape 2 : Développement de la couche présentation
▪ Dans cette étape on demande de créer une interface utilisateur avec la bibliothèque Swing. Cette interface permet de gérer
les étudiants (voir figure ci-dessous) :

61