cours 5 – interface homme-interface · 2020. 12. 26. · cours 5 – interface homme-interface...
TRANSCRIPT
![Page 1: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/1.jpg)
Cours 5 – Interface homme-interfaceProgrammation objets, web et mobiles en Java
Licence 3 Professionnelle - Multimédia
Pierre Talbot ([email protected])
Doctorant UPMC/IRCAM
4 novembre 2014
Pierre Talbot (IRCAM) IHM 1 / 33
![Page 2: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/2.jpg)
Introduction
Le menu
I Introduction
I Base de la programmation graphique avec Swing
I Programmation événementielle
I Architecture d’un projet avec GUI
Pierre Talbot (IRCAM) IHM 2 / 33
![Page 3: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/3.jpg)
Introduction
Abstractions graphiques
1. Chaque OS possède sa propre API pour créer des GUI (graphical user
interface).2. Les frameworks comme Qt (C++) ou Awt/Swing (Java) propose une
interface uniforme pour tous les OS.
Pierre Talbot (IRCAM) IHM 3 / 33
![Page 4: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/4.jpg)
Introduction
Librairies Java
Ijava.awt est une première abstraction graphique consistantprincipalement en des wrappers des composants systèmes.
Ijava.swing étend awt pour proposer plus de fonctionnalités.
Iawt contient des appels spécifiques vers la JVM pour accéder auxopérations graphiques.
Iswing est écrit en Java pur.
Remarques
Iswing étend les classes de awt donc on ne l’utilise pas sans awt !
I Les classes de swing commence par ’J’ (JFrame) contrairement àcelles de awt (Frame).
Pierre Talbot (IRCAM) IHM 4 / 33
![Page 5: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/5.jpg)
Introduction
Librairies Java
Ijava.awt est une première abstraction graphique consistantprincipalement en des wrappers des composants systèmes.
Ijava.swing étend awt pour proposer plus de fonctionnalités.
Iawt contient des appels spécifiques vers la JVM pour accéder auxopérations graphiques.
Iswing est écrit en Java pur.
Remarques
Iswing étend les classes de awt donc on ne l’utilise pas sans awt !
I Les classes de swing commence par ’J’ (JFrame) contrairement àcelles de awt (Frame).
Pierre Talbot (IRCAM) IHM 4 / 33
![Page 6: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/6.jpg)
Base de la programmation graphique avec Swing
Le menu
I Introduction
I Base de la programmation graphique avec SwingI Gestionnaire de mise en formeI Organisation hiérarchique des composants
I Programmation événementielle
I Architecture d’un projet avec GUI
Pierre Talbot (IRCAM) IHM 5 / 33
![Page 7: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/7.jpg)
Base de la programmation graphique avec Swing
JFrame
import javax . swing .*;
public class LE380 {public static void main( String [] args) {
JFrame window = new JFrame (" Hello World ");window . setSize (200 , 100);window . setDefaultCloseOperation ( JFrame . EXIT_ON_CLOSE );window . setVisible ( true );
}}
La fenêtre utilise automatiquement le style du système d’exploitationsous-jacent (JFrame hérite de awt.Frame encapsulant l’objet système).
Pierre Talbot (IRCAM) IHM 6 / 33
![Page 8: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/8.jpg)
Base de la programmation graphique avec Swing
JFrame
import javax . swing .*;
public class LE380 {public static void main( String [] args) {
JFrame window = new JFrame (" Hello World ");window . setSize (200 , 100);window . setDefaultCloseOperation ( JFrame . EXIT_ON_CLOSE );window . setVisible ( true );
}}
La fenêtre utilise automatiquement le style du système d’exploitationsous-jacent (JFrame hérite de awt.Frame encapsulant l’objet système).
Pierre Talbot (IRCAM) IHM 6 / 33
![Page 9: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/9.jpg)
Base de la programmation graphique avec Swing
JFrame
import javax . swing .*;
public class LE380 {public static void main( String [] args) {
JFrame window = new JFrame (" Hello World ");window . setSize (200 , 100);window . setDefaultCloseOperation ( JFrame . EXIT_ON_CLOSE );window . setVisible ( true );
}}
La fenêtre utilise automatiquement le style du système d’exploitationsous-jacent (JFrame hérite de awt.Frame encapsulant l’objet système).
Pierre Talbot (IRCAM) IHM 6 / 33
![Page 10: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/10.jpg)
Base de la programmation graphique avec Swing
JLabel
On peut ajouter des labels, c’est-à-dire du texte dans la fenêtre.import javax . swing .*;
public class LE380 {public static void main( String [] args) {
JFrame window = new JFrame (" Hello World ");window . setSize (200 , 100);window . setDefaultCloseOperation ( JFrame . EXIT_ON_CLOSE );window .add(new JLabel (" Hello "));window . setVisible ( true );
}}
Pierre Talbot (IRCAM) IHM 7 / 33
![Page 11: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/11.jpg)
Base de la programmation graphique avec Swing
Deux JLabel ?public static void main( String [] args) {
// . . .window .add(new JLabel (" Hello "));window .add(new JLabel (" World "));window . setVisible ( true );
}}
ProblèmeI Il n’y a qu’un seul label d’a�ché. . .I En vérité, les deux sont a�chés l’un au dessus de l’autre et donc, un
est caché.Pierre Talbot (IRCAM) IHM 8 / 33
![Page 12: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/12.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Le menu
I Introduction
I Base de la programmation graphique avec SwingI Gestionnaire de mise en formeI Organisation hiérarchique des composants
I Programmation événementielle
I Architecture d’un projet avec GUI
Pierre Talbot (IRCAM) IHM 9 / 33
![Page 13: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/13.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Gestionnaire de mise en forme (Layout Manager)
Problématique
I Quand on appelle window.add(label) successivement il faut bienque le système choisisse où les a�cher.
I Néanmoins, en tant que développeur, on ne veut pas préciser leuremplacement exact avec des coordonnées. . .
I Il y a donc des gestionnaires qui arrange les composantsautomatiquement d’une certaine manière.
Pierre Talbot (IRCAM) IHM 10 / 33
![Page 14: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/14.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
BorderLayout avec JLabel
I Le gestionnaire BorderLayout est celui par défaut de JFrame.I Les éléments sont organisés suivant 5 directions.
window .add(new JLabel (" North "), BorderLayout . NORTH );window .add(new JLabel (" South "), BorderLayout . SOUTH );window .add(new JLabel (" Center "), BorderLayout . CENTER );window .add(new JLabel ("West"), BorderLayout .WEST );window .add(new JLabel ("East"), BorderLayout .EAST );window . setVisible ( true );
On ne voit pas bien les di�érentes zones car les labels sont alignés àgauche ou droite.
Pierre Talbot (IRCAM) IHM 11 / 33
![Page 15: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/15.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
BorderLayout avec JLabel
I Le gestionnaire BorderLayout est celui par défaut de JFrame.I Les éléments sont organisés suivant 5 directions.window .add(new JLabel (" North "), BorderLayout . NORTH );window .add(new JLabel (" South "), BorderLayout . SOUTH );window .add(new JLabel (" Center "), BorderLayout . CENTER );window .add(new JLabel ("West"), BorderLayout .WEST );window .add(new JLabel ("East"), BorderLayout .EAST );window . setVisible ( true );
On ne voit pas bien les di�érentes zones car les labels sont alignés àgauche ou droite.
Pierre Talbot (IRCAM) IHM 11 / 33
![Page 16: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/16.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
BorderLayout avec JLabel
I Le gestionnaire BorderLayout est celui par défaut de JFrame.I Les éléments sont organisés suivant 5 directions.window .add(new JLabel (" North "), BorderLayout . NORTH );window .add(new JLabel (" South "), BorderLayout . SOUTH );window .add(new JLabel (" Center "), BorderLayout . CENTER );window .add(new JLabel ("West"), BorderLayout .WEST );window .add(new JLabel ("East"), BorderLayout .EAST );window . setVisible ( true );
On ne voit pas bien les di�érentes zones car les labels sont alignés àgauche ou droite.
Pierre Talbot (IRCAM) IHM 11 / 33
![Page 17: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/17.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
BorderLayout avec JButton
window .add(new JButton (" North "), BorderLayout . NORTH );window .add(new JButton (" South "), BorderLayout . SOUTH );window .add(new JButton (" Center "), BorderLayout . CENTER );window .add(new JButton ("West"), BorderLayout .WEST );window .add(new JButton ("East"), BorderLayout .EAST );window . setVisible ( true );
I Contrairement aux labels, les boutons prennent par défaut lemaximum de place.
I On peut donc maintenant dire pourquoi ajouter deux labels à la suitene marche pas.
I Car les deux labels sont par défaut ajoutés à la zoneBorderLayout.CENTER et se superposent.
Pierre Talbot (IRCAM) IHM 12 / 33
![Page 18: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/18.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
BorderLayout avec JButton
window .add(new JButton (" North "), BorderLayout . NORTH );window .add(new JButton (" South "), BorderLayout . SOUTH );window .add(new JButton (" Center "), BorderLayout . CENTER );window .add(new JButton ("West"), BorderLayout .WEST );window .add(new JButton ("East"), BorderLayout .EAST );window . setVisible ( true );
I Contrairement aux labels, les boutons prennent par défaut lemaximum de place.
I On peut donc maintenant dire pourquoi ajouter deux labels à la suitene marche pas.
I Car les deux labels sont par défaut ajoutés à la zoneBorderLayout.CENTER et se superposent.
Pierre Talbot (IRCAM) IHM 12 / 33
![Page 19: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/19.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
BorderLayout avec JButton
window .add(new JButton (" North "), BorderLayout . NORTH );window .add(new JButton (" South "), BorderLayout . SOUTH );window .add(new JButton (" Center "), BorderLayout . CENTER );window .add(new JButton ("West"), BorderLayout .WEST );window .add(new JButton ("East"), BorderLayout .EAST );window . setVisible ( true );
I Contrairement aux labels, les boutons prennent par défaut lemaximum de place.
I On peut donc maintenant dire pourquoi ajouter deux labels à la suitene marche pas.
I Car les deux labels sont par défaut ajoutés à la zoneBorderLayout.CENTER et se superposent.
Pierre Talbot (IRCAM) IHM 12 / 33
![Page 20: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/20.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
FlowLayout
I Ajoute des éléments comme du texte : les uns après les autres.I Par défaut celui de JPanel.
window . setLayout (new FlowLayout ());window .add(new JButton (" North "), BorderLayout . NORTH );window .add(new JButton (" South "), BorderLayout . SOUTH );window .add(new JButton (" Center "), BorderLayout . CENTER );window .add(new JButton ("West"), BorderLayout .WEST );window .add(new JButton ("East"), BorderLayout .EAST );
Pierre Talbot (IRCAM) IHM 13 / 33
![Page 21: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/21.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
FlowLayout
I Ajoute des éléments comme du texte : les uns après les autres.I Par défaut celui de JPanel.
window . setLayout (new FlowLayout ());window .add(new JButton (" North "), BorderLayout . NORTH );window .add(new JButton (" South "), BorderLayout . SOUTH );window .add(new JButton (" Center "), BorderLayout . CENTER );window .add(new JButton ("West"), BorderLayout .WEST );window .add(new JButton ("East"), BorderLayout .EAST );
Pierre Talbot (IRCAM) IHM 13 / 33
![Page 22: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/22.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Autres gestionnaires de mise en forme
Suivant comment on veut organiser les di�érents composants, il existedi�érents gestionnaires permettant plus ou moins de libertés.
ICardLayout : Disposer les éléments comme une pile de carte, unélément étant visible à la fois.
IGridLayout : Disposer les éléments comme une grille régulière, tousles composants ont la même taille.
IBoxLayout : Idem GridLayout mais permet de régler le nombre decolonne et ligne (plus souple).
IGridBagLayout : Encore plus souple que le BoxLayout, permet derégler la taille des cellules.
Mots-clés : Layout manager
Pierre Talbot (IRCAM) IHM 14 / 33
![Page 23: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/23.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Autres gestionnaires de mise en forme
Suivant comment on veut organiser les di�érents composants, il existedi�érents gestionnaires permettant plus ou moins de libertés.
ICardLayout : Disposer les éléments comme une pile de carte, unélément étant visible à la fois.
IGridLayout : Disposer les éléments comme une grille régulière, tousles composants ont la même taille.
IBoxLayout : Idem GridLayout mais permet de régler le nombre decolonne et ligne (plus souple).
IGridBagLayout : Encore plus souple que le BoxLayout, permet derégler la taille des cellules.
Mots-clés : Layout manager
Pierre Talbot (IRCAM) IHM 14 / 33
![Page 24: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/24.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Autres gestionnaires de mise en forme
Suivant comment on veut organiser les di�érents composants, il existedi�érents gestionnaires permettant plus ou moins de libertés.
ICardLayout : Disposer les éléments comme une pile de carte, unélément étant visible à la fois.
IGridLayout : Disposer les éléments comme une grille régulière, tousles composants ont la même taille.
IBoxLayout : Idem GridLayout mais permet de régler le nombre decolonne et ligne (plus souple).
IGridBagLayout : Encore plus souple que le BoxLayout, permet derégler la taille des cellules.
Mots-clés : Layout manager
Pierre Talbot (IRCAM) IHM 14 / 33
![Page 25: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/25.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Autres gestionnaires de mise en forme
Suivant comment on veut organiser les di�érents composants, il existedi�érents gestionnaires permettant plus ou moins de libertés.
ICardLayout : Disposer les éléments comme une pile de carte, unélément étant visible à la fois.
IGridLayout : Disposer les éléments comme une grille régulière, tousles composants ont la même taille.
IBoxLayout : Idem GridLayout mais permet de régler le nombre decolonne et ligne (plus souple).
IGridBagLayout : Encore plus souple que le BoxLayout, permet derégler la taille des cellules.
Mots-clés : Layout manager
Pierre Talbot (IRCAM) IHM 14 / 33
![Page 26: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/26.jpg)
Base de la programmation graphique avec Swing Gestionnaire de mise en forme
Autres gestionnaires de mise en forme
Suivant comment on veut organiser les di�érents composants, il existedi�érents gestionnaires permettant plus ou moins de libertés.
ICardLayout : Disposer les éléments comme une pile de carte, unélément étant visible à la fois.
IGridLayout : Disposer les éléments comme une grille régulière, tousles composants ont la même taille.
IBoxLayout : Idem GridLayout mais permet de régler le nombre decolonne et ligne (plus souple).
IGridBagLayout : Encore plus souple que le BoxLayout, permet derégler la taille des cellules.
Mots-clés : Layout manager
Pierre Talbot (IRCAM) IHM 14 / 33
![Page 27: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/27.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Le menu
I Introduction
I Base de la programmation graphique avec SwingI Gestionnaire de mise en formeI Organisation hiérarchique des composants
I Programmation événementielle
I Architecture d’un projet avec GUI
Pierre Talbot (IRCAM) IHM 15 / 33
![Page 28: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/28.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
JPanel
ProblématiqueUn unique gestionnaire de mise en forme n’est pas su�sant pour uneinterface classique.
SolutionOn utilise alors des JPanel qui sont des composants contenus dans uneJFrame et qui ont leur propre gestionnaire de mise en forme.
Pierre Talbot (IRCAM) IHM 16 / 33
![Page 29: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/29.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
JPanel
ProblématiqueUn unique gestionnaire de mise en forme n’est pas su�sant pour uneinterface classique.
SolutionOn utilise alors des JPanel qui sont des composants contenus dans uneJFrame et qui ont leur propre gestionnaire de mise en forme.
Pierre Talbot (IRCAM) IHM 16 / 33
![Page 30: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/30.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
JPanel
JPanel flow_panel = new JPanel (new FlowLayout ());flow_panel .add(new JButton (" Click me"));flow_panel .add(new JButton (" Click me too"));
JPanel border_panel = new JPanel (new BorderLayout ());border_panel .add(new JButton (" South "), BorderLayout . SOUTH );border_panel .add(new JButton (" Center "), BorderLayout . CENTER );
JFrame window = new JFrame (" Hello world ");window . setLayout (new FlowLayout ());window .add( flow_panel );window .add( border_panel );
Pierre Talbot (IRCAM) IHM 17 / 33
![Page 31: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/31.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
JPanel
JPanel flow_panel = new JPanel (new FlowLayout ());flow_panel .add(new JButton (" Click me"));flow_panel .add(new JButton (" Click me too"));
JPanel border_panel = new JPanel (new BorderLayout ());border_panel .add(new JButton (" South "), BorderLayout . SOUTH );border_panel .add(new JButton (" Center "), BorderLayout . CENTER );
JFrame window = new JFrame (" Hello world ");window . setLayout (new FlowLayout ());window .add( flow_panel );window .add( border_panel );
Pierre Talbot (IRCAM) IHM 17 / 33
![Page 32: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/32.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
JPanel
JPanel flow_panel = new JPanel (new FlowLayout ());flow_panel .add(new JButton (" Click me"));flow_panel .add(new JButton (" Click me too"));
JPanel border_panel = new JPanel (new BorderLayout ());border_panel .add(new JButton (" South "), BorderLayout . SOUTH );border_panel .add(new JButton (" Center "), BorderLayout . CENTER );
JFrame window = new JFrame (" Hello world ");window . setLayout (new FlowLayout ());window .add( flow_panel );window .add( border_panel );
Pierre Talbot (IRCAM) IHM 17 / 33
![Page 33: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/33.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Organisation hiérarchique des éléments graphiques
I Les di�érents composants graphiques sont organisés dans unehiérarchie en arbre.
I Il existe des composants racines (root) ne possédant pas de parent,notamment JFrame et JDialog.
I On peut ajouter des JPanel dans des JPanel.
Pierre Talbot (IRCAM) IHM 18 / 33
![Page 34: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/34.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Quelques bonnes pratiques
I Généralement, on n’ajoute qu’un composant JPanel à la JFrame.I On travaille ensuite dessus en lui ajoutant d’autres composants
(JFrame, JLabel, ...).
I On fait ça car une JFrame représente une fenêtre, on pourrait utiliserle même JPanel dans une applet par exemple (JApplet).
I En plus on peut faire des dessins (géométriques) dans un JPanel
mais pas dans une JFrame.
validate()
La méthode JFrame.validate() doit être appelée si la fenêtre est visibleet que vous avez modifié les composants.
Pierre Talbot (IRCAM) IHM 19 / 33
![Page 35: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/35.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Quelques bonnes pratiques
I Généralement, on n’ajoute qu’un composant JPanel à la JFrame.I On travaille ensuite dessus en lui ajoutant d’autres composants
(JFrame, JLabel, ...).I On fait ça car une JFrame représente une fenêtre, on pourrait utiliser
le même JPanel dans une applet par exemple (JApplet).I En plus on peut faire des dessins (géométriques) dans un JPanel
mais pas dans une JFrame.
validate()
La méthode JFrame.validate() doit être appelée si la fenêtre est visibleet que vous avez modifié les composants.
Pierre Talbot (IRCAM) IHM 19 / 33
![Page 36: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/36.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Quelques bonnes pratiques
I Généralement, on n’ajoute qu’un composant JPanel à la JFrame.I On travaille ensuite dessus en lui ajoutant d’autres composants
(JFrame, JLabel, ...).I On fait ça car une JFrame représente une fenêtre, on pourrait utiliser
le même JPanel dans une applet par exemple (JApplet).I En plus on peut faire des dessins (géométriques) dans un JPanel
mais pas dans une JFrame.
validate()
La méthode JFrame.validate() doit être appelée si la fenêtre est visibleet que vous avez modifié les composants.
Pierre Talbot (IRCAM) IHM 19 / 33
![Page 37: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/37.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Autres composants graphiques
IJTextField : Champs de texte, pour saisir des informations del’utilisateur.
IJCheckBox : Cases à cocher.
IJRadioButton : Boutons radio.
IJList : Liste d’éléments à sélectionner.
IJScrollPane : Ajoute un “scroll” à un composant.
IJComboBox : Liste d’éléments, on peut en sélectionner un seul.
Note : Ils héritent tous de la classe JComponent sauf les composantsracines (JFrame, . . . ).Voir http://docs.oracle.com/javase/tutorial/uiswing/
components/jcomponent.html
Pierre Talbot (IRCAM) IHM 20 / 33
![Page 38: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/38.jpg)
Base de la programmation graphique avec Swing Organisation hiérarchique des composants
Autres composants graphiques
IJTextField : Champs de texte, pour saisir des informations del’utilisateur.
IJCheckBox : Cases à cocher.
IJRadioButton : Boutons radio.
IJList : Liste d’éléments à sélectionner.
IJScrollPane : Ajoute un “scroll” à un composant.
IJComboBox : Liste d’éléments, on peut en sélectionner un seul.
Note : Ils héritent tous de la classe JComponent sauf les composantsracines (JFrame, . . . ).Voir http://docs.oracle.com/javase/tutorial/uiswing/
components/jcomponent.html
Pierre Talbot (IRCAM) IHM 20 / 33
![Page 39: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/39.jpg)
Programmation événementielle
Le menu
I Introduction
I Base de la programmation graphique avec Swing
I Programmation événementielle
I Architecture d’un projet avec GUI
Pierre Talbot (IRCAM) IHM 21 / 33
![Page 40: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/40.jpg)
Programmation événementielle
De la console aux GUIs
I La console est linéaire, l’utilisateur ne peut faire que ce qui lui estdemandé.
I Exemple : "Veuillez entrer votre choix :".
I Une GUI a plusieurs boutons donc on ne sait pas à l’avance oùl’utilisateur va cliquer.
I On a besoin d’un nouveau paradigme de programmation : La
programmation événementielle.
Pierre Talbot (IRCAM) IHM 22 / 33
![Page 41: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/41.jpg)
Programmation événementielle
De la console aux GUIs
I La console est linéaire, l’utilisateur ne peut faire que ce qui lui estdemandé.
I Exemple : "Veuillez entrer votre choix :".I Une GUI a plusieurs boutons donc on ne sait pas à l’avance où
l’utilisateur va cliquer.I On a besoin d’un nouveau paradigme de programmation : La
programmation événementielle.
Pierre Talbot (IRCAM) IHM 22 / 33
![Page 42: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/42.jpg)
Programmation événementielle
Programmation événementielle
I L’idée est simple : on associe à l’avance des actions aux di�érentséléments graphiques.
I Lorsque l’utilisateur clique sur un bouton (événement), l’actionassociée est invoquée.
I Une action est implémentée sous forme de classes.
Programmation événementielleL’utilisateur dirige le flux d’exécution du programme, ce n’est pas leprogramme qui dirige l’utilisateur (comme en console).
Pierre Talbot (IRCAM) IHM 23 / 33
![Page 43: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/43.jpg)
Programmation événementielle
Programmation événementielle
I L’idée est simple : on associe à l’avance des actions aux di�érentséléments graphiques.
I Lorsque l’utilisateur clique sur un bouton (événement), l’actionassociée est invoquée.
I Une action est implémentée sous forme de classes.
Programmation événementielleL’utilisateur dirige le flux d’exécution du programme, ce n’est pas leprogramme qui dirige l’utilisateur (comme en console).
Pierre Talbot (IRCAM) IHM 23 / 33
![Page 44: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/44.jpg)
Programmation événementielle
Les écouteurs (Listener)
Listener
I C’est une classe qu’on associe à un composant graphique.I Ses méthodes seront appelées lorsqu’un événement aura lieu (cliquer
sur un bouton, compléter un champ texte, . . . ).
Plusieurs types de Listener
IActionListener, événements spécifiques à un composant.
IMouseListener, événements de la souris.
IKeyboardListener, événements du clavier.
I . . .
Pierre Talbot (IRCAM) IHM 24 / 33
![Page 45: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/45.jpg)
Programmation événementielle
Les écouteurs (Listener)
Listener
I C’est une classe qu’on associe à un composant graphique.I Ses méthodes seront appelées lorsqu’un événement aura lieu (cliquer
sur un bouton, compléter un champ texte, . . . ).
Plusieurs types de Listener
IActionListener, événements spécifiques à un composant.
IMouseListener, événements de la souris.
IKeyboardListener, événements du clavier.
I . . .
Pierre Talbot (IRCAM) IHM 24 / 33
![Page 46: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/46.jpg)
Programmation événementielle
ActionListener
// . . . in mainJButton b = new JButton (" click me");b. addActionListener (new ClickMe ());// . . .
class ClickMe implements ActionListener {public void actionPerformed ( ActionEvent e) {
System .out. println (" Hello ");}
}
I La méthode actionPerformed est appelée à chaque fois quel’utilisateur clique sur le bouton.
IActionEvent contient des données sur l’événement, à l’instar de :
1. getActionCommand() : Une chaîne de caractère décrivant l’action,pour un bouton ça sera son label.
2. getModifier() : Un entier indiquant si une (ou plusieurs) touche decontrôle (alt/ctrl/. . . ) était pressée quand l’événement à eu lieu.
3. . . .
Pierre Talbot (IRCAM) IHM 25 / 33
![Page 47: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/47.jpg)
Programmation événementielle
ActionListener
// . . . in mainJButton b = new JButton (" click me");b. addActionListener (new ClickMe ());// . . .
class ClickMe implements ActionListener {public void actionPerformed ( ActionEvent e) {
System .out. println (" Hello ");}
}
I La méthode actionPerformed est appelée à chaque fois quel’utilisateur clique sur le bouton.
IActionEvent contient des données sur l’événement, à l’instar de :
1. getActionCommand() : Une chaîne de caractère décrivant l’action,pour un bouton ça sera son label.
2. getModifier() : Un entier indiquant si une (ou plusieurs) touche decontrôle (alt/ctrl/. . . ) était pressée quand l’événement à eu lieu.
3. . . .
Pierre Talbot (IRCAM) IHM 25 / 33
![Page 48: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/48.jpg)
Programmation événementielle
ActionListener
// . . . in mainJButton b = new JButton (" click me");b. addActionListener (new ClickMe ());// . . .
class ClickMe implements ActionListener {public void actionPerformed ( ActionEvent e) {
System .out. println (" Hello ");}
}
I La méthode actionPerformed est appelée à chaque fois quel’utilisateur clique sur le bouton.
IActionEvent contient des données sur l’événement, à l’instar de :
1. getActionCommand() : Une chaîne de caractère décrivant l’action,pour un bouton ça sera son label.
2. getModifier() : Un entier indiquant si une (ou plusieurs) touche decontrôle (alt/ctrl/. . . ) était pressée quand l’événement à eu lieu.
3. . . .Pierre Talbot (IRCAM) IHM 25 / 33
![Page 49: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/49.jpg)
Programmation événementielle
MouseListener
// . . . in mainJPanel main = new JPanel (new FlowLayout ());main. addMouseListener (new PrintCoordinate ());// . . .
class PrintCoordinate implements MouseListener {public void mouseClicked ( MouseEvent e) {
System .out. println (e. getPoint ());}public void mousePressed ( MouseEvent e) {}public void mouseReleased ( MouseEvent e) {}public void mouseEntered ( MouseEvent e) {}public void mouseExited ( MouseEvent e) {}
}
I L’interface MouseListener propose 5 méthodes représentants lesdi�érentes actions d’une souris.
I L’objet passé en paramètre, MouseEvent, contient entre autres :1. getClickCount(), nombre de cliques pour cet événement.2. getPoint(), les coordonnées du clique.3. . . .
Pierre Talbot (IRCAM) IHM 26 / 33
![Page 50: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/50.jpg)
Programmation événementielle
MouseListener
// . . . in mainJPanel main = new JPanel (new FlowLayout ());main. addMouseListener (new PrintCoordinate ());// . . .
class PrintCoordinate implements MouseListener {public void mouseClicked ( MouseEvent e) {
System .out. println (e. getPoint ());}public void mousePressed ( MouseEvent e) {}public void mouseReleased ( MouseEvent e) {}public void mouseEntered ( MouseEvent e) {}public void mouseExited ( MouseEvent e) {}
}
I L’interface MouseListener propose 5 méthodes représentants lesdi�érentes actions d’une souris.
I L’objet passé en paramètre, MouseEvent, contient entre autres :1. getClickCount(), nombre de cliques pour cet événement.2. getPoint(), les coordonnées du clique.3. . . .
Pierre Talbot (IRCAM) IHM 26 / 33
![Page 51: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/51.jpg)
Programmation événementielle
D’autres Listenner
IKeyListener pour les touches du clavier.
IItemListener pour les listes d’éléments.
I . . .
Trouver un Listener
I Plein de Listener spécifiques aux composants graphiques.I Les composants possèdent des fonctions addXXXXListener pour les
listeners supportés.I En fonction du composant, on consulte un how-to
(docs.oracle.com/javase/tutorial/uiswing/components/
componentlist.html).
Pierre Talbot (IRCAM) IHM 27 / 33
![Page 52: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/52.jpg)
Programmation événementielle
D’autres Listenner
IKeyListener pour les touches du clavier.
IItemListener pour les listes d’éléments.
I . . .
Trouver un Listener
I Plein de Listener spécifiques aux composants graphiques.I Les composants possèdent des fonctions addXXXXListener pour les
listeners supportés.I En fonction du composant, on consulte un how-to
(docs.oracle.com/javase/tutorial/uiswing/components/
componentlist.html).
Pierre Talbot (IRCAM) IHM 27 / 33
![Page 53: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/53.jpg)
Architecture d’un projet avec GUI
Le menu
I Introduction
I Base de la programmation graphique avec Swing
I Programmation événementielle
I Architecture d’un projet avec GUI
Pierre Talbot (IRCAM) IHM 28 / 33
![Page 54: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/54.jpg)
Architecture d’un projet avec GUI
Séparer l’interface graphique et le code
I Pour coder proprement, on veut que la GUI et la logique du code soitbien séparé.
I Ça permet notamment de ne pas devoir tout ré-implémenter si onchange la partie UI.
I Di�érentes UI : Console, Swing, Android, Windows (Phone et OS),. . .
Pierre Talbot (IRCAM) IHM 29 / 33
![Page 55: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/55.jpg)
Architecture d’un projet avec GUI
Par où commencer ?
public class WarCardGame {public static void main( String [] args) {
GameGUI game_ui = new GameGUI ();game_ui . start ();
}}
Typiquement l’interface graphique (ici la classe GameGUI) est d’abordcréée et démarrée dans le main.
Pierre Talbot (IRCAM) IHM 30 / 33
![Page 56: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/56.jpg)
Architecture d’un projet avec GUI
Les classes métiers
I Les classes métiers représentent les données et ne contiennentgénéralement pas d’I/O.
I Par conséquent elles ne manipulent jamais directement d’objetsSwing.
public class GameGUI {private final Game game = new Game ();private final JButton next_card = new JButton ("next");// . . .
}
C’est la GUI qui instancie la classe métier, ici Game.
Pierre Talbot (IRCAM) IHM 31 / 33
![Page 57: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/57.jpg)
Architecture d’un projet avec GUI
Flux d’exécution du code
SituationL’utilisateur veut faire avancer le jeu d’une étape et clique sur next.
1. La méthode actionPerformed du listener écoutant le bouton next
est exécutée.2. L’appel est forward à la classe Game.3. Celle-ci calcule la prochaine étape et retourne le résultat de la
manche.4. L’interface graphique récupère le résultat et met à jour les éléments
correspondants.
Pierre Talbot (IRCAM) IHM 32 / 33
![Page 58: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/58.jpg)
Architecture d’un projet avec GUI
Flux d’exécution du code
SituationL’utilisateur veut faire avancer le jeu d’une étape et clique sur next.
1. La méthode actionPerformed du listener écoutant le bouton next
est exécutée.
2. L’appel est forward à la classe Game.3. Celle-ci calcule la prochaine étape et retourne le résultat de la
manche.4. L’interface graphique récupère le résultat et met à jour les éléments
correspondants.
Pierre Talbot (IRCAM) IHM 32 / 33
![Page 59: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/59.jpg)
Architecture d’un projet avec GUI
Flux d’exécution du code
SituationL’utilisateur veut faire avancer le jeu d’une étape et clique sur next.
1. La méthode actionPerformed du listener écoutant le bouton next
est exécutée.2. L’appel est forward à la classe Game.
3. Celle-ci calcule la prochaine étape et retourne le résultat de lamanche.
4. L’interface graphique récupère le résultat et met à jour les élémentscorrespondants.
Pierre Talbot (IRCAM) IHM 32 / 33
![Page 60: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/60.jpg)
Architecture d’un projet avec GUI
Flux d’exécution du code
SituationL’utilisateur veut faire avancer le jeu d’une étape et clique sur next.
1. La méthode actionPerformed du listener écoutant le bouton next
est exécutée.2. L’appel est forward à la classe Game.3. Celle-ci calcule la prochaine étape et retourne le résultat de la
manche.
4. L’interface graphique récupère le résultat et met à jour les élémentscorrespondants.
Pierre Talbot (IRCAM) IHM 32 / 33
![Page 61: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/61.jpg)
Architecture d’un projet avec GUI
Flux d’exécution du code
SituationL’utilisateur veut faire avancer le jeu d’une étape et clique sur next.
1. La méthode actionPerformed du listener écoutant le bouton next
est exécutée.2. L’appel est forward à la classe Game.3. Celle-ci calcule la prochaine étape et retourne le résultat de la
manche.4. L’interface graphique récupère le résultat et met à jour les éléments
correspondants.
Pierre Talbot (IRCAM) IHM 32 / 33
![Page 62: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/62.jpg)
Architecture d’un projet avec GUI
Architecture du projet
Séparer l’interface graphique des classes métiers :I
upmc.wcg.WarCardGame : contient le main.I
upmc.wcg.ui.* : contient toutes les classes de l’interface graphique.I
upmc.wcg.game.* : contient toutes les classes métiers faisant lescalculs sur les données du jeu.
AstuceI Il arrive qu’on se demande si une classe ou méthode doit être dans les
classes métiers ou de GUI.I Si elle peut être ré-utilisée avec une autre interface graphique, comme
la console, alors c’est une classe métier, sinon une classe d’UI.
Pierre Talbot (IRCAM) IHM 33 / 33
![Page 63: Cours 5 – Interface homme-interface · 2020. 12. 26. · Cours 5 – Interface homme-interface Programmation objets, web et mobiles en Java Licence 3 Professionnelle - Multimédia](https://reader036.vdocuments.net/reader036/viewer/2022071500/611edb418155026709151f4d/html5/thumbnails/63.jpg)
Architecture d’un projet avec GUI
Architecture du projet
Séparer l’interface graphique des classes métiers :I
upmc.wcg.WarCardGame : contient le main.I
upmc.wcg.ui.* : contient toutes les classes de l’interface graphique.I
upmc.wcg.game.* : contient toutes les classes métiers faisant lescalculs sur les données du jeu.
AstuceI Il arrive qu’on se demande si une classe ou méthode doit être dans les
classes métiers ou de GUI.I Si elle peut être ré-utilisée avec une autre interface graphique, comme
la console, alors c’est une classe métier, sinon une classe d’UI.
Pierre Talbot (IRCAM) IHM 33 / 33