2février2013 ÉricGillonThomasRey LesInterfacesGraphiques

(1)

Les Layouts Un exemple Interaction avec l’utilisateur

Les Interfaces Graphiques

Éric Gillon Thomas Rey

Lycée Marlioz

2 février 2013

(2)

Introduction

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

(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

(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)

Layouts : quelques exemples

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

BorderLayout : que nous utiliserons aujourd’hui ;

BoxLayout : pour réaliser des alignements ;

CardLayout : pour des superpositions (type interface à 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

(9)

Layouts : quelques exemples

FlowLayout : composants les uns à la suite des autres ;

GridLayout : place les composants dans un tableau de cellules de même taille ;

(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

(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) {

(21)

Sommaire

1 Les Layouts

2 Un exemple

(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;

appliquer à chaque composant la méthode qui permet

« d’écouter » les actions sur ce composant, il s’agit de la 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

é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. . .

(25)

Les « listeners »

é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. . .

(26)

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. . .

(27)

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. . .

(28)

Les « listeners »

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

(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)

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 !

(33)

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 !