chapitre i : développement des interfaces graphiques en java€¦ · introduction 3 mme hechkel...

Cours Programmation Objet Avancée

Chapitre I : Développement des Interfaces

Graphiques en Java

Elaboré par Mme Amina HECHKEL

AU: 2015/2016

I S E T M a h d i a

D é p a r t e m e n t T e c h n o l o g i e s d e l ’ i n f o r m a t i q u e

1

Plan

Mme Hechkel Amina 2

Introduction

Swing ou AWT ?

Les composants SWING

Containers lourds et containers légers

Composants atomiques

Gestionnaire de disposition

Gestion des événements

Méthodes d’implémentations d’un écouteur

Les adaptateurs: classes Adapter

SWING et le pattern MVC

Introduction

Mme Hechkel Amina 3

L’exécution d’un programme JAVA entraîne automatiquement

la création d’une fenêtre console

Dans le cas d’une interface graphique, le programme doit créer

explicitement la/les interfaces graphiques nécessaires.

Il existe deux grandes familles de composant graphique en

JAVA:

AWT

SWING

Introduction

Mme Hechkel Amina 4

AWT (Abstract Window Toolkit, JDK 1.1)

Swing (JDK/SDK 1.2)

Swing et AWT font partie de JFC (Java Foundation Classes)

qui offre des facilités pour construire des interfaces

graphiques

Swing est construit au-dessus de AWT

même gestion des événements

les classes de Swing héritent des classes de AWT

AWT

Mme Hechkel Amina 5

Les classes du toolkit AWT (Abstract Windows Toolkit) permettent d'écrire des interfaces graphiques indépendantes du système d'exploitation sur lesquelles elles vont fonctionner.

Cette librairie utilise le système graphique de la plateforme d'exécution (Windows, MacOS, …) pour afficher les objets graphiques.

Le toolkit contient des classes décrivant les composants graphiques, les polices, les couleurs et les images.

Hiérarchie des Composants AWT

Mme Hechkel Amina 6

La classe java.awt.Toolkit

Mme Hechkel Amina 7

Les sous-classes de la classe abstraite Toolkit implantent la partie de AWT qui est en contact avec le système d’exploitation hôte.

Quelques méthodes publiques :

getScreenSize(),

getScreenResolution(),

Beep(),

getImage(),

createImage(),

getSystemEventQueue()

getDefaultToolkit(): fournit une instance de la classe qui implante Toolkit (classe donnée par la propriété awt.toolkit)

Exemple

Mme Hechkel Amina 8

public static void main(String[] args) {

JFrame f=new JFrame("Mon dessin");

// Centrage de la fenêtre

Toolkit tk = Toolkit.getDefaultToolkit();

Dimension d = tk.getScreenSize();

int hauteurEcran = d.height;

int largeurEcran = d.width;

f.setSize(largeurEcran/2, hauteurEcran/2);

f.setLocation(largeurEcran/4, hauteurEcran/4);

// tant qu’on y est, ajoutons l’icône…

Image img = tk.getImage("image.gif");

f.setIconImage(img);

f.show ();

f.setDefaultCloseOperation (WindowConstants.EXIT_ON_CLOSE);

}

SWING

Mme Hechkel Amina 9

Swing fait partie de la bibliothèque Java Foundation Classes (JFC).

Swing a été intégrée au JDK depuis sa version 1.2. Cette bibliothèque existe séparément pour le JDK 1.1.

La bibliothèque JFC contient :

l'AWT (Abstract Window Toolkit), la boîte à outils d'origine de l'interface

utilisateur ;

Swing, la boîte à outil de l'interface utilisateur ;

L‘API d’accessibilité, qui propose des outils permettant d'intégrer des

périphériques d'entrée et sortie non standard à vos interfaces

utilisateurs;

L'API 2D, ensembles de classes cohérentes permettant des dessins de

bonnes qualité ;

Drag and Drop, API supportant le "glisser-déplacer"

Swing ou AWT ?

Mme Hechkel Amina 10

Tous les composants de AWT ont leur équivalent dans Swing

en plus joli

avec plus de fonctionnalités

Swing offre de nombreux composants qui n’existent pas dans

AWT

Il est fortement conseillé d’utiliser les composants Swing et

ce cours sera donc centré sur Swing

SWING


Les composants Swing forment un nouvelle hiérarchie parallèle à celle de l'AWT.

Tous héritent du composant graphique JComponent

Jcomponent hérite du composant graphique AWT Container qui permet à un composant d’en contenir d’autres.

Presque tous ces composants sont écrits en pure Java : ils ne possèdent aucune partie native sauf ceux qui assurent l'interface avec le système d'exploitation : JApplet, JDialog, JFrame, et JWindow.

Cela permet aux composants de toujours avoir la même apparence quelque soit le système sur lequel l'application s'exécute.

Hiérarchie des Composants SWING


Composants lourds et Composants légers


