30
Conception d’IHM en Java Do it with Swing [email protected] contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License

Conception dIHM en Java Do it with Swing [email protected] contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

Embed Size (px)

Citation preview

Page 1: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

Conception d’IHM en Java

Do it with Swing

[email protected]

contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License

Page 2: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

2

GUI Toolkits / Boîtes à Outils : Swing

Java

Graphics(2D)

Swing

OpenGL

Système d'Exploitation

Machine Virtuelle

WindowManager

Page 3: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

3

Construire une application (en Swing)

1 fenêtre1 arbre d'affichage1 gestionnaire d'espacedes widgetsdes gestionnaires d'évènements

Page 4: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4

1 – Une fenêtre

Structurer l’espace d’affichagePartager la ressource écranDépendante du Gestionnaire de fenêtresFenêtre = zone autonome

pour l’affichage pour les entrées

Page 5: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

5

1 – Une fenêtre

Accès partagé à l'écranSubdivision de l'écran en fenêtresChaque fenêtre est positionné (x, y, z) et

dimensionnée (largeur x hauteur)

Page 6: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

6

2 – Un arbre d'affichage

Afficher = appeler une succession de fonctions graphiques

Représentation sous forme d'un arbre d'affichage

Page 7: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

7

2 – Arbre Swing

JFrame

JTree JPanel

JPanel JToolbar

JButton

JButton

JRadioButton

JRadioButton

Page 8: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

2 – Arbre Swing

JFrame

JToolBar JPanel

JTextAreaJButton JButton

JList

JButton

Page 9: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

2 – Arbre Swing

JFrame

JMenuBar

JMenu File JMenu View JMenu Help

JMenuItem Open

JMenuItem Save

JMenuItem Save as…

JMenuItem Undo

JMenuItem

JMenuItem About…

JMenuItem Quit

JMenuItem Paste

JMenuItem Copy

Page 10: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

10

2 – Un arbre d'affichage

Les langages à objets permettent de représenter ces nœuds comme des objets ayant une interface

Tous les nœuds héritent d'une classe de base (JComponent dans Swing)

Chaque composant particulier spécifie une interface particulière adaptée à sa sémantique

Page 11: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

11

2 – Un arbre d'affichage

Basé sur des containersgénériquegère collection de composantsdesign Pattern composite

Page 12: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

12

2bis – Layout Manager

Liés aux containers

Page 13: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

13

2bis – Calcul du placement

Le placement est calculé dans les conteneurs

Soit les composants sont placés explicitement (x, y, largeur, hauteur)

Soit ils sont gérés par un « LayoutManager » qui calcul ces paramètres dynamiquement besoins du composant (taille min, max,

normale) + positionnement relatif

Page 14: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

14

2bis – Mise en place d ’un gestionnaire de placementLes conteneurs définissent la méthode

setLayout(layoutManager) pour changer le gestionnaire par défaut

Le gestionnaire par défaut change d ’une classe de conteneur à une autre

La méthode pack() déclenche le calcul du placement

La méthode invalidate() rend le placement courant invalide

Page 15: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

15

2bis – Les gestionnaires de placement... FlowLayout

Place les composants de gauche à droite

CardLayout Superpose les

composants

GridLayout Découpe en une grille

régulière sur laquelle les composants sont placés

GridBagLayout Découpe en une grille

et place les composants sur une ou plusieurs cases

Page 16: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

16

2bis – ...ou Layout Manager

BorderLayout Découpe en 5 régions:

south, north, east, west, center

Aucun : .setBounds(x,y,h,l);

Page 17: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

17

3 – les widgets

Page 18: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

3 – Les composants graphiques interactifs = widgetsLe nœud est capable de s'afficher et de

gérer les événement On lui ajoute une interface de

communication suivant sa sémantique bouton, label, menu, ligne de texte, etc.

On appelle ce nœud communicant un composant ou widget ou gadget ou objet de contrôle.

Page 19: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

19

3 – JMenu

Une instance de JMenuBar par JframesetJMenuBar(JMenuBar mb);

Plusieurs Jmenu par JMenuBaradd(JMenu jm);

Plusieurs JMenuItem/JCheckboxMenu par Jmenu

add(JMenuItem mi);

addSeparator();

Structurez !!!

Page 20: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

20

3 – JPanel

JPanel conteneur

JScrollPane un seul composant ! barres de défilement

JScrollPane sp = new JScrollPane();

sp.add(monJLabel);

sp.setViewportView (monJLabel); composants implémentant Scrollable

class MonLabel extends Jlabel implements Scrollable

Panel

ScrollPane

Page 21: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

21

3 – Les composants de SWING

Dialog Frame Split paneTabbed Pane

Tool bar

Internal frameLayered pane

Page 22: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

22

3 – Composants de Swing

File chooser Color chooser

Table Text Tree

List

Slider

Progress bar

Tool tip

Page 23: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – un gestionnaire d'évènements

Les dispositifs d'entrée génèrent des événements (petit bloc mémoire contenant un type, un temps, une fenêtre cible et des détails suivant le type)

Swing achemine l'événement vers un nœud cible

Le nœud gère l'événement, ce qui peut modifier l'état de l'arbre d'affichage

On passe à l'événement suivant

Page 24: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Acheminement des événements

Positionnel (souris) on regarde quel est le nœud de l'arbre le plus

près de la position On l'envoie au plus prés, qui renvoie a son père

s'il ne veut pas le gérerNon positionnel (clavier)

si un nœud à le "focus", on lui envoie traduction d'une touche en caractère(s) ou action

sinon, on cherche une cible gestion des raccourcis clavier

Page 25: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Arbre Swing

JFrame

JToolBar JPanel

JTextAreaJButton JButton

JList

JButton

X

Y

Event |time | (X,Y)

Page 26: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Les événements

Package java.awt.event.*Héritent de la classe java.awt.AWTEvent

identificateur (numéro unique) consumed (a-t-il été utilisé?) source (qui l'a émis)

Envoyés dans une file unique Toolkit.getSystemEventQueue()

Lus par un thread spécique

Page 27: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Types d’événements

Interaction utilisateur Evénements émis

Clic sur un JPanel MouseEvent

Frappe d’une touche sur un JPanel KeyEvent

Iconification d’un fenetre WindowEvent

Clic sur un bouton ActionEvent

Ajout d’une lettre dans un JTextField DocumentEvent

Sélection d’un item dans une JList ListSelectionEvent

Page 28: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Association de gestionnaires d ’actions Pour chaque famille

d ’événements, une interface « listener » est définie MouseListener,

MouseMoveListener, KeyListener, etc.

Chaque classe composant définit « add<nom>Listener(<nom>Listener )

Frame

Button ActionListener

actionPerformed(ActionEvent e)

addActionListener(ActionListener)

Page 29: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Les listeners

Chaque composant peut renvoyer certains événements à l'application si elle le demande

Le renvoi se fait par un ListeneractionListener, AdjustmentListener,

FocusListener, InputMethodListener, ItemListener, KeyListener, MouseListener, MouseMotionListener, TextListener, WindowListener

Page 30: Conception dIHM en Java Do it with Swing Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales

4 – Sur tous les composants Swing

component listener Listens for changes in the component's size, position, or visibility.

focus listener Listens for whether the component gained or lost the ability to receive

keyboard input. key listener

Listens for key presses; key events are fired only by the component that has the current keyboard focus.

mouse listener Listens for mouse clicks and mouse movement into or out of the

component's drawing area. mouse-motion listener

Listens for changes in the cursor's position over the component. mouse-wheel listener (introduced in 1.4)

Listens for mouse wheel movement over the component.