Chapitre 9 Conception d’interface graphique.pdf

Programmation orientée objet en Java
Cours n◦9: Conception d’interface graphique
ISMAILI ALAOUI El Mehdi 1
25 décembre 2021
1. Université Moulay Ismail Faculté des Sciences de Meknès Département d’Informatique
ISMAILI ALAOUI El Mehdi Programmation orientée objet en Java 25 décembre 2021 1 / 31

Plan
1 Introduction
2 AWT
Les conteneurs
Les méthodes offertes par Component
Les gestionnaires de présentation
Les composants
3 swing
Présentation
Conteneurs swing
Composants swing

Introduction
å Une interface graphique (IG) est formée de fenêtres contenant divers composants
graphiques : boutons, champs texte, listes de choix, zones de dessin, menus, etc.
å Java offre deux bibliothèques pour créer des IGs :
ç java.awt : Propose un ensemble d’outils de création des IGs. awt a été
introduite dès la première version de Java (Java 1.1).
ç javax.swing : C’est une amélioration de awt. Disponible depuis Java 1.2.

AWT
L’awt offre trois types d’éléments graphiques :
1 Les conteneur (Containers).
2 Les composant (Components).
3 Les gestionnaires de présentation (layout manager).

AWT Les conteneurs
Est un espace dans lequel on peut positionner
plusieurs composants. Les principales classes
d’AWT :
ç Window : Fenêtre principale sans cadre ni
menu.
ç Frame : Est une fenêtre contenant une
barre de titre, trois boutons (réduire,
agrandir, fermer) et un panneau (Panel).
ç Panel : Zone rectangulaire vide regroupant
des composants graphiques que l’on place
dans une Frame.
ç Dialog : Permet de réaliser des boîtes de
dialogue. Nécessite une frame.
ç ScrollPane : Barre de défilement utilisée
quand un composant ne peut être affiché
en totalité.
ç ...
Sous-classe de la classe java.awt.Container.
La classe Container est elle-même une sous-classe
de la classe Component.

AWT Les méthodes offertes par Component
Frame (String titre) Écrit la chaîne dans la barre de titre de la fenêtre.
setTitle(String titre) Place la chaîne dans la barre de titre de la fenêtre
setSize(int l, int h) Définit la hauteur et la largeur de la fenêtre.
setLocation(int x, int y) Définit l’emplacement de la fenêtre.
setBounds(int x, int y, int l, int h) Définit la largeur et la hauteur de la fenêtre et
la positionne en x,y sur l’écran.
setVisible(boolean b ) Affiche ou cache la fenêtre selon la valeur de b.
add(comp) Ajoute un composant graphique à la fenêtre.
setBackground(Color) Donne une couleur de fond à la fenêtre.
setForeground(Color) Couleur de de police, etc
setColor(Color c) Modifie la couleur de tracé dans l’environnement
de dessin
drawLine(int x, int y, int z, int t) Trace une ligne de (x,y) à (z,t)
drawRect(int x, int y, int l, int h) Trace le contour du rectangle de coin supérieur
gauche (x,y), de largeur l et de hauteur h.
fillRect(int x, int y, int l, int h) idem mais en remplissant le rectangle avec la
couleur du tracé.
drawString(String s ,int x, int y) Affiche avec la couleur du tracé le texte contenu
dans s en partant du point de coordonnées (x,y).

AWT Les gestionnaires de présentation
å Un gestionnaire de présentation (GP) gère le positionnement des composants d’un
conteneur en fonction de la taille de la fenêtre principale.
Idée :
On délègue à un composant la responsabilité du placement des objets graphiques sur le
conteneur ⇒ Chaque conteneur a un GP.
Avantages :
å On ne calcule pas de position ;
à Le GP gère le positionnement et le (re)dimensionnement des
composants d’un conteneur en fonction de la taille de la fenêtre.
å Code beaucoup plus facile à maintenir.
å Le ré-agencement des composants dans un conteneur a lieu lors de :
à Le changement de la taille ou le déplacement d’un des composants.
à L’ajout, l’affichage, la suppression ou le masquage d’un composant.

