Universit Ibnzohr,

ENSA Agadir
TP JAVA N 7 - Swing
4me Anne G.Info,
Anne 2013-2014,
Prof. R . Ezzahir
Objetif:
Matriser les techniques de ralisation dinterfaces graphique avec java Swing.
Prrequis
Cours JAVA N 8
Exercice 1 : Construire une interface du bas en haut (bottom up)
Rappel
L'ordre d'instruction de construction d'un composant
Cre-le
Configure-le
Ajoute-lui ses fils (si conteneur)
Ajoute-le son parent (si pas JFrame)
coute-lui
Construire de GUI du bas en haut (bottom up)
La cration:
Fentre (Frame)
Panneau (Panel)
composants (Components)
couteurs (Listeners)
Lajout: (bottom up)
couteurs aux composants
composants au panneau
panneau au fentre

Avant de commencer votre TP vous devez tlcharger la documentation du package Swing
http://www.oracle.com/technetwork/java/javase/documentation/java-se-7-doc-download-435117.html
Exercice 1. Crer une fentre contenant un seul button
public class MaPremiereFenetre {
public static void main(String[] args) {
//cration
JFrame f = new JFrame("ma premiere fenetre "); // creation d'un fentre
JPanel p = new JPanel( ); // creation d'un panneau contenneur
JButton b1 = new JButton("cliquez ici"); // cration du composant bouton
//l'ajout: //couteurs, pas d'couteurs jusqu' prsent
p.add(b1); // add button to panel
f.setContentPane(p); // add panel to frame
f.setVisible(true); // par dfaut, une fentre est invisible ; on demande
//ici ce que la fentre soit visible.
}
}



aprs agrandir

