Programmation orientée objet en Java

IHM : construire son interface

Patrick Bellot

Télécom ParisTech
E-mail : bellot@telecom-paristech.fr
Tél : 06 63 33 22 57

Licence des droits d'usage

Par le téléchargement ou la consultation de ce document, l'utilisateur accepte la licence d'utilisation qui y est attachée, telle que détaillée dans les dispositions suivantes, et s'engage à la respecter intégralement.

La licence des droits d'usage de ce document confère à l'utilisateur un droit d'usage sur le document consulté ou téléchargé, totalement ou en partie, dans les conditions définies ci-après, et à l'exclusion de toute utilisation commerciale.

Le droit d'usage défini par la licence autorise un usage dans un cadre académique, par un utilisateur donnant des cours dans un établissement d'enseignement secondaire ou supérieur et à l'exclusion expresse des formations commerciales et notamment de formation continue. Ce droit comprend :

Aucune modification du document dans son contenu, sa forme ou sa présentation n'est autorisée.

Les mentions relatives à la source du document et/ou à son auteur doivent être conservées dans leur intégralité.

Le droit d'usage défini par la licence est personnel, non exclusif et non transmissible.

Tout autre usage que ceux prévus par la licence est soumis à autorisation préalable et expresse de l'auteur : bellot@telecom-paristech.fr.

Objectifs du cours

Interface Homme Machine

Interface Homme Machine


Nous utilisons SWING !

Interface Homme Machine

Programmer une fenêtre d'interface, c'est :

Plan

Nous allons suivre le plan suivant :
Tout au long, nous allons imposer une méthodologie qui n'est pas absolue. On peut pratiquer autrement. Cependant, elle apporte une pratique standardisée et facile à suivre.

Dessiner son interface






Construction de l'interface

Les containers JPanel

Les Layouts

Une fenêtre SWING


Google : JAVA SE7 JFrame

Une fenêtre SWING


On recommande de créer une classe pour la fenêtre de votre application et une classe pour chaque composant majeur de l'interface.

Chaque composant qui contient d'autres composants gardera des références sur ces derniers. Cela peut être utile pour agir sur eux.
Par exemple, désactiver un bouton ou un menu.

Code pour une fenêtre

package ui ;

import javax.swing.* ;

public class DrawingApp extends JFrame
{

   public DrawingApp()
   {
      super("Drawing Application") ; // Window title

      // Window menu bar creation
      ...

      // Window content creation
      ...
   
      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) ; // Explicit !

      pack() ;            // Components sizes and positions
      setVisible(true) ;  // The great show
   }

}

Qui connaît qui ?


Nous décidons donc que tous les composants devront connaître la fenêtre.
  • Pour cela nous donnerons au constructeur de chaque composant une référence sur la fenêtre qu'il gardera dans un de ses attributs.
  • Seuls les composants qui doivent réagir aux actions de l'utilisateur devront garder une référence sur la fenêtre.
  • Cela signifie que toutes les réactions aux actions de l'utilisateur seront demandées à la fenêtre principale. Nous utiliserons cet attribut plus tard.

Barre de menu

Un item de la barre de menu

Les items de la barre de menu devront déclencher des actions.
Ils doivent donc connaître la fenêtre.

package ui ;

import javax.swing.* ;

public class QuitMenuItem extends JMenuItem
{
   private final DrawingApp drawingApp ;

   public QuitMenuItem(DrawingApp drawingApp)
   {
      super("Quit") ; // Text of menu item

      this.drawingApp = drawingApp ;
   }

}

Un item de la barre de menu


Il est possible de mettre des images dans les items de menu.
Il est possible d'associer des séquences clavier au menu.

Google : SWING Menu tutorial

Un menu de la barre de menu

Le menu ne déclenche a priori aucune action. Ce sont les items du menu qui déclenchent les actions. Il n'est donc pas nécessaire qu'il connaisse la fenêtre. On garde des références sur les sous-composants.

package ui ;

import javax.swing.* ;

public class FileMenu extends JMenu
{
   ...
   private final QuitMenuItem quitMenuItem ;

   public FileMenu(DrawingApp drawingApp)
   {
      super("File") ; // Text of the menu

      // Create and add menu items
      ...
      add(quitMenuItem = new QuitMenuItem(drawingApp)) ;
   }

}

La barre de menu

De la même manière, la barre de menu ne déclenche aucune action. Il n'est donc pas nécessaire qu'il connaisse la fenêtre. Et l'on garde des références sur les sous-composants.

package ui;

import javax.swing.* ;

public class DrawingMenuBar extends JMenuBar
{

	private final FileMenu fileMenu ;
	
	public DrawingMenuBar(DrawingApp drawingApp)
	{
		super() ;
		
		// Create and add menus
		add(fileMenu = new FileMenu(drawingApp)) ;
	}
}

Dans la fenêtre

package ui;

import javax.swing.* ;

