Interface Graphique en Java

Dans ce tp nous abordons les Interfaces Graphique et, par extension, la programmation
événementielle. Le langage Java propose différentes bibliothèques pour programmer des
interfaces graphiques, mais dans ce tp, nous utiliserons essentiellement le package
javax.swing. Ce tp vous permettra d'apprendre à utiliser l'objet JFrame, présent dans le
package javax.swing. Vous serez alors capables de créer une fenêtre, de définir sa taille, etc.
En réalité, une fenêtre n'est qu'une multitude de composants posés les uns sur les autres et
que chacun possède un rôle qui lui est propre.

Avec un NetBeans E.D.I., la réalisation d'une interface graphique se décompose en deux

parties:

 La partie design: c'est la réalisation du rendu visuel de l'interface. Cette partie ne

nécessite aucune programmation. Le développeur sélectionne les composants qu'il
veut utiliser dans des palettes de composants et les dépose sur la fenêtre. Il peut
ensuite modifier leurs propriétés (position, dimension, couleur par exemple).
 La partie programmation évènementielle: c'est l'écriture des gestionnaires
d'évènement ou autrement dit l'écriture des procédures évènementielles. C'est ce qui
permettra de rendre l'interface fonctionnelle. C'est ici que des notions de
programmation objet vont intervenir, car une fenêtre et ses composants sont
représentés par des classes.
1. Le mode design

La création d'une application avec interface graphique passe par l'adjonction d'une
fenêtre (via New JFrame Form). Netbeans génère automatiquement un fichier
source java de même nom que la fenêtre contenant la définition d'une sous-classe de
JFrame (la classe swing représentant les fenêtres) que nous avons appelée la classe
fenêtre. Une application peut comporter plusieurs fenêtres et donc plusieurs classes
fenêtre.

Le fichier source représentant une classe fenêtre peut être visualisé en mode Source
ou en mode Design. En mode Source, l'interface graphique de Netbeans est adaptée à
l'édition du code source. En mode Design, elle est adaptée au design de la fenêtre et
de ses composants.
 Fenêtres de NetBeans en mode Design
Voici l'aspect de l'interface graphique de NetBeans en mode Design:

On y trouve:

 en haut à gauche, la fenêtre Projects. Cette fenêtre liste les différents projets
ouverts sous Netbeans. Elle permet de modifier les propriétés générales d'un
projet, d'ajouter ou de supprimer un fichier source à un projet donné, etc...
 au centre: la fenêtre de l'application avec ses composants.
 en bas à gauche la fenêtre Navigator: elle liste tous les composants de
l'application.
 en haut à droite: la palette des composants. C'est à partir de cette palette que
l'on peut sélectionner différents composants et les déposer sur la fenêtre.
 en bas à droite: la fenêtre Properties: elle permet d'afficher les propriétés d'un
composant particulier et éventuellement, de les modifier manuellement.

2. Modification des propriétés d'un composant

Pour modifier les propriétés d'un composant, il faut d'abord le sélectionner, soit en
cliquant sur ce composant dans la fenêtre de l'application, soit en cliquant sur son nom
 dans la fenêtre Navigator. La fenêtre Properties fait alors apparaitre les différentes
propriétés de ce composant pouvant être modifiées.

- Modification du nom d'un composant

Pour améliorer la lisibilité du code, il est préférable de ne pas garder les noms de
composants générés automatiquement par NetBeans. Pour cela, faite un clic droit sur
le composant et sélectionnez Change Variable Name.

3. Fenêtres
Pour une interface graphique, la composante principale est la fenêtre présentée dans
la classe JFrame, qui aide le développeur d’avoir ce qu’il veut, en utilisant
NetBeans :
- Créer un projet Java,
- Un clic droit avec le bouton de la souris sur le projet, et on choisit New après
JFrame Form, pour créer une nouvelle classe héritée de JFrame , on obtient
l’interface suivante :

- En bas à gauche : on trouve la liste des composantes dans notre fenêtre (dans
notre exemple : il n’ y a que JFrame),
- A droite en haut : on trouve une palette des principales composantes qu’on
peut utiliser dans notre fenêtre (boutons,… )
- A droite en bas : on trouve la liste des principales propriétés du composant
sélectionné.
- Pour modifier les propriétés, on clique avec le bouton droit de la souris sur le
composant qu’on veut modifier et on choisit propriétés, on aura la petite
fenêtre suivante :

- Les principales propriétés pour un JFrame sont :

a- defaultCloseOperation : gère ce qu’elle fait la fenêtre lors de sa