Pour afficher des fenêtres, Java s’appuie sur les fenêtres fournies par le système d’exploitation dans lequel tourne la JVM,

Les composants Java qui, comme les JFrame, s’appuient sur des composants du système hôte sont dit lourds.

Fenêtres de base ou «Top-level» Containers.

Les autres composants, dits légers, sont dessinés par Swing dans ces containers lourds.

Tous les composants de Swing, exceptés JApplet, JDialog, JFrame et JWindow sont des composants légers.

Les composants SWING


Une application est composée de trois catégories d’objets:

Les conteneurs

Les classes d'interactions, c'est-à-dire les composants

(intermédiaires et atomiques)

Les classes de liaisons, pour la gestion des événements

(Event), le gestionnaire de disposition (Layout), …etc.

Les Conteneurs


Les conteneurs sont des objets graphiques qui sont destinés

spécifiquement à recevoir d’autres éléments graphiques.

Les conteneurs peuvent éventuellement contenir d’autres

conteneurs.

Ils héritent de la classe Container.

Un composant graphique doit toujours être incorporer dans

un conteneur.

Containers lourds


Il y a 3 sortes de containers lourds (un autre, JWindow, est plus

rarement utilisé) :

JFrame fenêtre pour les applications

JApplet pour les applets

JDialog pour les fenêtres de dialogue

Pour construire une interface graphique avec Swing, il faut créer

un (ou plusieurs) container lourd et placer à l’intérieur les

composants légers qui forment l'interface graphique

Hiérarchie d’héritage des containers lourds


Top-Level Container : JFrame


La Classe JFrame :

Elle représente une fenêtre principale qui possède un titre, une

taille modifiable et éventuellement un menu

Elle utilise un conteneur ou panneau de contenu (content pane)

pour insérer des composants (ils ne sont plus insérer

directement au JFrame mais à l'objet contentPane qui lui est

associé).

La classe JFrame possède plusieurs constructeurs parmi les quel on site :

JFrame() : Constructeur par default

JFrame(String titre) : Création d’une instance en précisant le Titre de la fenêtre.

Top-Level Container: JFrame


Parmi les méthodes de cette classe on site :

setTitle ( String title ): donner un titre pour la fenêtre

setSize(int width, int height): permet de préciser les

dimensions de la Fenêtre.

setLocation(int x, int y): fixer l’emplacement de la fenêtre

setVisible (boolean) : par default la fenêtre est invisible, pour

la rendre visible on fait appel à cette méthode.

setBounds(x,y, width, height): permet de modifier

simultanément la taille et la position d’un composant (en

particulier un Jframe)

setIconImage ( Image image )

getContentPane (): retourne le container sur lequel les

composants vont être ajoutés.



import javax.swing.*;

class MaFenetre extends JFrame {

public MaFenetre() {

super(" Ma première Fenetre ");

setSize(200,100);

setVisible(true);

this.setLocation (250 ,150); // emplacement de la fenetre

}

public static void main(String [] args){

MaFenetre maFrame = new MaFenetre();

}

}

Le comportement par défaut à la fermeture:

Il est possible de préciser comment un objet JFrame, JInternalFrame, ou

JDialog réagit à sa fermeture grâce à la méthode

setDefaultCloseOperation().

Cette méthode attend en paramètre une valeur qui peut être :

Constante Rôle

WindowConstants.DISPOSE_ON_CLOSE détruit la fenêtre

WindowConstants.DO_NOTHING_ON_CLOSE rend le bouton de fermeture

inactif

WindowConstants.HIDE_ON_CLOSE cache la fenêtre

WindowConstants.EXIT_ON_CLOSE Quitte le programme



Un JDialog est une fenêtre qui a pour but un échange d’information

Java propose un certain nombre de boîtes de dialogue standard

obtenues à l’aide de méthodes de classe de la classe JOptionPane :

Boîtes de message: JOptionPane.showMessageDialog()

Affiche un message et attend que l’utilisateur clique sur OK

Boîtes de confirmation: JOptionPane.showConfirmDialog()

Affiche un message et reçoit une confirmation (OK/Annuler)

Boîtes de saisie: JOptionPane.showInputDialog()

Affiche un message et récupère une ligne entrée par l’utilisateur

Boîtes d’options: JOptionPane.showOptionDialog()

Affiche un message et récupère l’option choisie parmi plusieurs


Top-Level Container: JDialog

Une boîte de message fournit à l’utilisateur un message qui reste affiché tant que l’utilisateur n’agit pas sur le bouton OK.

Elle est construite à l’aide de la méthode de classe showMessageDialog de la classe JOptionPane.

JOptionPane.showMessageDialog( getFrame(),"le message", "le titre",

messageType);

Les différentes valeurs de Message Type:


Top-Level Container: Jdialog

Type de message Valeurs

Erreur JOptionPane.ERROR_MESSAGE

Information JOptionPane.INFORMATION_MESSAGE

