TP : éléments pour créer une IHM en JAVA Objectif : découvrir les grands principes pour créer une interface convivial entre l utilisateur et la machine (Interface-Homme-Machine :IHM) par une initiation à la programmation objet en utilisant les composants de la librairie Swing. Environnement : nous utiliserons la proglet javaprog de javascool I) Préambule- créer mes premières fenêtres. Java est un langage orienté objet POO. On crée différents objets à partir d une définition. Analogie : La définition du chien dans l'encyclopédie, c'est ta classe. 3 chiens qui se baladent dans la rue, ce sont 3 instances de la classe, 3 objets. Autre analogie : Une classe c'est le modèle de quelque chose que nous voulons construire. Par exemple, on crée un plan de construction d'une maison qui réunit les instructions destinée à la construction. Mais le plan n'est pas une maison. La maison est un objet qui a été instancié à partir de la classe(le plan). A partir du plan ( la classe ) on peut construire une autre maison ( l'objet ). En bref, la classe c'est le modèle, et un objet c'est une instance. Nous allons voir différentes classes permettant d utiliser une interface en JAVA. Programmer une fenêtre d'interface, c'est : Construire la fenêtre et tous les composants (components) qu'elle contient. Tout est objet au sens de Java. Programmer les comportements des composants en fonction des actions de l'utilisateur : o clics de souris o mouvements de souris o frappes de clavier. o etc. L'ensemble des outils qui permettent de programmer une interface utilisateur est appelé un toolkit (boîte à outils). Java propose plusieurs toolkits graphiques : Swing : pour le graphisme AWT : pour la gestion des événements pour les boutons. Pour commencer, vous importerez la bibliothèque des objets pour la construction d une interface graphique. Cette librairie (package) est une extension de la librairie java.awt.* élaborée lors de la 1 ère version de java : import javax.swing.*; La classe qui représente les fenêtres est la classe JFrame. Pour créer une fenêtre avec un titre, on utilise un constructeur qui prend en unique paramètre un objet String. // déclaration (création) d un OBJET de la CLASSE JFrame appelé mafenetre : JFrame String = new JFrame(); 1 ) Recopier le code ci-dessous : import javax.swing.*; void dessine_interface() { // on déclare (création) un OBJET de la CLASSE JFrame appelé mafenetre JFrame fenetre = new JFrame("ma première fenêtre"); // On centre la fenêtre sur l écran f.setlocationrelativeto(null); // On éditera ci-dessous les caractéristiques de la fenêtre.. void main(){ dessine_interface(); Compiler, exécuter. Qu observer-vous?
Donner vie à votre fenêtre Pour construire nos objets, nous allons utiliser des fonctions, appelées méthodes, disponibles dans les classes. Syntaxe pour appliquer une méthode à un objet : on saisit : nom_de_l objet.nom_de_la_méthode 1 ) Pour rendre la fenêtre visible on applique la méthode setvisible() à l'objet fenetre en lui passant comme paramètre un booléen de valeur true : fenetre.setvisible(true); 2 ) Le constructeur de la CLASSE JFrame dispose d'une METHODE : setsize(largeur,hauteur)... Pour connaître toutes les METHODES de la classe JFRAME aller voir lien API Swing dans l aide de la proglet. a) définir la taille de la fenêtre 250 X 200 b) définir le texte dans la barre de titre " ma première fenêtre" Barre de titre conteneur Comment créer un composant dans la zone conteneur de la fenêtre? Pour chacun des composants ci-dessous défini, vous testerez dans la fenêtre pour observer l apparence. Par exemple, un texte : On peut ajouter des composants (zone de texte, des boîtes, des boutons.) dans la zone conteneur de la fenêtre. Pour obtenir, on utilise la méthode getcontentpane de la classe JFrame. Pour ajouter ces composants au conteneur, on utilise la méthode add : // déclaration (création) d un OBJET (une zone de texte) de la CLASSE JLabel appelé Panel1 : JLabel label1 = new JLabel("Hello world"); // accessibilité à la zone conteneur et ajout du composant label1 dans le conteneur fenetre.getcontentpane().add(label1) ; Le constructeur de la CLASSE JComponent dont hérite la classe JLabel dispose d'une METHODE permettant de modifier la couleur du texte setforeground(color)... Voir doc API Swing setbackground(color) Importer la classe java.awt.* qui permettra de gérer les dimensions et les couleurs puis modifiez la couleur du texte Color.green, modifier la couleur du conteneur : fenetre.getcontentpane().setbackground(color.green) par exemple.
II) Disposition des composants dans le conteneur : les boîtes. Maintenant, on voudrait construire une fenêtre avec une import javax.swing.*; grande zone de texte en haut, une petite zone de texte en import java.awt.* ; bas avec un bouton juste à côté. void dessine_interface (){ // création et paramétrisation de la fenêtre //Création du bouton envoyer //Création de la zone de texte pour taper son message avec pour // dimension 250*150 // création de la boîte horizontale // ajout des composants dans la boîte horizontale Vous recopierez le code ci-contre dans la proglet javaprog que l on complètera au fur et à mesure des indications. // création de la boîte verticale // création de la grande zone de texte avec le message // non modifiable de taille 250*150 // ajout des composants dans la boîte verticale // on met le tout dans la fenêtre et on l affiche void main () { dessine_interface() ; Dans la classe Swing, on a des conteneurs spéciaux qui permettent de gérer la disposition des composants : les boîtes de la classe Box. // création d une boîte horizontale nommée bleue: Box bleue=box.createhorizontalbox() ; // création d une boîte verticale nommée rouge: Box rouge=box.createverticalbox() ; 1 ère étape : créer une boite verticale nommée main // création de la boîte verticale Box main = Box.createVerticalBox() ; Construction de l interface 2 ième étape : créer une boîte horizontale nommée bottom // création de la boîte horizontale Box bottom = Box.createHorizontalBox() ; Imbrication des conteneurs Par exemple, la boîte Box main va contenir deux composants : Une grande zone de texte : JTextArea textearea La boîte Box bottom contenant deux composants : - Une zone de texte sur une ligne : JTextField text - Un bouton JButton send
1 er composant de la boîte verticale : zone de texte 3 ième étape : créer une grande zone de texte dans le 1 er composant de la boîte verticale // création de la zone la grande zone de texte nommée textarea voir le paragraphe IV) JTextArea 4 ième étape : : insérer cette grande zone de texte dans le 1 er composant de la boîte verticale // insertion de la zone de texte avec la méthode add main.add(textarea) ; 5 ième étape : créer une zone de texte sur une ligne nommée text // création de la zone de texte nommée text voir le paragraphe IV) JTextField 6 ième étape : créer un bouton «simple» nommée send // création du bouton nommé text voir le paragraphe IV) Jbutton 7 ième étape : insérer ces composants dans la boîte horizontale // insertion de la zone de texte avec la méthode add bottom.add(text) ; bottom.add(send) ; 8 ième étape : insérer cette boîte horizontale dans la boîte verticale // insertion de la boîte horizontale dans le 2 ième composant main.add(bottom) ; 2 ième composant de la boîte verticale : boîte horizontale Le constructeur de la CLASSE JComponent d'une METHODE permettant de modifier la couleur d un composant setbackground(color)... Voir doc API Swing Vous pourrez modifier la couleur du bouton, la couleur de la zone de texte. Testez!!!!!! Vous avez du remarquer qu un clic sur le bouton envoyer n a pour le moment aucun effet. Dans la suite, nous allons apprendre à mettre en place un gestionnaire d évènement permettant d obtenir un effet suite à un clic. III) Comment associer une action au bouton? Pour le moment, un clic sur le bouton n a aucun effet. Nous allons apprendre à lui associer un évènement. 1 ) Importer la classe évènement : import java.awt.event.*; 2 ) Mise en place du gestionnaire d événements : a) Dans la fonction dessine_interface, on déclare l événement associé au bouton : // setactioncommand permet d'associer au bouton send un texte qui sera envoyé au gestionnaire d'évènement. send.setactioncommand("appui envoyer effectué") ; // addactioncommand permet d associer au bouton send le gestionnaire d événement nommé appuibouton send.addactionlistener(appuibouton); Implémenter cette méthode. b) Un gestionnaire d événement est implémenté hors de toute fonction et du programme principal. Il est définit ainsi : un «écouteur» qui permet d alerter en cas de clic sur le bouton et si tel est le cas suivit d une «action». ActionListener appuibouton = new ActionListener() { public void actionperformed (ActionEvent e) { if(e.getactioncommand().equals("appui sur envoyer effectué ")) { action à effectuer ; // fin actionperformed() ; // fin ActionListener() Méthode JTextField.setText(String) Rôle Affecte un texte à la zone de texte JTextField Compléter le code précédent de telle sorte qu un clic sur envoyer efface le texte de la zone de texte text, c est-à-dire que l on obtient un texte vide.
IV) Référentiel de bibliothèques de composants essentiels : Pour dimensionner chacun des composants suivants, on dispose d une METHODE : setpreferredsize permettant de définir les dimensions. Une zone de texte : - «Simple» zone de texte sur une ligne // déclaration (création) d un OBJET (une zone de texte) de la CLASSE JTextField appelé nom : JTextField nom = new JTextField(); // définition des dimensions de cette zone de texte nom. setpreferred(new Dimension(250,50) ; // accessibilité à la zone conteneur et ajout du composant label1 dans le conteneur fenetre.getcontentpane().add(nom) ; - Zone de texte avec possibilité d écrire plus d une ligne de texte // déclaration (création) d un OBJET (une zone de texte) de la CLASSE JTextArea appelé parloir : JTextArea parloir = new JTextArea("ma mamie est en short"); // accessibilité à la zone conteneur et ajout du composant label1 dans le conteneur fenetre.getcontentpane().add(parloir) ; Pour afficher un texte dans la zone non modifiable au clavier, on utilise la METHODE : seteditable prenant pour paramètre un booléen : // affichage définitif du message dans la zone de texte parloir parloir.seteditable(false) ; La valeur true permettra à l utilisateur de modifier le message affiché. Etiquette : la classe JLabel Une étiquette (ou label en anglais) est une zone permettant d afficher du texte non modifiable par l utilisateur. On peut paramétrer l alignement de cette zone en utilisant des constantes de la classe SwingConstants LEFT : Aligner le composant à gauche CENTER : Centrer le composant RIGHT : Aligner le composant à droite import javax.swing.*; void dessine_interface() { // on déclare (création) un OBJET de la CLASSE JFrame appelé mafenetre JFrame fenetre = new JFrame("ma première fenêtre"); // création du JLabel JLabel prévision = new JLabel("Nuageux", SwingConstants.RIGHT) ; fenetre.getcontentpane().add(prévision) ; // On édite les caractéristiques de la fenêtre fenetre.setsize(250,200) ; fenetre.setvisible(true) ; void main(){ dessine_interface(); Boutons : De nombreux boutons différents sont disponibles pour les clics. Ils sont représentés par les classes JButton, JCheckBox et JRadioButton. JCheckBox bouton1 = new JCheckBox("S abonner") ; JRadioButton bouton2 = new JRadioButton("Masculin") ; JButton bouton3 = new JButton("valider") ;
Remarque : La méthode settooltiptext(string) permet d afficher un message par passage de la souris sur le composant : bouton3.settooltiptext("pas super") // affiche le texte pas super par passage sur le bouton3. La méthode setbounds(int x, int y, int h, int l) permet de placer le composant sur la fenêtre en indiquant la position (x ;y) du coin supérieur gauche et les dimmensions h*l bouton3.setbounds(42, 20, 100, 180) // positionnement et dimensions du bouton3. Vous pourrez tester les boutons de chaque sorte dans la fenêtre précédente pour voir à quoi ça ressemble : Listes Différentes listes sont disponibles : listes déroulantes et les listes «normale». Elles sont représentées par les classes JComboBox et JList. Créer une suite de listes de chaque sorte dans la fenêtre précédente pour voir à quoi ça ressemble : String[] colors = {"rouge", "vert", "bleu", "cyan", "jaune", "magenta") ; JComboBox couleur = new JComboBox(colors) ; String[] préférences = {"informatique", "jardinage", "automobile", "bricolage", "shopping", "lecture", "voyage ") ; JList preference = new JList(preference) ; Pour aller plus loin Bouton et image Nous avons utilisé le constructeur JButton(string) qui permet de préciser le texte du bouton. Il est possible de coller une image et/ou du texte sur un bouton avec les constructeurs JButton(Icon) et JButton(String, Icon) Télécharger l image gif http://www.maxi-gif.com/gif-anime/informatique/informatique-imprimante-00003.gif que vous enregistrerez dans le répertoire de javascool que vous nommerez : imprimante.gif. // On déclare une image ImageIcon appelé imprimante Icon imprimante = new ImageIcon("imprimante.gif"); // On crée le Bouton JButton appelé Action JButton Action = new JButton("imprimer", iprimante); Revenir à la configuration du 5 ) et modifier l aspect du bouton. Groupe de boutons radio // On déclare le groupe de ces 3 boutons ButtonGroup group = new ButtonGroup(); // On déclare chacun des boutons Radio et on l ajoute au groupe JRadioButton button1 = new JRadioButton("choix 1"); group.add(button1) ; button1.setactioncommand("appui sur choix 1"); // Le bouton Choix 1 sera initialement sélectionné button1.setselected(true); JRadioButton button2 = new JRadioButton("choix 2"); group.add(button2) ; button2.setactioncommand( appui sur choix 2"); JRadioButton button3 = new JRadioButton("choix 3"); group.add(button2) ; button3.setactioncommand("appui sur choix 3");