Interface graphique

Une interface graphique (GUI – Graphical User Interface) est constituée de

composants graphiques, organisés de façon composite. Les interactions avec
l'utilisateur sont gérées dans le paradigme de la programmation événementielle.

Programmation Objet 1 - GUI 1

 AWT

Historiquement, AWT (Abstract Window Toolkit) est

la première librairie graphique de Java.

AWT utilise les composants offerts par l'OS sur lequel

tourne la JVM.

Avantages d'AWT :
- performance liée à l'utilisation des composants natifs
- uniformité d'apparence avec d'autres applications

Inconvénients d'AWT :
- limité aux composants communs à tous les OS
- l'apparence change d'un OS à l'autre

En pratique, les composants AWT ne sont plus utilisés.

Programmation Objet 1 - GUI 2

 Swing

Swing et une extension d'AWT

qui fait le moins possible appel
aux composants natifs et utilise
juste les opérations de base
(tracer un trait, écrire du texte, …)

Les classes Swing commencent

par un J : Frame en AWT devient
JFrame en Swing.

Avantages de Swing :
- beaucoup plus riche qu'AWT en terme de composants
- uniformité d'apparence d'un OS à l'autre

Inconvénients de Swing :
- l'apparence n'est pas uniforme avec les autres applications
- un peu moins performant qu'AWT

Programmation Objet 1 - GUI 3

 Composants Swing

Programmation Objet 1 - GUI 4

 Classes Swing
Les composants AWT sont regroupés dans le paquetage java.awt
Les composants Swing sont regroupés dans le paquetage javax.swing

Component

Container

JComponent

AbstractButton JTextComponent JPanel ...

JButton JMenuItem JToggleButton JEditorPane JTextField JTextArea

JCheckBox JRadioButton JTextPane JPasswordField

JMenu JCheckBoxMenuItem

JRadioButtonMenuItem

Programmation Objet 1 - GUI 5

 Premier exemple
La fenêtre principale des applications Swing est une instance de JFrame dans
laquelle on ajoute divers conteneurs et composants de façon arborescente.

public class Exemple extends Jframe{

public Exemple(){
super("Le premier exemple");
this.setDefaultCloseOperation(WindowConstants.DISPOSE_ON_CLOSE);
JPanel jp = new JPanel(new FlowLayout(FlowLayout.LEFT));
jp.setBackground(Color.lightGray);
jp.add(new JLabel("TextField"));
JTextField tf = new JTextField(15);
jp.add(tf);
...
this.addadd(jp,gbc);
this.pack();
this.setVisible(true) ;
}
}

Remarque : par défaut, une JFrame n'est pas visible.

Programmation Objet 1 - GUI 6

 JFrame

Une JFrame contient différents panneaux :

- le GlassPane capture les événements souris
- le ContentPane contient les composants
- le LayeredPane gère des couches pour l'organisation des composants
- le RootPane contient tous les autres panneaux

Swing offre aussi des fenêtres spécialisées :

- JDialog pour les interactions (question, saisie, …)
- JInternalFrame pour les fenêtres qui s'affichent à l'intérieur d'une Jframe
- JApplet pour les applications Web coté client

Programmation Objet 1 - GUI 7

 JInternalFrame

Les JInternalFrame doivent être ajoutées sur un

JDesktopPane (sous-classe de JLayeredPane)
qui permet de gérer la profondeur de chaque
composant.

public SwingFrame(){
super("Test JFrame");
JInternalFrame jif1 = new JInternalFrame("Dessous",true);
jif1.setVisible(true);
jif1.setBounds(50,50,150,150);
JInternalFrame jif2 = new JInternalFrame("Dessus",true);
jif2.setVisible(true);
jif2.setBounds(70,70,150,150);
JDesktopPane jdp = new JdesktopPane();
jdp.setBackground(new Color(150,80,80));
jdp.add(jif1);
jdp.add(jif2);
jdp.setLayer(jif1,JLayeredPane.DEFAULT_LAYER-10);
this.getContentPane().add(jdp);
this.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
this.setSize(500,300);
this.setVisible(true);
}
Programmation Objet 1 - GUI 8
 JMenu
public JMenuTest() {
super ("MenuTest");
JMenuBar jmb = new JMenuBar();
JMenuItem item;
JMenu edit = new JMenu ("Languages");
edit.add (item = new JMenuItem ("C++"));
Icon tigerIcon = new ImageIcon("java.gif");
item = new JMenuItem ("Java",tigerIcon);
item.setHorizontalTextPosition (JMenuItem.RIGHT);
edit.addSeparator();
edit.add (item);
jmb.add (edit);
JMenu choice = new JMenu ("Choices");
JCheckBoxMenuItem check =
new JCheckBoxMenuItem ("Toggle");
choice.add (check);
ButtonGroup rbg = new ButtonGroup();
JRadioButtonMenuItem rad =
new JRadioButtonMenuItem ("Choice 1");
choice.add (rad);
rbg.add (rad); ButtonGroup n'est pas
rad = new JRadioButtonMenuItem ("Choice 2");
choice.add (rad);
un composant graphique
rbg.add (rad); mais sert à garantir un
jmb.add (choice); choix exclusif entre
setJMenuBar (jmb); boutons.
this.setSize(400,200);
this.setVisible(true);
}
Programmation Objet 1 - GUI 9
 JToolbar
