You are on page 1of 55

Interface graphique en Java L2

Guillaume Wisniewski

guillaume.wisniewski@limsi.fr
LIMSI — CNRS

´ 9 fevrier 2009

G. Wisniewski (LIMSI — CNRS)

Interface graphique en Java L2

´ 9 fevrier 2009

1/1

` Premiere partie I Introduction

G. Wisniewski (LIMSI — CNRS)

Interface graphique en Java L2

´ 9 fevrier 2009

2/1

Remarque liminaire

´ ` un des grands avantages de Java : presence de bibliotheques ` ´ facilitant le developpement d’interface graphique multiplateforme des ` les premieres versions aujourd’hui : de moins en moins d’applications « natives »
tout se fait dans le navigateur (gmail, ...) interface graphique = ajax, flash, ... ˆ mais les principes sont les memes ´ java omnipresent pour les traitements sur les serveurs

G. Wisniewski (LIMSI — CNRS)

Interface graphique en Java L2

´ 9 fevrier 2009

3/1

Base de la programmation d’interface

Un nouveau type de programmes
´ ´ avant : deroulement du programme previsible ´ maintenant : reagir aux actions de l’utilisateur

` Bibliotheque Java standard
AWT (Abstract Windowing Toolkit) : premier paquetage graphique, ´ ancien, mieux supporte ( ?). ´ ´ ´ SWING Base sur AWT, plus recent, mieux optimise, plus riche (plus de widgets), plus beau !

G. Wisniewski (LIMSI — CNRS)

Interface graphique en Java L2

´ 9 fevrier 2009

4/1

SWING : les concepts

´ Realiser une interface graphique fait intervenir plusieurs composants (toujours des classes) Swing : top-level : c’est la racine de l’application graphique ( JFrame ,

JDialog ou JApplet ) ;
´ conteneurs intermediaires : ils contiennent d’autres composants et structurent l’application graphique ( JPanel , JScrollPane , JSplitPane , JToolBar , ...) ; composants atomiques : JButton , JList , JLabel , JMenu , ... ` ´ layout-managers : ils servent a decrire le placement des composants ´ ´ ` evenements : ils permettent d’associer un traitement a une action

G. Wisniewski (LIMSI — CNRS)

Interface graphique en Java L2

´ 9 fevrier 2009

5/1

fen.` Une premiere application import javax.swing.setVisible(true). } } G. e e fen. fen. public class PremFen { public static void main (String args[]) { JFrame fen = new JFrame().150).setTitle("Ma premi`re fenˆtre !").*.setSize(300. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 6/1 .

´ Resultat G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 7/1 .

this. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 8/1 .setSize(300.` ´ Deuxieme methode import javax.150). } G.setTitle("Ma seconde fenetre !"). class MaFenetre extends JFrame { public MaFenetre() { this.setVisible(true) . } } public class PremFen2 { public static void main (String args[]) { JFrame fen = new MaFenetre() . fen.swing.*.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 9/1 .` Deuxieme partie II ´ ´ Evenements G.

´ ´ Les evenements ´ caracteristique principale d’une interface graphique ´ ´ ´´ objets generalement crees par des composants atomiques qu’on ˆ aura introduit dans la fenetre (boutons.) ı ´ ´ Les evenements font entrer en relation deux types d’objets : ´ ` ´ ´ les sources : ce sont les objets ayant donne naissance a l’evenement ˆ (bouton... fenetre. .) ´ ´ les ecouteurs : ce sont des objets associes aux sources dont la ´ ` ´ classe implemente une interface correspondant a une categorie ´ ´ d’evenements G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 10 / 1 . boˆtes de dialogue. . menus...

celui-ci devient une source ´ ´ ` la source notifie l’evenement de type XxxEvent a l’ensemble des ´ ´ ecouteurs qui se sont enregistres 2 3 G.´ ´ Les evenements : utilisation 1 ´ ` ´ les ecouteurs s’enregistrent aupres d’un composant par la methode ´ de addXxxListener (methode du composant) l’utilisateur agit sur un composant . Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 11 / 1 .

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 12 / 1 . ´ ´ ´ ` la classe d’evenements liee a la souris est MouseEvent ´ ´ l’interface MouseListener que l’ecouteur doit implementer comporte ´ ` ´ ´ cinq methodes correspondant chacune a un evenement particulier : ´ mousePressed (bouton presse sur un composant) ´ mouseReleased (bouton relache sur un composant) mouseEntered (la souris entre dans un composant) mouseExited (la souris sort d’un composant) ´ mouseClicked (bouton clique sur un composant) ´ ´ ` ´ ces methodes sont appelees par la source des que l’utilisateur realise l’action correspondante G.´ ´ ˆ Un premier evenement : clic dans une fenetre (1/3) ´ ` Nous souhaitons ecrire un message a chaque fois qu’un clic survient dans ˆ notre fenetre : ˆ ˆ la source est la fenetre elle-meme .

G.setSize(300.println("Clic dans la fenetre !"). // enregistre l’´couteur e ´ // ici une mˆme classe est source et ecouteur e this.event.150).addMouseListener(this). class MaFenetre extends JFrame implements MouseListener { public MaFenetre() { this.out.En pratique I import javax.*. this. import java.setTitle("Gestion des clics").*.swing. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 13 / 1 .awt. } public void mouseClicked (MouseEvent ev) { // gestion du clic System.

En pratique II } // m´thode vide (interface) e public void mousePressed (MouseEvent public void mouseReleased(MouseEvent public void mouseEntered (MouseEvent public void mouseExited (MouseEvent } public class Clic { public static void main (String args[]) { JFrame fen = new MaFenetre().setVisible(true). } } G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 14 / 1 ev) ev) ev) ev) {} {} {} {} . fen.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 15 / 1 .println("clic " + ev. G.getY()).´ Resultat Remarques : ´ ´ autre methode : creer un objet ObjetEcouteur et en passer la ´ ´ ` ´ reference a la methode AddMouseListener ´ ´ les evenements ont des attributs : System.out.getX() + " " + ev.

l’adaptateur est XxxAdapter ´ si on veut comme dans l’exemple que la classe soit aussi l’ecouteur il faudra utiliser une classe anonyme class MaFenetre extends JFrame { // ... Pour faciliter les choses. // . } }) .´ Ecouteurs/adaptateurs ` ´ ´ ´ Avoir a implementer toutes les methodes de l’interface dans l’ecouteur ` n’est pas toujours tres pratique.... addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent ev) { //. JAVA dispose toujours d’une classe qui ´ ´ ´ implemente toutes les methodes d’une interface donnee avec un corps vide : l’adaptateur pour XxxEvent . Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 16 / 1 . } G..

` Troisieme partie III ˆ Organisation d’une fenetre G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 17 / 1 .

G.` Ou placer les composants ? (1/2) ˆ fenetre = ensemble de composants (boutons.) comment organiser tous ces composants ? les composants top-level (comme JFrame) possedent une barre de menu et un contenu (le content-pane de type Container) qui contient tous les composants visibles ´ ´ ´ ` La methode getContentPane donne la reference au contenu ou on ´ pourra ajouter un composant avec la methode add .. zone de texte. . barre de menu.. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 18 / 1 .

` Ou placer les composants ? (2/2) ˆ ´ ´ La disposition des composants dans une fenetre est geree par un gestionnaire de mise en forme (le layout-manager) ` ´ il en existe plusieurs utilisant des regles specifiques pour disposer les composants . G. il faut appliquer la methode setLayout ` ˆ a l’objet contenu de la fenetre : pour utiliser par exemple FlowLayout (affichant les composants comme les mots d’un texte) on peut invoquer getContentPane(). ´ par defaut Java utilise BorderLayout avec lequel en l’absence ˆ d’informations un composant occupe toute la fenetre ´ pour choisir un gestionnaire. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 19 / 1 .setLayout(new FlowLayout()).

Conteneur graphique ´ ´ pour creer des interfaces « complexes » : hierarchie de conteneur ´ chaque conteneur represente un ensemble de composants chaque conteneur a son propre layout manager G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 20 / 1 .

container1. container2. 0.add(component2).setVisible(true). container2. JTextField component1 = new JTextField("component1"). G. container2.add(component3). Container container1 = frame. container1.add(container2).add(component1). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 21 / 1 . JPanel container2 = new JPanel(). JCheckBox component2 = new JCheckBox("component2"). frame. frame.pack(). 200)). JButton component3 = new JButton("component3").getContentPane().Code correspondant JFrame frame = new JFrame("Example JFrame").setBackground(new Color(0.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 22 / 1 .` Quatrieme partie IV Composants G.

G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 23 / 1 .Premier composant : le bouton ´ Pour utiliser un composant bouton il s’agˆt tout d’abord de le creer et de le ı placer : ´ on cree un objet bouton en utilisant le constructeur de la classe ` JButton a qui on donne le label du bouton : JButton monBouton = new JButton("Un bouton"). contenu. on indique comment disposer ce bouton avec le gestionnaire de mise en forme de notre choix : getContentPane().setLayout(new FlowLayout()).add(monBouton). ˆ ´ ´ on place ce bouton dans le contenu de la fenetre en recuperant une ´ ´ ´ reference vers ce contenu et en ajoutant le bouton avec la methode add : Container contenu = getContentPane().

setSize(300.getContentPane(). this.setLayout(new FlowLayout()).monBouton = new JButton("Un bouton"). this.getContentPane().150) .swing. import java. class FenBouton1 extends JFrame { private JButton monBouton. public FenBouton1() { this.awt. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 24 / 1 . } G.add(monBouton).*.Code complet I import javax. this. this.*.setTitle("Premier bouton").

Code complet II } public class Bouton1 { public static void main (String args[]) { JFrame fen = new FenBouton1(). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 25 / 1 . } } G.setVisible(true). fen.

´ Resultat ce bouton ne fait rien ´ ´ utiliser l’evenement Action : ´ ´ ´ creer un ecouteur qui sera un objet d’une classe implementant l’interface ActionListener ´ ´ associer cet ecouteur au bouton par la methode addActionListener G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 26 / 1 .

addActionListener(this). this. this. this.getContentPane().add(monBouton).*. import java.monBouton = new JButton("Un bouton").´ ´ Bouton avec evenements I import javax.setTitle("Second bouton"). this. import java. this. public FenBouton2() { this.setSize(300.getContentPane().event.awt. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 27 / 1 . 150).*.monBouton. class FenBouton2 extends JFrame implements ActionListener { private JButton monBouton.swing.*. G.setLayout(new FlowLayout()).awt.

setVisible(true).out. } } G. } } public class Bouton2 { public static void main (String args[]) { JFrame fen = new FenBouton2().println("action sur monBouton"). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 28 / 1 .´ ´ Bouton avec evenements II } public void actionPerformed (ActionEvent ev) { System. fen.

´ Resultat G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 29 / 1 .

en general plusieurs ˆ ˆ composants du meme type (p.ex.´ Gerer plusieurs composants ` Le probleme ˆ ´ ´ fenetre = ensemble de composants . une fenetre avec deux boutons) ´ ` comment attacher un comportement different a chacun des composants Les deux solutions 1 ` ´ ´ routage « a priori » : classe ecouteur differente pour chaque composant 2 ` ´ routage « a posteriori » : methode getSource qui fournit une ´ ´ ´ ´ ´ ´ reference sur l’objet ayant declenche l’evenement ⇒ permet ´ d’identifier l’emetteur G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 30 / 1 .

*.setLayout(new FlowLayout()). G.setTitle("Deux boutons").setSize(300.150). import java. import java. class FenBouton3 extends JFrame implements ActionListener { private JButton bouton1.swing. this.getContentPane().awt.bouton1 = new JButton("Bouton 1").En pratique I import javax. private JButton bouton2. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 31 / 1 . public FenBouton3() { this.awt. this. this. this.*.bouton2 = new JButton("Bouton 2").event.*.

bouton1.bouton1) { // Ou encore // if (ev.out.addActionListener(this).En pratique II this. } } } G.addActionListener(this). } public void actionPerformed (ActionEvent ev) { if (ev. this.add(bouton1). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 32 / 1 .println("action sur bouton2") .add(bouton2).getContentPane(). } else { System. this.getSource() == this.println("action sur bouton1").bouton2. this.getContentPane().out.getActionCommand() == "Bouton 1") System.

En pratique III public class Bouton3 { public static void main (String args[]) { JFrame fen = new FenBouton3(). fen.setVisible(true). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 33 / 1 . } } G.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 34 / 1 .´ Resultat G.

Les composants (1) G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 35 / 1 .

Les composants (2) G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 36 / 1 .

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 37 / 1 .Les composants (3) G.

` Cinquieme partie V Dessin G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 38 / 1 .

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 39 / 1 .Base du dessin en Java ´ possibilite de dessiner n’importe quel composant en utilisant des fonctions de dessin ´ ` ´ pour eviter que le dessin ne disparaisse apres un reaffichage de la ˆ ` ´ fenetre (par exemple apres un deplacement) il faut le placer dans une ´ ` ´ methode particuliere du composant appelee paintComponent pas indispensable. mais c’est le plus pratique G.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 40 / 1 . textes.´ Creation d’un panneau ˆ ´ ` Un panneau est un conteneur : il doit etre attache a un autre conteneur ˆ (par exemple le contenu de la fenetre) et peut contenir soit d’autres conteneurs.) ´ par defaut un panneau n’a pas de bordure et sa couleur est celle du conteneur (il est invisible) on peut utiliser sa methode setBackground recevant un objet de type Color ´ comme les composants... soit des composants atomiques (boutons. il s’attache au contenu par la methode add G.

public FenPanneau1() { this.swing.setTitle("Premier panneau"). } } G. import java. this.150). this.awt.setBackground(Color. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 41 / 1 .monPanneau = new JPanel(). class FenPanneau1 extends JFrame { private JPanel monPanneau.getContentPane(). this. this.*.*.setSize(300.add(monPanneau).Exemple I import javax.monPanneau.yellow).

setVisible(true). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 42 / 1 . } } G.Exemple II public class Panneau1 { public static void main (String args[]) { JFrame fen = new FenPanneau1(). fen.

Dessin dans un panneau ´ ´ Pour creer un dessin permanent dans un composant.) ´ La methode paintComponent de Jpanel dessinait le composant. G. il ´ ´ est necessaire de l’appeler avant de realiser ses propres dessins par super.paintComponent(g). il faut redefinir sa ´ methode paintComponent ´ ´ ´ redefinition d’une methode de JPanel ⇒ heriter de Jpanel ´ ` ´ methode a redefinir : public void paintComponent (Graphics g) argument = contexte graphique ´ ` CG dispose des methodes de dessin et des parametres courants (police. couleur de fond. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 43 / 1 . etc.

*.drawLine(15. } } class FenPanneau2 extends JFrame { private Panneau monPanneau.paintComponent(g).awt. class Panneau extends JPanel { public void paintComponent(Graphics g) { super.swing.En pratique I import javax. g.50). import java.10. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 44 / 1 .*.100. G.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 45 / 1 .En pratique II public FenPanneau2() { this.setVisible(true). } } public class Panneau2 { public static void main (String args[]) { JFrame fen = new FenPanneau2().monPanneau = new Panneau().150) .setBackground(Color. getContentPane(). this.monPanneau.setSize(300. } G. this.add(monPanneau).setTitle("Second panneau"). this. fen.yellow).

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 46 / 1 .En pratique III } G.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 47 / 1 .Forcer le dessin ´ ` Pour changer un dessin en cours d’execution il faudra forcer l’appel a paintComponent ` ´ ` c’est l’appel a la methode repaint qui force l’appel a paintComponent ´ ´ la methode paintComponent devra reagir en fonction du contexte ` ´ ` Pour dessiner a la volee (au fur et a mesure des actions de l’utilisateur) : ´ la permanence des dessins n’est plus assuree ´ ´ ` il faut recuperer le contexte graphique du composant a redessinner ˆ ` ´ grace a la methode getGraphics ´ ´ il faudra liberer les ressources occupees par le contexte graphique ´ par la methode dispose G.

rectangle = false. G. class Panneau extends JPanel { private boolean rectangle.*.*.*.rectangle = true. private boolean ovale.ovale = false. import java.swing. import java. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 48 / 1 . } public void setRectangle() { this.awt. this.awt. public Panneau() { this.event.Forcer le dessin : exemple I import javax.

paintComponent(g).60). } G.120.ovale) { g. // Dessin en fonction du contexte if (this.20. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 49 / 1 .ovale = true.drawOval(80.ovale = false. } public void setOvale() { this.Forcer le dessin : exemple II this. } public void paintComponent(Graphics g) { // Appel de la fonction de la m`re e super. this.rectangle = false.

G.20.drawRect(80. private JButton ovale .Forcer le dessin : exemple III if (this. this.setTitle("Troisieme panneau").170). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 50 / 1 .setSize(300.rectangle) { g.60).120. private JButton rectangle. public FenPanneau3() { this. } } } class FenPanneau3 extends JFrame implements ActionListener { private Panneau monPanneau.

"South"). this. contenu.ovale. this.monPanneau = new Panneau().addActionListener(this).ovale = new JButton("Ovale").Forcer le dessin : exemple IV Container contenu = getContentPane().addActionListener(this). this.add(monPanneau). Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 51 / 1 . contenu.rectangle. } public void actionPerformed(ActionEvent ev) { G. this."North"). contenu.add(ovale.add(rectangle. this.rectangle = new JButton("Rectangle").

Forcer le dessin : exemple V if (ev.repaint().getSource() == ovale) { this. } if (ev.setRectangle(). } this. } } public class Panneau3 { G.monPanneau.monPanneau. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 52 / 1 .setOvale().getSource() == rectangle) { this.monPanneau.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 53 / 1 .setVisible(true) .Forcer le dessin : exemple VI public static void main (String args[]) { JFrame fen = new FenPanneau3(). fen. } } G.

Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 54 / 1 .´ Resultat G.

drawPolygon. x2. y1. hauteur. diamh. hauteur) meme chose que pour le rectangle mais dessine un ovale . y. ˆ drawOval(x. drawRect(x. y2) trace une ligne. G. Wisniewski (LIMSI — CNRS) Interface graphique en Java L2 ´ 9 fevrier 2009 55 / 1 . y. hauteur) trace un rectangle. largeur.´ Quelques methodes de dessin ` ´ drawLine(x1. diamv) ` trace un rectangle aux bords arrondis. y. drawRoundRect(x. largeur. drawPolyLine etc. les parametres etant ´ les coordonnees des deux sommets . les deux ` ´ ´ premier parametres sont les coordonnees du coin superieur gauche . les deux derniers parametres ` sont le diametre horizontal et vertical de l’arc aux quatre coins et aussi drawArc. largeur.