fermeture.
- Par défaut, sa valeur est EXIT_ON_CLOSE. Avec cette valeur, la fermeture
de la fenêtre provoque l'arrêt de l'application.
- Pour éviter que la fenêtre se ferme, sélectionnez la valeur DO_NOTHING.
Mais dans ce cas, il deviendra impossible de quitter l'application !!!!
On doit définir un gestionnaire d'évènement comme nous allons le voir par la
suite.
b- title : donne un titre à notre fenêtre.
c- enabled : dit si la fenêtre est active ou bien non.
d- maximumSize : donne la taille maximale de la fenêtre.
e- minimumSize : donne la taille minimale de la fenêtre.
f- preferredSize : donne la taille préférable de la fenêtre.
 g- resizable : permet le redimensionnement de la fenêtre ou pas.
- Evénements
- Un clic sur le bouton droit de la souris sur le JFrame, on remarque qu’ont
peut ajouter des composantes tant que des événements qui s’exécutent pour
une condition précis, de cette façon les composantes communiquent entre eux
et avec d’autres programmes facilement.

- Exemple

Faire un click droit sur la fenêtre pour faire apparaître le menu contextuel. Et choisir
ensuite :

- Events/Mouse/mouseClicked.
Cela signifie que nous désirons attacher un événement lorsque
l’évènement click se produira sur le bouton.
- Automatiquement, NetBeans vous propose de remplir le code qui sera associé
à l’événement Click sur le bouton. Le nom de la procédure est clair de ce
point de vue.
- Je vous propose le code suivant :
System.exit(0);
4. Conteneurs
Une composante qui contient d’autres composantes, on prend l’exemple d’un panneau
(Panel),

- Ses principales propriétés sont :

- background : permet le changement de la couleur de l’arrière plan du

conteneur.

- border : permet la modification de la bordure du conteneur.

Une barre d'outils (classe JToolBar) est simplement un conteneur: c'est à dire un
composant destiné à contenir d'autres composants. On y met généralement des
boutons libellés par des icones, c'est à dire des boutons sur lesquels figurent une
image de petite dimension. Les icones sont généralement de petites images carrées
(typiquement 32X32, 24X24, ...).

5. Les boutons radio

Les boutons radio sont en quelque sorte des cases à cocher qui s'excluent
mutuellement à l'intérieur d'un même groupe. Lorsqu'un bouton radio est coché les
autres boutons du groupe sont automatiquement décochés.

Les boutons radios sont représentés par la classe JRadioButton et les groupes de
boutons par la classe: ButtonGroup.
 a. Coté design

Un bouton radio doit être obligatoirement associé à un groupe de boutons. Avant de

déposer vos boutons radio, commencez par déposer le (ou les) groupe(s) de boutons
sur la fenêtre de l'application.

Le groupe de bouton associé à un bouton radio donné est défini dans la propriété
buttonGroup de ce dernier. L'étiquette d'un bouton radio est définie dans sa
propriété text.

b. Gestionnaire d'évènement

Le fait de cocher ou décocher le bouton radio génère un évènement de type

ActionPerformed. Pour définir un gestionnaire pour cet évènement, faites un double
clic sur le bouton radio. Le nom de la procédure évènementielle générée par NetBeans
est composé du nom bouton radio suivi de ActionPerformed.

c. Méthodes utiles

 isSelected() : retourne un booléen : true si le bouton radio est coché, false sinon.

6. Les combo box

La combo box (classe JComboBox) est un composant permettant de représenter une

liste de choix importante de manière très compacte. Lorsqu'elle est non déployée, elle
prend la même place qu'un champ de texte. Voici, un combo box non déployée:
- Elle ne se déploie que lorsque l'utilisateur l'utilise pour sélectionner un choix.
- De plus, si le nombre de choix est important, une barre de défilement verticale
permet d'atteindre des choix non visibles au moment du déploiement.

a. Coté design

Pour définir les entrées d'une combo box à la main, utilisez la propriété model. En
cliquant sur les ... à droite de la propriété vous ouvrez un éditeur qui vous permet de
saisir les intitulés des différents choix.

b. Gestionnaire d'évènement

Le fait de sélectionner une entrée dans une combo box génère un évènement de type
ActionPerformed. Pour définir un gestionnaire pour cet évènement, faites un double
clic sur le combo box. Le nom de la procédure évènementielle générée par NetBeans
est composé du nom de le combo box suivi de ActionPerformed.

c. Méthodes utiles : plusieurs méthodes utiles par exemple :

  getSelectedIndex (): retourne la position de l'entrée sélectionnée par
l'utilisateur. Si aucune entrée n'est sélectionnée, le résultat est -1. Le résultat
retourné est de type int.
 getSelectedItem (): retourne l'entrée de la combo box sélectionnée par
l'utilisateur. Le résultat retourné est de type Object. Pour le convertir en
chaine de caractères, il faudra donc lui appliquer la méthode toString.

7. Les boutons (JButton)

Les boutons sont des composantes permettent de déclencher un événement. Ils sont
présentés par la classe JButton, (bouton classique). Ses principales propriétés sont :

a- foreground : permet le changement de la couleur du texte du bouton.

b- text : permet le changement du texte du bouton.

c- font : permet le changement du police du texte.

d- icon : permet de donner une icone au bouton.