Avertissement JOptionPane.WARNING_MESSAGE

Question JOptionPane.QUESTION_MESSAGE

Aucune icône JOptionPane.PLAIN_MESSAGE

Exemple 1:

public static void main ( String args []) {

JFrame f = new JFrame ("Une fenêtre") ;

f. setVisible ( true ) ;

JOptionPane.showMessageDialog (f,

" Bonjour ") ;

}

Exemple 2:

JOptionPane . showMessageDialog (f,

"Mauvais choix " ," Message d’ avertissement",

JOptionPane . ERROR_MESSAGE ) ;



Une boîte de confirmation offre à l’utilisateur un choix de type

oui/non. Elle est construite à l’aide de la méthode de classe

showConfirmDialog de la classe JOptionPane.

JOptionPane.showConfirmDialog(getFrame(), "le message", "le

titre", optionType);

Le champ optionType représente le type du message et peut

prendre l’une des valeurs suivantes :



Option Type Valeurs

OK JOptionPane.DEFAULT_OPTION / -1

Oui,Non JOptionPane.YES_NO_OPTION / 0

Oui,Non,Annuler JOptionPane.YES_NO_CANCEL_OPTION / 1

OK, Annuler JOptionPane.OK_CANCEL_OPTION / 2

Exemple 3:

import java . awt .* ; import javax . swing .* ; class MaFenetre extends JFrame { public MaFenetre () { super (" Une fenêtre ") ; setSize (300 , 200) ; } } public class BoiteConf { public static void main ( String args []) { JFrame f = new MaFenetre () ; f. setVisible ( true ) ; JOptionPane . showConfirmDialog (f , " Voulez - vous continuer ? ", " Sélectionnez une option ", JOptionPane.YES_NO_CANCEL_OPTION) ; } }



Containers légers


les containers « intermédiaires » ou légers :

JPanel,

JScrollPane,

JSplitPane,

JTabbedPane,

JToolPane,

…

Le conteneur léger : JPanel


JPanel est la classe mère des containers intermédiaires les

plus simples.

Un JPanel sert à regrouper des composants dans une zone

d'écran.

Quelques méthodes de JPanel :

JPanel(LayoutManager) qui accepte en paramètre un objet de

placement et construit le JPanel associé à cet objet.

Void setLayout(LayoutManager): associe au Conteneur l’objet de

placement passé en paramètre.

void add(Component): ajoute ce composant au Conteneur sans

désignation de zone lorsque l’objet de placement n’en a pas besoin

(FlowLayout, GridLayout ou GridBagLayout)

void remove(Component): enlève ce composant du Conteneur

Conteneur léger : JScrollPane


JScrollPane est une version améliorée de JPanel qui possède des

ascenseurs de défilement vertical et horizontal.

Quelques méthodes de JScrollPane :

JScrollPane(): crée un JScrollPane vide

JScrollPane(Component): crée un JScrollPane contenant un seul

composant (celui passé en paramètre).

JScrollPane(int,int): crée un JScrollPane vide en précisant le

comportement des ascenseurs

JScrollPane(Component,int,int): crée un JScrollPane contenant un

seul composant (celui passé en paramètre) en précisant le

comportement des ascenseurs. Le premier entier définit le

comportement de l’ascenseur vertical et le dernier entier définit le

comportement de l’ascenseur horizontal

Conteneur léger : JScrollPane


Le comportement de l’ascenseur vertical prend les valeurs suivantes :

JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED(l’ascenseur

n’apparaît que s’il es nécessaire)

JScrollPane.VERTICAL_SCROLLBAR_NEVER (pas d’ascenseur)

JScrollPane.VERTICAL_SCROLLBAR_ALWAYS(l’ascenseur est

toujours présent)

Le comportement de l’ascenseur horizontal prend les valeurs

suivantes:

JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED(l’ascenseur

n’apparaît que s’il est nécessaire)

JScrollPane.HORIZONTAL_SCROLLBAR_NEVER (pas

d’ascenseur)

JScrollPane.HORIZONTAL_SCROLLBAR_ALWAYS(l’ascenseur

est toujours présent).

Résumé : Liste de Conteneurs

Conteneur Rôle

JWindow Fenêtre principale sans cadre ni menu. Les objets

descendants de cette classe peuvent servir à

implémenter des menus

JFrame Classe de fenêtre complètement fonctionnelle

JDialog Réaliser des boîtes de dialogue simples

JApplet Pas de menu, pas de boîte de dialogue sans être

incorporée dans une classe Frame.

JPanel Conteneur sans fenêtre propre. Utile pour ordonner les

contrôles.


Insertion de composant


Une fois j’ai construit ma

fenêtre, comment vais-je

créer les composants et ou

vais-je les insérer.

Les composants


Pour utiliser un composant, il faut créer un nouvel objet

représentant le composant et l'ajouter à un de type conteneur

qui existe avec la méthode add().

Exemples de composant :

JLabel : les étiquettes

JButton : les boutons

JTextField : les champs texte

JTextArea : les zones de texte multiligne.

JRadioButton: un ensemble de bouton

JMenutItem: un bouton dans un menu

JCheckBox: les cases à cocher.

…

Exemple de Composant


Les Labels:

Il faut utiliser un objet de la classe javax.swing.JLabel

Cette classe possède deux constructeurs :

JLabel() : zone Label vide.

JLabel(String): Créer une zone label avec le texte passer comme

paramètre.

Quelques méthodes :

void setText() : affecte du texte a la zone label.

void setSize(int, int): affecte une dimension au a a zone Label.

…

Exemple:

JLabel nom = new JLabel( "Nom : " );

Nom.setBounds(10,10, 100,20);



Les zones de texte:

Il faut utiliser un objet de la classe javax.swing.JTextField


JTextField () : zone de texte vide.

JTextField (String): Créer une zone de texte avec le texte passer

comme paramètre.


void setText() : affecte du texte a la zone label.

void setSize(width, height): affecte une dimension à la zone de texte.

String getTexte() : retourne le texte ce trouvant dans la zone texte.

…

Exemple:

JTextField t1=new JTextField("");

T1.setSize(100,20);



Les Boutons:

Il faut utiliser un objet de la classe javax.swing.JButton


JButton() : bouton sans Nom.

JButton(String): Permet de préciser le libellé du bouton.


void setLabel(String) : affecte un libellé au bouton.

void setSize(int, int): affecte une dimension au bouton.

…

Exemple:

JButton b1 = new JButton (" Valider" );

b1.setSize(100,20);



Les cases à cocher:

Il faut utiliser un objet de la classe javax.swing.JCheckBox

Ses principales méthodes sont :

JCheckBox(String): construction avec définition du texte contenu

dans la case à cocher

JCheckBox(String,boolean): construction avec en plus définition

de l’état initial de la case à cocher

boolean isSelected(): qui retourne l’état de la case à cocher

(cochée ou non). Par défaut, une case à cocher est construite dans

l’état non coché (false).

void setSelected(boolean): qui définit l’état de la case à cocher

(cochée ou non).

String getText(): qui retourne le texte contenu dans la case à

cocher.



Les Boutons radio: qui permet à l’utilisateur d’effectuer un choix de type oui/non.

Il faut utiliser un objet de la classe javax.swing.JRadioButton

Mais sa vocation est de faire partie d’un groupe de boutons dans lequel

une seule option peut être sélectionnée à la fois.

Un objet de type ButtonGroup sert uniquement à assurer la

désactivation automatique d’un bouton lorsqu’un autre du groupe est

activé

Un bouton radio qui n’est pas associé à un groupe, exception faite de

son aspect, se comporte exactement comme une case à cocher.

Exemple: JRadioButton bvert = new JRadioButton (" Vert ") ;

ButtonGroup groupe = new ButtonGroup () ;

groupe . add( bvert ) ;



JComboBox: est un composant permettant de faire un seul choix

parmi plusieurs propositions.

Quelques méthodes de JComboBox :

JComboBox(Object[]) construction avec définition de la liste. On

peut utiliser un tableau de chaînes de caractères (String) ou de toute

autre classe d’objets.

void addItem(Object) qui ajoute une valeur possible de choix

int getSelectedIndex() qui retourne le numéro du choix actuel qui

retourne l’objet associé au choix actuel.

void setSelectedIndex(int) qui sélectionne un élément défini par son

numéro

Exemple: String [] tab = {" Option 1", " Option 2", " Option 3", " Option 4"};

JComboBox combo = new JComboBox ( tab );



JMenuBar est un composant qui permet de créer une barre de menu, on

ajoute des JMenu dans la barre.

Pour définir des Menus, on utilise 3 classes JMenuBar, JMenu, JMenuItem

Un objet JMenu possède un label, et quand on clique dessus, il peut montrer un

menu déroulant

Un item d’un objet JMenu peut être un objet de type JMenuItem,

JCheckBoxMenuItem ou JRadioButtonMenuItem

La méthode addSeparator() peut être utilisée pour insérer un espace entre les

composants de la barre d’outils.

Exemple:

JMenuBar jmb = new JMenuBar ();

this . setJMenuBar ( jmb );

JMenu m1 = new JMenu (" Définir ");

m1. add( new JMenuItem (" le nom " ));

jmb. add( m1);

JMenu m2 = new JMenu (" Afficher ");

m2. add( new JMenuItem (" le prenom " ));

jmb. add( m2 );

Les gestionnaires de disposition


L’utilisateur peut changer la taille d’une fenêtre ; les composants de

la fenêtre doivent alors être repositionnés.

Les fenêtres (plus généralement les containers) utilisent des

gestionnaires de mise en place (Layout manager) pour

repositionner leurs composants.

Il existe plusieurs types de layout managers avec des algorithmes de

placement différents, tels que : BorderLayout, BoxLayout,

CardLayout, FlowLayout, GridLayout, GridBagLayout.

Layout Manager


Quand on ajoute un composant dans un container on ne donne pas la position exacte du composant.

On donne plutôt des indications de positionnement au gestionnaire de mise en place. explicites (BorderLayout.NORTH)

ou implicites (ordre d’ajout dans le container)

Un layout manager place les composants « au mieux » suivant l’algorithme de placement qui lui est propre

les indications de positionnement des composants

la taille du container

les tailles préférées des composants

Layout Manager


Chaque layout manager implémente l'interface

java.awt.LayoutManager. Par défaut, c'est la classe

FlowLayout qui est utilisée pour la classe Panel et la classe

BorderLayout pour Frame et Dialog.

Les layout manager ont 3 avantages :

l'aménagement des composants graphiques est délégué aux

layout manager (il est inutile d'utiliser les coordonnées

absolues)

en cas de redimensionnement de la fenêtre, les contrôles sont

automatiquement agrandis ou réduits.

ils permettent une indépendance vis à vis des plateformes.

Tailles des composants


Tous les composants graphiques (classe Component)

peuvent indiquer leurs tailles pour l’affichage

taille maximum

taille préférée

taille minimum

Accesseurs et modificateurs associés :

{get|set}{Maximum|Preferred|Minimum}Size

Tailles des composants


Taille préférée:

La taille préférée est la plus utilisée par les layout managers ; un composant peut l’indiquer en redéfinissant la méthode « Dimension getPreferredSize() »

On peut aussi l’imposer « de l’extérieur » avec la méthode « void setPreferredSize(Dimension) »

Mais le plus souvent, les gestionnaires de mise en place ne tiendront pas compte des tailles imposées de l’extérieur

Taille minimum:

Quand un composant n’a plus la place pour être affiché à sa taille préférée, il est affiché à sa taille minimum sans passer par des tailles intermédiaires.

Si la taille minimum est très petite, ça n’est pas du plus bel effet ; il est alors conseillé de fixer une taille minimum, par exemple par c.setMinimumSize(c.getPreferredSize());

Types de Gestionnaires de disposition


Les types les plus courants de gestionnaire de mise en place:

BorderLayout : placer aux 5 points cardinaux

FlowLayout : placer à la suite

GridLayout : placer dans une grille

BoxLayout : placer verticalement ou horizontalement

GridBagLayout : placements complexes

Le FlowLayout


La classe FlowLayout (mise en page flot) place les composants ligne par

ligne de gauche à droite. Chaque ligne est complétée progressivement

jusqu'à être remplie, puis passe à la suivante. Chaque ligne est centrée par

défaut. C'est la mise en page par défaut des applets.

Il existe plusieurs constructeurs :

FlowLayout( )

FlowLayout( int align) : Permet de préciser l'alignement des composants

dans le conteneur (FlowLayout.CENTER, FlowLayout.LEFT,

FlowLayout.RIGHT ... ). Par défaut, align vaut CENTER

FlowLayout(int align, int hgap, int vgap) :Permet de préciser l'alignement

et l’espacement horizontal et vertival dont la valeur par défaut est 5.

Le FlowLayout



super("Ma première Fenetre");

JButton b=new JButton();

JLabel l=new JLabel();

JTextField f=new JTextField();

b.setText("mon bouton");

l.setText("ma zone label");

f.setText("ali va au sook");

this.getContentPane().setLayout(new

FlowLayout(FlowLayout.CENTER, 10,10));

this.getContentPane().add(b);

this.getContentPane().add(l);

this.getContentPane().add(f);

this.setDefaultCloseOperation(

DISPOSE_ON_CLOSE);

setVisible(true);

pack();

}

