Mise en page d'une interface graphique

Dans le tutoriel GUI on a placé des éléments dans une fenêtre JFrame et dans un panneau JPanel sans se préoccuper de l'emplacement qu'ils y occuperaient.
Le JPanel remplissait tout l'espace laissé disponible dans la fenêtre, dont il était le seul élément en dehors de la barre de menu principale.
Les éléments placés dans le JPanel se plaçaient les uns à la suite des autres dans l'ordre où ils avaient été ajoutés au JPanel. Selon la taille que l'on donnait à la fenêtre, les éléments se redisposaient automatiquement sur plusieurs rangées si nécessaire.
Ce comportement est le comportement par défaut des composants placés sur un JPanel.S'il peut convenir dans certains cas , on peut aussi avoir besoin de contrôler la disposition de manière beaucoup plus précise.

Ce tutoriel montre quelques façons de procéder pour obtenir la disposition ci-dessous, qui pourrait servir pour réaliser un pavé de saisie numérique.

allure du layout

Création de la fenêtre et des composants.

Comme dans le TD GUI on crée une classe personnalisée descendant de JFrame (appelée ici Base), dans laquelle on place les composants : un champ de texte JTextField et 12 boutond JButton, qu'on place ici dans un tableau, ce qui permettra de gagner du temps en utilisant des boucles.

Il faudra penser à importer les bibliothèques swing et awt.

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

Déclaration de la fenêtre personnalisée, contenant un champ de texte et 12 boutons rassemblés dans un tableau :

class Base extends JFrame{
  JButton[] clavier=new JButton[12];
  JTextField ecran;

Début du constructeur de la fenêtre personnalisée :

  Base(){
    super();
    setTitle("Base");
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Les lignes qui suivent permettent de créer le champ de texte (type JTextField), appelé ecran. On définit sa police de caractère et sa couleur de fond (facultatif), et on le rend non éditable de façon à ce qu'il ne réponde pas aux entrées clavier. Enfin on l'ajoute à la fenêtre :

    ecran=new JTextField();
    ecran.setFont(new Font(Font.SANS_SERIF,Font.PLAIN,34));
    ecran.setBackground(Color.white);
    ecran.setEditable(false);
    getContentPane().add(ecran);

Cette boucle crée 9 des 12 boutons, portant les signes "1" à "9".

    for (int i=0;i<9;i++){
      clavier[i]=new JButton(new Integer(i+1).toString());
    }
(l'instruction new Integer(i+1).toString() permet d'obtenir une chaîne de caractères représentant l'entier i+1)

Les lignes

    clavier[9]=new JButton("0");
    clavier[10]=new JButton(",");
    clavier[11]=new JButton("C");
créent les trois derniers boutons "0", "," et "C".

On définit ensuite une police de caractères (facultatif) pour les boutons et on les ajoute à la fenêtre :

    for (int i=0;i<12;i++){
      clavier[i].setFont(new Font(Font.SANS_SERIF,Font.BOLD,34)); 
      getContentPane().add(clavier[i]);
	}

On termine le constructeur de la fenêtre personnalisée en lui assignant une taille et en la rendant visible, puis on ferme le constructeur :

    setBounds(400,400,250,400);
    setVisible(true);
  }
 

On va rendre la classe exécutable en lui ajoutant une méthode "main", qui va créer une instance de la classe "Base".

  public static void main(String[] args) {
    maFenetre=new Base();
  }

On peut même laisser la fenêtre anonyme et faire simplement :

  public static void main(String[] args) {
    new Base();
  }

L'exécution de la classe Base crée une fenêtre.
Le résultat produit par le programme n'est pas satisfaisant pour le moment car en l'absence d'instructions contraires les composants se placent tous au même endroit, en se superposant.
Cela nous montre en passant que l'arrangement par défaut des composants à l'intérieur du ContentPane d'une fenêtre, ou dans un JPanel, n'est pas le même : les "conteneurs" Java ont chacun, par défaut, un gestionnaire de mise en page (layout manager).
Un JPanel a par défaut un layout manager de type "FlowLayout" qui place les composants à la suite selon leur ordre d'ajout. Une JFrame, ou plutôt son ContentPane, a par défaut un layout manager de type "BorderLayout".

 
Licence Creative Commons
licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé
Auteur : Nathalie Bonnin
Professeur de Physique, Chimie, Informatique au lycée La Martinière Monplaisir (Lyon 8ème)
Contact :
nathalie.bonnin (chez) scientillula.net
Licence Creative Commons
La totalité du contenu du site Scientillula.net appartient à Nathalie Bonnin et est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 3.0 non transposé