12janvier2015 ÉricGillonThomasRey LesInterfacesGraphiques

(1)

Les Interfaces Graphiques

Éric Gillon Thomas Rey

Lycée Marlioz

12 janvier 2015

(2)

Introduction

Nous avons vu précédemment comment créer des boîtes de dialogues, des fenêtres pour dessiner, . . .

Éric Gillon Thomas Rey Les Interfaces Graphiques

(3)

Introduction (suite)

Aujourd’hui, nous irons un peu plus loin et nous verrons comment créer des interfaces graphiques un peu plus elaborées :

comment placer des composants dans nos fenêtres ; comment faire réagir notre programme en fonction des boutons cliqués, des textes saisis, . . .

(4)

Sommaire

1 Les Layouts

2 Un exemple

3 Interaction avec l’utilisateur

4 Compléments

5 Conclusion

(5)

Les layouts

Un Layout (agent de placement) est une organisation

prédéfinie de notre fenêtre, une sorte de cadre vide constitué d’emplacements réservés que les programmeurs que nous sommes vont remplir avec les composants de notre interface graphique.

Il existe de nombreux types de Layouts. . .

(6)

Les Layouts Un exemple Interaction avec l’utilisateur Compléments Conclusion

Layouts : quelques exemples

Voici une liste (non exhaustive) de Layouts disponibles dans Java :

BorderLayout : que nous utiliserons aujourd’hui ;

onglets) ;

FlowLayout : composants les uns à la suite des autres ; GridLayout : place les composants dans un tableau de cellules de même taille ;

Un guide des différents Layouts est disponible ^{ici. . .}

(7)

Layouts : quelques exemples

BorderLayout : que nous utiliserons aujourd’hui ; BoxLayout : pour réaliser des alignements ;

(8)

Layouts : quelques exemples

CardLayout : pour des superpositions (type interface à onglets) ;

cellules de même taille ;

(9)

Layouts : quelques exemples

FlowLayout : composants les uns à la suite des autres ;

(10)

Layouts : quelques exemples

(11)

Layouts : quelques exemples

(12)

le BorderLayout

Ce Layout est constitué de cinq emplacements notés Nord, Sud, Est, Ouest, Centre :

(13)

Code Java

