INTERFACES GRAPHIQUES EN JAVA - PREMIERE PARTIE

Introduction

Le langage Java propose différentes bibliothèques pour programmer les interfaces graphiques.

• javax.swing.JFrame : Permet de créer des fenêtres.
• javax.swing.JPanel : Permet d'insérer dans une fenêtre un composant destiné à contenir d'autres composants ou à faire des tracés.
• java.awt.Graphics : Sert à dessiner.
• java.awt.Dimension : Sert essentiellement à dimensionner les composants graphiques.
• java.awt.Color : Sert à travailler avec les couleurs.

Deux aspects doivent être étudiés :

• Tout d'abord, il faut être capable de dessiner une fenêtre et y placer des composants tels que des boutons, des zones de texte, des images...
• Ensuite les actions de l'utilisateur, appelées de événements, par exemple un clic sur un bouton, doivent être programmés pour obtenir le résultat escompté.

Ce TP vous propose de travailler sur ce premier aspect.

Une première fenêtre

Créer un objet JFrame

Il faut importer la classe JFrame, présente dans le package java.swing. Le code ci-dessous permet d'afficher une petite fenêtre.

import javax.swing.JFrame;
public class Test {
  public static void main(String[] args) {
    JFrame fenetre;
    fenetre = new JFrame();
    fenetre.setSize(400, 100); // Dimensions de la fenêtre en pixels
    fenetre.setVisible(true);
  }
}

Après avoir effectué un test, vous pouvez compléter votre code avec les lignes ci-dessous.

Donner un titre à la fenêtre :

fenetre.setTitle("Première fenêtre");

Pour fermer la fenêtre en cliquant sur la croix rouge :

fenetre.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

Positionner la fenêtre au centre de l'écran :

fenetre.setLocationRelativeTo(null);

La positionner à un autre endroit :

fenetre.setLocation(400, 300);

Placer l'objet JFrame dans une classe à part

Le Java est un langage de programmation orienté objet. Pour pouvoir obtenir facilement plusieurs fenêtres, nous allons créer une classe à part.

La classe contenant la méthode main() devient :

public class Test {
  public static void main(String[] args) {
    Fenetre fen = new Fenetre();
  }
}

La classe, appelée Fenetre, hérite de JFrame. Elle comporte le constructeur, dans lequel sont placées les instructions.

import javax.swing.JFrame;
public class Fenetre extends JFrame {
  public Fenetre(){
    this.setTitle("Première fenêtre");
    this.setSize(400, 100);
    this.setLocationRelativeTo(null);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);             
    this.setVisible(true);
  }
}

Un panneau dans la fenêtre

Créer un objet JPanel

Nous allons placer dans la fenêtre un JPanel, c'est à dire un composant de type conteneur dont la vocation est d'accueillir d'autres objets de même type ou des objets de type composant (boutons, cases à cocher...). Il nous faut importer la bibliothèque javax.swing.JPanel pour cela. Pour définir les couleurs, il faut également importer la bibliothèque java.awt.Color.

La classe Fenetre devient :

import javax.swing.JFrame;
import javax.swing.JPanel;
import java.awt.Color;
public class Fenetre extends JFrame {
  public Fenetre(){
    JPanel pan;
    pan = new JPanel();
    pan.setBackground(Color.PINK); //Définition de la couleur de fond 
    this.setTitle("Première fenêtre");
    this.setSize(400, 100);
    this.setLocationRelativeTo(null);
    this.setContentPane(pan);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);             
    this.setVisible(true);
  }
}

Placer l'objet Jpanel dans une classe à part

De la même manière que pour les fenêtres, nous allons créer une classe à part.

La classe Fenetre devient :

import javax.swing.JFrame;
public class Fenetre extends JFrame {
  public Fenetre(){
    this.setTitle("Première fenêtre");
    this.setSize(400, 200);
    this.setLocationRelativeTo(null);                
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
    this.setContentPane(new Panneau());
    this.setVisible(true);
  }
}