Le BorderLayout


Avec ce Layout Manager, la disposition des composants est commandée par une mise en page en bordure qui découpe la surface en cinq zones : North, South, East, West, Center. On peut librement utiliser une ou plusieurs zones.

BorderLayout consacre tout l'espace du conteneur aux composants. Le composant du milieu dispose de la place inutilisée par les autres composants.


BorderLayout( )

BorderLayout (int hgap,int vgap) Permet de préciser l'espacement horizontal et vertical des composants.

Le BorderLayout



super();

setTitle("Ma Fenetre ");

setSize(300, 150);

getContentPane().setLayout(new BorderLayout(10,10));

getContentPane().add("North", new JButton(" bouton haut "));

getContentPane().add("South", new JButton(" bouton bas "));

getContentPane().add("West", new JButton(" bouton gauche "));

getContentPane().add("East", new JButton(" bouton droite "));

getContentPane().add("Center", new JButton(" bouton milieu "));

pack();

show();

this.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);

}

Le BorderLayout


Le GridLayout


Ce Layout Manager établit un réseau de cellule

identiques qui forment une sorte de quadrillage

invisible : les composants sont organisés en lignes et

en colonnes. Les éléments insérés dans la grille ont

tous la même taille. Les cellules du quadrillage se

remplissent de droite à gauche ou de haut en bas.