2. Qu'est ce que vous remarquez? Essayer de fermer la fentre en cliquant sur le bouton fermer? Est ce que votre programme s'est termin?
3. Comment peutons-nous initialiser la dimension de la fentre?
4. Ajouter la ligne suivante pour fixer la taille de la fentre (300, 200).
f.setSize(400,200);
4. Comment pouvons-nous terminer une application JFrame?
5. La Fermeture d'une application JFrame peut tre fait par le rglage par dfaut. Ajouter la ligne suivante dans votre code et relancer
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Exercice 2. Gestion d'vnements en Swing.
Swing utilise les classes de gestion d'vnements AWT (paquet java.awt.event ).
Swing introduit quelques nouvelles classes de gestion d'vnements (dans le paquet javax.swing.event ), mais ils ne sont pas souvent
utiliss.
Java adopte le modle (vnement-dlgation") de la programmation vnementielle "Event-Driven-programming", comme la plupart des
langages de programmation visuels (tels que Visual Basic et Delphi).
Dans la programmation vnementielle, un morceau de code de gestion des vnements dit "callback" est excut
(ou rappel par le sous-systme graphique) lorsqu'un vnement est activ en rponse une entre de l'utilisateur
(par exemple, un clic de la souris ou la touche Entre est tape).
Ce n'est pas comme le modle procdural, o les codes sont excuts de manire squentielle.
Trois objets sont impliqus dans la gestion de l'vnement: source(s) d'vnement, auditeur(s) d'vnement et un objet vnement.
L'objet source d'vnement (comme Bouton et Textfield ) interagit avec l'utilisateur. Lors de l'activation d'un vnement, il cre un objet
reprsentant cet vnement. Cet objet vnement sera envoy par message tous les couteurs enregistrs chez l'objet source, et un
callback de l'auditeur appropri au traitement de cet vnement est appel en arrire plan pour fournir la rponse. En d'autres termes, une
source veille va dclencher un vnement tous ses auditeurs.
Pour exprimer leur intrt pour l'vnement de telle ou telle source, les auditeurs doivent tre inscrites chez la source d'vnement.
Donc, l'auditeur "souscrit" chez une source d'vnement, et ce dernier "publie" l'vnement tous ses abonns lors d'un 'activation. Ceci est
connu comme modle de conception observ-observateur.
Cycle d'activation-traitement d'un vnement
1. Les interfaces MouseEvent et MouseListener et MouseAdapter dfinissent des mthodes de gestion d'vnements associs la souris.
Ajoutez un couteur de souris sur le bouton b1, qui coute l'vnement clic et change la couleur du fond du bouton en cliquant l-dessus
b1.addMouseListener(new MouseListener(){
public void mouseClicked(MouseEvent e) {
((JButton) e.getSource()).setBackground(Color.RED);
}
// ...
} );
Listez l'ensemble d'vnement associs la souris (voir documentation)?
A quoi serve MouseAdapter (voir documentation)?
Modifiez vous code pour utiliser MouseAdapter au lieu de MouseListener. Remplacer le segment de code prcdent par le code suivant:
b1.addMouseListener(new MouseAdapter(){
public void mouseClicked(MouseEvent e) {
((JButton) e.getSource()).setBackground(Color.RED);
}
} );
Vous avez manipul un objet de type MouseEvent sans le crer, qui a cr cet objet?
Pouvez-vous changer le couleur du panneau p en rouge lors d'un clic sur le bouton? Comment?
class MyMouseAdapter extends MouseAdapter{
private Component c;
private Color color;
@Override
public void mouseClicked(MouseEvent e) {
c.setBackground(color);
}

public MyAdapter(Component c, Color color){
this.c = c;
this.color = color;
}

};

//b1.addMouseListener(new MyAdapter(b, Color.RED));
b1.addMouseListener(new MyAdapter(p, Color.RED));
Exercice 3. ActionEvent et ActionListener
En ralit l'vnement que vous avez manipul jusqu' prsent est un vnement d'action (l'utilisateur excute une action clic et l'application
rpondre en fonction du bouton (ou de la commande) choisi(e). Donc le programme doit tre orient action au lieu d'utiliser les vnements de
bas niveau de la souris. Le composent bouton dfini une mthode d'ajout d'couteur de type ActionListener.
public void addActionListener(ActionListener l)
ActionListener est une interface dfinie dans l'API AWT :
public interface ActionListener extends EventListener {
void actionPerformed(ActionEvent e);
}
Modifiez votre code pour utiliser ActionListener au lieu de MouseAdapter. L'tiquette du bouton b1
sera rempalc par "Rouge". Un deuxime bouton b2 avec l'tiquette "Bleu" sera aussi ajout pour en
changer la couleur du fond du panneau en bleue lors d'un clic sur b2.
JButton b1 = new JButton("Rouge");
JButton b2 = new JButton("Bleu");
class EcouteurActionBouton implements ActionListener {
private JComponent c;
public EcouteurActionBouton(JComponent c ) {
this.c = c;
}
public void actionPerformed(ActionEvent e) {
String commande = e.getActionCommand();
if (commande.equals("Rouge")) {
this.c.setBackground(Color.RED);
}
else if (commande.equals("Bleu")) {
this.c.setBackground(Color.BLUE);
}
}
}
b.addActionListener(new EcouteurActionBouton(p));
b2.addActionListener(new EcouteurActionBouton(p));
Ajoutez un troisime bouton b3 au panneau (sans couteur) avec le texte "Quelle couleur?".
Ajoutez un composant JLabel colorPanelLabel au panneau (sans couteur) avec le texte initial
"Bonjour".
Modifiez le code la classe interne EcouteurActionBouton pour l'utiliser comme couteur au bouton b3,
qui va afficher le nom de la couleur du fond du panneau dans l'tiquette colorPanelLabel.
...
JButton b3 = new JButton("Quelle couleur?");
JLabel colorPanelLabel = new JLabel("Bonjour");
...
class EcouteurActionBouton implements ActionListener {
....
else if (commande.equals("Quelle couleur?")) {
if( c.getBackground().equals(Color.RED)){
((JLabel) this.c.getComponent(3)).setText("Rouge");
}else if( c.getBackground().equals(Color.BLUE)){
((JLabel) this.c.getComponent(3)).setText("Bleu");
}
}
}
}
...
b3.addActionListener(new EcouteurActionBouton(p));
Exercice 4. Gestionnaires de disposition (Layout Managers)
Le gestionnaire de disposition permet de contrler automatiquement le placement de composants sur un
panneau. La figure suivante montre quelques heuristiques du gestionnaire de disposition (layout
managers).
Quelques heuristiques du gestionnaire de disposition (layout managers)
Par dfaut Swing utilise FlowLayout (disposition en coulement). Qu'est ce que se passe si l'en change
en null (p.setLayout(null))?
Comment faire pour rsoudre ce problme?
Ajoutez les lignes d'instruction votre code et excutez le. Qu'est ce que vous remarquez?
...
b1.setBounds(10, 20, 80, 40);
...
b2.setBounds(90, 20, 80, 40);
...
b3.setBounds(170, 20, 140, 40);
Faire apparatre l'tiquette colorPanelLabel.
Supprimez les instructions prcdentes et utilisez GridLayout.
Le tableau ci-dessous rpertorie les constructeurs de la classe GridLayout qui spcifie le nombre de
lignes et de colonnes.
Constructeur Raison
GridLayout (int lignes ,
int colonnes )
Cration d'une grille de disposition avec le nombre spcifi de lignes et de colonnes. Tous les
composants de disposition sont donns la mme taille. L'un, mais pas les deux,
lignes et colonnes peut tre gal zro, ce qui signifie qu'un nombre quelconque d'objets
peut tre plac dans une ligne ou dans une colonne.
GridLayout (int lignes ,
int cols , int hgap ,
int vgap )
Cration d'une disposition de la grille avec le nombre spcifi de lignes et de colonnes. En
outre, les carts horizontaux et verticaux sont fixs aux valeurs spcifies. Lacunes
horizontales sont places entre chacune des colonnes. Lacunes verticales sont places entre
chacune des ranges.
Testez l'instruction p.setLayout(new GridLayout() ) ;en suite p.setLayout(new GridLayout(2,2) ); et
p.setLayout(new GridLayout(2,2, 80, 80) );
Modifiez votre code pour testez BorderLayout (p.setLayout(new BorderLayout() ; ) les mthodes d'ajout
sont comme suit:
p.add(b1, BorderLayout.NORTH);
p.add(b2, BorderLayout.EAST);
p.add(b3, BorderLayout.WEST);
p.add(colorPanelLabel, BorderLayout.CENTER);
GridBagLayout est le gestionnaire de disposition recommand, puisqu'il plus souple et puissant. Pour
le bien maitriser rfrencez vous aux liens suivants :
http://bbclone.developpez.com/fr/java/tutoriels/uiswing/gridbaglayout/
http://docs.oracle.com/javase/tutorial/uiswing/examples/layout/index.html#GridBagLayoutDemo
GroupLayout est plus utilis par les IDEs comme netbeans:
http://docs.oracle.com/javase/tutorial/uiswing/layout/group.html
Exercice 5. L'apparence et la convivialit (Look and Feel)
Pour changer de look and feel pour lensemble des composants dune interface graphique :
UIManager.setLookAndFeel(look);// look un nom d'une classe
et si la fentre dj affiche on utilise :
SwingUtilities.updateComponentTreeUI( f );
Modifier votre code en rajoutant le segment de code suivant :
static HashMap<String, String> staticMap = new HashMap<String, String>();
...
JComboBox<String> jComboBox = new JComboBox<String>();
jComboBox.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e){
@SuppressWarnings("unchecked")
JComboBox<String> cb = (JComboBox<String>)e.getSource();
String nom=(String)cb.getSelectedItem();
String look = staticMap.get(nom);
try{
UIManager.setLookAndFeel(look);
SwingUtilities.updateComponentTreeUI(cb.getRootPane().getParent());
}
catch (Exception ex){
ex.printStackTrace();
}
}
});
UIManager.LookAndFeelInfo[] infos = UIManager.getInstalledLookAndFeels();
for (UIManager.LookAndFeelInfo info : infos){
String nom=info.getName();
String nomClasse=info.getClassName();
jComboBox.addItem(nom);
staticMap.put(nom, nomClasse);
}
Exercice 6. Une template pour les GUI avec Swing
Une template prfre pour criture une application GUI Swing est de la forme :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

