intro fenetres graphiques

Interfaces Java

Les fenêtres graphiques

(Introduction)

Les fenêtres graphiques (Introduction) Caroline Pedneault

420-135-LI

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


420-135-LI

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 ?


420-135-LI

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).


{

//attributs de la classe

public Fenetre()

{


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.)


420-135-LI

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.


420-135-LI

import javax.swing.*;

import java.awt.*;

import java.awt.event.*;

/**

* Cette classe montre un exemple simple d'interface graphique.

*

* @author Caroline Pedneault

*

*/


{

//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.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");


420-135-LI

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();

}

}


420-135-LI

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.*;



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.


420-135-LI

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.


420-135-LI


import java.awt.*;




{

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();

}


{



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);


420-135-LI

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);

}


{


}

}

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.


420-135-LI


import java.awt.*;




{

private JPanel panCentre = null;

private JLabel lblCentreNord = null,


lblCentreEst = null,


lblCentreCentre = null;

public Exemple4()

{

initComposantes();

}


{



setSize(400,200);


lblCentreNord = new JLabel("Centre Nord", JLabel.CENTER);






lblCentreEst = new JLabel("Centre Est");

lblCentreEst.setBackground(Color.orange);

lblCentreEst.setOpaque(true);

lblCentreOuest = new JLabel("Centre Ouest", JLabel.LEFT);






420-135-LI






panCentre.add(lblCentreEst, BorderLayout.EAST);




}


{


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.


import java.awt.*;





420-135-LI

{

private JPanel panCentre = null,

panCentreEst = null;

private JLabel lblCentreNord = null,



lblCentreCentre = null,

lblCentreEstUn = null,

lblCentreEstDeux = null,

lblCentreEstTrois = null,

lblCentreEstQuatre = null,

lblCentreEstCinq = null;

public Exemple5()

{

initComposantes();

}


{

setTitle("Exemple de fenêtre et de ses composantes");


setSize(400,200);


lblCentreNord = new JLabel("Centre Nord", JLabel.CENTER);






lblCentreOuest = new JLabel("Centre Ouest", JLabel.LEFT);






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);


420-135-LI

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.add(panCentreEst, BorderLayout.EAST);


}


{


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.

intro fenetres graphiques

Documents