Une barre d'outil peut être positionnée n'importe où dans la fenêtre, elle peut
être déplaçable ou pas, réactive ou pas, etc.

public JToolBarTest() {
super ("ToolBarTest");
JToolBar jtb = new JToolBar();
jtb.setFloatable(true);
jtb.setRollover(true);
jtb.add(new JButton("New"));
jtb.add(new JButton("Open"));
jtb.addSeparator();
Icon tigerIcon = new ImageIcon("java.gif");
jtb.add(new JButton("Java",tigerIcon));
jtb.add(new JRadioButtonMenuItem ("ON/OFF"));
this.getContentPane().add(jtb, BorderLayout.PAGE_START);
this.setSize(400,200);
this.setVisible(true);
}

Programmation Objet 1 - GUI 10

 JTabbedPane
public JTabbedPaneTest() {
super("JTabbedPaneTest");
String tabs[] = {"C++", "Java", "Eiffel", "SmallTalk"};
JTabbedPane tabbedPane = new JTabbedPane();
this.setLayout(new BorderLayout());
for (int i=0;i<tabs.length;i++){
JPanel p = new JPanel();
p.add(new JLabel("Panel "+(i+1)));
tabbedPane.addTab (tabs[i], null, p);
}
tabbedPane.setSelectedIndex(0);
tabbedPane.setMnemonicAt(2,KeyEvent.VK_E);
tabbedPane.setIconAt(1,new ImageIcon("java.gif"));
this.getContentPane().add(tabbedPane, BorderLayout.CENTER);
this.setSize(200,400);
this.setVisible(true);
}

Programmation Objet 1 - GUI 11

 JScrollPane

public JScrollPaneTest() {
super("JScrollPaneTest");
JLabel comp = new Jlabel(new ImageIcon("Madagascar.JPG"));
JScrollPane scrollPane = new JScrollPane(comp);
this.add (scrollPane);
this.setSize(200,400);
this.setVisible(true);
}

Programmation Objet 1 - GUI 12

 JSplitPane

public JSplitPaneTest() {
super("JSplitPaneTest");
JLabel mad = new JLabel(new ImageIcon("Madagascar.JPG"));
JScrollPane scrollPane = new JScrollPane(mad);
JLabel one = new JLabel("Panel ONE");
JLabel two = new JLabel("Panel TWO");
JSplitPane right = new JSplitPane(JSplitPane.VERTICAL_SPLIT,one,two);
right.setDividerSize(20);
right.setDividerLocation(0.1);
JSplitPane left = new JsplitPane(JSplitPane.HORIZONTAL_SPLIT,new
JScrollPane(mad),right);
left.setOneTouchExpandable(true);
this.add(left);
this.setSize(200,400);
this.setVisible(true);
}
Programmation Objet 1 - GUI 13
 Composants texte
Composants texte de Swing :
- JTextField : permet d'afficher une ligne de texte, éditable ou non
- JPasswordField : sous classe de JTextField qui n'affiche que des étoiles
- JFormattedTextField : sous-classe de JTextField ajoutant des
fonctionnalités de formatage
- JTextArea : zone de texte multi-lignes
- JEditorPane : pour éditer du texte
- JTextPane : sous-classe de JEditorPane ajoutant des fonctionnalités de
formatage

Programmation Objet 1 - GUI 14

 JDialog (1/2)