GridLayout( int, int ) : Les deux premiers entiers spécifient le

nombre de lignes ou de colonnes de la grille.

GridLayout( int, int, int, int ) : permet de préciser en plus

l'espacement horizontal et vertical des composants.

Le GridLayout



super();

setTitle(" Ma Fenetre ");

setSize(300, 150);

this.getContentPane().setLayout(new GridLayout(2, 3, 10,10));

this.getContentPane().add(new Button("bouton 1"));




this.getContentPane().add(new Button("bouton 5

tres long"));


show();

setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);

}

Comment insérer les composants


Ayant créer le conteneur.

Étendre la classe JFrame

Choisit les composants à utiliser.

Création des boutons et zone de texte…

Choisit le layout à utiliser

Méthode setLayout(…)

On peut maintenant insérer les composants dans le conteneur.

Méthode add(…)

La Gestion des événements


Exposition du problème: L'utilisateur utilise le clavier et la souris pour intervenir sur le

déroulement du programme.

Le système d’exploitation engendre des événements à partir des actions de l’utilisateur.

Le programme doit lier des traitements à ces événements.

Types d'événements: Événements de bas niveau, générés directement par des actions

élémentaires de l’utilisateur.

Événements « logiques » de plus haut niveau, engendrés par plusieurs actions élémentaires, qui correspondent à une action complète de l'utilisateur.

