Programmation|

Graphique|
JAVA|
Généralités

Interface
Utilisateur
 Concepts

ØConstruire fenêtre graphique : objets graphiques,

Affichage …
ØProgrammation par événement : Comment faire
pour que le programme réagisse? gère les données
ØPrincipe Modèle-Vue-Contrôle affiche les données
communication et MAJ

Interface
Utilisateur
 Boite à outils graphique

ØJava propose deux boîtes à outils graphiques :

üAWT (Abstract Window Toolkit), simple, petite
et limitée
üSWING, cohérente, grosse et extensible.
ØLes deux peuvent s'utiliser dans les applets.
 SWING

ØPackage javax.swing;
ØFait parti des Java Foundation Classes (JFC).
ØFournir un riche ensemble de composants GUI :
Boutons, Listes, étiquettes, zones de texte …
ØSWING offre plusieurs mécanismes originaux,
pratiques et puissants.
ØSWING peut se programmer à plusieurs niveaux.
 SWING
Barre de titre (par défaut)

Titre - □ X
Menu1 | Menu2 | Menu3| …

Barre de
menu
(inexistante
par défaut)
Corps de la page
(JPanel)

Fenêtre graphique
(JFrame)
 Hello World
TestGraphiq.java
import javax.swing.*;
public class TestGraphiq {
public static void main (String[] args) {
JFrame f = new JFrame("Hello World");
// Composants ajoutés au frame courant.
f.setSize(300,200);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Hello World
TestGraphiq.java Importer le package
import javax.swing.*;
public class TestGraphiq { Créer un objet
public static void main (String[] args) { graphique
JFrame f = new JFrame("Hello World");
// Composants ajoutés au frame courant.
f.setSize(300,200); Définir la taille
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true); 300px
}
}

afficher
200px
 Méthodes Swing

ØsetLocation(int,int) : Modifier la position de la

fenêtre.
ØsetAlwaysOnTop(boolean) : toujours au premier
plan.
Øf.setResizable(boolean) : permettre ou interdire
le redimensionnement de la fenêtre.
ØsetTitle(String) : modifier le titre.
ØsetVisible(boolean) : la visibilité de la fenêtre.
 Méthodes Swing

ØsetLocation(int,int) : Modifier la position de la

fenêtre.
ØsetAlwaysOnTop(boolean) : toujours au premier
plan.
Øf.setResizable(boolean) : permettre ou interdire
le redimensionnement de la fenêtre.
ØsetTitle(String) : modifier le titre.
ØsetVisible(boolean) : la visibilité de la fenêtre.
ØsetDefaultCloseOperation(f.HIDE_ON_CLOSE)
(f.DISPOSE_ON_CLOSE);

(f.DO_NOTHING_ON_CLOSE
 Méthodes Swing

ØsetLocation(int,int) : Modifier la position de la

fenêtre.
ØsetAlwaysOnTop(boolean) : toujours au premier
plan.
Øf.setResizable(boolean) : permettre ou interdire
le redimensionnement de la fenêtre.
ØsetTitle(String) : modifier le titre.
ØsetVisible(boolean) : la visibilité de la fenêtre.
ØSize() : dimensions de la fenêtre.
ØsetBackground(Color) : modifier la couleur d’arrière-
plan.
 objets graphiques

Définir des fenêtres:

JApplet, JDialog, JFrame, JWindow
3 niveaux

Composer la fenêtre:
JPanel, JScrollPane, JSplitPane, …
Eléments de base:
JButton, JCheckBox, JTextField,
JTextArea, …
 Hello World
TestGraphiq.java
import javax.swing.*;
public class HelloWorld {
public static void main (String[] args) {
JFrame f = new JFrame("Hello World");
JLabel label = new JLabel("Bonjour");
JPanel p = (JPanel)f.getContentPane();
p.add(label);
p.setBackground(java.awt.Color.white);
f.setSize(300,200);
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Hello World
TestGraphiq.java
import javax.swing.*;
public class HelloWorld { Niveau
public static void main (String[] args) { supérieur
JFrame f = new JFrame("Hello World"); Composante de
JLabel label = new JLabel("Bonjour"); base
JPanel p = (JPanel)f.getContentPane();
p.add(label);
p.setBackground(java.awt.Color.white); Niveau
f.setSize(300,200); intermédiaire
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Hello World
TestGraphiq.java
import javax.swing.*;
public class HelloWorld { Niveau
public static void main (String[] args) { supérieur
JFrame f = new JFrame("Hello World"); Composante de
JLabel label = new JLabel("Bonjour"); base
JPanel p = (JPanel)f.getContentPane();
p.add(label);
p.setBackground(java.awt.Color.white); Niveau
f.setSize(300,200); intermédiaire
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Hello World
TestGraphiq.java
import javax.swing.*;
public class HelloWorld { Niveau
public static void main (String[] args) { supérieur
JFrame f = new JFrame("Hello World"); Composante de
JLabel label = new JLabel("Bonjour"); base
JPanel p = (JPanel)f.getContentPane();
p.add(label);
p.setBackground(java.awt.Color.white); Niveau
f.pack(); intermédiaire
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Hello World
TestGraphiq.java
import javax.swing.*;
public class HelloWorld { Niveau
public static void main (String[] args) { supérieur
JFrame f = new JFrame("Hello World"); Composante de
JLabel label = new JLabel("Bonjour"); base
JPanel p = (JPanel)f.getContentPane();
p.add(label);
p.setBackground(java.awt.Color.white); Niveau
f.pack(); intermédiaire
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.setVisible(true);
}
}
 Composition d’un fenêtre

(a) : créer une fenêtre (JFrame)

Associer (b) Afficher
à (a)
(b) : créer un ou plusieurs
composants intermédiaires
insérer (JPanel)
(c) dans
(b)
(c) : créer des composantes de
base
composition JFrame

Fenêtre principale

Barre de
Menu

ContentPa
ne (JPanel)
composition JFrame

Fenêtre principale

Barre de
Menu

ContentPa
ne (JPanel)
 Conteneurs

Dialog Tabbed Pane Frame Split pane

Tool bar

Internal frame
Layered pane
 Autres Composant de base

File chooser Color chooser

Progress
bar
Tool tip
Slider

Tree
22
 Composantes de base

ØJButton.
ØJCheckBox.
ØJRadioButton.
ØJComboBox.
JList
ØJlist.
ØJTextField.
ØJlabel.
ØJTable.
 JButton

ØBouton simple auquel on peut associer des

événements
oJButton jb= new JButton(“OK”);
 JButton

ØBouton simple auquel on peut associer des

événements
oJButton jb= new JButton(“OK”);
ojb.setMnemonic(‘o’); // ALT + o
ojb.setBorderPainted(false);
ojb.SetBackground(Color.white);
 JLabel

ØÉtiquette pouvant contenir du texte et image

oJLabel jl = new Jlabel(“Label 1”);
 JLabel

ØÉtiquette pouvant contenir du texte et image

oJLabel jl = new Jlabel(“Label 1”);
oSystem.out.println(jl.getText());
 JLabel

ØÉtiquette pouvant contenir du texte et image

oJLabel jl = new Jlabel(“Label 1”);
oSystem.out.println(jl.getText());
ojl.setIcon(new ImageIcon(“java.gif”));
 JLabel

ØÉtiquette pouvant contenir du texte et image

oJLabel jl = new Jlabel(“Label 1”);
oSystem.out.println(jl.getText());
ojl.setIcon(new ImageIcon(“java.gif”));
ojl.setVerticalTextPosition(SwingConstants.BOTTO
M)
ojl.setHorizontalTextPosition(SwingConstants.CEN
TER);
 JTextField

ØChamp de texte
oJTextField jt = new JTextField(“Zone Texte”);
oString nom = jt.getText();
ojt.setText(nom);
 JTextField

ØChamp de texte
oJTextField jt = new JTextField(“Zone Texte”);
oString nom = jt.getText();
ojt.setText(nom);
ojt.setColumns(nom.length());
oString x = jt.getSelectedText();
 JmachinButton

ØJCheckBox
• cases à cocher
 JmachinButton

ØJCheckBox
• cases à cocher
ØJRadioButton
• dans un groupe de boutons “radio”
 JComboBox

ØListe déroulante (ouverte ou fermée)

Øvector ou tableau d’objets passés en paramètres
oJComboBox cb = new JComboBox(items);
 JComboBox

ØListe déroulante (ouverte ou fermée)

Øvecteur ou tableau d’objets passés en paramètres
oJComboBox cb = new JComboBox(items);
ocb.setMaximumRowCount(4);
ocb.setEditable(true); // JTextField
 JComboBox

ØListe déroulante (ouverte ou fermée)

Øvector ou tableau d’objets passés en paramètres
oJComboBox cb = new JComboBox(items);
ocb.setMaximumRowCount(4);
ocb.setEditable(true); // JTextField
ocb.addItem("hello");
ocb.addItem(1);
 Composantes intermédiaires

ØUtilisés pour organiser ou positionner d’autres

composants (de base) :
oJPanel utilisé pour regrouper d’autres
composants.
oJScrollPane fourni une vue avec les scroll bars.
oJSplitPane divise en 2 composants.
o…
üLa technique standard,
JPanel p = new JPanel(); üPermet plus de flexibilité,
p.add(new JButton("on"));
p.add(new JButton("off"));
üLe JPanel peut être ajouté à
d’autres structures pour modifier
ou étendre l’application.
 Exemple JFrame

ØOn veut créer une Jframe avec un bouton dedans.

 Exemple JFrame

ØOn veut créer une Jframe avec un bouton dedans.

JFrame f = new JFrame(“Exemple de

JFrame");
JButton b = new JButton(“OK");
JPanel cp = (JPanel)f.getContentPane();
cp.add(b);
 Exemple JFrame

ØOn veut créer une Jframe avec un bouton dedans.

JFrame f = new JFrame(“Exemple de

JFrame");
JButton b = new JButton(“OK");
JPanel cp = (JPanel)f.getContentPane();
cp.add(b);
JFrame f = new JFrame(" Exemple de JFrame
");
JButton b = new JButton(“OK");
f.getContentPane().add(b);
 Exemple JFrame

ØOn veut créer une Jframe avec un bouton dedans.

JFrame f = new JFrame(“Exemple de

JFrame");
JButton b = new JButton(“OK");
JPanel cp = new Jpanel();
cp.add(b);
f.add(cp);
 Problèmes de placement

ØLe placement est calculé au dépend des

conteneurs.
ØSoit les composants sont placés explicitement (x,
y, largeur, hauteur)
ØSoit ils sont gérés par un LayoutManager qui
calcul ces paramètres dynamiquement
• besoins des (taille min, max, normale) du
composant & positionnement relatif.
 Gestionnaires de placement

Ø FlowLayout
Ø Place les composants de gauche à droite.
Ø CardLayout
Ø Superpose les composants.
Ø GridLayout
Ø Découpe en une grille régulière sur laquelle les
composants sont placés.
Ø GridBagLayout
Ø Découpe en une grille et place les composants sur une
ou plusieurs cases.
Ø BorderLayout
Ø Découpe en 5 régions: south, north, east, west, center.
 Gestionnaires de placement

Ø FlowLayout
Ø Place les composants de gauche à droite.
Ø CardLayout
Ø Superpose les composants.
Ø GridLayout
Ø Découpe en une grille régulière sur laquelle les
composants sont placés.
Ø GridBagLayout
Ø Découpe en une grille et place les composants sur une
ou plusieurs cases.
Ø BorderLayout
Ø Découpe en 5 régions: south, north, east, west, center.
 Gestionnaires de placement

Ø FlowLayout
Ø Place les composants de gauche à droite.
Ø CardLayout
Ø Superpose les composants.
Ø GridLayout
Ø Découpe en une grille régulière sur laquelle les
composants sont placés.
Ø GridBagLayout
Ø Découpe en une grille et place les composants sur une
ou plusieurs cases.
Ø BorderLayout
Ø Découpe en 5 régions: south, north, east, west, center.
 Gestionnaires de placement

Ø FlowLayout
Ø Place les composants de gauche à droite.
Ø CardLayout
Ø Superpose les composants.
Ø GridLayout
Ø Découpe en une grille régulière sur laquelle les
composants sont placés.
Ø GridBagLayout
Ø Découpe en une grille et place les composants sur une
ou plusieurs cases.
Ø BorderLayout
Ø Découpe en 5 régions: south, north, east, west, center.
 Gestionnaires de placement

Ø FlowLayout
Ø Place les composants de gauche à droite.
Ø CardLayout
Ø Superpose les composants.
Ø GridLayout
Ø Découpe en une grille régulière sur laquelle les
composants sont placés.
Ø GridBagLayout
Ø Découpe en une grille et place les composants sur une
ou plusieurs cases.
Ø BorderLayout
Ø Découpe en 5 régions: south, north, east, west, center.
 Problèmes de placement

ØLe placement est calculé au dépend des conteneurs. Soit

les positions des composants de bases sont gérées par un
LayoutManager qui calcul ces paramètres dynamiquement:
• besoins des (taille min, max, normale) du composant &
positionnement relatif.

ØSoit les composants sont placés explicitement (x, y,

largeur, hauteur):
•Aucun LayoutManager utilisé → Spécifier Taille/position
JPanel.setLayout(null);
a.setBounds(x,y,h,l);
 Exemple JFrame

ØOn se propose de réaliser une simple fenêtre avec deux

champs texte pour lire deux valeurs de X et Y, et un bouton
pour calculer la somme des deux valeurs et l’afficher dans
un autre JLabel. 300 px

260px

100px
200 px

140px
20px
 Exemple JFrame

import java.awt.*;
import javax.swing.*;
public class Fenetre{
public static void main(String args[]){
// Créer un composant de niveau supérieur
// Créer un composant intermédiaire
// Créer des composants de base avec leurs tailles et
positions
// Ajouter ces derniers dans le composant intermédiaire
// Associer le composant inter. À la fenetre
// Afficher la fenetre
}
}
 Exemple JFrame

import java.awt.*;
import javax.swing.*;
public class Fenetre{
public static void main(String args[]){
// Créer un composant de niveau supérieur
Jframe f = new Jframe ("Exemple Jframe");
// Créer un composant intermédiaire
P = new JPanel(); P.setLayout(null);
// Créer des composants de base avec leurs tailles et
positions
private JLabel Etiq1, Etiq2, EtiqR;
private JTextField ZText1;
private JTextField ZText2;
private JButton Bouton1;
Bouton1 = new JButton();
Bouton1.setBounds(new Rectangle(90, 85, 80, 20));
Bouton1.setText("X + Y");
}
}
 Exemple JFrame

import java.awt.*;
import javax.swing.*;
public class Fenetre{
public static void main(String args[]){
// Créer un composant de niveau supérieur
Jframe f = new Jframe ("Exemple Jframe");
// Créer un composant intermédiaire sans
LayoutManager
P = new JPanel(); P.setLayout(null);
// Créer des composants de base avec leurs tailles et
positions
private JLabel Etiq1, Etiq2, EtiqR;
private JTextField ZText1;
private JTextField ZText2;
private JButton Bouton1;
Bouton1 = new JButton();
Bouton1.setBounds(new Rectangle(90, 85, 80, 20));
Bouton1.setText("X + Y");
}
}
 Exemple JFrame

import java.awt.*; import javax.swing.*;

public class Fenetre{
public static void main(String args[]){
// Créer un composant de niveau supérieur
Jframe f = new Jframe ("Exemple Jframe");
// Créer un composant intermédiaire LayoutManager
P = new JPanel(); P.setLayout(null);
// Créer des composants de base avec leurs tailles et
positions
private JLabel Etiq1, Etiq2, EtiqR;
private JTextField ZText1; Déclaration des
private JTextField ZText2; Composantes
private JButton Bouton1; de base
Bouton1 = new JButton();
Bouton1.setBounds(90, 85, 80, 20);
Bouton1.setText("X + Y");
…
}
}
 Exemple JFrame

import java.awt.*; import javax.swing.*;

public class Fenetre{
public static void main(String args[]){
// Créer un composant de niveau supérieur
Jframe f = new Jframe ("Exemple Jframe");
// Créer un composant intermédiaire
P = new JPanel(); P.setLayout(null);
// Créer des composants de base avec leurs tailles et
positions
private JLabel Etiq1, Etiq2, EtiqR;
private JTextField ZText1; Définir la taille
private JTextField ZText2; et position du
private JButton Bouton1; bouton Bouton1
Bouton1 = new JButton();
Bouton1.setBounds(90, 85, 80, 20);
Bouton1.setText("X + Y");
…
}
}
 Exemple JFrame

import java.awt.*; import javax.swing.*;

public class Fenetre{
public static void main(String args[]){
// Créer un composant de niveau supérieur
Jframe f = new Jframe ("Exemple Jframe");
// Créer un composant intermédiaire
P = new JPanel(); P.setLayout(null);

20px
// Créer des composants de base avec leurs tailles et
positions 80px
private JLabel Etiq1, Etiq2, EtiqR;
private JTextField ZText1;
private JTextField ZText2;
private JButton Bouton1;
Définir la taille
Bouton1 = new JButton();
et position du
Bouton1.setBounds(90, 85, 80, 20);
Bouton1.setText("X + Y"); bouton Bouton1
…
}
}
 Associer événement au bouton

ØUn composant enregistre des auditeurs

d’évènements(Listeners).
ØLorsqu’un événement se produit dans un
composant, il est envoyés aux Listeners
enregistrés.
ØChaque auditeur définit les actions à exécuter
dans des méthodes aux noms prédéfinis.
ØExemple :
ØUn Bouton enregistre des ActionListener
ØLors d’un clic sur un bouton, un ActionEvent est envoyé
aux ActionListener enregistrés.
ØCeci provoque l’exécution de la méthode
actionPerformed de chaque ActionListener.
 Exemple JFrame

Bouton1 = new JButton();

Bouton1.setBounds(new Rectangle(90, 85, 80, 20));
Bouton1.setText("X + Y");

Associer un
événement au
bouton
 Événement

NomComp.addXXXListener(new java.awt.event.XXXAdapter() {
public void xxxYYY(java.awt.event.XXXEvent e){
// Liste des actions à exécuter
……
}
});
Ø Faut changer la valeur de xxx par Mouse/Key,
Ø Faut changer YYY par le type d’événement détectable :
Clicked, Pressed, Released, Entered, Exited
 Événement

NomComp.addActionListener(new java.awt.event.ActionListener() {
public void actionPerformed(java.awt.event.ActionEvent e){
// Liste des actions à exécuter
……
}
});
 Exemple JFrame

Bouton1.addMouseListener(new
java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent e)
{
System.out.println(“Bouton clic !!");
}
});
 Exemple JFrame

Bouton1.addMouseListener(new
java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent e)
{
System.out.println(“Bouton clic !!");
}
}); En cas de clic sur bouton,
Afficher dans console le
message
‘Bouton clic !!’
 Exemple JFrame

Bouton1.addMouseListener(new
java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent e)
{
…
}
});

En cas de clic sur bouton, on va

modifier le contenu du dernier JLabel
pour afficher le résultat de
JLabel1 + JLabel2
 Exemple JFrame

Bouton1.addMouseListener(new
java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent e)
{
EtiqR.setText(ZText1.getText() + ZText2.getText());
}
});
 Exemple JFrame

Bouton1.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent e) {
int Resultat =
Integer.parseInt(ZText1.getText())+Integer.parseInt(ZText2.getText());
EtiqR.setText(Resultat);
}
});
 Exemple JFrame

Bouton1.addMouseListener(new java.awt.event.MouseAdapter() {
public void mouseClicked(java.awt.event.MouseEvent e) {
int Resultat =
Integer.parseInt(ZText1.getText())+Integer.parseInt(ZText2.getText());
EtiqR.setText(Resultat+””);
}
});
 JMenu

ØUne instance de JMenuBar par Jframe

•setJMenuBar(JMenuBar mb);
 JMenu

ØUne instance de JMenuBar par Jframe

•setJMenuBar(JMenuBar mb);
ØPlusieurs Jmenu par JMenuBar
•add(JMenu jm);
 JMenu

ØUne instance de JMenuBar par Jframe

•setJMenuBar(JMenuBar mb);
ØPlusieurs Jmenu par JMenuBar
•add(JMenu jm);
ØPlusieurs JMenuItem/JCheckboxMenu par Jmenu
•add(JMenuItem mi);
•addSeparator();
 Simulation crédit
Il faut spécifie le montant à emprunter, le taux du crédit (comprise
entre 0.1 et 5%), la durée (5, 10, 15, 20 ou 25 années). Ensuite, la valeur
de la mensualité que l’utilisateur doit payer par mois est affiché. La
formule utilisée est:

25 ans
 Simulation crédit: amélioration (1)
À chaque fois que l’utilisateur change le taux, la durée, ou le montant à
emprunter, la valeur de la mensualité devrait s’actualiser
automatiquement, sans avoir à recliquer sur le bouton ‘Calculer’.
Ainsi, il faut associer différents écouteurs pour divers événements, qui
devraient être associés au JTextField, au JSpinner et aussi au JSlider.

25 ans
 Simulation crédit : amélioration (2)
On distingue entre trois types de demandeur de crédit : un client à
risque (mensualité >50% du salaire), un client à moyen risque
(mensualité>30% du salaire) et un client sans risque lorsque la mensualité
calculée est inférieur à 1/3 du salaire. Ainsi, on ajoute un champ de texte
pour permettre à l’utilisateur de spécifier son salaire, afin qu’on puisse
afficher la mensualité en Rouge si client à risque, Orange pour client à
risque moyen et Vert dans le dernier cas.

25 ans
 Simulation crédit : amélioration (3)
Au fur et à mesure que le client saisisse la valeur du montant à
emprunter, la valeur de la mensualité devrait être calculée, sans avoir à
cliquez sur un des autres composants graphiques (JButton, JSpinner,
JSlider,…). Pour optimiser le calcul, on ne commencera à calculer la
valeur de la mensualité que devrait payer le client qu’à partir d’un
montant de 5chiffres (valeur minimale du montant à considérer : 10000
Drhms).

25 ans
 Editeur de factures
On désire proposer une application qui devrait aider une secrétaire à
élaborer des factures, en spécifiant la liste des articles, leurs prix
unitaires, leurs quantités. Ainsi, l’application devrait calculer le prix total
de chaque article, ainsi que le prix total que devrait payer le client. La
date de la facture peut aussi être choisie depuis l’interface.

22/02/2020 36137
 Editeur de factures (2)
Il faudrait proposer à l’utilisateur la possibilité de supprimer une ligne
depuis le tableau. Ainsi, un bouton permet de supprimer la ligne
sélectionnée sur la tableau. Si jamais aucun ligne n’a été sélectionnée,
une boite de dialogue demande à l’utilisateur de saisir l’indice d’une
ligne, et de la supprimer depuis le tableau.

2
Factures: signature et impression (3)

22/02/2020 36137