// A Swing GUI application inherits from top-level container javax.swing.JFrame
public class ...... extends JFrame {

// private variables
// .....

/** Constructor to setup the GUI components */
public ......() {
Container cp = this.getContentPane();

// Content-pane sets layout
// cp.setLayout(new ....Layout());

// Allocate the GUI components
// .....

// Content-pane adds components
// cp.add(....);

// Source object adds listener
// .....

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Exit the program when the close-window button clicked
setTitle("......"); // "this" JFrame sets title
setSize(300, 150); // "this" JFrame sets initial size (or pack())
setVisible(true); // show it
}

/** The entry main() method */
public static void main(String[] args) {
// Run GUI codes in Event-Dispatching thread for thread-safety
SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
new ......(); // Let the constructor do the job
}
});
}
}
Modifiez votre code pour respecter cette template
Documentez vous sur la mthode invokeLater() de la classe SwingUtilitires.
Exercice 7 : Utiliser un IDE pour construire des applications avec GUI en java Swing
Eclipse est un IDE trs puissant, mais Netbeans est plus simple en dveloppement
Vous allez utiliser NetBeans pour construire la GUI de cet exercice.
1. Quelle est la fentre racine dune GUI? Quel est le conteneur racine associ cette fentre? Quel
est le gestionnaire de disposition (layout manager) par dfaut associ ce conteneur? Rappeler par un
dessin comment ce gestionnaire dispose les composants.
2. Crer une telle fentre racine que lon appellera (Jeu). Comment ferme-t-on proprement une fentre
3. Rappeler ce que vous savez de la classe JPanel. Crer un panneau nom cadreglobal avec le gestionnaire
de disposition BorderLayout.
4. Complter cadreglobal en mettant lest un panneau boiteBoutonsDplacements (instance de JPanel), au
sud un panneau boiteBoutonsJeu et au centre un panneau "panneauDessin". Que constatez-vous si vous
affichez linterface?
5. Colorer ces panneaux en vert lestet en rouge au sud, grce la mthode setBackground(Color.green)

