TP 1 : Construction d`interfaces graphiques

TP 1 : Construction d’interfaces graphiques
[email protected]
Les TPs sont individuels. A la demande de l’enseignant vous envoyez (par mail)
vos fichier *.java ainsi qu’un petit compte rendu expliquant ce que vous avez fait.
Lorsqu’un TP est composé de plusieurs exercices, l’enseignant vous demandera de
changer d’exercice au fur et à mesure de la scéance même si vous n’avez pas fini
votre exercice. Ainsi vous pourrez aborder toutes les notions présentées dans le sujet.
Pendant les scéances de TP, placez Eclipse sur l’un de vos bureau, OpenOffice sur
un autre et Firefox sur un troisième. Firefox vous permet de consulter (exclusivement !)
les pages de documentations de Sun : http ://java.sun.com/j2se/1.5.0/docs/api/
1 Construction d’un explorateur d’images
Comme cet exercice est le premier du module, vous allez créer un nouvel es-
pace de travail. Lancez Eclipse (menu Applications->Programmation). La fenêtre
de configuration de l’espace de travail apparaît après quelques secondes, créez un
nouvel espace de travail (ici InterfacesGraphiques).
FIG. 1 – Création d’un nouvel espace de travail
1.1 But du TP
Ce TP traite de la réalisation de l’interface graphique d’un visualisateur d’images.
Il propose une barre de menus composée du menu Fichier (composé des éléments
Ouvrir, Répertoire utilisateur et Quitter) et du menu Image (composé de Précédente,
Suivante et Informations). Une barre d’outils reprend les même fonctions sous la
forme d’icônes. L’interface est séparée en deux parties, à gauche, une liste pré-
sente l’ensemble des fichiers images dans un répertoire, à droite l’image choisie est
affichée.
1

FIG. 2 – L’interface graphique terminée
Créez un nouveau projet Java dans votre espace de travail. Dans le groupe
“Projet Layout” choisissez “Create separate source and output folders”. Ainsi les
fichiers sources (*.java) et les fichiers compilés (*.class) ne seront pas dans le même
répertoire.
FIG. 3 – Création d’un nouveau projet
Validez l’écran suivant avec le bouton “Finish”.
1.2 Création du menu et de la barre d’outils
Le panneau principal est un héritier de la classe JPanel. Eclipse peut géné-
rer le code lié à l’héritage automatiquement. Créez une nouvelle classe dans votre
projet (New->Class dans l’explorateur de projet). Donnez un nom à votre classe.
Pour spécifier la classe mère, placez vous dans la boite “Superclass” tapez jpanel
puis CTRL+ESPACE (Eclipse remplace jpanel par javax.swing.JPanel). Cochez
la case qui permet d’ajouter une méthode main, ainsi vous pourrez tester votre
panneau au fur et à mesure de sa construction. Validez avec Finish.
2

FIG. 4 – Création d’une nouvelle classe fille de JPanel
1.2.1 Création du menu
Dans un premier temps vous allez construire le menu. Les différentes entrées
sont présentées dans la section 1.1.
Lorsque vous ajoutez une classe qui n’est pas reconue, des vagues rouges appa-
raissent sous le texte ainsi qu’une ampoule à gauche du code :
si vous cliquez sur l’ampoule, Eclipse vous propose d’ajouter le bon paquet aux im-
portations. Placez toutes vos variables private. Pour tester la barre de menus,
construisez une fenêtre dans la méthode main, ajoutez votre panneau à la fenêtre
et la barre de menus à la fenêtre (setJMenuBar). N’oubliez pas que la méthode main
appartient à votre classe, donc la barre de menus est visible dans la méthode main.
1.2.2 Création de la barre d’outils
Construisez maintenant la barre d’outils dans votre panneau, elle est placée au
Nord. Les icônes sont disponibles dans le répertoire commun. Copiez les dans le
répertoire racine de votre projet pour pouvoir les utiliser (le répertoire parent de
src et bin). Puis, dans l’explorateur de projet, cliquez sur le bouton droit et cliquez
sur “Refresh”.
1.3 Création des panneaux internes
1.3.1 Création du panneau affichant l’image
Ajoutez un nouveau panneau à l’intérieur du premier. Dans ce panneau placez
un panneau à défilement dans lequel vous insérez une image. Configurez le pan-
neau défilant pour que les ascenseurs n’apparaissent que s’ils sont nécessaires.
Pour tester ce panneau, placez le à l’Est de votre fenêtre.
3

FIG. 5 – L’application en cours de construction
1.3.2 Création du panneau affichant la liste des fichiers
La classe ListeurFichier présente dans le répertoire commun permet de construire
la liste des fichiers images présents dans un répertoire. La méthode ConstruireList
admet un paramètre en entrée de la forme String : le répertoire à explorer. La liste
est renvoyée par la méthode getListeDesFichiers.
Comme précedement rajoutez un panneau à défilement dans votre panneau.
Dans ce panneau placez une liste qui affiche la liste des fichiers images. Seuls
l’ascenceur vertical doit apparaitre quand il est nécessaire. L’ascenceur horizontal
ne doit jamais apparaitre.
FIG. 6 – L’application en cours de construction
1.3.3 Utilisation d’un panneau séparé pour afficher les panneaux précedents
Créez un panneau séparable dans le premier panneau, placez les deux pan-
neaux construits précedement dedans et placez votre panneau séparable au centre
de votre application. Le panneau séparable doit pouvoir être réplié dans une direc-
tion en un clic.
2 Construction d’un logiciel de dessin
2.1 La boite de dialogue de réglage de la couleur
A partir d’une classe JDialog construisez la boite de dialogue de la figure 7.
4

FIG. 7 – Réglage de la couleur utilisée
Remarques :
– Un GridBagLayout est utilisé pour disposer les composants
– La zone colorée est un JPanel dont la couleur de fond a été configurée en uti-
lisant setBackground qui admet un objet Color comme paramètre (regardez
dans les détails dans la documentation de Java).
– Les icônes sont disponibles dans le répertoire commun.
2.2 La fenêtre principale
Le fenêtre principale de l’application comporte un menu et une barre d’outils. Le
menu est composé de trois menus : Fichier (Ouvrir, Enregistrer, Enregistrer sous...
et Quitter), Dessin (Couleur, Effacer, Droite, Cercle, Cercle rempli, Rectangle, Rec-
tangle rempli, Carré, Carrée rempli) et A propos (qui ne comprend pas d’élément).
FIG. 8 – La fenêtre principale de l’application
Remarques :
– Un GridBagLayout est utilisé pour disposer les composants
– La zone de dessin est un JPanel vide, pour dessiner dedans il suffit d’agrandir
la fenêtre.
– Vous pouvez séparer les éléments de menus de manière judicieuse avec des
séparateur, toute initiative utile est la bienvenue !
5