Voici, la nouvelle classe, nommée Panneau :

import javax.swing.JPanel;
import java.awt.Color;
public class Panneau extends JPanel {
  public Panneau() {
    setBackground(Color.YELLOW); //Définition de la couleur de fond
  }
}

Dessiner sur le panneau

Dessiner des figures géométriques

Il faut importer la classe Graphics, présente dans le package java.awt. Il s'agit ici de placer des éléments dans le Panneau, à l'aide de la méthode paintComponent().

Dans l'exemple ci-dessous :

• super.paintComponent(g) : Conserver la couleur du fond.
• g.setColor(Color.RED) : Sélectionner un crayon de couleur rouge.
• g.fillOval(40, 20, 50, 100) : Dessiner un ovale plein de 50 par 100 pixels.
• g.setColor(Color.BLUE) : Sélectionner un crayon de couleur bleue.
• g.drawOval(80, 40, 200, 100) : Dessiner le contour d'un ovale de 200 par 100 pixels.

import javax.swing.JPanel;
import java.awt.Graphics;
import java.awt.Color;
public class Panneau extends JPanel { 
  public Panneau() {
    setBackground(Color.YELLOW);
  }    
  public void paintComponent(Graphics g){
    super.paintComponent(g);
    g.setColor(Color.RED);
    g.fillOval(40, 20, 50, 100);
    g.setColor(Color.BLUE);   
    g.drawOval(80, 40, 200, 100);
  }    
}

Testez les méthodes suivantes :

• fillRect(a, b, c, d) : Dessiner un rectangle plein.
• drawRect(a, b, c, d) : Dessiner le contour d'un rectangle.
• drawLine(x1, y1, x2, y2) : Dessiner une ligne.

Ecrire du texte

Il faut importer la classe Font, présente dans le package java.awt. Un texte s'insère avec la méthode drawString("Un texte", x, y). Pour définir une police d'écriture qui ne soit pas celle proposée par défaut, il faut créer un objet Font.

Voici un exemple de réalisation :

import javax.swing.JPanel;
import java.awt.Graphics;
import java.awt.Color;
import java.awt.Font;
public class Panneau extends JPanel { 
  public Panneau() {
    setBackground(Color.YELLOW);
  }    
  public void paintComponent(Graphics g){
    super.paintComponent(g);
    Font font = new Font("Courier", Font.BOLD, 20);
    g.setFont(font);         
    g.drawString("Un texte", 30, 40);
  }    
}

Application

L'objectif est de réaliser un traceur de courbes explicites planes en coordonnées cartésiennes.

Tracer la courbe représentative de la fonction y=f(x) avec les paramètres suivants :

• Dimensions de la fenêtre : largeur = 800 pixels, hauteur = 400 pixels.
• Fonction : y=sin(x)
• Limites des abscisses : xmin=-10 et xmax=10
• Limites des ordonnées : ymin=-1 et ymax=1
• Nombre de points sur la courbe : nbpt=200

Pour ce travail, il faut que les coordonnées (x;y) d'un point sur la courbe puissent être converties en coordonnées (i;j) en pixels.

Il faut donc d'abord calculer les constantes a, b, c et d telles que :

• i = a . x + b
• j = c . y + d

Le principe de tracé est le suivant :

1. x varie de xmin à xmax.
2. y est calculé pour chaque valeur de x.
3. i est calculé pour chaque valeur de x.
4. j est calculé pour chaque valeur de y.
5. Le point de coordonnées (i;j) est tracé.

En plus de la courbe, on demande de dessiner les axes des abscisses et des ordonnées.

Dans un deuxième temps, il est possible de remplacer :

largeur = 800;
hauteur = 400;

par :

largeur = getWidth();
hauteur = getHeight();

Cela permet d'adapter le dessin à l'intérieur de la fenêtre lorsque celle-ci est redimensionnée.