p u b l i c s t a t i c v o i d m a i n(S t r i n g[] a r g s) {

J F r a m e m a F e n e t r e = new J F r a m e() ;// C r é a t i o n f e n ê t r e J B u t t o n n o r d = new J B u t t o n("NORD") ;//

J B u t t o n sud = new J B u t t o n("SUD") ;// C r é a t i o n J B u t t o n est = new J B u t t o n("EST") ;// des J B u t t o n o u e s t = new J B u t t o n("OUEST") ;// b o u t o n s J B u t t o n c e n t r e = new J B u t t o n("CENTRE") ;

// p a r a m è t r e s de la f e n ê t r e :

m a F e n e t r e.s e t T i t l e(" D e s c r i p t i o n du B o r d e r L a y o u t ") ; m a F e n e t r e.s e t S i z e( 4 0 0 , 3 0 0 ) ;

m a F e n e t r e.s e t L a y o u t(new B o r d e r L a y o u t() ) ;// Def du L a y o u t m a F e n e t r e.add(nord,B o r d e r L a y o u t.N O R T H) ;// P l a c e m e n t m a F e n e t r e.add(sud,B o r d e r L a y o u t.S O U T H) ;// des m a F e n e t r e.add(est,B o r d e r L a y o u t.E A S T) ;// b o u t o n s m a F e n e t r e.add(ouest,B o r d e r L a y o u t.W E S T) ;// d a n s le m a F e n e t r e.add(centre,B o r d e r L a y o u t.C E N T E R) ;// L a y o u t m a F e n e t r e.s e t V i s i b l e(t r u e) ;}

(14)

Avantage d’un Layout

Un des principaux avantages est que le contenu s’adapte à la taille de la fenêtre. En redimensionnant la fenêtre, les

composants gardent la même disposition mais en s’adaptant à la nouvelle forme. . .

(15)

Inconvénients d’un Layout

L’utilisation d’un Layout oblige le programmeur à « penser » (c’est-à-dire avec du papier et un crayon) sa fenêtre avant de se lancer dans le code du programme !

Rappel : un (bon) programmeur commence avec un papier et un crayon !

À propos du projet ISN : le schéma de votre interface dessiné

« à la main » peut (doit) faire partie de votre dossier à présenter. . .

(16)

Sommaire

1 Les Layouts

2 Un exemple

4 Compléments

5 Conclusion

(17)

La balle qui tombe

Dans la suite de ce diaporama, nous allons essayer de créer une application qui ressemble à la fenêtre ci-dessous :

(18)

La balle qui tombe : détails

Utilisation d’un BorderLayout avec :

Nord, Sud et Est : vides ; Centre : un JPanel qui contient l’image de la balle ; Ouest : un JPanel qui est organisé par un BoxLayout (alignement vertical).

(19)

La balle qui tombe : le code Java

J F r a m e f e n e t r e = new J F r a m e() ;

P a n n e a u D e s s i n p a n n e a u D = new P a n n e a u D e s s i n() ;// la c l a s s e P a n n e a u D e s s i n c r é é un p a n n e a u a v e c une b a l l e qui p e u t s ’ a n i m e r ( v o i r TP p r é c é d e n t )

J P a n e l p a n n e a u B = new J P a n e l() ;

J B u t t o n b t n A = new J B u t t o n(" A f f i c h e r ") ;// C l a i r non ?

J B u t t o n b t n D = new J B u t t o n(" Démarrer ") ; // i d e m pr a u t r e s btn // on a j o u t e le B o x L a y o u t à p a n n e a u B :

p a n n e a u B.s e t L a y o u t(new B o x L a y o u t(p a n n e a u B, B o x L a y o u t. P A G E _ A X I S) ) ;

p a n n e a u B.s e t B a c k g r o u n d(C o l o r.O R A N G E) ;// j o l i e c o u l e u r ! p a n n e a u B.add(b t n A) ;// A j o u t du b o u t o n A f f i c h e r

p a n n e a u B.add(b t n D) ;// C l a i r !

f e n e t r e.s e t T i t l e("La b a l l e q u i tombe ") ;// C o m m e d ’ hab ! f e n e t r e.s e t S i z e( 4 0 0 , 3 0 0 ) ;

f e n e t r e.s e t L a y o u t(new B o r d e r L a y o u t() ) ; f e n e t r e.add(p a n n e a u D, B o r d e r L a y o u t.C E N T E R) ; f e n e t r e.add(p a n n e a u B, B o r d e r L a y o u t.W E S T) ; f e n e t r e.s e t V i s i b l e(t r u e) ;

(20)

La balle qui tombe : le code Java (suite)

Pour mémoire, le code Java de la classe PanneauDessin :

p u b l i c c l a s s P a n n e a u D e s s i n e x t e n d s J P a n e l { p r i v a t e int p o s X = 100 , p o s Y= 2 0 ;

p u b l i c v o i d p a i n t C o m p o n e n t(G r a p h i c s g) { g.f i l l O v a l(posX, posY, 80 , 80) ;

}

p u b l i c int g e t P o s X() { r e t u r n p o s X;

}

p u b l i c v o i d s e t P o s X(int p o s X) { t h i s.p o s X = p o s X;

}

p u b l i c int g e t P o s Y() { r e t u r n p o s Y;

}

p u b l i c v o i d s e t P o s Y(int p o s Y) { t h i s.p o s Y = p o s Y;

} }

(21)

Sommaire

1 Les Layouts

2 Un exemple

4 Compléments

5 Conclusion

(22)

Obtenir des informations

Dans un TP précédent, nous avons créé des conteneurs que l’utilisateur va (ou non) utiliser :

boutons ;

zones de textes ; cases cochées, . . .

Il faut maintenant récupérer ces informations : quel bouton a été pressé ?

quel texte a été saisi ? quelles cases sont cochées ?

(23)

Les « listeners »

Pour indiquer à Java que nous avons besoin « d’écouter » les actions de l’utilisateur, il faut :

implémenter les écouteurs d’actions : c’est-à-dire ajouter à la définition de notre classe implements ActionListener;

méthode addActionListener;

écrire une méthode qui se déclenche à chaque événement causé par l’utilisateur (ou le programme lui-même). Tout ceci paraît bien compliqué . . .Et ça l’est quand même un peu ! Détaillons sur notre exemple de balle qui tombe. . .

(24)

Les « listeners »

implémenter les écouteurs d’actions : c’est-à-dire ajouter à la définition de notre classe implements ActionListener; appliquer à chaque composant la méthode qui permet

« d’écouter » les actions sur ce composant, il s’agit de la méthode addActionListener;

Tout ceci paraît bien compliqué . . .Et ça l’est quand même un peu ! Détaillons sur notre exemple de balle qui tombe. . .

(25)

Les « listeners »

écrire une méthode qui se déclenche à chaque événement causé par l’utilisateur (ou le programme lui-même).

(26)

Les « listeners »

Tout ceci paraît bien compliqué . . .

(27)

Les « listeners »

Tout ceci paraît bien compliqué . . .Et ça l’est quand même un peu !

(28)

Les « listeners »

Tout ceci paraît bien compliqué . . .Et ça l’est quand même un peu ! Détaillons sur notre exemple de balle qui tombe. . .

(29)

Le bouton afficher

Au départ notre panneau « dessin » est vide.

Il faut qu’en cliquant sur le bouton

« afficher » la balle apparaisse dans ce panneau. . .

(30)

Le bouton afficher

On considère que le panneau constitué des boutons est créé par une classePanneauBoutons. Pour qu’elle « écoute » les boutons, on la définit ainsi :

public class PanneauBoutons extends JPanel implements ActionListener {

Dans la définition du bouton « afficher » on écrit alors : this.add(btnAfficher);

btnAfficher.addActionListener(this);

Icithis désigne le panneau de type PanneauBoutons (ceci permet à une classe faire appel à l’objet du type

« elle-même »)

(31)

Le bouton afficher

Notre bouton est prêt à fonctionner, il reste à créer, dans dans la classePanneauBoutons, la méthode actionPerformedainsi :

@ O v e r r i d e

p u b l i c v o i d a c t i o n P e r f o r m e d(A c t i o n E v e n t evt) {

// Dès qu ’ un é v e n e m e n t s u r g i t c e t t e m é t h o d e est l a n c é e if (evt.g e t S o u r c e() ==t h i s.b t n A f f i c h e r) {S y s t e m.out.p r i n t l n("

c l i c s u r a f f i c h e r ") ;}

}

Désormais, à chaque clic sur le bouton « afficher », le texte

« clic sur afficher » apparait dans la console.

(32)

Sommaire

1 Les Layouts

2 Un exemple

4 Compléments

5 Conclusion

(33)

Écouter le clavier

Pour « écouter » les événements du clavier il faut ajouter au composant qui « écoute » un KeyListener, littéralement un écouteur de touche.

m o n C o m p o.a d d K e y L i s t e n e r(new K e y L i s t e n e r() ) ; m o n C o m p o.r e q u e s t F o c u s() ;

Remarque : la deuxième ligne permet au composant qui écoute le clavier d’être le composant actif et donc de pouvoir écouter.

(34)

Écouter le clavier

Concrétement, on a un Label (ou un autre composant) nommé monCompo, dans le code, on écrit :

(35)

Écouter le clavier

Concrétement, on a un Label (ou un autre composant) nommé monCompo, dans le code, on écrit :

Remarque : la deuxième ligne permet au composant qui écoute le clavier d’être le composant actif et donc de pouvoir écouter.

(36)

Récupérer la touche appuyée

Lorsqu’une touche est appuyée, la méthodekeyPressed est invoquée, il faut donc la compléter ainsi :

p u b l i c v o i d k e y P r e s s e d(K e y E v e n t e) {

c h a r c a r A p p u y e = e.g e t K e y C h a r() ;// ici on r é c u p è r e le c a r a c t è r e

if (c a r A p p u y e == " a ") {

S y s t e m.out.p r i n t l n(" Vous a v e z appuyé s u r a ") ; }

int c o d e T o u c h e = e.g e t K e y C o d e() ;// ici on r é c u p è r e le c o d e de la t o u c h e

if (c o d e T o u c h e == 13) {// 13 c o r r e s p o n d à e n t r é e S y s t e m.out.p r i n t l n(" Vous a v e z appuyé s u r E n t r é e ") ; }

}

(37)

Autres méthodes

Il existe trois méthodes qui « gèrent » le clavier :

keyPressed: lorsqu’une touche est appuyée (on l’a vu dans la diapo précédente) ;

écrit ici le code de tout ce qu’il y a faire tant que la touche reste enfoncée) ;

La liste des codes est disponible par exemple ici : http://docs.oracle.com/javase/6/docs/api/

constant-values.html#java.awt.event.KeyEvent.VK_7

(38)

Autres méthodes

keyReleased : lorsqu’une touche est relâchée ;

touche reste enfoncée) ;

(39)

Autres méthodes

keyReleased : lorsqu’une touche est relâchée ;

keyTyped: appelée entre les deux méthodes ci-dessus (on écrit ici le code de tout ce qu’il y a faire tant que la touche reste enfoncée) ;

(40)

Et le mulot ?

De la même façon qu’un programme java peut écouter le clavier, il peut aussi écouter la souris en ajoutant à un composant unMouseListener.

p u b l i c v o i d m o u s e C l i c k e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n the m o u s e has b e e n c l i c k e d on a c o m p o n e n t . p u b l i c v o i d m o u s e P r e s s e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n a m o u s e b u t t o n has b e e n p r e s s e d on a c o m p o n e n t .

p u b l i c v o i d m o u s e R e l e a s e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n a m o u s e b u t t o n has b e e n r e l e a s e d on a c o m p o n e n t .

p u b l i c v o i d m o u s e E n t e r e d(M o u s e E v e n t e) {} // I n v o k e d w h e n the m o u s e e n t e r s a c o m p o n e n t . p u b l i c v o i d m o u s e E x i t e d(M o u s e E v e n t e) {} // I n v o k e d w h e n the m o u s e e x i t s a c o m p o n e n t .

(41)

Et le mulot ?

De la même façon qu’un programme java peut écouter le clavier, il peut aussi écouter la souris en ajoutant à un composant unMouseListener. Il existe alors plusieurs méthodes :

p u b l i c v o i d m o u s e C l i c k e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n the m o u s e has b e e n c l i c k e d on a c o m p o n e n t . p u b l i c v o i d m o u s e P r e s s e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n a m o u s e b u t t o n has b e e n p r e s s e d on a c o m p o n e n t .

p u b l i c v o i d m o u s e R e l e a s e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n a m o u s e b u t t o n has b e e n r e l e a s e d on a c o m p o n e n t .

p u b l i c v o i d m o u s e E n t e r e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n the m o u s e e n t e r s a c o m p o n e n t . p u b l i c v o i d m o u s e E x i t e d(M o u s e E v e n t e) {}

// I n v o k e d w h e n the m o u s e e x i t s a c o m p o n e n t .

(42)

Sommaire

1 Les Layouts

2 Un exemple

4 Compléments

5 Conclusion

(43)

Vous savez tout !

Voilà ! Vous connaissez le principe d’unActionListener. À vous d’étudier le code du projet « BalleQuiTombe » distribué en classe et de le modifier en suivant les consignes.

(44)

Vous savez tout !

Voilà ! Vous connaissez le principe d’unActionListener. À vous d’étudier le code du projet « BalleQuiTombe » distribué en classe et de le modifier en suivant les consignes.

Au boulot !