Université d’Ibn Khaldoun – Tiaret 3ième année LMD

Faculté des Mathématiques et d’Informatique Module : Interface Homme-Machine

Département d’Informatique Semestre 05

TP1 : première fenêtre SWING

Objectifs :
Créer une première fenêtre SWING
Mettre en œuvre bonnes pratiques avec Eclipse
Modifier la taille, le titre, le positionnement sur l’écran
Optimiser le code afin de rendre l’application plus maintenable et plus évolutif

Marche à suivre :
1. Création du projet
A partir d’Eclipse, menu File->New->Java Project.
donnez le nom ’TPInterface’ au projet. Laisser les autres options par défaut.
Cliquez sur bouton ’Finish’. L’écran suivant apparaît.
Reste à créer un package dans lequel la classe principale du projet sera créée.

2. Création du package
Cliquer droit sur le répertoire ’src’
Menu New->package .
- donnez comme nom de package ’com.IHM.TPInterface’
Le package est créé. reste à créer le classe principale : celle contenant la méthode main()

3. Création de la classe principale de l’application

Cliquer droit sur le package
Menu New-> Class
Donnez un nom ’MaPremiereFenetre’ à la classe
Sélectionnez la case à cocher permettant de faire de cette classe la classe principale (celle permettant de lancer l’application). Le squelette de
la classe apparaît.
Reste à coder le contenu de la méthode main(). C’est en effet ce contenu qui sera exécuté ligne après ligne lors du lancement de l’application.
C’est dans cette méthode main() que nous allons créer la fenêtre de notre application.

4. Numérotation lignes et ’TODO’ list

Avant de coder, nous allons préparer de bonnes conditions de développement :
1) numéroter les lignes de code
2) commenter les taches à réaliser (TODO = ’à faire’ en anglais) dans le code AVANT de coder ces taches.
3) travailler avec la vue ’Tasks’ (taches) d’Eclipse
Numéroter les lignes de code
Cliquer droit sur le bord proche du code. Sélectionner menu ’Show Line numbers’
1/3
Commenter les taches
Remplacer le texte à la droite de TODO par la première tache : instancier la fenêtre.
Ajouter une deuxième tache, consistant à rendre visible la fenêtre
Ajouter une troisième tache, consistant à centrer la fenêtre

La vue ’tasks’ va ensuite nous permettre d’avoir en un lieu unique l’ensemble des TODO (utile en particulier si plusieurs TODO dans
plusieurs fichiers de code différents).
Activer la vue ’Tasks’ Eclipse
Menu window->Show View
Choisir vue Tasks, qui apparaît désormais parmis vos vues.
En double-cliquant sur une des taches, Eclipse vous amène directement sur la partie du code source ou la tache est déclarée.
Cela est vrai pour la tache de création de la fenêtre comme celle de rendre visible la fenêtre et l’autre qui permet de centre notre fenêtre.

5. Création de la fenêtre
La création de la fenêtre se fait en une seule ligne : JFrame maFenetre1 = new JFrame();
Notez la valeur ajoutée de la combinaison de commande CTRL + ESPACE (ici par exemple juste après le ’e’ de Frame)

6. Rendre visible la fenêtre + lancement application

Par défaut, la fenêtre JFrame n’est pas visible. Pour la rendre visible, vous allez modifier sa propriété de visibilité, et cela à travers une
méthode dédiée : setVisible(boolean v) :
maFenetre1.setVisible(true);
Les deux taches nécessaires sont réalisées. Reste à lancer le programme

7. Lancer l’application
Sélectionner la classe principale de l’application.
Cliquer sur le bouton ’run’ du menu
La fenêtre s’affiche...en petit, en haut à gauche de l’écran.
Nous avons créés notre première fenêtre SWING
NOTE : vous pouvez par défaut manuellement modifier la taille de la fenêtre.
REMARQUE : il n’y a pas de ’titre’ sur la fenêtre.
Nous allons par la suite utiliser d’autres méthodes fournies par la classe JFrame, et permettant de gérer la taille de la fenêtre et son
placement.

8. Modifier d’autres attributs de la fenêtre

A travers la javadoc, vous allez mettre en oeuvre les méthodes suivantes de la classe JFrame :
— setSize(int width, int height)
— setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
— setTitle(String title)
— setResizable(boolean resizable)

Maintenant : créez une fenêtre ayant les caractéristiques suivantes :

— de hauteur 300 px et largeur 400 px,
— avec un titre ’ma première fenêtre SWING’
— centré sur l’écran

2/3
REMARQUE : vous rendez la fenêtre visible après avoir effectué les modifications nécessaires.
maFenetre1.setSize(400, 300);
maFenetre1.setResizable(false);
maFenetre1.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
maFenetre1.setLocationRelativeTo(null);
Après lancement de l’application, vous devriez obtenir votre fenêtre placée au centre de l’écran

9. Positionner la fenêtre sur l’écran

Vous ne souhaitez désormais pas que votre fenêtre se place au démarrage au centre de votre écran mais plutôt dans un endroit bien défini
(par exemple y= 145 et y = 500
Ajoutez dans le code de la fenêtre la ligne de code suivante :
maFenetre1.setLocation(145, 500);

10. Optimisation / Refactoring

L’implémentation de la fenêtre ci-dessus fonctionne mais la conception n’est pas recommandée : l’application n’est pas modulaire.
Ce que nous allons faire
2 choses :
1) Dans un package spécifique (com.IHM.TPInterface.Fenetres) , nous allons créer une classe maFenetre2 dans laquelle le constructeur
servira à initialiser les principales propriétés de la fenêtre.
2) Nous allons créer une nouvelle classe LancerMaFenetre2 qui servira à lancer la classe maFenêtre2, et cela à travers une méthode main()
sera beaucoup plus ’légère’ que la méthode main() de la classe maFenetre1.
Créer un package com.IHM.TPInterface.Fenetres
Créer une classe maFenetre2 héritant de JFrame
INFO : c’est à travers le bouton ’Browse’ associé au champs ’superClass’ de la maFenetre2 que vous pouvez aller chercher la classe dont va
hériter maFenetre2.
Coder le constructeur de maFenetre2 :
setTitle("ma première fenêtre avec swing");
setSize(300, 400);
setResizable(false);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setLocationRelativeTo(null);
Maintenant, créer une classe LancerMaFenetre2 possédant une méthode main() , et qui servira à lancer la classe maFenetre2. Comme
précédemment, avant de coder, il est bon de préciser les taches à faire :
— Instancier la fenêtre
— Afficher la fenêtre
La différence est que ici la fenêtre ne sera pas un JFrame , mais notre classe maFenetre2 !
Pour la première tache, commencer à déclarer un type maFenetre2. Eclipse met une croix rouge précisant qu’il ne connait pas de type
maFenetre2. Faites un CTRL + ESPACE et il ajoutera tout seul l’instruction ’import’ (voir ligne 3).
IL y a ensuite toujours une croix due au fait que la syntaxe de la ligne de code n’est pas bonne ...normal vous n’avez pas terminé de coder
votre instruction d’instanciation.
Ajouter le code permettant de rendre visible la fenêtre.

Reste à lancer l’application. Pour cela, sélectionner la classe LancerMaFenetre2 et cliquer sur le bouton ’run’ (Ou bien cliquer droit Run As
/ Java Application)

3/3