James Eagan, Serge Gadret, Simon Perrault{@class=people}
INF723 — TP du 15/11/2012 {@class=date}
Objectif du TP
Le but de ces travaux pratiques est d’aborder les concepts de la programmation des interfaces graphiques, notamment la mise en forme d’une interface et la programmation réactive. Afin de se familiariser avec ces concepts, on va créer une application permettante de calculer la conversion de monnaies.
Liens Utiles
Convertisseur de Monnaies
Nous allons créer un convertisseur de monnaies, permettant à un utilisateur de saisir une somme d’argent dans une monnaie (dinars, par exemple) et une taux d’échange vers une autre monnaie (c.f., euros). En saisissant ces deux valeurs, l’utilisateur peut calculer la valeur de cette somme dans l’autre monnaie. Il devrait aussi pouvoir réinitialiser l’interface avec les valeurs par défauts.
Concevoir l’Interface
Dans un premier temps, même avant de démarrer Eclipse (si vous l’avez déjà fait, vite, fermez-le ! ;-) ), on va penser à notre interface. Sortez une feuille de papier et une stylo. (Ou un cahier et crayon, si vous le préférez.) Dessinez sur papier l’interface que vous voulez créer. Quels sont les widgets dont vous aurez besoin ? Comment seront-ils organisés sur l’écran ? Essayez plusieurs configurations jusqu’à ce que vous en trouviez une qui vous plaît.
Maintenant, pensez à comment réaliser cette interface en Java. Est-ce que vous auriez besoin d’autres composants que les widgets que vous avez dessinés ? Quels layout managers allez-vous utiliser afin de réaliser cette interface ? Si vous avez du mal à imaginer comment faire ce genre d’interface avec les layout managers en Java, gardez cette design pour après et créez une version simplifiée.
Votre première fenêtre
Une fois votre interface conçue, on peut commencer à écrire du code. Créez un nouveau projet vide dans Eclipse et rajoutez une classe CurrencyConverter. Pour un simple projet comme ceci, on peut écrire notre méthode main directement dans cette classe. Bien entendu, dans un projet plus complexe, il y aura une autre classe qui se concernera de la création et utilisation de votre interface.
Pensons à la classe CurrencyConverter. Afin d’implementer votre design, quels attributs aura besoin cette classe ? Allons les rajouter dans la classe CurrencyConverter. Pour l’instant, on ne va pas se concerner d’accesseurs ou de mutateurs, ni de leurs instantiation.
Ecrivons le constructeur de la classe. On va commencer avec une simple squelette qui ne fera que créer une fenêtre et l’afficher à l’écran. N’oubliez qu’il ne suffit pas de créer une instance de la classe JFrame, il faut aussi la donner une taille et la faire apparaître sur l’écran. Quelle méthodes servent à faire cela ? Si l’on ne sait pas, on peut toujours consulter la documentation.
Assurez que la fenêtre ait la bonne dimension et apparaît sur l’écran avant de passer à la prochaine étape.
Créer les widgets
Une fenêtre seule, sans aucune widget dedans, est une fenêtre triste. Rajoutons des widgets. Pour les widgets identifiés là haut, créez une nouvelle instance. N’oublier pas les étiquettes là où il en faut. Pour l’instant, on va ignorer la fonctionnalité associé aux boutons, ça suffit de créer le bouton. On va rajouter des écouteurs tout à l’heure.
C’est ici la partie potentiellement un peu compliquée. Selon le design que vous avez choisi, vous auriez peut-être besoin de créer des panneaux intermédiaire. Ou pas. Rappelons que le content pane d’une fenêtre à par défaut un BorderLayout, mais un nouveau JPanel à par défaut un FlowLayout. Peut-être il faudrait changer l’un de ces layout managers. Encore, ça dépend le layout que vous voulez créer.
Une fois vous avez la bonne organisation de widgets sur l’écran, on peut procéder à la prochaine étape.
Ajouter des Listeners
On va ensuite rajouter de la fonctionnalité aux boutons. Pour faire cela, il faut rajouter des ActionListeners aux boutons. Rappelons qu’un action listener définie l’interface qui sera utilisée lors que l’utilisateur clic sur un bouton. Pour chaque bouton, créez une nouvelle classe qui implemente l’interface ActionListener et en rajoutez une instance au bouton.
Tester l’interface
Essayons de vérifier que l’interface fonctionne comme attendu. Si vous avez utilisé un champ de texte pour afficher le résultat, assurez bien que ce champ ne soit pas modifiable par l’utilisateur. (Pour faire cela, peut-être il y une méthode utile dans la classe JTextField.)
Améliorations Possibles
Dans cette exercice et dans le cours, nous avons créé une classe par méthode de rappel. Cette technique marche très bien, mais elle est aussi un peu verbose. Maintenant, on va remplacer ces classes avec des classes anonymes. Des classes anonymes sont des classes définie lors de leur utilisation, sans les donner de nom. Le syntaxe est donc un peu complexe, mais peut simplifier le logique de code. Voici en un exemple :
:::java
bouton.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
// faire qqc lors du clic ici
}
});
QED.
Voilà, vous avez créez votre première interface graphique. S’il vous en reste de temps, peut-être il y a des améliorations à faire dans le code. Est-ce que l’interface marche comme vous vouliez ? Que faudrait-il faire pour l’améliorer ? Explorez la documentation Java pour voir s’il y a d’autres widgets, d’autres LayoutManagers, ou autres méthodes qui pourrait en servir.
Après le TP, vous pourriez comparer votre solution à la mienne.