Classes d'événements


Les événements sont représentés par des instances de sous-classes de java.util.EventObject.

Événements liés directement aux actions de l’utilisateur : KeyEvent : appuie sur une touche, relachement, …

MouseEvent : click par le bouton de la sourie, …

Événements de haut niveau : FocusEvent : élément ayant gagner le focus ou l’ayant perdu.

WindowEvent : fenetre ouverte, fermé, iconifiée, déiconifiée, activée ou désactivée.

ActionEvent : déclenchement d’une action.

ItemEvent : choix dans une liste, dans une boîte à cocher

ComponentEvent : composant déplacé, retaillé, caché ou montré



Écouteurs:

Chacun des composants graphiques a ses observateurs (ou écouteurs, listeners)

Un écouteur doit s’enregistrer auprès des composants qu’il souhaite écouter, en lui indiquant le type d’événement qui l’intéresse (par exemple, clic de souris)

Relation écouteurs - écoutés

Un composant peut avoir plusieurs écouteurs (par exemple, 2 écouteurs un pour les clics de souris et un autre pour les frappes de touches du clavier)

Un écouteur peut écouter plusieurs composants.



Une question ?

Quel message sera envoyé par le composant à ses écouteurs pour les prévenir

que l’événement qui les intéresse est arrivé ?

Réponse : à chaque type d’écouteur correspond une interface que doit

implémenter la classe de l’écouteur ; par exemple ActionListener, MouseListener ou KeyListener

Le message doit correspondre à une des méthodes de cette interface.

Exemple : les événements ActionEvent qui conduisent à des traitements simples

(écouteur ActionListener) les événements KeyEvent, au traitement plus complexe (écouteur

KeyListener et adaptateur KeyAdapter).



Les événements utilisateurs sont gérés par plusieurs interfaces EventListener.

Les interfaces EventListener permettent à un composants de générer des événements utilisateurs.

Une classe doit contenir une interface auditeur pour chaque type de composant : ActionListener : clic de souris ou enfoncement de la touche Enter.

ItemListener : utilisation d'une liste ou d'une case à cocher.

MouseListener : événement de souris.

WindowListener : événement de fenêtre.



La classe ActionEvent

Cette classe décrit des événements de haut niveau qui vont le plus souvent déclencher un traitement (une action) : clic sur un bouton

return dans une zone de saisie de texte

choix dans un menu

Interface ActionListener

Un objet ecouteur intéressé par les événements de type « action » (classe ActionEvent) doit appartenir à une classe qui implémente l’interface java.awt.event.ActionListener

Définition de ActionListener :

public interface ActionListener extends EventListener {

void actionPerformed(ActionEvent e); }



Inscription de l’écouteur

On inscrit un tel écouteur auprès d’un composant nommé composant par la méthode composant.addActionListener(ecouteur);

On précise ainsi que ecouteur est intéressé par les événements ActionEvent engendrés par composant.

Message déclenché par un événement Un événement unActionEvent engendré par une action de l’utilisateur sur

bouton, provoquera l'envoi d'un message actionPerformed à tous les écouteurs :

ecouteur.actionPerformed(unActionEvent);

Ces messages sont envoyés automatiquement à tous les écouteurs qui se sont enregistrés auprès du bouton.



Etapes d’implémentation d’un écouteur: (1ère façon) Une

classe implémentant elle même le listener.

