intro fenetres graphiques
DESCRIPTION
Java, fenetres graphiques, programmation.TRANSCRIPT
Interfaces Java
Les fenêtres graphiques
(Introduction)
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 2
DÉFINITION D’UNE INTERFACE GRAPHIQUE SIMPLE
(GUI : Graphic User Interface)
Définition:
Un support graphique visible pouvant contenir des composantes comme des champs textes, des
boutons, des images, des menus et bien d’autres. Une application graphique comprend habituellement
une première fenêtre graphique et un ensemble de boîtes de dialogue pour interagir avec l’utilisateur.
Dans ce premier document sur les fenêtres graphiques nous tentons de vous présenter à l’aide
d’exemples et de code Java, comment manipuler sommairement une fenêtre et certaines de ses
composantes. Bien entendu ce document est une explication de haut niveau et il doit être accompagné
d’explications supplémentaires lors d’un cours théorique.
Voici un exemple simple permettant de définir une interface graphique en JAVA. Ceci n'est pas une
recette à appliquer dans tous les cas. Ce n'est qu'un exemple simplifié d'une application graphique
ayant pour but de vous montrer les instructions de base. Il sera enrichi au cours de la session.
1. Étapes de définition d'une fenêtre graphique.
1.1 Voici la plus simple des fenêtres
public class Fenetre extends JFrame
{
//attributs de la classe
public Fenetre()
{
}
public static void main(String arg[])
{
Fenetre app = new Fenetre();
app.setSize(100, 75);
app.setVisible(true);
}
Le résultat est:
Constructeur vide
les méthodes setSize et setVisible sont héritées de
JFrame grâce à: public class Fenetre extends JFrame
Barre de titre
Fond
Bordure redimensionnable
Tout cela est hérité de JFrame
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 3
Comment faire maintenant pour avoir ceci :
1.2 On ajoute des paramètres à la fenêtre (JFrame). Dans le constructeur, qui initialise l'objet
Fenetre, on écrit :
this.setTitle("Exemple de fenêtre graphique simple");
this.setSize(600,400);
//Par défaut 0,0 donc inutile ici
this.setLocation(0,0);
Que représente this ?
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 4
2. Par la suite, on déclare un objet conteneur panPrincipal (de type Container) qu'on initialise
au conteneur par défaut de la fenêtre. Ce conteneur (panPrincipal) servira à accueillir les
différents composants graphiques. Le conteneur par défaut de la fenêtre est, par défaut,
structuré en BorderLayout. Ce type d'organisation permet de diviser la fenêtre en 5 parties
ou zones géographiques: NORTH, SOUTH, EAST, WEST et CENTER. Chaque zone ne
pourra recevoir qu'un seul composant graphique. Dans notre exemple nous utiliserons
seulement 3 zones: le haut (NORTH), le bas (SOUTH) et le centre (CENTER).
public class Fenetre extends JFrame
{
//attributs de la classe
public Fenetre()
{
this.setTitle("Exemple de fenêtre graphique simple");
this.setSize(600,400);
this.setLocation(0,0);
Container panPrincipal = null;
panPrincipal = this.getContentPane();
….
}
2.1 Parce que la zone nord ne peut recevoir qu'un seul composant graphique, nous créons ensuite
un panneau nord (panNord de type JPanel), qui lui pourra recevoir plus d'un composant. Un
JPanel est structuré par défaut en FlowLayout. Ce type d'organisation permet de recevoir
plus d'un composant et ceux-ci sont placés les uns à la suite des autres. On instancie donc les
différents objets graphiques et on les ajoute au panneau nord qui lui, est ajouté au conteneur
principal. Le panneau nord contient 2 objets (un JLabel et un JTextField).
// Panneau Nord
panNord = new JPanel();
lblNom = new JLabel("NOM:");
txtNom = new JTextField(25);
//Rend la zone de texte non modifiable
txtNom.setEditable(false);
panNord.add(lblNom);
panNord.add(txtNom);
panPrincipal.add(panNord, BorderLayout.NORTH);
Ou Container panPrincipal = getContentPane();
(Donne la référence du conteneur par défaut de
l'objet courant (app) à l'objet panPrincipal.)
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 5
2.2 Ensuite on crée le panneau sud et on fait la même chose. Cette fois on a 3 objets de type
JButton dans le panneau sud.
// Panneau Sud
panSud = new JPanel();
btnEntrerNom = new JButton("Entrer nom");
btnAfficher = new JButton("Afficher");
btnQuitter = new JButton("Quitter");
panSud.add(btnEntrerNom);
panSud.add(btnAfficher);
panSud.add(btnQuitter);
panPrincipal.add(panSud, BorderLayout.SOUTH);
2.3 Il ne reste qu'à créer la partie centrale. Dans cette partie, je n'ai pas besoin d'un JPanel car
la partie centrale ne contient qu'un seul objet; un JTextArea.
// placer le textArea au centre
tAff = new JTextArea();
tAff.setFont(new Font("Courier New", Font.BOLD, 20));
//Rend la zone non modifiable
tAff.setEnabled(false);
tAff.setText("");
panPrincipal.add(tAff, BorderLayout.CENTER);
//Finalement rendre la fenêtre visible
setVisible(true);
3. Il ne faut pas oublier de déclarer, au début de la classe Fenetre, ses attributs qui sont tous les
objets nécessaires à l'interface.
private JLabel lblNom = null;
private JTextField txtNom = null;
private JButton btnEntrerNom = null,
btnAfficher = null,
btnQuitter = null;
private JTextArea tAff = null;
private JPanel panNord = null,
panSud = null;
Pour le moment, les boutons dans le panneau sud ne peuvent se faire entendre. C'est comme s'ils
étaient inactifs. En cliquant dessus, il ne se passe rien. Pour que ceux-ci soient entendus, on
devra créer une classe qui permettra d’ajouter des écouteurs à nos objets qui peuvent recevoir
des événements.
Voir à la page suivante le code complet de la classe Fenetre commenté et réorganisé de façon à ce
qu'il soit plus facilement maintenable.
Toute la partie centrale
On aurait pu aussi mettre le JTextArea dans un
JPanel, ce qui aurait donné le même résultat.
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 6
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
/**
* Cette classe montre un exemple simple d'interface graphique.
*
* @author Caroline Pedneault
*
*/
public class Fenetre extends JFrame
{
//attributs de la classe Fenetre
private JLabel lblNom = null;
private JTextField txtNom = null;
private JButton btnEntrerNom = null,
btnAfficher = null,
btnQuitter = null;
private JTextArea tAff = null;
private JPanel panNord = null,
panSud = null;
/**
* Construire une fenêtre simple
*/
public Fenetre()
{
//Donner un titre, une dimension et une position à la fenêtre
this.setTitle("Exemple de fenêtre graphique simple");
this.setSize(600, 400);
//Initialiser le panneau principal de la fenêtre
//au conteneur par défaut
Container panPrincipal = this.getContentPane();
//Créer les composants graphiques du panneau nord
//et les ajouter
lblNom = new JLabel("NOM:");
txtNom = new JTextField(25);
txtNom.setEditable(false);
panNord = new JPanel();
panNord.add(lblNom);
panNord.add(txtNom);
//Créer les composants graphiques du panneau sud
//et les ajouter
btnEntrerNom = new JButton("Entrer nom");
btnAfficher = new JButton("Afficher");
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 7
btnQuitter = new JButton("Quitter");
panSud = new JPanel();
panSud.add(btnEntrerNom);
panSud.add(btnAfficher);
panSud.add(btnQuitter);
//Créer la zone de texte et la placer au centre
//du conteneur principal
tAff = new JTextArea();
tAff.setFont(new Font("Courier New", Font.BOLD, 20));
tAff.setEnabled(false);
tAff.setText("");
panPrincipal.add(tAff, BorderLayout.CENTER);
//Ajouter les différents panneaux au panneau principal
panPrincipal.add(panNord, BorderLayout.NORTH);
panPrincipal.add(panSud, BorderLayout.SOUTH);
setVisible(true);
}
public static void main(String arg[])
{
Fenetre app = new Fenetre();
}
}
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 8
Voici d’autres exemples avec d’autres types de composants graphiques.
Exemple 2 : division par défaut d'une fenêtre
Ce deuxième exemple met en évidence comment la zone intérieure d’une fenêtre est divisée. Par défaut
la zone de travail d’une fenêtre est divisée en cinq sections qui sont identifiables par les points
cardinaux et le centre. Chaque division peut-être habitée par une seule composante graphique à la
fois, c’est à dire soit par une composante graphique simple, comme ici, un « JLabel » ou soit par un
autre conteneur de composantes « JPanel » comme on le présentera dans les prochains exemples.
Code de l’exemple 2 :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Exemple2 extends JFrame
{
private JLabel lblNord = null,
lblSud = null,
lblEst = null,
lblOuest = null,
lblCentre = null;
public Exemple2()
{
initComposantes();
}
private void initComposantes ()
{
setTitle ("Exemple de fenêtre et de ses composantes");
setLocation(100, 100);
setSize(400,200);
Container panPrincipal = this.getContentPane();
lblNord = new JLabel("Nord", JLabel.CENTER);
lblNord.setBackground(Color.cyan);
lblNord.setOpaque(true);//nécessaire pour voir la couleur
C’est la même fenêtre que
l’exemple 1, mais avec des
« JLabel » dans chacune
des sections du conteneur
« Pane » par défaut de la
fenêtre. Il est à remarquer
que chaque « JLabel »
prend toute la place de la
section qu’il habite.
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 9
lblSud = new JLabel("Sud", JLabel.CENTER);
lblSud.setBackground(Color.yellow);
lblSud.setOpaque(true);
lblEst = new JLabel("Est");
lblEst.setBackground(Color.lightGray);
lblEst.setOpaque(true);
lblOuest = new JLabel("Ouest", JLabel.LEFT);
lblOuest.setBackground(Color.pink);
lblOuest.setOpaque(true);
lblCentre = new JLabel("Centre", JLabel.CENTER);
lblCentre.setBackground(Color.orange);
lblCentre.setOpaque(true);
panPrincipal.add(lblNord, BorderLayout.NORTH);
panPrincipal.add(lblSud, BorderLayout.SOUTH);
panPrincipal.add(lblEst, BorderLayout.EAST);
panPrincipal.add(lblOuest, BorderLayout.WEST);
panPrincipal.add(lblCentre);
setVisible(true);
}
public static void main (String args[])
{
Exemple2 fenetre = new Exemple2();
}
}
Exemple 3 : les conteneurs
Le troisième exemple nous présente comment on peut facilement créer un conteneur « Pane » et le
placer dans une des sections du conteneur par défaut de la fenêtre. Cette façon de faire nous permet de
mettre plus d’une composante simple par section en subdivisant celle-ci en plusieurs autres. Il est
possible d’imbriquer ainsi autant de « Pane » l’une dans l’autre. Le conteneur utilisé dans l’exemple 3
est un « JPanel ». Par défaut un « JPanel » n’est pas divisé en cinq sections comme le « Pane » de la
fenêtre principale. Le comportement par défaut du placement des composantes graphiques du
« JPanel » est plutôt selon l’arrivée des composantes qui se nomme « FlowLayout ». Il faudra alors
modifier le comportement de placement de ce dernier par celui appelé « BorderLayout » qui permet
d’obtenir un comportement de placement comme le « Pane » de la fenêtre principale.
Observer les divisions mises
en évidence par les « JLabel »
dans la partie centrale de la
fenêtre. Les « JLabel » sont
simplement disposés dans un
« JPanel », qui à son tour est
placé dans la section centrale
du « Pane » de la fenêtre
principale.
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 10
Code de l’exemple 3 :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Exemple3 extends JFrame
{
private JLabel lblNord = null,
lblSud = null,
lblEst = null,
lblOuest = null,
lblCentreNord = null,
lblCentreSud = null,
lblCentreEst = null,
lblCentreOuest = null,
lblCentreCentre = null;
private JPanel panCentre = null;
public Exemple3()
{
initComposantes();
}
private void initComposantes ()
{
setTitle ("Exemple de fenêtre et de ses composantes");
setLocation(100, 100);
setSize(400,200);
Container panPrincipal = getContentPane();
lblNord = new JLabel("Nord", JLabel.CENTER);
lblNord.setBackground(Color.cyan);
lblNord.setOpaque(true);
lblSud = new JLabel("Sud", JLabel.CENTER);
lblSud.setBackground(Color.yellow);
lblSud.setOpaque(true);
lblEst = new JLabel("Est");
lblEst.setBackground(Color.lightGray);
lblEst.setOpaque(true);
lblOuest = new JLabel("Ouest", JLabel.LEFT);
lblOuest.setBackground(Color.pink);
lblOuest.setOpaque(true);
lblCentreNord = new JLabel("Centre Nord",JLabel.CENTER);
lblCentreNord.setBackground(Color.yellow);
lblCentreNord.setOpaque(true);
lblCentreSud = new JLabel("Centre Sud", JLabel.CENTER);
lblCentreSud.setBackground(Color.cyan);
lblCentreSud.setOpaque(true);
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 11
lblCentreEst = new JLabel("Centre Est");
lblCentreEst.setBackground(Color.orange);
lblCentreEst.setOpaque(true);
lblCentreOuest = new JLabel("Centre Ouest",JLabel.LEFT);
lblCentreOuest.setBackground(Color.lightGray);
lblCentreOuest.setOpaque(true);
lblCentreCentre = new JLabel("Centre Centre", JLabel.CENTER);
lblCentreCentre.setBackground(Color.pink);
lblCentreCentre.setOpaque(true);
panCentre = new JPanel();
panCentre.setLayout(new BorderLayout());
panCentre.add(lblCentreNord, BorderLayout.NORTH);
panCentre.add(lblCentreSud, BorderLayout.SOUTH);
panCentre.add(lblCentreEst, BorderLayout.EAST);
panCentre.add(lblCentreOuest, BorderLayout.WEST);
panCentre.add(lblCentreCentre);
panPrincipal.add(lblNord, BorderLayout.NORTH);
panPrincipal.add(lblSud, BorderLayout.SOUTH);
panPrincipal.add(lblEst, BorderLayout.EAST);
panPrincipal.add(lblOuest, BorderLayout.WEST);
panPrincipal.add(panCentre);
setVisible(true);
}
public static void main (String args[])
{
Exemple3 fenetre = new Exemple3();
}
}
Exemple 4 : les conteneurs, suite...
Le quatrième exemple nous permet de voir la même fenêtre que précédemment où nous avons enlevé
les « JLabel » des sections nord, sud, est et ouest de la fenêtre principale. Ces sections sont toujours
présentes dans le « Pane » de la fenêtre principale, elles sont simplement devenues invisibles, car elles
ne contiennent plus de composantes graphiques. Il est important de garder ces sections libres, elles
pourraient servir lors de l’élaboration d’une fenêtre plus complexe. Il pourrait être intéressant de
mettre dans la section sud, du « Pane » par défaut de la fenêtre principale, une barre d’état ou dans la
section ouest, du même « Pane » une barre d’outils. Comparer l’image suivante avec la précédente
pour mieux comprendre ce qui vient d’être écrit.
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 12
Code de l’exemple 4 :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Exemple4 extends JFrame
{
private JPanel panCentre = null;
private JLabel lblCentreNord = null,
lblCentreSud = null,
lblCentreEst = null,
lblCentreOuest = null,
lblCentreCentre = null;
public Exemple4()
{
initComposantes();
}
private void initComposantes ()
{
setTitle ("Exemple de fenêtre et de ses composantes");
setLocation(100, 100);
setSize(400,200);
Container panPrincipal = getContentPane();
lblCentreNord = new JLabel("Centre Nord", JLabel.CENTER);
lblCentreNord.setBackground(Color.yellow);
lblCentreNord.setOpaque(true);
lblCentreSud = new JLabel("Centre Sud", JLabel.CENTER);
lblCentreSud.setBackground(Color.cyan);
lblCentreSud.setOpaque(true);
lblCentreEst = new JLabel("Centre Est");
lblCentreEst.setBackground(Color.orange);
lblCentreEst.setOpaque(true);
lblCentreOuest = new JLabel("Centre Ouest", JLabel.LEFT);
lblCentreOuest.setBackground(Color.lightGray);
lblCentreOuest.setOpaque(true);
lblCentreCentre = new JLabel("Centre Centre", JLabel.CENTER);
lblCentreCentre.setBackground(Color.pink);
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 13
lblCentreCentre.setOpaque(true);
panCentre = new JPanel();
panCentre.setLayout(new BorderLayout());
panCentre.add(lblCentreNord, BorderLayout.NORTH);
panCentre.add(lblCentreSud, BorderLayout.SOUTH);
panCentre.add(lblCentreEst, BorderLayout.EAST);
panCentre.add(lblCentreOuest, BorderLayout.WEST);
panCentre.add(lblCentreCentre);
panPrincipal.add(panCentre);
}
public static void main (String args[])
{
Exemple4 fenetre = new Exemple4();
fenetre.setVisible(true);
}
}
Exemple 5 : le GridLayout
Comme souligné précédemment, l’exemple 5 nous permet de présenter comment imbriquer des
« JPanel » les uns dans les autres. Ici on peut voir, qu’à partir de la fenêtre de l’exemple 4, nous
avons utilisé la section est, du « JPanel » placée au centre de la fenêtre principale, pour y placer un
autre « JPanel ». Ce dernier possède un comportement de placement de composantes graphiques
modifié. Il place les composantes sous la forme d’une grille en terme de lignes et de colonnes, il se
nomme le « GridLayout ». Comme le permet de voir l’image de l’exemple 5, les « JLabel » un, deux,
trois… sont disposés dans une grille de cinq lignes et une colonne. Il est ainsi facile d’imaginer qu’à la
place des « JLabel » on pourrait avoir n’importe quelles autres composantes graphiques comme des
boutons par exemple.
Code de l’exemple 5 :
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class Exemple5 extends JFrame
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 14
{
private JPanel panCentre = null,
panCentreEst = null;
private JLabel lblCentreNord = null,
lblCentreSud = null,
lblCentreOuest = null,
lblCentreCentre = null,
lblCentreEstUn = null,
lblCentreEstDeux = null,
lblCentreEstTrois = null,
lblCentreEstQuatre = null,
lblCentreEstCinq = null;
public Exemple5()
{
initComposantes();
}
private void initComposantes ()
{
setTitle("Exemple de fenêtre et de ses composantes");
setLocation(100, 100);
setSize(400,200);
Container panPrincipal = getContentPane();
lblCentreNord = new JLabel("Centre Nord", JLabel.CENTER);
lblCentreNord.setBackground(Color.yellow);
lblCentreNord.setOpaque(true);
lblCentreSud = new JLabel("Centre Sud", JLabel.CENTER);
lblCentreSud.setBackground(Color.cyan);
lblCentreSud.setOpaque(true);
lblCentreOuest = new JLabel("Centre Ouest", JLabel.LEFT);
lblCentreOuest.setBackground(Color.lightGray);
lblCentreOuest.setOpaque(true);
lblCentreCentre = new JLabel("Centre Centre", JLabel.CENTER);
lblCentreCentre.setBackground(Color.pink);
lblCentreCentre.setOpaque(true);
lblCentreEstUn = new JLabel("Un", JLabel.RIGHT);
lblCentreEstUn.setBackground(Color.orange);
lblCentreEstUn.setOpaque(true);
lblCentreEstDeux = new JLabel("Deux", JLabel.CENTER);
lblCentreEstDeux.setBackground(Color.white);
lblCentreEstDeux.setOpaque(true);
lblCentreEstTrois = new JLabel("Trois", JLabel.LEFT);
lblCentreEstTrois.setBackground(Color.orange);
lblCentreEstTrois.setOpaque(true);
lblCentreEstQuatre = new JLabel("Quatre", JLabel.CENTER);
lblCentreEstQuatre.setBackground(Color.white);
lblCentreEstQuatre.setOpaque(true);
Les fenêtres graphiques (Introduction) Caroline Pedneault
420-135-LI Page 15
lblCentreEstCinq = new JLabel("Cinq", JLabel.CENTER);
lblCentreEstCinq.setBackground(Color.orange);
lblCentreEstCinq.setOpaque(true);
panCentreEst = new JPanel();
panCentreEst.setLayout(new GridLayout(5, 1));
panCentreEst.add(lblCentreEstUn);
panCentreEst.add(lblCentreEstDeux);
panCentreEst.add(lblCentreEstTrois);
panCentreEst.add(lblCentreEstQuatre);
panCentreEst.add(lblCentreEstCinq);
panCentre = new JPanel();
panCentre.setLayout(new BorderLayout());
panCentre.add(lblCentreNord, BorderLayout.NORTH);
panCentre.add(lblCentreSud, BorderLayout.SOUTH);
panCentre.add(lblCentreOuest, BorderLayout.WEST);
panCentre.add(lblCentreCentre);
panCentre.add(panCentreEst, BorderLayout.EAST);
panPrincipal.add(panCentre);
}
public static void main (String args[])
{
Exemple5 fenetre = new Exemple5();
fenetre.setVisible(true);
}
}
Mais, pour le moment, nos interfaces ne réagissent pas aux interactions de l’utilisateur.
Ceci sera le sujet du prochain cours… Gardons un peu le suspense.
Voici d’autres types de composants graphiques :
JTextArea est une composante qui nous permet d’afficher du texte sur plusieurs lignes
comme son nom l’indique, une zone de texte.
JScrollPane est un conteneur particulier qui permet, à celui qu’il contient, d’avoir des
barres de défilement, ascenseurs ou « scroll bar ». Ce dernier peut être très
pratique pour un « JTextArea »
JCheckBox Case à cocher
JRadioButton Bouton radio
JTabbedPane
JSplitPane
Vous pouvez visiter l’API Java pour voir la liste des propriétés et méthodes de chacune de ces classes.