public class DrawingApp extends JFrame
{
	private final DrawingMenuBar drawingMenuBar ;
	
	public DrawingApp()
	{
		super("Drawing Application") ;
		
		setJMenuBar(drawingMenuBar = new DrawingMenuBar(this)) ;
		
		// Window content creation
		...

		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) ; 
		pack() ;
		setVisible(true) ;
	}

}

Le main qui crée la fenêtre

On crée la fenêtre.
L'application se terminera quand la fenêtre sera fermée.

package main;

import ui.* ;

public class Main 
{

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

	}

}

Le résultat


Nous avons créé une classe par objet et chacun de ces objets possède une référence sur la fenêtre. Cela facilitera la programmation de l'interface.

Le résultat





Contenu de la fenêtre

Les composants SWING


Par exemple :

Une petite application

Quel arrangement ?

Color Indicator

Le Color Indicator est un simple JPanel dans lequel on dessinera un témoin de la couleur courante.
La référence sur la fenêtre principale servira à retrouver cette couleur.

package ui;

import javax.swing.* ;

public class ColorIndicator extends JPanel
{
	private final DrawingApp drawingApp ;
	
	public ColorIndicator(DrawingApp drawingApp)
	{
			this.drawingApp = drawingApp ;
			setPreferredSize(new Dimension(100,100)) ;
	}
	
}

Color Chooser

Le Color Chooser est un bouton qui ouvrira une fenêtre popup permettant de choisir une nouvelle couleur.

package ui;

import javax.swing.* ;

public class ColorChooserButton extends JButton
{
	private final DrawingApp drawingApp ;
	
	public ColorChooserButton(DrawingApp drawingApp)
	{
		super("Choose color") ; // Button's text
		
		this.drawingApp = drawingApp ;
	}
}

/a>

Color Chooser

Il est possible de mettre des images dans les boutons.

Google : Java button tutorial

Erase Segment

Erase Segment est aussi un bouton.

package ui;

import javax.swing.* ;

public class EraseSegmentButton extends JButton
{
	private final DrawingApp drawingApp ;
	
	public EraseSegmentButton(DrawingApp drawingApp)
	{
		super("Erase segment") ; // Button's text
		
		this.drawingApp = drawingApp ;		
	}
}

Buttons Panel


Google : JAVA SE7 GridLayout

Buttons Panel

Buttons Panel est un simple Container.
On garde des références sur les composants.

package ui;

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

public class ButtonsPanel extends JPanel
{
	private final ColorIndicator     colorIndicator ;
	private final ColorChooserButton colorChooser ;
	private final EraseSegmentButton eraseSegment ;
	
	public ButtonsPanel(DrawingApp drawingApp)
	{
		setLayout(new GridLayout(1,3)) ; // 1 row, 3 columns
		
		add(colorIndicator = new ColorIndicator     (drawingApp)) ;
		add(colorChooser   = new ColorChooserButton (drawingApp)) ;
		add(eraseSegment   = new EraseSegmentButton (drawingApp)) ;
	}
}

N.B. Il n'est pas nécessaire de faire attention aux maniaques qui aiment les alignements verticaux.

Drawing Panel

Le Drawing Panel est un simple JPanel dans lequel on dessinera les segments.

package ui;

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

public class DrawingPanel extends JPanel
{
	private final DrawingApp drawingApp ;
	
	public DrawingPanel(DrawingApp drawingApp)
	{
		this.drawingApp = drawingApp ;
		
		setBackground(Color.WHITE) ;

		// for pack() instruction
		setPreferredSize(new Dimension(300,300)) ;  
	}
}

Window Panel


Google : JAVA SE7 BorderLayout

BorderLayout

BorderLayout : les composants peuvent être ajoutés dans les 5 parties.

Window Panel

Window Panel est un simple Container.
On garde des références sur les composants.

package ui;

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

public class WindowPanel extends JPanel
{
    private final DrawingPanel drawingPanel ;
    private final ButtonsPanel buttonsPanel ;
    
	public WindowPanel(DrawingApp drawingApp)
	{
		setLayout(new BorderLayout()) ;
		
		add(drawingPanel = new DrawingPanel (drawingApp), BorderLayout.CENTER) ;
		add(buttonsPanel = new ButtonsPanel (drawingApp), BorderLayout.SOUTH) ;
	}
	
}

La fenêtre principale

On garde des références sur les composants.

package ui;

import javax.swing.* ;

public class DrawingApp extends JFrame
{
	private final DrawingMenuBar drawingMenuBar ;
	private final WindowPanel    windowPanel ;
	
	public DrawingApp()
	{
		super("Drawing Application") ;
		
		setJMenuBar(drawingMenuBar = new DrawingMenuBar(this)) ;
		
		setContentPane(windowPanel = new WindowPanel(this)) ;
		
		setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) ; 
		pack() ;
		setVisible(true) ;
	}

}

Les layouts


Exemple

Fin




Programmation orientée objet en Java


Des questions ?


Télécom ParisTech