1. Importer le groupe de classe java.awt.event

2. la classe doit déclarer qu'elle utilisera une ou plusieurs interfaces

d'écoute

3. Appel à la méthode addXXX() pour enregistrer l'objet qui gérera les

événements XXX du composant faut configurer le composant

pour qu'il possède un "écouteur" pour l'événement utilisateur

concerné.

4. implémenter les méthodes déclarées dans les interfaces : Chaque

auditeur possède des méthodes différentes qui sont appelées pour

traiter leurs évènements. Par exemple, l'interface ActionListener

envoie des évènements à une méthode nommée actionPerformed( ).



Etapes d’implémentation d’un écouteur:

2ème façon: Une classe indépendante implémentant le

listener: Définir une classe, à part, qui représente l’écouteur,

implémente l’interface ActionListener et redéfinie la

méthode actionPerformed().

3ème façon: Le listener est défini comme une classe interne

qui implémente l’interface ActionListener.

4ème façon: Le listener est défini une classe interne

anonyme.



Exemple :

L’écouteur ActionListener Possède comme méthode :

public void actionPerformed (ActionEvent e)

L’écouteur MouseListener possède comme méthodes :

public void mouseClicked(MouseEvent e)

public void mouseEntered(MouseEvent e)

public void mouseExited(MouseEvent e)

public void mousePressed(MouseEvent e)

public void mouseReleased(MouseEvent e)

L’écouteur KeyListener possède comme méthodes :

public void keyPressed(KeyEvent e)

public void keyReleased(KeyEvent e)

public void keyTyped(KeyEvent e)



Remarque :

Dans le cas ou plusieurs composants implémente le même écouteur on

peut utilisé la méthode getSource() pour savoir le composant ayant

générer l’action ou l’événement déclenché.

public Object getSource()

Exemple:

