Cours 6: Interfaces graphiques homme-machine - …tichit/java/cours/JavaBBSG2-06.pdf · et le langage Java Master BBSG 2 Laurent Tichit D epartement Informatique et Interactions,

La programmation orientee objetset le langage Java

Master BBSG 2Laurent Tichit

Departement Informatique et Interactions, Faculte des Sciences de Luminy

Cours 6: Interfaces graphiqueshomme-machine

c©L. Tichit, 2015-2016 POO et Java 1 / 23

IHM

L’interface graphique d’une application Java

Bibliotheque JFC (Java Foundation Classes) :

AWT (Abstract Windowing Toolkit)

premiere version, role important dans le succes de Javacomposants lourds, c.-a-d. apparies avec des composants natifspresente dans Swing (evenements, gestionnaires de disposition, etc.)

Swing

composants bien plus nombreux et perfectionnescomposants legers, � 100% pur Java �

en pratique, on utilise

les composants de Swingla gestion des evenements de AWTles gestionnaires de disposition (layout manager) de AWT

Detail : attention aux noms des composants :

AWT : Frame, Button, Panel...Swing : JFrame, JButton, JPanel...


IHM





Swing







IHM





Swing







IHM





Swing







IHM

Le sommet de la hierarchie

classe AWT proprietes essentielles methodes � revelatrices�

Component visible a l’ecran paint

source d’evenements addXXXListener

Container contient d’autres composants add

gere leur placement setLayout

Window existe seul sur l’ecran setVisible

maintient en vie les ressources setOwner

Frame cadre permanent (represente l’application)porte une barre de menus

Dialog boıte de dialogue temporaire, sert a saisir des informationspeut etre modale (bloquante) ou non


IHM












IHM












IHM












IHM












IHM

La plus petite application avec IUG

C’est aussi la partie constante, � inevitable�, de toute IUG :

Fichier Simple1.java

import javax.swing.JFrame;

public class Simple1 {public static void main(String[] args) {

JFrame cadre = new JFrame("Simple");cadre.setSize(300, 200);cadre.setVisible(true);

}}

Attention, la case defermeture n’est pasoperationnelle(le cadre disparaıt maisl’application ne se terminepas)


IHM







}}



IHM







}}



IHM


Une maniere expeditive (trop ?) de regler cette affaire de la case de fermeture :




JFrame cadre = new JFrame("Simple");cadre.setSize(300, 200);cadre.setDefaultCloseOperation(JFrame.EXIT ON CLOSE);cadre.setVisible(true);

}}


IHM


Mettons quelque chose dans le cadre (par exemple, un panneau rouge) :


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

public class Simple3 {

public static void main(String[] args) {JFrame cadre = new JFrame("Simple");cadre.setSize(300, 200);cadre.setDefaultCloseOperation(JFrame.EXIT ON CLOSE);

JPanel panneau = new JPanel();panneau.setBackground(Color.red);

cadre.setContentPane(panneau);cadre.setVisible(true);

}}


IHM


Quelque chose dans le cadre, une autre approche :


public class Simple4 extends JPanel {

Simple4() {JLabel label = new JLabel("Bonjour a tous");label.setForeground(Color.white);label.setFont(new Font("Serif", Font.PLAIN, 48));

this.add(label);this.setBackground(Color.red);

}

public static void main(String[] args) {JFrame cadre = new JFrame("Simple");cadre.setSize(300, 200);cadre.setDefaultCloseOperation(JFrame.EXIT ON CLOSE);cadre.setContentPane(new Simple4());cadre.setVisible(true);

}}


IHM

Le mecanisme des evenements

objets auditeurspossèdent les méthodes correspondantaux événements dont ils sont auditeurs

composantsource

l'utilisateur agit sur un composant

auparavant, les auditeurs ont été enregistrés auprès de la source (abonnement)

la source crée un événement et le notifie aux auditeurs


IHM


Exemple : les evenements � souris �

sont notifies par les methodes, signalant diverses actions de l’utilisateur :

void mousePressed(MouseEvent evt);

void mouseReleased(MouseEvent evt);

void mouseClicked(MouseEvent evt);

