conception dihm en java do it with swing [email protected] contrat creative commons paternité-pas...
TRANSCRIPT
![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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/1.jpg)
Conception d’IHM en Java
Do it with Swing
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/6.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/7.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/8.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/9.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/10.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/16.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/17.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/20.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/21.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/22.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/23.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/24.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/25.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/26.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/27.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/28.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/29.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062621/551d9d7f497959293b8b754f/html5/thumbnails/30.jpg)
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.