Les principaux GPs de l’awt sont :
FlowLayout :
å Les composants sont placés dans l’ordre de leur ajout, de la gauche vers la droite
en passant à la ligne s’il n’y a plus de place, en les centrant.
BorderLayout :
å Le conteneur est divisé en 5 zones (Nord, Sud, Est, Ouest, Centre).
å L’ajout d’un composant se fait en précisant la zone à utiliser grâce à des variables
de classe BorderLayout : NORTH, SOUTH, CENTER, WEST et EAST
Exp : add(cmp,BorderLayout.EAST)
å Si on n’a pas précisé la zone (add(cmp)), le composant est placé au centre.
å Si une des zones de bordure ne contient rien, sa taille est 0.
GridLayout :
å Le constructeur du GridLayout recevant en paramètres le nombre de lignes et le
nombre de colonnes de la grille.
å Les composants sont placés en commençant par la première ligne et de gauche à
droite. Dès qu’une ligne est remplie, on passe à la suivante.

å Chaque conteneur a un GP par défaut :
ç Le BorderLayout pour Window et ses descendants (Frame, Dialog, ...).
ç Le FlowLayout pour Panel et ses descendants.
å Il est possible de changer le GP d’un conteneur en utilisant la méthode
setLayout(new Layout).
Exemple : GridLayout
import java.awt.* ;
public class ExpGridLayout{
public static void main(String[] args){
Frame fr=new Frame () ;
fr.setTitle("ExpGridLayout") ;//Donne un titre à fr
fr.setSize(300,200) ;//Définit la taille de fr
fr.setLayout(new GridLayout(2,2)) ;
for (int i=1 ; i <=4 ; i++)
{
Button b=new Button("B"+i) ;
fr.add(b) ; //Ajoute b dans fr
}
fr.show() ;
}
}

Exemple : FlowLayout
import java.awt.* ;
public class ExpFlowLayout{
Frame fr=new Frame ("ExpFlowLayout") ;
fr.setSize(300,200) ;
fr. setLayout(new FlowLayout()) ;
for (int i=1 ; i <=4 ; i++)
fr.add(new Button("B"+i)) ;
fr.show () ;
fr.pack() ; //Adapte automatiquement la taille de fr à son contenu
}
}

Exemple : BorderLayout
import java.awt.* ;
public class ExpBorderLayout{
Frame fr=new Frame ("ExpBorderLayout") ;
fr.setLayout(new BorderLayout()) ;
fr.add (new Button ("N"), BorderLayout .NORTH) ;
fr.add (new Button ("S"), BorderLayout .SOUTH) ;
fr.add (new Button ("C"), BorderLayout .CENTER ) ;
fr.add (new Button ("W"), BorderLayout .WEST) ;
fr.add (new Button ("E"), BorderLayout . EAST ) ;
fr.show() ;
}
}

Composition
Exemple
import java.awt.* ;
public class ExpComposition{
Frame fr=new Frame ("ExpComposition") ;
fr.add (new Button("Nord"), BorderLayout.NORTH) ;
fr.add (new Button("Sud"), BorderLayout.SOUTH) ;
Panel p=new Panel() ;
p.setLayout(new GridLayout(2,2)) ;
for(int i=0 ;i<4 ;i++)
p.add(new Button("B"+i)) ;
fr.add(p,BorderLayout .CENTER) ;
fr.show () ;
}
}

Sans gestionnaire de présentation
On peut imposer à un conteneur de n’avoir pas de GP en fixant son Layout à la valeur
null.
Exemple
import java.awt.* ;
public class ExpSansGP{
Frame fr=new Frame ("ExpSansGP") ;
fr.setLayout(null) ;
Button b1=new Button ("B1") ;
Button b2=new Button ("B2") ;
fr.add(b1) ; fr.add(b2) ;
b1.setBounds(70,54,50,55) ;//Définit la largeur (50) et la hauteur (55) de b1 et la
position en (70,54) sur l’écran.
b2.setBounds(116,106,50,55) ;
b1.setBackground(Color.orange) ;//modifie la couleur du fond du buton B1
b2.setForeground(Color.blue) ;//modifie la couleur du premier plan du buton B2
fr.show() ;
}}