void mouseEntered(MouseEvent evt);

void mouseExited(MouseEvent evt);

comment garantir qu’un candidat auditeur les possede ?

⇒ on en fait une interface : interface MouseListener

un auditeur d’evenements souris � s’enregistre � aupres d’une source de telsevenements par la methode

void addMouseListener(MouseListener ml);

exemple

uneSource.addMouseListener(unAuditeur);


IHM













exemple



IHM













exemple



IHM













exemple



IHM













exemple



IHM

Exemple : detecter l’action sur un bouton

D’abord, les boutons mais sans le mecanisme de detection des actions :

Fichier Boutons1.java

import java.awt.*;

import javax.swing.*;

public class Boutons1 extends JPanel {

Boutons1() {JButton bouton = new JButton("Rouge");

add(bouton);

bouton = new JButton("Vert");

add(bouton);

setBackground(Color.red);

}

public static void main(String[] args) {JFrame cadre = new JFrame("Boutons 1");

cadre.setSize(300, 200);

cadre.setDefaultCloseOperation(JFrame.EXIT ON CLOSE);

cadre.setContentPane(new Boutons1());

cadre.setVisible(true);

}}


IHM


Ajout du mecanisme de detection des actions sur les boutons


import java.awt.*;

import java.awt.event.*;


public class Boutons2 extends JPanel implements ActionListener {


add(bouton);

bouton.addActionListener(this);


add(bouton);



}

public void actionPerformed(ActionEvent e) {if (e.getActionCommand().equals("Rouge"))


else

setBackground(Color.green);

}

public static void main(String[] args) {...

}}


IHM


Ajout du mecanisme de detection des actions sur les boutons


import java.awt.*;





add(bouton);



add(bouton);



}

public void actionPerformed(ActionEvent e) {if (e.getActionCommand().equals("Rouge"))


else


}


}}


IHM


Pour distinguer les boutons, un test plus efficace


import etc.


JButton boutonRouge, boutonVert;

Boutons3() {boutonRouge = new JButton("Rouge");

add(boutonRouge);

boutonRouge.addActionListener(this);

boutonVert = new JButton("Vert");

add(boutonVert);

boutonVert.addActionListener(this);


}

public void actionPerformed(ActionEvent e) {if (e.getSource() == boutonRouge)


else


}


}}


IHM


Pour distinguer les boutons, un test plus efficace


import etc.


JButton boutonRouge, boutonVert;

Boutons3() {boutonRouge = new JButton("Rouge");

add(boutonRouge);

boutonRouge.addActionListener(this);

boutonVert = new JButton("Vert");

add(boutonVert);

boutonVert.addActionListener(this);


}

public void actionPerformed(ActionEvent e) {if (e.getSource() == boutonRouge)


else


}


}}


IHM


Avec deux auditeurs on n’a pas besoin de distinguer les boutons


import etc.

public class Boutons4 extends JPanel {


add(bouton);

bouton.addActionListener(new ActionListener() {public void actionPerformed(ActionEvent e) {

setBackground(Color.blue);

}});bouton = new JButton("Vert");

add(bouton);

bouton.addActionListener(new ActionListener() {public void actionPerformed(ActionEvent e) {


}});setBackground(Color.red);

}


}}


IHM

Exemple : tracer une ligne polygonale, 1

La mauvaise facon de dessiner


import java.awt.*;



public class Gribouilleur1 extends JPanel

implements MouseListener {int xp = -1, yp;

public void mousePressed(MouseEvent e) {Graphics g = getGraphics();

if (xp >= 0)

g.drawLine(xp, yp, e.getX(), e.getY());

xp = e.getX();

yp = e.getY();

}

public void mouseReleased(MouseEvent e) { }public void mouseClicked(MouseEvent e) { }public void mouseEntered(MouseEvent e) { }public void mouseExited(MouseEvent e) { }

Gribouilleur1() {setBackground(Color.white);

addMouseListener(this);

}

public static void main(String[] args) {JFrame cadre = new JFrame("Gribouillis 1");


cadre.setDefaultCloseOperation(

JFrame.EXIT ON CLOSE);

cadre.setContentPane(new Gribouilleur1());


}}


