Interface Homme-Machine Travaux pratiques Séance 1 : Introduction Java / Swing / JBuilder Pluquet Frédéric 15 octobre 2004 1 Introduction 1.1 L assistant Pluquet Frédéric, Téléphone : 02/650.56.01, Email : fpluquet@ulb.ac.be Adresse bureau : ULB - Campus de la plaine, Boulevard du Triomphe, Bâtiment NO, Bureau 2.N8.217 1.2 Les Tps 15 heures de TP, réparties sur 5 séances (de 3 heures chacune). L horaire est le suivant : 14/10/03 : Introduction Java / Swing / JBuilder 28/10/03 : Gestion événementielle + Layout managers 04/11/03 : Dessins et graphes d états 25/11/03 : Composants évolués (JTree, JTable,...) + remise du projet 09/12/03 : Réponses aux questions sur le projet + exercices divers L examen sera en janvier et constitué de 2 parties : théorie (1h15) + pratique (2h30). La pratique est semblable au projet, l implémentation en moins projet = préparation à la seconde partie de l examen et comptabilisé pour la note finale. 2 Java et Swing 2.1 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 1
(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 : 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