AWT Les composants
ç Tout objet graphique composant l’IG Java.
Exp : Button, List, Label, TextField, TextArea, Choice, Checkbox, ...
ç Sous-classe de la classe java.awt.Component.

AWT Les composants
.
Label : Affiche un texte qui ne pourra pas être modifié par l’utilisateur.
TextField :Un champ de saisie de texte avec une seule ligne.
TextArea :Une zone de texte avec plusieurs lignes.
Exemple
import java.awt.* ;
public class ExpTextLabel{
Frame fr=new Frame ("ExpTextLabel") ;
fr.setLayout(new FlowLayout()) ;
Label l=new Label("Je suis un label") ;
fr.add(l) ;
TextField tf = new TextField("taper qqch ici",15) ; //15 : Nbre de caractères
fr.add(tf) ;
TextArea ta = new TextArea("La ligne 1... n La ligne 2...",5,20) ;
//5 : Nombre de lignes et 20 :Nombre de colonnes (nbre de caractères)
fr.add(ta) ;
fr.show() ;
}
}

AWT Les composants
.
Checkbox : Case à cocher avec un état on ou off accompagné d’une étiquette de texte
CheckboxGroup :Même fonctionnement de Checkbox ; grâce à cela, deux boutons ne
peuvent être cochés simultanément.
Exemple
import java.awt.* ;
public class ExpCheckbox{
Frame fr=new Frame ("ExpCheckbox") ;
fr.setLayout(new GridLayout(2,2)) ;
Checkbox ch1= new Checkbox("Vert") ;
fr.add(ch1) ;
fr.add(new Checkbox("Bleu",true)) ; // déja cliqué
CheckboxGroup cg = new CheckboxGroup() ;
Checkbox ch3 =new Checkbox("oui", cg, true) ;
fr.add(ch3) ;
fr.add(new Checkbox("non", cg, false)) ;
fr.show() ;
}
}

AWT Les composants
.
List : Afiche une liste.
Choice : Permet de selectionner un objet dans une liste.
Exemple
import java.awt.* ;
public class ExpListChoix{
Frame fr=new Frame ("ExpListChoix") ;
fr.setLayout(new FlowLayout()) ;
List lst = new List(4, true) ;// 4 lignes visibles
lst.add("Rouge") ;lst.add("Vert") ;lst.add("Bleu") ;
fr.add(lst) ;
Choice ch=new Choice() ;
ch.add("choix 1") ; ch.add("choix 2") ; ch.add("choix 3") ;
ch.insert("choix 4",3) ;
ch.remove(1) ;// retire le 2ème choix dans la liste
fr.add(ch) ;
fr.show() ;
}}

AWT Les composants
.
MenuBar : Représente la barre de menu d’une fenêtre.
Menu : Options visibles dans la barre de menu ou dans un autre menu.
MenuItem : Les éléments de chaque menu
Exemple
import java.awt.* ;
public class ExpMenu {
Frame fr=new Frame ("ExpMenu) ;
MenuBar mb=new MenuBar() ;
Menu mf = new Menu("Fichier") ;
Menu ma = new Menu("Aide") ;
MenuItem n = new MenuItem("Nouveau") ;
MenuItem q = new MenuItem("Quitter") ;
MenuItem a = new MenuItem("A propos") ;
mf.add(n) ; mf.add(q) ;
ma.add(a) ;
mb.add(mf) ; mb.add(ma) ;
fr.setMenuBar(mb) ;// Place la barre de menus mb dans la fenêtre.
fr.show() ;}}

swing Présentation
swing plus récent que awt, Il est donc encore amélioré avec les nouvelles versions
de Java. ⇒ swing est plus riche que awt.
La classe de base de tous les objets swing est Component en AWT.
La classe Container est une sous-classe de Component.
La classe JComponent dérive de la classe Container.
Les noms de composants swing commencent souvent par J.