6. Quelle est la classe SWING du composant bouton? Quel est le gestionnaire dagencement par dfaut dun
objet JPanel? Ajouter au panneau "boiteBoutonsDplacements" 4 boutons (pour les dplacements dans les
quatre directions (aDroite, aGauche, enHaut, enBas).
7. Ajouter au panneau "boiteBoutonsJeu", 2 boutons "Acclrer", "Ralentir".
8. Quelle est la classe SWING du composant tiquette? dune zone de saisie de texte?
9. Ajouter au panneau "panneauDessin" le texte : "ceci sera ma zone de dessin". En attendant de savoir
dessinerajouter ensuite unezone de saisie de texte de 10 lignes et 20 colonnes.
10. Modifier la forme de la fentre que constate-t-on? en particulier dans le panneau central? Pourquoi?
11. Modifier le gestionnaire dagencement du panneau"est" de faon regrouper les 4 boutons 2 par 2 sur 2
lignes. Quel gestionnaire faut-il choisir? Quels inconvnients apparaissent?
12. Quel autre gestionnaire choisir pour une meilleure disposition? Comparer les rsultats. Faites des
essais pour lamliorer.
13. Dessiner larborescence des composants graphiques de cet interface
14. Modifier la forme de la fentre que constate-t-on? en particulier dans le panneau central? Pourquoi?
15. Modifier le gestionnaire dagencement du panneau"est" de faon regrouper les 4 boutons 2 par 2 sur
2 lignes. Quel gestionnaire faut-il choisir ? Quels inconvnients apparaissent?
16. Quel autre gestionnaire choisir pour une meilleure disposition ? Comparer les rsultats. Faites
des essais pour lamliorer.
17. Dessiner larborescence des composants graphiques de cet interface
Exercice 8: Min projet (optionnel)
Le but de ce mini projet est d'acqurir plus d'exprience dans le dveloppement d'interfaces utilisateur en
Java et Swing.
Dvelopper une simple application de peinture qui permet aux utilisateurs de peindre des tableaux l'aide
de la souris.
Les fonctionnalits ncessaires aux utilisateurs sont:
peinture l'aide d'un outil pinceau (par cliquer-glisser sur la toile de peinture).
effacement d'un outil gomme (interaction similaire pinceau, comme la peinture avec la couleur de fond).
nombre illimit d'annulations de peinture ou actions d'effacement.
changer la couleur de la peinture pour le pinceau.
rglage de la largeur du pinceau et de gomme avec un curseur.
Lors de l'ouverture de la toile, montrer une bote "A propos" contextuel de dialogue qui affiche votre nom.
En outre, la fentre principale contenant la zone de peinture doit redimensionner pour remplir l'ecran
lorsque la fentre de l'application est redimensionne.
Enregistrer le tableau dans une image BMP, JPEG (optionelle)

Pour d'autre type de fentre (JDialog, JWindow ) et d'autres composants consultez les liens:
http://docs.oracle.com/javase/tutorial/uiswing/examples/components/index.html#SliderDemo
http://baptiste-wicht.developpez.com/tutoriels/java/swing/debutant/?page=fenetres#L3