Interface graphique
Objectif :
Construire une interface graphique :
• Objets graphiques : boutons, zone de saisie, etc ...
• Réagir à des évènements : click, glisser..
La programmation événementielle => modèle MVC (Modèle,
Vue, Contrôle)
Interface graphique
tool box :
Java propose deux boîtes à outils graphiques :
• AWT (Abstract Window Toolkit), simple, petite et limitée
• SWING, cohérente, grosse et extensible.
Interface graphique
Swing :
Le package javax.swing fait parti de Java Foundation Classes
(JFC). Il fournit 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 :
(personalisation des composant, programmation
événementielle, multi-threading...)
Interface graphique
Composition :
Dans une interface graphique il existe deux types de
composants :
• Les conteneurs : permettent d’y placer d’autres composants
(une fenêtre)
• Les composants atomiques : ne peuvent pas contenir d’autres
composants (bouton, un champ de texte, une image...)
Barre
titre
Corps de la
page JPanel
JFrame : fenêtre
Bouto
n
Interface graphique
Première interface:
importer le package
swing
Créer la fenêtre
graphique
Définir la
taille
Afficher
Interface graphique
Quelques méthodes swing :
• setLocation(int,int) : Modifier la position de la fenêtre.
• setAlwaysOnTop(boolean) : toujours au premier plan.
• 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.
Interface graphique
Les trois niveaux de la conception :
Interface graphique
Composition JFrame - les conteneurs :
Interface graphique
Composition JFrame - autres composants :
Interface graphique
Composition JFrame - les composants de base :
• JButton.
• JCheckBox.
• JRadioButton.
• JComboBox.
• Jlist.
• JTextField.
• Jlabel.
• JTable.
Interface graphique
JButton :
C’est un bouton simple auquel on peut associer un évènement.
• JButton jb= new JButton(“OK”);
• jb.setMnemonic(‘o’); // ALT + o
• jb.setBorderPainted(false);
• jb.setBackground(Color.white);
Interface graphique
JButton :
C’est un bouton simple auquel on peut associer un évènement.
• JButton jb= new JButton(“OK”);
• jb.setMnemonic(‘o’); // ALT + o
• jb.setBorderPainted(false);
• jb.setBackground(Color.white);
Interface graphique
JLabel :
Étiquette pouvant contenir un texte et une image
• JLabel jl = new JLabel(“Message ...”);
• System.out.println(jl.getText());
• jl.setIcon(new ImageIcon(“image.gif”));
• jl.setVerticalTextPosition(SwingConstants.
BOTTOM);
• jl.setHorizontalTextPosition(SwingConsta
nts.CENTER);
Interface graphique
JTextField :
Champ de texte à remplir
• JTextField jt = new JTextField(“Zone Texte”);
• String text = jt.getText();
• jt.setText(“Bonjour”);
• jt.setColumns(nom.length());
Interface graphique
JCheckBox :
Créer des cases à cocher
• JCheckBox cb1 = new JCheckBox("Java");
• JCheckBox cb2 = new JCheckBox("Python");
• JCheckBox cb3 = new JCheckBox("C++");
JRadioButton :
Créer des boutons radio
• JRadioButton rb1 = new JRadioButton("Java");
• JRadioButton rb2 = new JRadioButton("Python");
• JRadioButton rb3 = new JRadioButton("C++");
Interface graphique
JComboBox :
Liste déroulante (ouverte ou fermée)
On utilise un vector ou tableau d’objets passés en paramètres
• JComboBox<E> cb = new JComboBox<E>(items);
• cb.addItem(newItem);
• cb.setEditable(true);
Interface graphique
Composantes intermédaires :
Utilisés pour organiser ou positionner d’autres composants (de
base) :
• JPanel : utilisé pour regrouper d’autrescomposants.
• JScrollPane fourni une vue avec les scroll bars.
• JSplitPane divise en 2 composants.
Exemple :
Interface graphique
Placement des composants :
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
FlowLayout : Place les composants
paramètres de gauche à droite.
dynamiquement.
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.
Interface graphique
Placement des composants - FlowLayout:
Place les composants de gauche à droite.
Interface graphique
Placement des composants - GridLayout:
Découpe en une grille régulière sur laquelle les composants sont
placés.
Interface graphique
Placement des composants - GridBagLayout:
Découpe en une grille et place les composants sur une ou
plusieurs cases.
Interface graphique
Placement des composants - BorderLayout :
Découpe en 5 régions : south, north, east, west, center.
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Aucun LayoutManager utilisé → il faut Spécifier
la taille et position :
• JPanel.setLayout(null);
• composant.setBounds(x,y,h,l);
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour calculer leur somme et l’afficher dans un
JLabel.
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour
public calculer
static leur somme
void main(String args[]) {et l’afficher dans un
// Créer un composant de niveau supérieur
JLabel. // Créer un composant intermédiaire sans LayoutManager
// Créer des composants de base avec leurs tailles et
positions
// Ajouter ces derniers dans le composant intermédiaire
// Associer le composant inter. À la fenêtre
// Afficher la fenêtre
}
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour
public calculer
static leur somme
void main(String args[]) {et l’afficher dans un
JLabel. // Créer un composant de niveau supérieur
JFrame f = new JFrame ("SOMME");
}
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour
public calculer
static leur somme
void main(String args[]) {et l’afficher dans un
JLabel. // Créer un composant intermédiaire sans LayoutManager
JPanel p = new JPanel();
p.setLayout(null);
}
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
boutonpublic
pourstatic void main(String
calculer leur sommeargs[]) {et l’afficher dans un
// Créer des composants de base avec leurs tailles et
JLabel. positions
JLabel jlx, jly, jls;
JTextField jtx;
JTextField jty;
JButton btn1;
btn1 = new JButton();
btn1.setBounds(90, 85, 80, 20);
btn1.setText("X + Y");
}
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour calculer leur somme et l’afficher dans un
public static void main(String args[]) {
JLabel. // Créer des composants de base avec leurs tailles et
positions
// Ajouter ces derniers dans le composant intermédiaire
// Associer le composant inter. À la fenêtre
// Afficher la fenêtre
}
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour
public calculer
static leur somme
void main(String args[]) {et l’afficher dans un
// Ajouter ces derniers dans le composant intermédiaire
JLabel. p.add(jlx);
p.add(jly);
p.add(jtx);
p.add(jty);
p.add(btn1);
p.add(jls);
}
Interface graphique
Placement des composants :
Le placement est calculé au dépend des conteneurs.
• Soit les composants sont placés explicitement (x,y, largeur,
hauteur).
Exemple : On souhaite réaliser une fenêtre avec deux
champs texte pour lire deux valeurs de X et Y, et un
bouton pour calculer leur somme et l’afficher dans un
public static void main(String args[]) {
JLabel. // Associer le composant inter. À la fenêtre
// Afficher la fenêtre
f.add(p);
f.setVisible(true);
}
Interface graphique
Associer à un évènement :
Un composant enregistre des écouteurs d’évènements
(Listeners).
• Un événement se produit dans un composant => envoyé aux
Listeners enregistrés.
Un Bouton enregistre des ActionListener
• • Chaque
Lors d’unListener
clic sur undéfinit
bouton,les
unactions à exécuter
ActionEvent dans
est envoyé des
aux
méthodes auxenregistrés.
ActionListener noms prédéfinis.
• Ceci provoque l’exécution de la méthode actionPerformed de
chaque ActionListener.
Associer
l’évènment
Click à ce
bouton
Interface graphique
Associer à un évènement :
Un composant enregistre des écouteurs d’évènements
(Listeners).
• Un événement se produit dans un composant => envoyé aux
Listeners enregistrés.
composant.addXXXListener(new
• Chaque java.awt.event.XXXAdapter()
Listener définit les actions { à exécuter dans des
public
méthodes aux void xxxYYY(java.awt.event.XXXEvent
noms prédéfinis. e){
// Liste des actions à exécuter
……
}
});
• Remplacer xxx par Mouse/Key
• Remplacer YYY par le type d’événement détectable :
Clicked, Pressed, Released, Entered, Exited
Interface graphique
Associer à un évènement :
Un composant enregistre des écouteurs d’évènements
(Listeners).
• Un événement se produit dans un composant => envoyé aux
Listeners enregistrés.
btn1.addMouseListener(new
• Chaque java.awt.event.MouseAdapter()
Listener définit les actions { à exécuter dans des
public
méthodes auxvoid mouseClicked(java.awt.event.MouseEvent
noms prédéfinis. e)
{
System.out.println("CLICK !!");
}
});
Exercice: Compléter le code.
Interface graphique
Placement des composants :
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.
Interface graphique
JMenu :
Composant de Swing utilisé pour créer des menus dans les
interfaces graphiques Java.
• JMenu est utilisé avec JMenuBar (la barre de menus) et
JMenuItem (les éléments de menu).
Interface graphique
JMenu :
Composant de Swing utilisé pour créer des menus dans les
interfaces graphiques Java.
• JMenu est utilisé avec JMenuBar (la barre de menus) et
JMenuItem (les éléments de menu).
• JMenuBar : barre de menu principale (placée en haut
d'une fenêtre).
• JMenu : un menu déroulant (ex : "Fichier", "Édition").
• JMenuItem : un élément cliquable dans un menu.
• JCheckBoxMenuItem ou JRadioButtonMenuItem :
éléments avec cases à cocher ou boutons radio.
Interface graphique
Application - Simulation crédit :
• Spécifier le montant à emprunter, le taux du crédit (compris
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:
Interface graphique
Application - Simulation crédit :
Change le taux, la durée, ou le montant à emprunter -->
actualise automatiquement la valeur de la la valeur de la
mensualité(sans devoir recliquer sur le bouton ‘Calculer’).
N.B. : associer différents écouteurs pour divers événements, qui
devraient être associés au JTextField, au JSpinner et aussi au
JSlider.
Interface graphique
Application - Simulation crédit V2 :
Soit 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 < 1/3 du salaire.
Ajouter un JTextField pour spécifier le salaire --> afficher la
mensualité en Rouge si client à risque, Orange pour client à
risque moyen et Vert dans le dernier cas.
Interface graphique
Application - Editeur de factures :
On désire élaborer des factures, en spécifiant la liste des
articles, leurs prix unitaires, leurs quantités.
L’application calcule 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.
Interface graphique
Application - Editeur de factures :
Proposer à l’utilisateur la possibilité de supprimer une ligne
depuis le tableau. Un bouton permet de supprimer la ligne
sélectionnée. Si 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.
Valider et imprimer au format PDF.