swing Présentation
2 types de composants :
ç Les composants lourds : JWindow, JFrame, JDialog, ... Ils sont gérés par
AWT.
ç Les composants légers : JButton, JTextfield, JLabel, JPanel, etc...
Tous les composants légers héritent de la classe JComponent.
En pratique, on utilise :
à Les composants de swing.
à Les gestionnaires de présentation de AWT.
à Les événements de AWT.

swing Conteneurs swing
JFrame
.
Est une fenêtre avec un titre et une bordure et un conteneur qui doit regrouper tout les
composants légers.
Exemple : JFrame
import java.awt.* ;
import javax.swing.* ;
public class ExpJFrame {
public static void main(String[] args) {
JFrame jfr = new JFrame() ;
jfr.setTitle("ExpJFrame") ;
jfr.setSize(300, 200) ;
jfr.setLocation(200,250) ;//Position de la fenêtre dans l’écran
jfr.show() ;
}
}

JDialog & JOptionPane
.
å JDialog permet de construire des boîtes de dialogue personnalisées.
å JOptionPane permet à la fois de créer des boîtes de dialogue standard mais aussi
des boîtes de dialogue personnalisées.
à Les boites de dialogue restent affichées tant que l’utilisateur n’a pas
cliqué sur le bouton et bloquent l’application en cours : on parle de
boites de dialogues modales.
å JOptionPane propose quatre boîtes de dialogue standard :
1 Boîtes d’information ;
2 Boîtes de saisie ;
3 Boîtes d’options.
4 Boîtes de confirmation ;

Boîtes d’information :
å L’appel de la méthode showMessageDialog() de la classe JOptionPane permet de
faire apparaître des messages.
showMessageDialog(Component fen, String msg, String titre, int typeMessage) ;
à fen : La fenêtre dans laquelle la boîte de message va s’afficher. Cet argument
peut prendre la valeur null.
à Le typeMessage est l’une des valeurs suivantes :
Exemple
import java.awt.* ;import javax.swing.* ;
public class BoitInfo{
public static void main(String args[]) {
JOptionPane jp=new JOptionPane() ;
jp.showMessageDialog(null,"Problme de réseau","Connexion impossible",3) ; }}

Boîtes de saisie :
å L’appel de la méthode showInputDialog() de la classe JOptionPane permet de faire
une saisie de chaîne de caractères :
showInputDialog(Component fen, String msg, String titre, int typeMessage) ;
Exemple
import java.awt.* ;
public class BoiteSaisie{
JFrame jfr = new JFrame("Dialogue") ;
jfr.setSize(350,200) ;
jfr.setVisible(true) ;
jp.showInputDialog(jfr, "Quel est votre nom ?", "Information personnelle",3) ;
}
}

Boîtes d’options :
å L’appel de la méthode showInputDialog() de la classe JOptionPane permet à
l’utilisateur de choisir une valeur parmi une liste de valeurs.
showInputDialog(Component fen, String msg, String titre, int typeMessage,
ImageIcon img, Object[] listeValeurs, Object valeurInitial) ;
Exemple
import java.awt.* ;
public class BoiteOptions{
public static void main(String args[]){
ImageIcon img = new ImageIcon("images/FSM.png") ;
String[] couleurs = {"rouge","bleu","gris","vert","jaune","noir"} ;
jp.showInputDialog(null, "Sélectionne une couleur", "Boîtes d’options", 3, img,
couleurs, couleurs[3]) ;
}
}

Boîtes de confirmation :
å L’appel de la méthode showConfirmDialog() de la classe JOptionPane permet de
faire apparaître des messages, avec demande de confirmation.
showConfirmDialog(Component fen, String msg, String titre, int typeOption) ;
Le typeOption est l’une des valeurs suivantes :
JOptionPane.DEFAULT_OPTION (-1)
JOptionPane.YES_NO_OPTION (0)
JOptionPane.YES_NO_CANCEL_OPTION (1)
JOptionPane.OK_CANCEL_OPTION (2)
Exemple
import java.awt.* ;
public class BoiteConfim{
jp.showConfirmDialog(null, "Confirmer", "Boîte de confirmation",1) ;
}}