public class LoginComponent extends JDialog{
private int gap = 10;

public LoginComponent(JFrame f){

super(f,"Saisie de login et mot de passe",true);
this.setDefaultCloseOperation(JDialog.DO_NOTHING_ON_CLOSE);
Box b = new Box(BoxLayout.Y_AXIS);
b.add(Box.createRigidArea(new Dimension(this.gap,this.gap)));
JTextField login = new JTextField(20);
login.setPreferredSize(new Dimension(200,22));
b.add(login);
b.add(Box.createRigidArea(new Dimension(this.gap,this.gap)));
JPasswordField pass = new JPasswordField(20);
b.add(pass);
b.add(Box.createRigidArea(new Dimension(this.gap,this.gap)));
JButton jb = new JButton("OK");
jb.setAlignmentX(Component.CENTER_ALIGNMENT);
b.add(jb);
b.add(Box.createRigidArea(new Dimension(this.gap,this.gap)));
Box bis = new Box(BoxLayout.X_AXIS);
bis.add(Box.createRigidArea(new Dimension(this.gap,this.gap)));
bis.add(b);
bis.add(Box.createRigidArea(new Dimension(this.gap,this.gap)));
this.add(bis);
this.pack();
this.setLocationRelativeTo(f);
this.setVisible(true);
}
}
Programmation Objet 1 - GUI 15
 public class TextTest extends JFrame{ JDialog (2/2)
public TextTest() {
super("Texte test");
this.getContentPane().setBackground(new Color(150,80,80));
this.setSize(400,300);
this.setVisible(true);
new LoginComponent(this);
}

public static void main(String[] args){

new TextTest();
}

Pour les interactions simples (message, choix OUI/NON, saisie d'une seule valeur, …)
le composant JOptionPane est idéal :

JOptionPane.showConfirmDialog(frame,"Cap ou pas
cap ?","D\u00e9fi",JOptionPane.YES_NO_OPTION)

Programmation Objet 1 - GUI 16

 JFileChooser et JColorChooser

Les composants JFileChooser et

JColorChooser permettent à l'utilisateur de
sélectionner un fichier ou une couleur.

public class Chooser extends JFrame {

public Chooser() {
super ("Chooser");
this.setSize(600,600);
this.setVisible(true);
JFileChooser chooser = new JFileChooser();
chooser.setFileFilter(new
javax.swing.filechooser.FileNameExtensionFilter("jpg", "jpeg"));
if(chooser.showOpenDialog(this) == JFileChooser.APPROVE_OPTION) {
... chooser.getSelectedFile().getName();
}
}
}
Programmation Objet 1 - GUI 17
 Décorations
Chaque composant a sa propre police, ses propres couleurs, ses propres bordures, qui
peuvent être de différents types. Chaque type de bordure est paramétrable, peut
comporter un titre ou pas, ...

Jpanel jp = new Jpanel() ;

Border b = BorderFactory.createLoweredBevelBorder()
jp.setBorder(BorderFactory.createTitledBorder(b,"title");

Il est possible d'ajouter une info-bulle JButton jb = new JButton("Ouvrir") ;

sur chaque composant : jb.setToolTipText("Ouvrir un fichier");

Programmation Objet 1 - GUI 18

 Apparence générale
Il est possible de choisir l'apparence générale de l'interface (Look and Feel) et même
de la changer en cours d'exécution.

L'OS sur lequel s'exécute la JVM conditionne les apparences disponibles et on peut
choisir d'utiliser l'apparence native de l'OS pour harmoniser.

UIManager.put("Label.font", new Font("Liberation Serif",Font.PLAIN,18));

UIManager.setLookAndFeel("javax.swing.plaf.metal.MetalLookAndFeel");
SwingUtilities.updateComponentTreeUI(this);
this.repaint();

Programmation Objet 1 - GUI 19

 Dessin (1/2)

Les classes java.awt.Graphics et java.awt.Graphics2D offre de

nombreuses méthodes pour dessiner, gérer les images et mettre en forme des
textes.

Dessiner sur un composant se fait en redéfinissant sa méthode paintComponent

pour garantir la persistance (on peut aussi appeler la méthode paint, qui appelle
paintComponent)
public void paintComponent(Graphics g){
super.paintComponent(g); // important
Graphics2D g2 = (Graphics2D) g;
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
RenderingHints.VALUE_ANTIALIAS_ON);
...
g2.draw(new Line2D.Double(x, y+rectHeight-1, x + rectWidth, y));
g2.drawString("Line2D", x, stringY);
...
BasicStroke stroke = new BasicStroke(2.0f);
g2.draw(new Ellipse2D.Double(x, y, rectWidth, rectHeight));
GeneralPath polygon = new GeneralPath(GeneralPath.WIND_EVEN_ODD,
x1Points.length);
polygon.moveTo(x1Points[0], y1Points[0]);
for ( int index = 1; index < x1Points.length; index++ ) {
polygon.lineTo(x1Points[index], y1Points[index]);
};
polygon.closePath();
g2.draw(polygon);
... Objet 1 - GUI
Programmation 20
 Dessin (2/2)

Le rafraichissement d'un composant se fait par appel à la méthode repaint()

Programmation Objet 1 - GUI 21

 Image
Les images sont gérées à l'aide des classes java.awt.Image et
java.awt.image.BufferedImage

Il est possible de modifier les images, de dessiner dessus, etc.

Une image est dessinée sur un composant par appel à une méthode drawImage
de la classe Graphics.

BufferedImage bi = null;
try{
img = ImageIO.read(new File("bidule.jpg"));
...
Graphics g ...
g.drawImage(img,x,y,width,height,null) ;
...
File sauvegarde = new File("machin.png");
ImageIO.write(bi, "png", sauvegarde);
}
catch(IOException e){...}

Les icônes sont manipulées via la classe ImageIcon

Programmation Objet 1 - GUI 22