ISET Mahdia Atelier Programmation Orientée Objet Avancée AU 2014/2015

Programmation des Interfaces Graphiques avec Java SWING

TP1 : Composants, Conteneurs et Layouts

NB : On ne s’occupe dans ce TP que de l’apparence graphique des interfaces (le Look), on
verra dans les TPs prochains comment valider et acquérir les informations saisies à travers
les composants de ces interfaces.

Exercice 1 :

On s’intéresse à la réalisation de l’interface graphique suivante, correspondant à une boîte de

saisie pour l’acquisition des membres d’un club où on pratique divers sports : 

Il s’agit donc d’organiser la taille et l’emplacement des composants :

 les deux boutons OK et Annuler occupent une région qui n’a pas besoin d’être
beaucoup plus haute que les boutons eux-mêmes et qui, surtout, n’a pas besoin de
grandir verticalement lorsque la hauteur du cadre augmente,
 ces deux boutons sont centrés horizontalement, c’est-à-dire à égale distance des bords
gauche et droit du panneau,
 les cases à cocher concernant les sports occupent une région rectangulaire qui n’a pas
besoin d’être plus large que le sport dont le nom est le plus long et qui, surtout, n’a pas
besoin de grandir horizontalement lorsque la largeur du cadre augmente,

Equipe POOA Page 1

ISET Mahdia Atelier Programmation Orientée Objet Avancée AU 2014/2015

 à l’intérieur de cette zone, verticalement, les cases à cocher concernant les sports sont
disposées régulièrement.

Tout cela amène à une première organisation du panneau de contenu : trois panneaux gérés
par un BorderLayout comme sur la figure suivante :

Le panneau central porte neuf composants. Les cinq premiers (l’étiquette Nom, un champ
de texte, l’étiquette Prenom, un autre champ de texte et l’étiquette Adresse) se partagent
verticalement et régulièrement un panneau qui occupe toute la largeur et qui n’a pas besoin de
grandir lorsque la hauteur augmente.

Les trois derniers composants (l’étiquette Sexe et les deux boutons-radio Homme, Femme)

occupent un panneau qui prend toute la largeur mais n’a pas besoin de grandir lorsque la
hauteur augmente. Finalement, le composant restant est une zone de texte qui doit grandir
lorsque la hauteur augmente.Ce qui nous amène à organiser le panneau central comme trois
composants (deux panneaux et une zone de texte) gérés par un second BorderLayout comme
sur la figure suivante :

Equipe POOA Page 2

ISET Mahdia Atelier Programmation Orientée Objet Avancée AU 2014/2015

Enfin, deux GridLayout et deux FlowLayout sont nécessaires pour gérer les composants

élémentaires (cases à cocher, boutons, etc.) :

Exercice 2 :

Le but de cet exercice est de créer un convertisseur de température contenant :

 2 labels "Celsius" et "Fahrenheit",

 2 boites de texte pour entrer et afficher les valeurs de température,

 2 boutons pour réinitialiser les boites de texte et fermer la fenêtre.

Indication : Utiliser la classe JPanel et un layout managers de votre choix pour obtenir un

résultat similaire à l'image ci-dessus.

Equipe POOA Page 3

ISET Mahdia Atelier Programmation Orientée Objet Avancée AU 2014/2015

Exercice 3 :
On s’intéresse à la réalisation d’un convertisseur monétaire dont l’interface graphique est
similaire à la figure ci-dessous :

Le choix du type de conversion se fait dans une liste déroulante comme le montre la figure
suivante :

Exercice 4 :

On s’intéresse à la réalisation de l’interface suivante qui permet à un utilisateur de changer

son mot de passe. L'utilisateur entre son mot de passe actuel. Il tape deux fois un nouveau
mot de passe. Pour modifier son mot de passe l'utilisateur doit cliquer sur le bouton "Lancer la
modification".

Equipe POOA Page 4

ISET Mahdia Atelier Programmation Orientée Objet Avancée AU 2014/2015

Vérifiez le bon comportement de votre interface en modifiant la taille de la fenêtre. Les labels

doivent garder la même taille et les zones de saisies doivent s'agrandir en largeur mais
pas en hauteur si vous agrandissez la fenêtre.

Exercice 5 :
L’objectif de cet exercice est la réalisation d’une interface graphique contenant des menus et
des sous-menus comme le montre les figures suivantes :

Exercice 6 :
 L’objectif de cet exercice est la réalisation d’une application pour éditer un texte organisé
sous forme d’arborescence : la racine représente le document tout entier, les fils de la racine
les diverses parties dans lesquelles le document est divisé, chacune divisée à son tour en sous-
parties, elles-mêmes divisées à leur tour, etc. Chaque nœud de l’arbre porte un titre et,
facultativement, un contenu.

Equipe POOA Page 5

ISET Mahdia Atelier Programmation Orientée Objet Avancée AU 2014/2015

La mise en place de l’interface graphique se fait comme d’habitude à l’aide de plusieurs

panneaux et layout managers qui sont décrits par la figure suivante :

Afin de permettre à l’arbre et aux contenus textuels de grandir sans déborder on prendra soin
de ne pas poser ces composants directement sur les panneaux qui les supportent, mais de les
ajouter à des objets JScrollPane, eux-mêmes posés sur les panneaux en question.

Equipe POOA Page 6