JPanel
.
å Un JPanel est un composant sur lequel on peut dessiner et qui peut egale-
ment contenir d’autres composants.
å Pour dessiner dans un JPanel il faut redéfinir sa méthode d’affichage void
paintComponent(Graphics g) dans une classe qui dérive de JPanel.
å Les points sont repérés par 2 coordonnées entières positives.
à L’origine du repère est le coin supérieur gauche.
à L’axe des x est orienté vers la droite.
à L’axe des y est orienté vers le bas.

JPanel
Exemple
import java.awt.* ;
class MyPanel extends JPanel {
public void paintComponent(Graphics g){// redéfinition de paintComponent
g.drawRect(20,20,25,50) ;//trace le contour du rectangle de coin supérieur
//gauche (20,20), de largeur 25 et de hauteur 50.
g.setColor(Color.blue) ; // changement de couleur de l’environnement
g.fillRect(80,20,25,50) ;//en remplissant le rectangle avec la couleur bleu
g.drawString("Deux Rectangles",25,90) ;
}}
public class AffichageRectangle {
public static void main(String args[]){
JFrame jfr = new JFrame("Rectangle") ;
jfr.setSize(250,150) ;
MyPanel mp=new MyPanel() ;
jfr.add(mp) ;
jfr.show() ;
}}

swing Composants swing
JPasswordField : Est un composant qui permet l’édition d’une ligne simple où les
caractères tapés sont cachés.
Exemple
import java.awt.* ;
public class Mypswd extends JFrame {
. public static void main(String[] args) {
. JFrame jfr=new JFrame("Login") ;
. jfr.setLayout(new FlowLayout()) ;
. jfr.setSize(250, 200) ;
. jfr.add(new JLabel("Nom")) ;
. jfr.add(new JTextField(20)) ;
. jfr.add(new JLabel("Passwor")) ;
. jfr.add(new JPasswordField(20)) ;
. jfr.add(new JButton("OK")) ;
. jfr.add(new JButton("Annuler")) ;
. jfr.show() ;
. }
}

JComboBox : Composant affichant une liste.
JRadioButton : • Les boutons radio se gèrent en groupe ( à l’aide d’un objet
ButtonGroup).
• Il suffit d’ajouter les différents boutons radios au groupe.
• Un seul et unique bouton doit être sélectionné.
Exemple
public class Exemple {
. public static void main(String[] args){
. JFrame jfr=new JFrame("Etat civil") ;
. jfr.setSize(350,100) ;
. JPanel jp=new JPanel() ;
. JComboBox jc = new JComboBox() ;
. jc.addItem("Mr") ; jc.addItem("Mme") ; jc.addItem("Melle") ; jp.add(jc) ;
. JRadioButton br1=new JRadioButton("Célibataire") ;
. JRadioButton br2=new JRadioButton("Marié ") ;
. jp.add(br1) ; jp.add(br2) ;
. ButtonGroup bg=new ButtonGroup() ;
. bg.add(br1) ; bg.add(br2) ;
. jfr.add(jp) ; jfr.show() ;}}

Autres composants
Il existe beaucoup d’autres composants graphiques. Entre autres :
å JCheckBox : Composant pouvant prendre les valeurs vrai/faux.
å JTree : Permet d’afficher une arborescence.
å JProgressBar : Affiche la progression d’une action.
å JMenu, JTable, ...

Chapitre 9 Conception d’interface graphique.pdf

Recommandé

Recommandé

Contenu connexe

Similaire à Chapitre 9 Conception d’interface graphique.pdf

Similaire à Chapitre 9 Conception d’interface graphique.pdf (20)

Chapitre 9 Conception d’interface graphique.pdf