TP 7 : Fédération de Boxe - Round 4 - IHM

TP 7 : Fédération de Boxe - Round 4 - IHM
Extrait du La page de Julien Seinturier
http://www.seinturier.fr/spip/spip.php?article85
TP 7 : Fédération de Boxe -
Round 4 - IHM
- Enseignements - Archives - 2013 / 2014 - DUT R&T IUT d'Aix-Marseille - Programmation Objet -
Date de mise en ligne : vendredi 4 avril 2014
Description :
Construction d'Interfaces Homme Machine (IHM) en Java, application à la gestion de teams et de boxeurs.
La page de Julien Seinturier
Copyright © La page de Julien Seinturier Page 1/7

TP 7 : Fédération de Boxe - Round 4 - IHM
Prérequis
Liens utiles :
API java 1.7 :http://docs.oracle.com/javase/7/docs/api/
Outils Java :http://docs.oracle.com/javase/7/docs/technotes/tools/index.html
Wiki sur les collections : http://fr.wikibooks.org/wiki/Programmation_Java/Collections
Les entrées/sorties en Java : http://docs.oracle.com/javase/tutorial/essential/io/
Les IHM en Java : [http://java.sun.com/docs/books/tutorial/uiswing/]
Les TPs en rapport :
TP 4 : Fédération de Boxe - Round 1 : Héritage
TP 5 : Fédération de Boxe - Round 2 : Collections
TP 6 : Fédération de Boxe - Round 3 - Entrée/Sorties
1. Concept Modèle-Vue-Contrôleur (MVC)
Ce TP va nous familiariser avec l'API de Java dédiée à la création d'interface graphique : Swing
http://java.sun.com/docs/books/tutorial/uiswing/). Swing regroupe un ensemble de composants graphiques de haut
niveau permettant la mise en place d'interfaces graphiques complètes. Les composants de Swing reposent sur le
concept de Modèle-Vue-Contrôleur utilisé dans de nombreux systèmes.
La première étape de ce TP est de se familiariser avec le concept MVC. Pour cela, vous pourrez vous reporter à
l'article de Wikipedia : http://fr.wikipedia.org/wiki/Modèle-Vue-Contrôleur.
En résumant très succinctement, le concept MVC implique la séparation des données, des contrôles et de l'interface
graphique. Dans notre cas, il s'agira de séparer les classes permettant de représenter les boxeurs, les teams et les
coups des les classes dédiées à l'interface.
2. Composant de fenêtre graphique : JFrame
L'API Swing repose sur la notion d'arbre graphique. Les noeuds de cet arbre sont les composants graphiques
pouvant afficher eux même d'autre composants graphiques. Les feuilles de l'arbre sont les composants ne pouvant
pas en contenir d'autre. Le premier contact avec Swing se fera par l'intermédiaire du composant de fenêtre
d'affichage. Ce composant est la racine de l'arbre graphique.
L'utilisation d'une JFrame est décrite sur le site de Sun dans un tutoriel dédié (
http://java.sun.com/docs/books/tutorial/uiswing/components/frame.html).
1. En utilisant ce tutoriel, créez une classe TestIHM qui permet d'afficher une fenêtre de taille 640x480 et dont le titre
est « Test IHM » et dont le comportement est tel que le programme s'arrête à la fermeture de la fenêtre.
L'affichage de la fenêtre se fait par la méthode setVisible(true). Cette fonction est présente pour de nombreux
composants graphique et permet d'afficher / cacher un composant
Copyright © La page de Julien Seinturier Page 2/7

TP 7 : Fédération de Boxe - Round 4 - IHM
3. Composant conteneur basique : JPanel
Une interface graphique est un ensemble de composants indépendants. Afin d'assembler des composants
graphiques, l'utilisation de conteneur est recommandée. Le JPanel est le conteneur le plus basique et le plus
polyvalent de l'API Swing. En utilisant le tutoriel sur le JPanel (
http://java.sun.com/docs/books/tutorial/uiswing/components/panel.html) :
2. Ajoutez à la fenêtre créée précédemment un panneau de couleur rouge.
INDICATION : L'ajout d'un composant à une JFrame se fait par la méthode getContentPane().add(). De plus, le
changement de couleur d'un JPanel se fait grâce à la méthode setBackgroung(Color).
4. Organisation des composants : Layout
La conception d'une interface graphique repose sur l'organisation des composants dans l'interface. Cette
organisation se fait au niveau des conteneurs (JFrame, JPanel, ...) par l'intermédiaire des layout manager. Nous nous
intéresserons durant ce TP à deux layout manager parmi les plus utilisés :
• BorderLayout (http://java.sun.com/docs/books/tutorial/uiswing/layout/border.html)
• GridBagLayout (http://java.sun.com/docs/books/tutorial/uiswing/layout/gridbag.html)
3. A partir des deux tutoriels ci-dessus, créez une interface affichant 5 panneaux de couleurs différentes (rouge, bleu,
vert, cyan et rose) et disposés selon votre envie.
INDICATION : La classe Color permet d'obtenir facilement une couleur : Color.RED, Color.GREEN, ...
5. Saisie d'un champ textuel : JTextField
Une interface graphique à pour but d'afficher mais aussi de saisir des informations. Un des composants les plus
simples de saisie est le JTextField, qui permet de saisir une chaine de caractères.
4. Creez une classe TestTextField définie comme suit :
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JFrame;
import javax.swing.JTextField;
public class TestTextField {
public static void main(String[] args){
JFrame jframe = null;
JTextField textfield = null;
jframe = new JFrame("TextField");
jframe.setSize(new Dimension(640, 480));
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
Copyright © La page de Julien Seinturier Page 3/7

TP 7 : Fédération de Boxe - Round 4 - IHM
textfield = new JTextField();
textfield.addActionListener(new ActionListener(){
@Override
public void actionPerformed(ActionEvent e) {
System.out.println(((JTextField)e.getSource()).getText());
}});
jframe.getContentPane().add(textfield);
jframe.setVisible(true);
}
}
Compiler et exécuter la classe puis observer ce qui se passe lorsque l'on appuie sur la touche "Entrée" après avoir
saisi du texte dans le JTextField.
Le contrôle et la communication avec des IHM sont réalisés en Java grâce aux évènements. La partie du code :
textfield.addActionListener(new ActionListener(){
@Override
public void actionPerformed(ActionEvent e) {
System.out.println(((JTextField)e.getSource()).getText());
}});
indique dans notre exemple que nous ajoutons un écouteur d'action (ActionListener) au JTextField qui sera
déclenché lorsqu'une action est effectuée sur celui-ci (une action étant par exemple le fait de presser la touche
"Entrée"). Lorsqu'une action est effectuée sur le JTextField, la méthode public void actionPerformed(ActionEvent
e) de l'écouteur est appelée. C'est à l'intérieur de cette méthode qu'il faut placer le code à effectuer pour répondre à
l'action (ici on affiche le contenu du JTextField sur la console).
5. Modifiez la classe TestTextField et créez à l'intérieur un BoxeurFrancais nommé « André Panza ».
Faites en sorte qu'à l'affichage le la fenêtre le JTextField affiche le prénom du boxeur et qu'a chaque modification
validée, son prénom soit mis à jour.
INDICATION : La méthode setText(String t) de JTextField permet d'y afficher la chaîne de caractères t.
6. Boutons de commande : JButton
Un composant essentiel des interfaces homme-machine est le bouton. Ce composant simple permet souvent de
déclencher une action (sauvegarder, valider, ...). L'API Swing met à disposition une classe permettant de créer et de
gérer des boutons : JButton. Un tutoriel complet pour l'utilisation des boutons est disponible à l'adresse : [
http://docs.oracle.com/javase/tutorial/uiswing/components/button.html].
6. Créez une classe TestButton dont le code est le suivant :
import java.awt.BorderLayout;
import java.awt.Dimension;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JButton;
Copyright © La page de Julien Seinturier Page 4/7

TP 7 : Fédération de Boxe - Round 4 - IHM
import javax.swing.JFrame;
import javax.swing.JTextField;
public class TestButton {
public static void main(String[] args){
// Objets necessaires a l'IHM
JFrame frame = null;
JTextField textfield = null;
JButton button = null;
// Creation du JFrame
frame = new JFrame("TextField");
frame.setSize(new Dimension(320, 100));
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// Creation du JTextField avec un texte par defaut
textfield = new JTextField("Cliquer sur le bouton");
// Creation du JButton affichant le texte "Enregistrer"
button = new JButton("Enregistrer");
// Affectation d'un nom a la commande du bouton
button.setActionCommand("ENREGISTRER");
// Attachement d'un ecouteur d'action au bouton
button.addActionListener(new ActionListener(){
@Override
public void actionPerformed(ActionEvent e) {
System.out.println("Click performed !!");
}});
// Placement des composants graphiques dans la JFrame
frame.getContentPane().setLayout(new BorderLayout());
frame.getContentPane().add(textfield, BorderLayout.CENTER);
frame.getContentPane().add(button, BorderLayout.SOUTH);
// Affichage de la JFrame
frame.setVisible(true);
}
}
Observez ce qui se passe sur la console quand le bouton est cliqué.
Tout comme le JTextField et beaucoup d'autre composants, le JButton est capable de déclencher des actions qui
peuvent être captées par un écouteur d'action. Le code suivant :
button.addActionListener(new ActionListener(){
@Override
Copyright © La page de Julien Seinturier Page 5/7