Programmation graphique en java 1. Introduction Généralement on peut distinguer deux catégories de programmes en se basant sur leur interface avec F'utilisateur : «Les programmes a interfaces console + Les programmes a interfaces graphiques (Graphical User Interface GUI) La gestion des interfaces graphiques est integrée dans java qui offre des outils robustes de gestion des interfaces graphiques. Le package de base pour la gestion des interfaces est le package AWT(Abstract Windows Toolkit). Apres plusieurs années, le langage java s'est vu adjoindre de nouveaux gestionnaire interface, 4 commencer par Swing par Sun, aussi SWT du projet Eclipse et autres ... Les deux biblioth@ques AWT et Swing sont tous les deux fournis en standard dans le JDK et ont des syntaxes assez proches ce qui les permettent de se remplacer. Swing plus récent que AWT est également plus optimisé, et donc plus rapide. De plus, étant le remplacant officiel d’AWT, il est donc encore amélioré avec les nouvelles versions de java. Tous les éléments de Swing font partie du package javaxswing. Il. Méthode d’utilisation du Swing, La procédure 4 suivre pour utiliser un composant swing est identique 4 celle des composants de la bibliotheque AWT : 1) Créer le composant en appelant son constructeur (instancier Ia classe du composant). 2) Appeler les méthodes du composant si nécessaire pour le personnaliser. 3) Ajouter le composant dans un conteneur. 4) Afficher le conteneurSwing et awt se basent sur les mémes fondements mais different sur l'utilisation de ces fondements ce qui explique le fait qu'il n’est pas recommandé de les mélangé dans une meme interface. IIL. Les principaux éléments de Swing 3.1 La classe JComponent La plupart des composants graphiques offerts par Swing sont des classes filles de la classe abstraite Component qui contient plusieurs méthodes dont les principales sont: Méthodes Roles Void disable) Désactive les composants Void sentenables(boolean etat) ‘Active les composants Void set Visible(boolean etat) Masque Fobjet Vois setBackground( Color c) Définit la couleur du premier plan Void setForeground(Color ¢) Définit la couleur du premier plan Void setFoni(Font f) Définit la police 3.2 Les éléments de swing Les principaux objets qui constituent les applications Swing sont : + Les conteneurs de haut niveau (comme une fenétre ou un cadre,...) * es conteneurs de bas niveau (composante pouvant contenir d'autres composantes) mais Iui méme contenu dans une fenétre comme les panneaux (panel) par exemple. + Les controles graphiques tels que les boutons (JButton), les champs textuels (TextField), les listes(JList). "Les gestionnaires de disposition (layout managers) qui aide a organiser tous ces boutons et champs dans un panneau. En général, on crée dans un programme une instance de JPanel et on tui affecte un gestionnaire de disposition. Ensuite, on peut créer des controles graphiques etJes ajouter au panneau, Enfin on ajoute le panneau au cadre, on fixe les dimensions du cadre et on le rend visible. 3.3. Les conteneurs de haut niveau Les conteneurs sont des composants graphiques qui peuvent contenir d'autres. (Frame Cette classe se situe, comme beaucoup d’autres, dans le package javax.swing. Les méthodes les plus utiles de la classe JFrame sont les suivantes : © Constructeurs utiles de 1a classe JFrame ~ JFrame() crée une nouvelle fenétre initialement invisible. - JFrame(String) crée une nouvelle fenétre initialement invisible avec un titre specifi. Pour insérer des composants dans une fenétre (une instance de la classe JFrame), il faut utiliser un panneau de contenu (contentPane) : les composants insérés ne sont pas ajoutés directement au JFrame mais A objet contentPane qui lui est associé. C'est aussi a ce Pane qu'il faut associer un layout manager si nécessaire. Le conteneur JFrame est le plus utilisé pour construire des interfaces graphiques Exemple JFrame fenetre = new JFrame(); + Méthodes utiles de la classe JFrame - getContentPane() retourne le contentPane de la fenétre. - add(Component ¢) ajoute un composant au ContentPane de la fenétre. ~ setJMenuBar(JMenuBar menu) attribue un Menu a cette fenétre. ~ setLayout(LayoutManager lay) attribue un Layout qui doit étre utilise par le contentPane. = setVisible(boolean) affiche ou fait disparaitre la fenetre (remplace les méthodes show() et hide() qui sont dépréciées). ~ sefTitle(String) attribue un titre a la fenétre. ~ setSize(int, int) attribue des dimensions a la fenétre.Une JFrame [Dialog Ce composant est utilisé pour afficher des boites de dialogues et pour toutes les interactions avec le systéme(le traitement des messages d’erreur), les boites 4 outils pour créer des composants ete.... JFrame est utilisée plutét comme fenétre principale de application, Voici les différents constructeurs de la classe JDialog: * JDialog () crée une JDialog non modale, sans titre et sans parent + JDialog(Dialog, String boolean) crée une JDialog modale ou non, avec titre et parent *¢ JDialog(Frame,String boolean) crée une JDialog modale ou non, avec titre et parent Message Une fenétre de type JDialog Window Cest un cas particulier de fenétre. Cela resemble a une JFrame sans bordure. Cette fenétre n’est ni redimensionnable ni déplacable par l'utilisateur. Il n’existe pas non plus de bouton systéme de fermeture de application,Une simple JWindow 3.4 Les conteneurs intermédiaires JPanel, Cest un conteneur sans fenétre propre (un panneau), il est utile pour ordonner d'autres composants. L’aspect graphique d’un JPanel est réduit au strict minimum, il peut étre percu comme un rectangle, parfois méme invisible graphiquement, dans lequel on ajoute des composants. On n’est pas obligé de créer un nouveau JPanel, on peut réutiliser le JPanel définit par défaut du JFrame en utilisant la méthode getContentPane( ) qui permet d/avoir acces a ce dernier. L/ajout d’un composant dans un JPanel se fait par le biais de la méthode add(...). Exemple JPanel pl = new JPanel(); [TabbedPane Ce conteneur permet d'afficher plusieurs panneaux qui partagent tous le meme espace (graphique). L’accts a chaque panneau se fait par le biais d’onglets le plus souvent situés en haut du conteneur. Quelques méthodes : * JTabbedPane() : crée un TabbedPane vide par défaut + JTabbedPane(int tabPlacement) : spécifie le placement des onglets © JTabbedPane-TOP + JTabbedPane.BOTTOM * JTabbedPane.LEFT | JTabbedPane.RIGHT On peut ensuite créer les onglets un a un a aide de la méthode addTab()JTabbedPane monPanneau = new JTabbedPane(); JPanel pani = new JPanel(new BorderLayout()); JPanel pan2 = new JPanel(new BorderLayout()); monPanneau.addTab('Onglet 1", pan); monPanneau.addTab("Onglet 2", pan?) getContentPane().add(monPanneau); aut |[ Compoment _]} sbstraite aN aw [Container ae a ON fonotra do base = is cnteneur de bas Windovs | awt Panel | nivesu standard de 7 ant a ~~ ot owt Applet | at Frame Dialog | | Jwindow pple | ang | owing Frame | [UDialos Jepplet Feneire stg Swng normale figure 8 las contanaure de haut nivaau La figure ci-dessus montre la hiérarchie des classes de conteneurs de haut niveau dont celles de swing, 3.5 Les contrbles graphiques Les composants Swing sont des objets visibles dans une interface graphique Swing. Pratiquement tous ces composants dérivent de la classe javax.swing.JComponent. Nous allons évoquer dans ce qui suit les libellés, les boutons, les zones de saisie, les listes, + Les Labels Lorsque vous réaliser une application graphique, il est important d’y ajouter suffisamument de libellés afin de faciliter Vergonomie de cette dernigre. Vous devrez pour cela utiliser la classe JLabel qui est I'un des composants Swing les plus simples.Il permet d’afficher du texte, des icones, ou les deux, et cela dans n'importe quelle position. Voici un descriptif des méthodes les plus employées : * JLabel() Crée un libellé sans image et avec une chaine vide pour titre * JLabel(Icon) Crée un libellé avec une image * JLabel(String) Crée un libellé avec du texte + setlcon(Icon) Permet de spécifier ou de remplacer a tout moment l'image du libelle + sefText(String) Permet de spécifier le texte pour le label Si vous souhaitez ajouter une image dans votre JLabel, vous devrez utiliser la classe Imagelcon en spécifiant dans le constructeur le chemin vers Vimage Gif Imagelcon(String filename) + JButton Cest un bouton poussoir classique trés simple. Tout ce que nous savons sur JLabel Sapplique 4 un JButton. De plus on peut ajouter des listeners (ActionListener pour capturer les événements. Méthodes et classes de base : + JButton() Crée un bouton sans image et sans texte + JButton(Icon) Crée un bouton avec une image + JButton(String) Crée un bouton avec un texte + setlcon(Icon icon) Permet de spécifier ou de remplacer a tout moment l'image du bouton + setPressedicon(Icon) Permet de spécifier une image lorsque le bouton est pressé # getText() Recupere Ie texte du bouton © setText(String) Permet de spécifier le texte pour le bouton « addActionListener(ActionListener) Ajouter le bouton a un ActionListener « setEnabled(boolean) Activer / Désactiver le Bouton * JCheckbox Crest une case a cocher, on peut ajouter un libellé a se composant directement lors de sa création afin de rendre plus explicite son utilisation. Il faut pour cela utiliser le constructeur suivant : JCheckBox("Ma case a coché"). * JRadioButtonCest un bouton radio. Il s‘utilise comme la classe JCheckBox mais permet de spécifier qu'il n'y a qu'un seul choix possible parmi toutes les propositions offertes par l'interface graphique. + JTextField Ce composant est I'un des plus simple a utiliser pour la saisie de données, il ne permet de saisir q’une seule ligne de texte et ne prend pas en compte des styles (gras, italique . * JTextField() : Crée un champ de saisie vide * JTextField(String text) : Crée un champ de saisie avec un texte par défaut ‘* getText() :Si vous souhaitez récupérer le contenu du champ de saisie, il vous faudra utiliser cette méthode qui retournera un objet de pe String, + JPasswordField Ce composant permet de créer un champ pour la saisie des mots de passe. Il s‘utilise de la méme manitre que le composant précédent mais lorsque vous saisissez un caractére, celui-ci est remplacé par le caractére par défaut ”. Ce dernier peut étre remplacé a Yaide de la méthode setEchoChar{char) Remarque: la méthode getText() de ce composant est 4 dépourvoir. Il faut utiliser la méthode getPassword() qui retourne un tableau de caractéres (char [). Voici un exemple JPasswordField monChamp = new JPasswordField() ; monChamp.setEchoChar(“") ; // pour remplacer* par - char{] resultat = monChamp.getPassword(); String conversionResultat = new String(resultat) ; + JTextArea Crest un composant semblable au JTextField car il permet a Iutilisateur de saisir du texte mais ce composant permet d'afficher plusieurs lignes de texte. Les constructeurs © JTextArea (String text) * JTextArea (String text, int rows, int columns) ILest aussi possible d’ajouter du texte grace aux méthodes suivantes : «append String text) : Ajout d'une chaine a la fin du doument.* insert(String text, int position) : Ajout d’une chaine a une position donnée. « setText(String text) : Remplace tout le texte par la chaine + JComboBox Ce composant représente une liste déroulante, dans laquelle l'utilisateur peut choisir un seul élément a la fois. Voici la liste des différents constructeurs de cette classe : + JComboBox() : crée une comboBox avec un modéle par défaut + JComboBox(Object{ }) : crée une comboBox qui contient les éléments d'un tableau ‘¢ JComboBox(ComboBoxModel) : crée une comboBox qui contient les éléments d'un modale Ia liste des méthodes les plus utilisées pour ce composant : # additem(Object) : ajoute un objet a la liste © getSelectedIndex() : retourne T'index (int) correspondant a la sélection * getSelecteditem( : retourne F objet correspondant a la sélection # insertitemAt(Object, int) : insere un objet a Yemplacement spécifié (index) * removeltemAt(int) : supprime un objet de la liste a partir de son index + setEditable(boolean) : rendre éditable ou non la comboBox + setEnabled(boolean) : activer / désactiver le composant «JTable Le composant JTable permet d’afficher des tables de données, en permettant éventuellement | édition de ces données. Exemple de JTable: Last Wame | __Sport___]# of Vears Snomboerding Rowing (chasing tod: Spwed road Pour pouvoir ensuite afficher la table il est préférable d’ utiliser Vinterface Scrollable implémentée par JTable. JScrollPane sp = new JScrollPane(table);+ Exemple JFrame fenetre = new JFrame(); JPanel p1 = new JPanel(); JPanel p2= new JPanel(); JButton bOk JButton bAfficher = new JButton(“ Afficher”); JButton bAnnuler = new JButton(“Annuler”); pladd(bOw); pLadd(bAfficher); pLadd(bAnnuler); JLabel INom = new JLabel(’”Nom'"); JTextField t Nom= new JTextField(’’Mettez le nom’ ); p2.add(INom); p2.add(tNom); new JButton(“ok’); fenetre.getContentPane().add(pl); fenetse.getContentPane().add(p2); Voici une représentation en termes d’hiérarchie de l'ensemble des composants : 3 JButton TLabel ; \ / = PI GPanel) 2 (JPanel) 3.6 Les gestionnaires de disposition (layout manager) Pour mettre en forme les composantes dans une fenétre, on utilise un Objet :e gestionnaire de disposition ou le layout manager. Cet objet est associé a-un container qui se charge de gérer la disposition des composantes graphiques a Vintérieur du container. lexiste plusieurs gestionnaires de mise en forme standards 10+ FlowLayout (présentation en file) * GridLayout (présentation en grille) + BoxLayout (présentation en lignes ou colonnes) * BorderLayout (présentation avec bordures) + CardLayout (présentation en pile) + GridBagLayout (présentation en grille composite) * SpringLayout (présentation avec resorts) Pour utiliser un gestionnaire de disposition, un programme doit I'instancier puis affecter cet objet @ un conteneur (container), par exemple a un panneau. methode setLayout (new TypeLayout() ) Pour ajouter ensuite des composantes au container, on appelle la methode add(....) Exemplel: JPanel Pp new JPanel(); P.setLayout ( new FlowLayout 0 % padd( new JButton ( . bouton 1 : Ds padd( new JButton ( . bouton 2 : ys paadd( new JButton ( " bouton » p.add( new JButton (" bouton 4"); .... Exemple2: jouter Prenant pour tout ce qui suit exemple d’une calculatrice simple qui permet d' deux nombres etdlafficher le résultat. 3.6.1 Le FlowLayout Dans cette présentation, les composants sont disposés dans la fenétre ligne par ligne. Par exemple, les libellés, les champs textuels et les boutons sont ajoutés & la premiére ligne imaginaire tant qu'il y reste de la place. Quand la ligne courante est pleine, on passe a la ligne suivante. Si un utilisateur retaille la fenétre, il risque de désorganiser_ son apparence. eas u3.6.2 Le GridLayout Ce gestionnaire de disposition permet d'organiser les composants en lignes et en colonnes dans une grille. Tu vas ajouter les composants a des cellules imaginaires de cette grille. Si les dimensions de I'écran sont modifiées, les cellules de la grille peuvent changer de taille, mais les positions relatives des composants de la fenétre ne changent pas. Notre calculatrice a sept composants - trois libellés, trois champs textuels et un bouton. Nous pouvons les organiser selon une grille de quatre lignes sur deux colonnes (il reste une cellule vide) : Exemple Complet: public class GrilleCalculatriceSimple { public static void main(String[] args) { // Crée un panneau JPanel contenuFenétre = new JPanel(); // Affecte un gestionnaire de présentation a ce panneau GridLayout disposition = new GridLayout(4,2); contenuFenétre.setLayout disposition); // Crée les controles en mémoire JLabel labell = new JLabel(" JTextField entréel = new JTextField(10); JLabel label2 = new JLabel("Nombre 2 :"); JTextField entrée2 = new JTextField(10); JLabel label3 = new JLabel("Somme :"); JTextField résultat = new JTextField(10); jombre 1 :" JButton lancer = new JButton(" Ajouter"); // Ajoute les contréles au panneau contenuFenétre.add(labell); contenuFenétre.add(entréel); contenuFenétre.add(label2); contenuFenétre.add(entrée2); contenuFenétre.add(label3); contenuFenétre.add(résultat);contenuFenétre.add(lancer); // Crée le cadre et y ajoute le panneau JFrame cadre = new JFrame("Ma premiere calculatrice"); cadre.setContentPane(contenuFenétre); // Affecte ses dimensions a la fenétre et la rend visible cadre.setSize(400,100); cadre.set Visible(true); } } En exécutant le programme GrilleCalculatriceSimple, tu obtiens ceci : emia 3.63 Le BorderLayout LeBorderLayout partage la fenétre en cing zones ‘South (sud), West (ouest), North (nord), East (est) et Center (centre). La région North est toujours en haut de la fenétre, la région South en bas ; la région West est a gauche et la région East a droite. NORTH WEST CENTER EAST SOUTH Par exemple, dans la calculatrice, le champ textuel qui affiche les nombres est situé dans la zone North, Voici comment créer une disposition BorderLayout et y placer un champ textuel : BorderLayout disposit n= new BorderLayout(); this.setLayoutManager(disposition);JTextField affichageTexte = new JTextField(20); this.add("North*, affichageTexte); Tu n’es pas obligé de mettre des controles graphiques dans chacune des cing zones. Si tu n'as besoin que des régions North, Center, et South, la région Center sera plus large, car tu ne vas pas utiliser les régions East et West. 3.6.4 Combiner les gestionnaires de disposition Est-ce que le gestionnaire GridLayout va nous permette de créer une fenétre de calculatrice qui ressemble a celle de Microsoft Windows ? | eed Tdtion AfFchage 7 Le) a Malheureusement, non, parce que les cellules de cette calculatrice sont de tailles différentes. le champ textuel est plus large que les boutons, par exemple. Mais tu peux combiner les gestionnaires de disposition en utilisant des panneaux qui ont chacun leur propre gestionnaire de disposition. Pour combiner les gestionnaires de disposition dans notre nouvelle calculatrice, procédons comme suit : * Affecte une disposition BorderLayout au panneau de contenu, + Ajoute un JTextField a la région North de l'écran pour afficher les nombres. + Crée un panneau pl avec la présentation GridLayout, ajoute-lui 20 boutons et ajoute pl a la région Center du panneau de contenu. * Cxée un panneau p2 avec la présentation GridLayout, ajoute-lui 4 boutons et ajoute p2 a la région West du panneau de contenu. Commencons avec une version un peu plus simple de la calculatrice qui ressemblera Aceci: 42 Calculatrice 3.6.5 BoxLayout Le BoxLayout permet de disposer de multiples composants soit horizontalement (selon laxe des X) ou verticalement (selon I'axe des Y). Contrairement au gestionnaire FlowLayout, les controles ne changent pas de ligne quand la fenétre est retaillée. Avec BoxLayout, les controles peuvent avoir des tailles différentes (ce qui n'est pas possible avec GridLayout). Les deux lignes de code suivantes mettent en place une présentation de type BoxLayout avec un alignement vertical dans-un JPanel. JPanel panneauChiffres = new JPanel0; setLayoul(new BoxLayout(panneauChiffres, BoxLayout.Y_AXIS)); 3.6.6 GridBagLayout La disposition GridBagLayout est une grille évoluée, qui permet d'avoir des cellules de tailles différentes. La classe GridBagLayout fonctionne en collaboration avec la classe GridBagConstraints (contraintes de la grille. Les contraintes ne sont rien d'autre que des attributs de la cellule, que tu dois positioner pour chaque cellule séparément. Toutes les contraintes d'une cellule doivent étre positionnées avant de placer un composant dans la cellule. Par exemple, Yun des attributs de contrainte est appelé gridwidth. Il permet de rendre une cellule aussi large que plusieurs autres. Quand tu travailles avec une présentation en grille composite, tu dois d'abord créer une instance de lobjet contrainte puis donner une valeur a ses propriétés. Une fois ceci fait, tu peux ajouter le composant a la cellule dans ton conteneur. 3.6.7 CardLayout Imagine une pile de cartes posées les unes sur les autres, de tele sorte qu'on ne puisse voir complétement que la carte du dessus. Le gestionnaire CardLayout permet de créer un composant qui resemble a-un classeur a onglets. 15Quand tu cliques sur un onglet, le contenu de Vécran change. En fait, tous les Panneaux nécessaires a cet écran sont déja pré chargés et se trouvent les uns au- dessus des autres. Quand Vutilisateur clique sur un onglet, le programme se contente de “mettre cette carte" au-dessus et rend les autres cartes invisibles. 3.6.8 SpringLayout Le gestionnaire de disposition a ressorts est inspiré de véritables ressorts et tringles. Imagine que tu aies un paquet de crochets, ressorts et tringles et que tu doives fixer nos boutons et champs textuels aux bordures de la fenétre. Les composants attachés par des tringles ne peuvent pas bouger et changeront de taille si tu agrandis la fenétre, mais ceux attachés par des ressorts pourront s'écarter du bord. Les 6carts entre composants sont définis par les propriétés des ressorts(minimum, maximum, taille preférée et taille réelle). Ces paramétres sont spécifiés dans l'instance de SpringLayout.Constraints associée & chaque composant. C'est un peu comme pour le GridBagLayout. Au contraire du GridLayout, le SpringLayout te permet de gérer Ia disposition de composants de tailles différentes, tout en maintenant leurs positions relatives. 3.6.9 Puis-je créer des fenétres sans utiliser de gestionnaire de disposition ? On peut fixer les coordonnées dans V'écran de chaque composant lorsque onTajoute a Ja fenétre, Dans ce cas, la classe doit annoncer explicitement qu'elle n'utilisera pas de _gestionnaire de disposition. Nous utiliserons ce mot-clé null. Dans exemple suivant, il signifie quil n'y a pas de gestionnaire de disposition contenuFenétre.setLayout(null); IV. Les événements 4.1 Les événements ‘Au cours de son exécution, un programme peut étre confronté a divers événements (exemple : un utilisateur clique sur un bouton dans une fenétre) Pour réagir aux actions de Futilisateur, ton programme doit s‘enregistrer aupres des composants de la fenétre au moyen de classes Java appelées récepteurs (listeners). 16Par exemple, pour le cas de la calculatrice, ton programme devrait s‘enregistrer auprés des boutons de cette calculatrice en tant que récepteur ActionListener, qui peut traiter les clics surun bouton. Tous les récepteurs sont des interfaces Revenant a interface ActionListener, elle n'a qu'une seule méthode a implémenter : public void actionPerformed (ActionEvent e) Cest cette méthode qui va prendre en main toute la gestion des événements de notre fenétre, Tous les objets d’interface ont un attribut qui est actionCommand de type String et peut etre modifié par la méthode : void setActionCommand(String commande). Par exemple :binPlus set ActionCommand ("plus") ; Une fois cet attribut est défini, nous pouvons le récupérer tres facilement dans notre méthode actionPerformed. En effet, lobjet fourni en paramétre (ici ¢) posséde une méthode getActionCommand() qui renvoie la commande du bouton source de Yévénement. Exemple binPlus.addActionListener( this); btnPlus.setActionCommand("Plus"} this.add(b1); public void actionPerformed (ActionEvent e) {_ if (e.getActionCommand(.equals("plus")) { // Action a effectuer pour le cas de laddition } 4.2, Autres récepteurs d'événements ILy a dans le paquetage java.awt d'autres récepteurs Java quill faut connaitre : + Le récepteur dactivation (FocusListener) envoie un signal a ta classe quand un composant devient actif ou inactif. Par exemple, on dit qu'un champ textuel est actif silaun curseur clignotant. * Le récepteur de changement d’élément (ItemListener) réagit a la sélection éléments dans_ une liste ou une liste déroulante (combobox). 7* Le récepteur de touche (KeyListener) répond a la frappe des touches du clavier. * Le récepteur de souris (Mousel.istener) réagit si on clique sur la souris ou si le pointeur entre ou sort de la surface d'un composant de la fenetre. + Le récepteur de mouvement de souris (MouseMotionListener) indique les déplacements ou les glissements de la souris. Glisser (to drag) signifie déplacer la souris tout en maintenant son bouton enfoncé. * Le récepteur de fenétre (WindowListener) te prévient lorsque l'utilisateur ouvre, ferme, iconise ou active une fenétre. 18