public void actionPerformed(ActionEvent e) {

Object src = e.getSource();

if( src instanceof JButton) {

JButton var=(JButton) src;

…..

}

../../../java_outil/j2sdk doc/J2SDK DOC/docs/api/java/lang/Object.html

Exemple Complet



import java.awt.*;

import java.awt.event.*;

class MaFenetre extends JFrame

implements ActionListener {

JButton b=new JButton("jouer");

JButton rejouer=new

JButton("refaire une autre partie");

JLabel l=new JLabel("");

JTextField f=new

JTextField("insérer un numéro");

int cacher=(int)

(Math.random()*100);


super();

setTitle(" Mon Jeux ");

setSize(300,200);

this.getContentPane(). setLayout(new

GridLayout(4, 1, 10,10));

this.getContentPane().add(f);

this.getContentPane().add(b);

this.getContentPane().add(l);

this.getContentPane().add(rejouer);

b.addActionListener(this);

rejouer.addActionListener(this);

this.setDefaultCloseOperation(

WindowConstants.EXIT_ON_CLOSE)

;

}

Exemple Complet



Object src=e.getSource();

if(src instanceof JButton) {

JButton var=(JButton) src;

if (var==b) {

try{ int x=Integer.parseInt(f.getText());

if(x==cacher) {

f.setText("bravo!!!");

l.setText("vous avez trouver le bon numéro");

b.setEnabled(false); }

else if(x>cacher) {

l.setText("le nombre donner est supérieur a celui rechercher");

f.setText(""); }

else if(x<cacher) {

l.setText("le nombre donner est inférieur acelui rechercher");

f.setText("");}

}

Exemple Complet


catch(NumberFormatException nfe) { l.setText("entrer un nombre"); f.setText(""); } } else if (var==rejouer) { cacher=(int) (Math.random()*100); f.setText(""); l.setText(" bonne chance dans la nouvelle partie"); b.setEnabled(true); }} //Méthode de test public static void main(String [] args){ MaFenetre myFrame = new MaFenetre(); } }

Les Adaptateurs

69

L’écouteur défini à partir d’une interface XXXListener doit écrire

toutes les méthodes même si elles sont vides.

Pour chaque interface XXXListener possédant plusieurs méthodes,

Java fournit une classe particulière XXXAdapter, appelée

adaptateur, qui implémente toutes les méthodes de l’interface avec

un corps vide.

Pour définir un écouteur d’événements de type XXXEvent, il suffit

alors de dériver l’écouteur de la classe XXXAdapter et de redéfinir

uniquement les méthodes voulues.

Les Adaptateurs (2)

70

Les adaptateurs d’événement portent le suffixe Adapter (au lieu de Listener).

• Interfaces : MouseListener, KeyListener

• Classes : MouseAdapter, KeyAdapter

Pour l’écouteur défini par héritage d’une classe Adapter, seules les méthodes

utiles sont écrites (les autres sont héritées vides).

Exemple :

public class MaFrame extends MouseAdapter

{ JFrame frame ;

MaFrame ()

{ monJButton . addMouseListener ( this ); }

public void mouseClicked ( MouseEvent e) {

System . exit (0); }

}

Les Adaptateurs (3)

71

class MaFenetre extends JFrame

{

public MaFenetre () {

super (" Une fenetre qui traite les clics souris ") ;

setSize (300 , 200) ;

addMouseListener ( new EcouteurSouris ()); }

}

class EcouteurSouris extends MouseAdapter

{ /* redéfinition uniquement de la méthode appelée lors d ’ un clic souris*/

public void mouseClicked ( MouseEvent e) {

System . out. println (" clic dans la fenêtre ") ;

} }

Swing et le pattern MVC

En développement graphique, le principe du MVC « Modèle - Vue – Contrôleur »

est très souvent appliqué.

Le modèle permet de récupérer et de mettre à jour les données que l'application

manipule. Il intègre les règles de mise à jour ou de récupération des données.

La vue a deux rôles principaux: l'affichage des données renvoyées par le modèle

et l'interaction avec l'utilisateur. Elle ne se charge que de l'affichage du résultat du

traitement en «écoutant» les modifications du modèle..

Le contrôleur se charge du traitement des événements utilisateur et se charge de

la synchronisation entre la vue et le modèle.

Lui même n'effectue aucune modification de données; Il se charge d'analyser les

actions effectuées par l'utilisateur et demande soit au modèle de se modifier soit à

la vue de se mettre à jour voire les deux.


Swing et MVC


Swing et MVC


L’approche la plus simple consiste à mettre tous les éléments dans la même

classe. La gestion des évènements est faite par des classes membres internes

anonymes.

Cette implémentation est fonctionnelle mais peu évolutive. En effet, si les

méthodes changent d’implémentation, on doit reprendre la classe

complètement. Toutefois, pour des applications simples cette solution est

rapide de mise en œuvre.

Avec MVC, Il faut définir ses propres événements pour la vue donnée ainsi le

contrôleur «écoute» les événements de la vue. La vue, quant à elle se charge

d'écouter les événements utilisateur et du modèle.

Cette approche permet, d’une part de réutiliser facilement des éléments et

d’autre part de partager le modèle entre plusieurs interfaces.

Implémentation selon le modèle MCV


L’implémentation du paradigme MVC consiste à séparer les éléments dans

différentes classes.

Pour assurer la sécurité de l’application, les données doivent être stockées sous

la forme de membres private et accédées à l’aide de méthodes publiques

(comme le couple get/set).

Application: Convertisseur de monnaies

On place tous les éléments liés à la modélisation du problème dans une classe:

C’est le modèle

La classe contrôleur implémente les interfaces d’écouteur (les listeners), on peut

créer d’autant de contrôleurs que d’événements possible

La vue contient les champs de saisie qui ne sont plus private mais protected pour

que la classe contrôleur puisse y accéder.

Exemple : Modèle


public class ConvertisseurModel {

static final float TAUX = ( float) 2.2865;

private float valEuro;

private float valDT;

public void setValeurEuro( float a) {

valEuro = a ;

valDT = valEuro / TAUX;

}

public void setValeurDT( float a) {

valDT = a;

valEuro = valDT* TAUX;

}

public float getValeurDT() { return valDT;

}

public float getValeurEuro() { return valEuro;

}

}

Exemple : Vue


import java.awt.*;


public class ConversionVue extends JFrame{

JLabel l,l2;

JButton conv;

JTextField t1, t2;

JPanel p1;

public ConversionVue(String s) {

super(s);

p1 =(JPanel) this.getContentPane();

JPanel p2 = new JPanel();

l= new JLabel("Valeur en DT");

l2= new JLabel("Euro");

t1 = new JTextField(10);

t2 = new JTextField(10);

JLabel egal = new JLabel(" = ");

p1.setLayout(new FlowLayout());

p1.add(l);

p1.add(t1);

p1.add(egal);

p1.add(t2);

p1.add(l2);

conv = new JButton("Convertir");

p2.add(conv); p1.add(p2);

Controleur c=new Controleur(this);

conv.addActionListener(c);

setBackground(Color.lightGray);

setDefaultCloseOperation(JFrame.EXIT_ON_

CLOSE);

pack();

}

public static void main(String[] args) {

ConversionVue c = new

ConversionVue("Convertisseur de monnaies");

c.setVisible(true);

}

}

Exemple: Contrôleur


import java.awt.event.*;

public class Controleur implements ActionListener{

ConversionVue vue;

ConvertisseurModel model; Controleur(ConversionVue c)

{

vue=c;

model=new ConvertisseurModel(); }


if(e.getActionCommand().equals("Convertir") && (! vue.t1.getText().equals("")))

{

model.setValeurDT(Float.parseFloat(vue.t1.getText()));

vue.t2.setText(Float.toString(model.getValeurEuro()));

}

}

}

Résultat


chapitre i : développement des interfaces graphiques en java€¦ · introduction 3 mme hechkel...

Documents