Interfaces Graphiques en Java Swing

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.