14. Interfaces graphiques avec Swing

14. Interfaces graphiques avec Swing

Informatique 1

Rev 1.35Dr Pierre-André Mudry

pierre-andre.mudry@hevs.ch

Objectifs de la thématique

P.-A. Mudry GUI 3

Pouvoir réaliser une GUI

Composants graphiques et démarche Le modèle événementiel

Graphical User Interface (GUI)

P.-A. Mudry GUI 4

Conception d'interfaces, principes (2)

• Principes (suite) Aider l'utilisateur à résoudre les problèmes

• Pour les intéressé-e-s : voir réf. [R1] et https://userinyerface.com/

P.-A. Mudry GUI 5

LES COMPOSANTS

P.-A. Mudry AdvPrPa 6

Les composants

• GUI principalementcombinaison éléments graphiques

• Permettent interaction Saisie information Exécution action …

• En Java, ces éléments sont nommés "composants"

P.-A. Mudry GUI 7

Différentes APIS

• Fournies par le langage : AWT Swing (bâtie sur AWT) JavaFX

• Il en existe d'autres : SWT, utilisé notamment par Eclipse

Qt

P.-A. Mudry GUI 8

Hiérarchie de composants Swing

P.-A. Mudry GUI 9

Guide visuel des composants :http://web.mit.edu/6.005/www/sp14/psets/ps4/java-6-tutorial/components.html

Autres éléments

• Fenêtre, menus• Concepts non visibles Agencement composants les uns par rapport aux

autres Gestionnaire de "layout"

• Alignement• Dimensionnement

P.-A. Mudry GUI 10

Avec un titre…

• Utilisation de la classe JFrame

P.-A. Mudry GUI 11

public class SimpleTitleWindow{

public static void main(String args[]){JFrame f = new JFrame("The title");f.setSize(200, 400);f.setLocation(100, 100);f.setVisible(true);

}}

Meilleure implémentation

• On n’alourdit pas le main

• Bonne pratique :

P.-A. Mudry GUI 12

public class GUIStarting{

public static void main(String args[]){AppFrame f = new AppFrame();f.setVisible(true);

}}

class AppFrame extends JFrame {AppFrame(){

setTitle("A nice window");setSize(200, 400);setLocation(100, 100);

}}

Avoir une classe qui étend JFrame

Démarche de construction

1. Construire les éléments graphiques Fenêtre, composants Panels (servent à contenir d'autres composants)

2. Construire et associer les layout manager Un layout manager pour la fenêtre Un layout manager pour chaque panneau

3. Attacher les éléments graphiques Attacher les composants à une fenêtre ou panneau Attacher chaque panneau à la fenêtre ou panneau

P.-A. Mudry GUI 13

(tiré du cours C. Vanoirbeek, "Interface Utilisateur", S. 23, Version 2009)

ComponentDemo.java

Remarque sur l'exemple

• Pour mettre du contenu, il faut des JPanel

P.-A. Mudry GUI 15

Content pane

Menu bar

JFrame

AppFrame f = new AppFrame();f.getContentPane(); retourne un JPanel

LE MODÈLE ÉVÉNEMENTIEL

P.-A. Mudry AdvPrPa 16

Gestion des évènements

• Les actions utilisateur évènements Java

• Evènements ? Classe Java de base EventObject

P.-A. Mudry GUI 17

Classes d'évènements

• Différents objets émis en fonction de l'interaction

P.-A. Mudry GUI 18

Interaction de l'utilisateur Evènement émis par JavaPassage du focus FocusEvent

Clic sur un panel MouseEvent

Frappe d'une touche clavier KeyEvent

Iconification fenêtre WindowEvent

Clic sur un bouton ActionEvent

Déplacement d'un slider ChangeEvent

… …

Réaction à des évènements

Nouveau modèle exécution code !

P.-A. Mudry GUI 19

Composant (JButton…) Listener

Abonnement

Notification

Modèle :

Exemple simple

P.-A. Mudry GUI 20

Programmation événementielle

P.-A. Mudry GUI 21

Composant(JButton…) Listener

Abonnement

Notification

public class ClickListener implements ActionListener {public static final String msg = "Button clicked!";

private JLabel target ;

public ClickListener(JLabel t){target = t;

}

public void actionPerformed(ActionEvent e) {target.setText(msg);

}}

Listener est une interface

Partie composant

Voir code en annexe, EventDemo.javaP.-A. Mudry GUI 22

Composant(JButton…) Listener

Abonnement

Notification

JButton jb1 = new JButton("Click me");

// Register listenerjb1.addActionListener(new ClickListener(jl1));

Conclusion

• GUI : fait de vous des programmeur-se-s complet-ète-s

• Modèle objet (héritage, interfaces, …) présent partout dans les GUI

P.-A. Mudry GUI 23

Bibliographie

[1] Livre de référence Matthew Robinson and Pavel Vorobiev, Swing, 2003,

2nd edition.[2] The Swing Tutorial http://docs.oracle.com/javase/tutorial/uiswing/

[3] Visual index of Swing components https://web.mit.edu/6.005/www/sp14/psets/ps4/jav

a-6-tutorial/components.htmlP.-A. Mudry GUI 24