IHM




import java.awt.*;






if (xp >= 0)


xp = e.getX();

yp = e.getY();

}




}







}}


IHM




import java.awt.*;






if (xp >= 0)


xp = e.getX();

yp = e.getY();

}




}







}}


IHM


La bonne facon de dessiner


import java.awt.*;


import java.util.*;



implements MouseListener {

Vector<Point> points = new Vector<Point>();

public void mousePressed(MouseEvent e) {points.add(new Point(e.getX(), e.getY()));

repaint();

}

public void paint(Graphics g) {super.paint(g);

Iterator<Point> iter = points.iterator();

if (iter.hasNext()) {Point pr = iter.next();

while (iter.hasNext()) {Point pc = iter.next();

g.drawLine(pr.x, pr.y, pc.x, pc.y);

pr = pc;

}}

}




}







}}


IHM




import java.awt.*;


import java.util.*;






repaint();

}






pr = pc;

}}

}




}







}}


IHM




import java.awt.*;


import java.util.*;






repaint();

}






pr = pc;

}}

}




}







}}


IHM

Gestionnaires de disposition

Principe

conteneur

composants

gestionnairede disposition

getPreferredSize()getMinimumSize()getSize()setSize(...)setLocation(...) ...

connaît

connaît


IHM

Flow layout

Fichier TestFlowLayout.java

public class TestFlowLayout extends JPanel {

TestFlowLayout() {setLayout(new FlowLayout());

for (int i = 1; i <= 5; i++)

add(new JButton("Bouton " + i));

}

public static void main(String[] args) {JFrame cadre = new JFrame("Flow layout");




cadre.setContentPane(new TestFlowLayout());


}}


IHM

Flow layout

Fichier TestFlowLayout.java

public class TestFlowLayout extends JPanel {

TestFlowLayout() {setLayout(new FlowLayout());

for (int i = 1; i <= 5; i++)


}

public static void main(String[] args) {JFrame cadre = new JFrame("Flow layout");




cadre.setContentPane(new TestFlowLayout());


}}


IHM

Border layout

Fichier TestBorderLayout.java

public class TestBorderLayout extends JPanel {

TestBorderLayout() {setLayout(new BorderLayout());

add(new JButton("Bouton 1"),

BorderLayout.NORTH);


BorderLayout.EAST);


BorderLayout.SOUTH);


BorderLayout.WEST);


BorderLayout.CENTER);

}

public static void main(String[] args) {JFrame cadre = new JFrame("Border layout");




cadre.setContentPane(

new TestBorderLayout());


}}


IHM

Border layout


public class TestBorderLayout extends JPanel {

TestBorderLayout() {setLayout(new BorderLayout());


BorderLayout.NORTH);


BorderLayout.EAST);


BorderLayout.SOUTH);


BorderLayout.WEST);


BorderLayout.CENTER);

}

public static void main(String[] args) {JFrame cadre = new JFrame("Border layout");




cadre.setContentPane(

new TestBorderLayout());


}}


IHM

Grid layout


public class TestGridLayout extends JPanel {

TestGridLayout() {setLayout(new GridLayout(3, 2));

for (int i = 1; i <= 5; i++)


}

public static void main(String[] args) {JFrame cadre = new JFrame("Grid layout");




cadre.setContentPane(new TestGridLayout());


}}


IHM

Grid layout


public class TestGridLayout extends JPanel {

TestGridLayout() {setLayout(new GridLayout(3, 2));

for (int i = 1; i <= 5; i++)


}

public static void main(String[] args) {JFrame cadre = new JFrame("Grid layout");




cadre.setContentPane(new TestGridLayout());


}}


IHM

Une interface non triviale

Comment obtient-on les interfaces usuelles avec ces quelques gestionnaires dedispositions si simples et bizarres ?


IHM


EASTCENTER

SOUTH


IHM


NORTH

CENTER

SOUTH


IHM


flow layout

grid layout

grid layout

flow layout


Documents

Cours 6: Interfaces graphiques homme-machine - …tichit/java/cours/JavaBBSG2-06.pdf · et le langage Java Master BBSG 2 Laurent Tichit D epartement Informatique et Interactions,