Interface Homme-Machine Travaux pratiques Séance 1

Interface Homme-Machine
Travaux pratiques
Séance 1 : Introduction Java / Swing / JBuilder
Pluquet Frédéric
24 février 2005
1
Introduction
1.1
L’assistant
Pluquet Frédéric,
Téléphone : 02/650.56.01,
Email : [email protected]
Adresse bureau :
ULB - Campus de la plaine,
Boulevard du Triomphe,
Bâtiment NO,
Bureau 2.N8.217
2
2.1
Java et Swing
Swing
Depuis la version 2 de Java, Swing fait partie intégrante du langage. Swing
se présente comme une librairie Java pour faire des Graphical User Interface
(GUI). Swing va donc nous permettre de constuire la plus parpart des interfaces
que l’on retrouve dans les applications actuelles. Cette librairie est une suite de
classes, structurée sous forme d’une hiérarchie de divers éléments :
1
Hierarchie de Swing (http ://www.holub.com/goodies/java.swing.html)
Il faut savoir que Swing est basée sur une librairie plus ancienne, AWT.
Celle-ci permet d’avoir les éléments de base (non évolués) d’une interface graphique.
Un très bon tutoriel (en anglais) est disponible en ligne sur le site de sun :
http ://java.sun.com/docs/books/tutorial/uiswing/
2
Java voit, de manière simplifiée, une fenêtre comme ceci :
titre
JFrame
menu bar (optionnel)
Content Pane
Commençons directement par une approche de Swing. Nous allons étudier
une première application, version création d’un objet du type JFrame (Essai1.java)
import java.awt.∗;
import javax.swing.∗;
public class Essai1 {
public static void main(String[] argv) {
JFrame f = new JFrame(”titre de la frame”);
f . setSize (100,100);
f . setVisible (true);
}
}
Listing 1 – <Essai1.java>
Maintenant passons à une seconde application, qui est une version avec
héritage de la classe JFrame (Essai2.java). Remarquez la différence entre les 2
codes sources.
2.2
JBuilder
Afin de simplifier la conception d’interfaces graphiques en Java, nous allors utiliser un outil assez bien conçu : JBuilder de Borland. Celui-ci offre au
programmeur différents moyens d’accélérer le développement d’une application.
Vous pouvez télécharger JBuilder à l’adresse suivante :
http ://www.borland.com/jbuilder/personal/
3
import java.awt.∗;
import javax.swing.∗;
public class Essai2 extends JFrame {
public static void main(String[] argv) {
JFrame f = new Essai2(”titre de la frame”);
}
public Essai2(String title ) {
super(title );
this. setSize (100,100);
this. setVisible (true);
}
}
Listing 2 – <Essai2.java>
2.2.1
L’éditeur de code
L’éditeur de code vous permet, comme son nom l’indique, d’éditer votre
code source mais avec l’aide d’outils très intéressants :
– Colorisation du code : différentes couleurs pour les chaı̂nes de caractères,
les entiers, les mots clés, ... pour une visualisation plus aisée du code
source ;
– Auto-complémentation du code : grâce à la combinaison des touches
CTRL et ESPACE, JBuilder vous aide à finir le code que vous tapez.
Cela permet de gagner du temps. Prenez-en l’habitude !
– Représentation graphique de la structure du code source : dans le cadre
inférieur gauche, un arbre reprend les composants de votre code source. Un
clic sur un élément de l’arbre permet d’arriver directement à la déclaration
de cet élément dans le code.
Exercice :
Encodez les deux exemples de code présentés ci-dessus dans deux fichiers
différents(chaque fichier doit s’appeler comme le nom de la classe publique qu’il
définit) et compilez-les l’un après l’autre.
2.2.2
L’éditeur d’interface
Lorsque vous programmez un container graphique (JFrame,JPanel,...),
vous pouvez visualiser celui-ci grâce à l’onglet ”Conception” situé en bas de
l’éditeur de code.
Cet éditeur graphique vous permet de créer très vite une interface complexe
sans taper une seule ligne de code.
Sur la partie haute, l’éditeur graphique affiche tous les composants que l’on
peut ajouter au container. Il suffit alors de sélectionner l’un de ceux-ci (en
cliquant une fois dessus) et de cliquer ensuite sur le container à l’endroit
voulu pour que le composant soit ajouté à votre container.
4
Le panneau sur le côté droit possède deux onglets dans le bas. L’onglet
”Propriétés” permet de voir les propriétés de l’objet sélectionné dans le cadre
central. L’onglet ”Événements” permet quant à lui de voir tous les événements
attachés à cet objet.
2.2.3
La dualité
Il est bon de remarquer que lorsque l’on fait un changement dans l’éditeur
graphique, le code Java correspondant dans l’éditeur de code a été mis à jour
automatiquement. C’est également le cas dans le sens contraire.
Cette totale dualité entre le code source et sa représentation graphique permet un très grand contrôle de votre application et du résultat attendu.
2.2.4
L’aide
À tout moment, vous pouvez appuyer sur la touche ”F1” de votre clavier
pour qu’une aide sur l’objet que vous êtes en train de manipuler(classe Java
dans le code source, objets dans l’éditeur graphique, propriétés d’un objet graphique,événements,...) apparaisse.
2.2.5
Les layouts
Tout container possède un layout particulier. Le layout d’un container
est une manière de disposer les objets que le container va contenir.
Il en existe plusieurs mais nous les verrons en détail la séance prochaine.
Pour aujourd’hui, veuillez utiliser le layout XYlayout qui permet de placer
soi-même les composants à une position (X,Y) (d’où son nom :)). Vous allez
donc gérer vous-même le rendu de votre interface.
Exercice : On voudrait avoir un programme qui permette d’entrer une certaine somme d’argent en francs belges et qui nous donne l’équivalence en euros
et inversément. (1 euro = 40.3399 FB)
Une fois l’application terminée, essayez d’ajouter un menu ”Convertir” contenant 2 sous-menus : ”Convertir en Euros” et ”Convertir en FB”. Essayez de
mettre des JPanel pour rendre votre application plus visuelle.
5