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 :

• le droit de reproduire tout ou partie du document sur support informatique ou papier,
• le droit de diffuser tout ou partie du document à destination des élèves ou étudiants.

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.

• Expliciter les mécanismes des interfaces homme machine.
• Programmer des interfaces homme machine en Java.
• Acquérir une méthodologie simplifiée pour cela.
• Vous permettre de programmer des interfaces utilisateurs sans entrer dans toutes les subtilités du toolkit SWING.

• Les interfaces homme machine (IHM) permettent aux applications et aux utilisateurs d'interagir.
• Elles prennent la forme de fenêtres contenant des widgets: boutons, menus, champs d'entrée, zone de dessin, etc.
• Autres noms :
  • Interfaces utilisateur (User Interface, UI).
  • Interfaces graphiques (Graphical User Interface, GUI).
  • Interfaces personne machine.

• L'ensemble des outils qui permettent de programmer une interface utilisateur est appelé un toolkit (boîte à outils) graphique.
• Java propose plusieurs toolkits graphiques :
  • AWT : Abstract Window Toolkit.
  • SWT : Standard Widget Toolkit.
  • SWING.
• AWT est maintenant dépassé.
• SWT est lié à Eclipse.

Nous utilisons SWING !

• Les Widgets (Window Gadgets) sont appelés composants (components) dans SWING.

• Construire la fenêtre et tous les composants (components) qu'elle contient. Tout est objet au sens de Java.
• Programmer les comportements des composants en fonction des actions de l'utilisateur :
  • clics de souris 
  • mouvements de souris 
  • frappes de clavier.
  • etc.

• Expliquer comment sont organisées les interfaces. En particulier la hiérarchie des objets (arbre d'instanciation) qui composent une interface et comment ils sont automatiquement agencés dans la fenêtre.
• Expliquer le fonctionnement de SWING et en particulier comment sont réalisées les réponses de l'interface aux actions de l'utilisateur, comment le programmeur définit ces réactions.

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.

• Une fenêtre est un objet de type JFrame.
• Une fenêtre peut avoir une barre de menu de type JMenuBar.
• L'intérieur de la fenêtre est un panneau de type JPanel.
• Bien d'autres détails que nous ne verrons pas.

Google : JAVA SE7 JFrame

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
   }

}

• Nous allons créer des composants qui figureront dans la fenêtre.
• Nous devrons programmer ces composants.
• Par exemple, le menu Quit devra envoyer un message à la fenêtre pour qu'elle se ferme.

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.

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

}

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

}

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

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

}

package main;

import ui.* ;

public class Main 
{

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

	}

}

• La fenêtre est très petite parce que la fenêtre ne contient rien et parce que l'instruction pack() réduit sa taille au minimum.
• On peut vérifier que les menu sont bien là. Mais ils ne sont pas encore programmés.

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 contenu de la fenêtre est un objet panneau de type JPanel.
• Un JPanel peut contenir d'autres composants tels que des boutons, des champs d'entrée, etc. Il peut aussi contenir d'autres JPanel. Le contenu de la fenêtre est donc une hiérarchie de JPanel appelée arbre d'instanciation.
• Un JPanel peut également être utilisé pour dessiner.
• L'agencement des sous-composants d'un JPanel, positions et tailles, est déterminée par un objet spécialisé de la classe Layout associé au JPanel. Les sous-composants apparaissent à l'intérieur du JPanel.
• Le programmeur ne gère pas lui-même la taille et la position des composants. Il confie cette tâche à un Layout.
• Il existe différents types de Layout permettant des agencements différents.

• SWING propose de nombreux composants.

• Rappelez-vous que Google (ou un autre) est votre ami.

Google : JColorChooser tutorial Google : JAVA SE7 JColorChooser

• Nous allons réaliser une petite application permettant d'éditer des segments sur une zone de dessin, de sauvegarder et de recharger l'état du dessin.
• En SWING, une zone de dessin est un JPanel vide, voir plus loin.
• Pour créer un segment, cliquer, garder le bouton de la souris appuyé, déplacer la souris jusqu'au bout du segment et relâcher le bouton de la souris.
• Pour effacer un segment, le sélectionner par un double clic et appuyer sur le bouton Erase Segment.
• Les segments peuvent avoir des couleurs différentes.

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

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

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

• Le Buttons Layout doit contenir les trois précédents composants.
• On désire que ces trois composants soient alignés horizontalement et de même taille.
• Un Layout particulier permet de réaliser cela.

Google : JAVA SE7 GridLayout

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

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

• Le Window Panel doit contenir le Drawing Panel au dessus du Buttons Panel.
• On ne peut utiliser le GridLayout car les deux composants auraient la même hauteur.

Google : JAVA SE7 BorderLayout

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

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

}

• BorderLayout : North, South, East, West, Center.
• GridLayout : grille.
• CardLayout : onglets.
• BoxLayout : ligne ou colonne (très utile).
• Les quatre précédents sont en général suffisants.

• SpringLayout : agencement avec des contraintes.
• FlowLayout : alignés de gauche à droite avec passage à la ligne.
• GridBagLayout : grille avec des contraintes (très flexible, compliqué).
• Voir les classes implémentant l'interface LayoutManager.

• JavaIHM00 : montre l'interface construite.