TP 1 : Construction d’interfaces graphiques

Jean-Baptiste.Vioix@u-bourgogne.fr

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 dechanger d’exercice au fur et à mesure de la scéance même si vous n’avez pas finivotre 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 surun 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’imagesComme cet exercice est le premier du module, vous allez créer un nouvel es-

pace de travail. Lancez Eclipse (menu Applications->Programmation). La fenêtrede configuration de l’espace de travail apparaît après quelques secondes, créez unnouvel espace de travail (ici InterfacesGraphiques).

FIG. 1 – Création d’un nouvel espace de travail

1.1 But du TPCe 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émentsOuvrir, 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 laforme 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 estaffiché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 lesfichiers sources (*.java) et les fichiers compilés (*.class) ne seront pas dans le mêmeré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 votreprojet (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 jpanelpuis CTRL+ESPACE (Eclipse remplace jpanel par javax.swing.JPanel). Cochezla case qui permet d’ajouter une méthode main, ainsi vous pourrez tester votrepanneau 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éessont 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êtreet la barre de menus à la fenêtre (setJMenuBar). N’oubliez pas que la méthode mainappartient à 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 auNord. Les icônes sont disponibles dans le répertoire commun. Copiez les dans lerépertoire racine de votre projet pour pouvoir les utiliser (le répertoire parent desrc et bin). Puis, dans l’explorateur de projet, cliquez sur le bouton droit et cliquezsur “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 placezun 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 ListeurFichierprésente dans le répertoire commun permet de construirela liste des fichiers images présents dans un répertoire. La méthode ConstruireListadmet un paramètre en entrée de la forme String : le répertoire à explorer. La listeest 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. Seulsl’ascenceur vertical doit apparaitre quand il est nécessaire. L’ascenceur horizontalne 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 centrede votre application. Le panneau séparable doit pouvoir être réplié dans une direc-tion en un clic.

2 Construction d’un logiciel de dessin2.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 (regardezdans les détails dans la documentation de Java).

– Les icônes sont disponibles dans le répertoire commun.

2.2 La fenêtre principaleLe 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