e- toolTipText : permet de donner une brève explication sur le bouton quand

la souris se positionne au-dessus de lui.
8. Les cases à cocher
Les cases à cocher servent à représenter des informations du type vrai/faux
(typiquement, les options d'un logiciel). Sous swing, elles sont représentées par la
classe JCheckBox.

a. Coté design

Pour que la case soit cochée au démarrage de l'application, cochez la propriété

selected dans la fenêtre Property de la case à cocher. L'étiquette de la case à cocher
se trouve dans la propriété text.

b. Gestionnaire d'évènement

Le fait de cocher ou décocher la case génère un évènement de type

ActionPerformed. Pour définir un gestionnaire pour cet évènement, faites un double
clic sur la case à cocher. Le nom de la procédure évènementielle générée par
NetBeans est composé du nom de la case à cochée suivi de ActionPerformed.

c. Méthodes utiles
- isSelected() : retourne un booléen : true si la case est cochée, false sinon.

9. Champs de texte

Un champ de texte est un composant permettant d'afficher ou de saisir du texte. Dans

le package swing, les champs de texte sont représentés par la classe JTextField.
 Ce sont des espaces permettent d’insérer du texte pour l’application en tant que :

a- étiquettes « JLabel »,
- permet d’afficher du texte ou une image.
- peut contenir plusieurs lignes et il comprend les tag HTML.
b- des champs pour faire entrer des informations générales « JTextField »,
permet d’écrire du texte à une seul ligne.

a. Coté design

La propriété text d'un champ de texte peut vous servir à y mettre une valeur initiale
ou valeur par défaut. Notez qu'elle contient au départ le nom du champ de texte. Si
vous souhaitez que le champ de texte soit initialement vide, il vous faudra donc
effacer cette valeur.

b. Méthodes utiles

- getText() : retourne la chaine de caractères contenue dans le champ de texte.

 setText(String s): affiche la chaine de caractère s dans le champ de texte.
Pour effacer le champ de texte, affichez la chaine vide.
 append(String s): concatène la chaine de caractères s au contenu de la zone
de texte.

10. Les zones de texte

Une zone de texte est un composant permettant d'afficher ou de saisir du texte.
Contrairement au champ de texte, le texte contenu dans une zone de texte peut être
 réparti sur plusieurs lignes. Dans le package swing, les champs de texte sont
représentés par la classe JTextArea.

a. Coté désign

La propriété lineWrap de la zone de texte est cochée, il y aura une barre de

défilement horizontale permettant de voir la partie de la ligne dépassant la largeur de
la zone de texte.

b. Méthodes utiles

- getText() : retourne la chaine de caractères contenue dans la zone de texte.

- setText(String s): affiche la chaine de caractères s dans la zone de texte. Pour
effacer la zone de texte, affichez la chaine vide.
- append(String s): concatène la chaine de caractères s au contenu de la zone
de texte.

11. Menus
Les menus sont des boutons qui se situent en haut de l’interface de l’application qui
servent à contenir l’ensemble des principales tâches de l’application qu’on développe
et permet d’avoir une visualisation et une structure claires du programme.

Les menus sont organisés en trois niveaux: une barre de menu contient différents
menu et chaque menu contient plusieurs entrées de menu. Pour fixer les idées, voici
par exemple le menu Run de NetBeans déployé. Les entrées de menu p
euvent être associées à des raccourcis clavier, Dans NetBeans, la touche F6
combinée avec la touche majuscule active l'action associée à l'entrée Run File.

Il existe également des entrées de menu cochables servant à activer ou désactiver

certaines fonctionnalités d'un logiciel. Sous Swing, les entrées de menu cochables
sont représentées par la classe JCheckBoxMenuItem.

Si on a une barre de menu JMenuBar, on ajoute des JMenu dans la barre, et les
entrées de menu, par la classe JMenuItem.

- Pour ajouter un menu dans la barre de menu: clic droit sur la barre de menu,
puis sélectionner Add Menu.
 - Pour ajouter une entrée dans un menu: clic droit sur le menu, sélectionner Add
From Palette.

Méthodes utiles

 isSelected () :appliquable aux entrées de menu cochables. Elle retourne un

booléen : true si l'entrée est cochée et false sinon.

Exercice

Utilisez les JLabel et les JTextFiled, JTextArea les boutons pour construire une
fenêtre similaire à la fenêtre ci dessous.

Lorsque l'utilisateur clique sur le bouton A, le texte "le bouton A" s'affiche dans le
champ de texte et le texte "Clic sur le bouton A" vient s'ajouter à la zone de texte.
Exercice

Utilisez les JLabel et les JTextFiled, JTextArea les boutons pour construire une
fenêtre similaire à la fenêtre cidessous.

Nous allons réaliser l’opération suivante :

Lorsque l’utilisateur « clic » sur le bouton ok, nous allons afficher dans le JTextArea
le message suivant : « Bonjour XXXX RRRR ».