composants gestionnaires de placement mvccasiez/ihm/ctd/composants.pdf · les 4 prochaines...
TRANSCRIPT
![Page 1: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/1.jpg)
COMPOSANTSGESTIONNAIRES DE PLACEMENTMVCGéry Casiez http://www.lifl.fr/~casiezIHM Master 1 informatique - Université de Lille 1
1
![Page 2: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/2.jpg)
Les 4 prochaines séances
¨ Composants, gestionnaires de placement, MVC¨ Gestion des événements¨ Transfert de données : Drag and drop et
(couper,copier)-coller¨ Patron de conception Commande
Actions, raccourcis clavierAnnulation / restauration (Undo / Redo), patron de conception MementoCréation de nouveaux composants
2
![Page 3: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/3.jpg)
Composants de la plateforme Java3
![Page 4: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/4.jpg)
La librairie AWT
¨ La librairie AWT (Abstract Window Toolkit) a été introduite dès les premières versions de Java.
¨ Utilisation de ressources propres au système encapsulées dans des abstractions
¨ L’affichage des composants est géré par le système¤ => l’apparence des composants est différente selon les
plateformes¨ Fonctionnalités assez rudimentaires
4
![Page 5: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/5.jpg)
La librairie Swing
¨ Swing utilise des éléments d’AWT mais offre un grand nombre de nouveaux composants
¨ Les éléments graphiques ont la même apparence quelque soit le système d’exploitation
¨ Utilisation du Look-and-feel pour configurer la représentation visuelle
¨ Les noms des classes de la librairie Swing commencent par la lettre J
5
![Page 6: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/6.jpg)
Widgets / Composants
¨ Le widget est un objet graphique interactif¨ On parle de composant avec Swing
6
![Page 7: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/7.jpg)
Composants
javax.swing
javax.swing
java.awt
java.awt
7
![Page 8: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/8.jpg)
Composants
¨ Par héritage, les composants Swing sont également des composants AWT
¨ Les composant Swing se distinguent des composants AWT par la lettre J: JButton (Swing), Button (AWT)
8
![Page 9: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/9.jpg)
Architecture de la librairie Swing9
![Page 10: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/10.jpg)
Propriétés des composants
¨ Chaque composant Swing peut être personnalisé en apparence et en comportement en spécifiant des valeurs de propriétés¤ Utilisation des accesseurs de la classe du composant
¨ Toutes les propriétés héritées des super classes sont naturellement également disponibles pour le composant¤ Les propriétés de JComponent, Container et Component
sont héritées par presque tous les composants Swing
10
![Page 11: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/11.jpg)
Propriétés des composants
¨ Propriétés communes¤ Activation / désactivation d’un composant (méthode
setEnable de JComponent)¤ Un composant peut être visible ou non (méthode
setVisible de Jcomponent)¤ Taille
n Dimension getSize() / Dimension getPreferredSize()n void setSize(Dimension rv) / void setPreferredSize(Dimension
prefferedSize) – défini dans Component¤ Curseur: setCursor(un_curseur)
11
![Page 12: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/12.jpg)
Propriétés des composants
¨ Propriétés communes¤ Tooltips, bulles d’aide: méthode setToolTipText définie
dans la classe JComponent¤ Couleurs: setBackground, setForeground¤ Bordures: setBorder
12
![Page 13: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/13.jpg)
Évolution des widgets
¨ Widgets de base du macintosh (1984)¤ Bouton (button)¤ Potentiomètre (slider)¤ Case à cocher (check box)¤ Bouton radio (radio button)¤ Champ texte (text field)¤ Boites de dialogue pour les fichiers (file open/save dialog)
¨ Ajouts ultérieurs: menus hiérarchiques, listes, combo box, tabs
13
![Page 14: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/14.jpg)
Tâches élémentaires d’interaction
¨ Quelques exemples¤ Saisie¤ Sélection¤ Déclenchement¤ Défilement¤ Spécification d’arguments et de propriétés¤ …
14
![Page 15: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/15.jpg)
Saisie
¨ Saisie de texte¤ Boite de saisie et clavier
¨ Saisie de quantités¤ Ex: potentiomètre
¨ Saisie de positions¤ Pointage
¨ Saisie de tracés
15
![Page 16: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/16.jpg)
Sélection
¨ Choix d’un ou plusieurs éléments dans un ensemble¤ Cardinal fixe ou variable¤ Cardinal petit ou grand
¨ Exemples¤ Cardinal fixe: menu, boutons radio, cases à cocher¤ Cardinal variable: pointage, liste, saisie de nom ou combinaison de ces
deux dernières techniques¨ Sélection multiple: groupe ou intervalle, ajout et retrait
16
![Page 17: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/17.jpg)
Sélection
¨ Menus¤ Déroulants¤ Pop-up¤ Palettes
¨ Organisation du menu¤ Hiérarchique¤ Circulaire
17
![Page 18: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/18.jpg)
Sélection
¨ Le range slider¤ Permet une sélection d’une plage de valeurs
¨ L’alpha slider¤ Permet de sélectionner rapidement un élément dans une
longue liste¤ Exemple: de 13 à 24 secondes pour trouver un film dans
une liste de 10 000
18
![Page 19: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/19.jpg)
Déclenchement
¨ Boutons et menus¨ Cliquer-tirer (drag-and-drop)
¤ L’action dépend de la source et de la destination¨ Entrée gestuelle
¤ Spécification simultanée de la commande et de l’objet
19
![Page 20: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/20.jpg)
Fenêtre modale
¨ Une fenêtre B est modale par rapport à une fenêtre A si l’affichage de B empêche l’accès – et non la vue – à la fenêtre A.
¨ Le constructeur de JDialog permet de préciser si une fenêtre est modale
20
![Page 21: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/21.jpg)
Spécification d’arguments et de propriétés
¨ Boites de dialogue¤ Découplage temporel et spatial entre la
spécification de la commande, de ses paramètres et son exécution
¤ Boites modales ou non modales¤ Parties optionnelles, boites à onglet
¨ Boites de propriétés¤ Effet immédiat des modifications sur les
objets de la sélection
21
![Page 22: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/22.jpg)
Composants et conteneurs
¨ Les composants doivent être placés dans des conteneurs
¨ Les conteneurs servent à créer une hiérarchie de composants
¨ Nœuds = conteneurs, feuilles = composants
22
![Page 23: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/23.jpg)
Conteneurs (Container)23
![Page 24: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/24.jpg)
Container
¨ Container est un composant particulier dont le rôle est de contenir d’autres composants (il hérite de Component)
¨ Contient le nombre et la liste des composants¨ Méthode add pour ajouter un composant¨ Parmi l’ensemble des composants que contient un
Container peut se trouver une instance de Container¨ On crée ainsi une hiérarchie de composants (cela
correspond au patron de conception composite qui permet de traiter tous les composants de la même façon)
24
![Page 25: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/25.jpg)
Le patron de conception composite25
![Page 26: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/26.jpg)
Le patron de conception composite26
![Page 27: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/27.jpg)
Hiérarchie de composants
¨ Conteneurs de haut niveau: JWindow, JFrame, JDialog et JApplet.
¨ Chaque application utilise au moins un conteneur de haut-niveau
27
![Page 28: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/28.jpg)
Hiérarchie de composants
¨ Les conteneurs de haut niveau¨ Utilisation de la méthode getContentPane accéder
au container
28
![Page 29: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/29.jpg)
Conteneurs de niveaux intermédiaires
¨ JPanel¨ JScrollPane¨ JSplitPane¨ JTabbedPane
29
![Page 30: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/30.jpg)
Exemple de hiérarchie de composants30
![Page 31: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/31.jpg)
Gestion du placement des composants
¨ Comment positionner les composants les uns par rapport aux autres?
¨ Comment un container agence-t-il visuellement les composants qu’il contient?
¨ Que se passe-t-il quand on agrandit la fenêtre? Les composants doivent-ils s’agrandir? Ajoute-t-on de l’espace? Où?
¨ Utilisation d’un gestionnaire de placement (layout)¤ Chaque layout définit une stratégie de positionnement
31
![Page 32: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/32.jpg)
Gestionnaires de placement
¨ Les différentes stratégies de positionnement doivent prendre en compte la position et la taille des composants qui lui sont confiés
¨ Chaque composant a deux tailles:¤ La taille effective (size)¤ La taille idéale (preferredSize)
¨ Un layout va essayer de rendre la taille réelle la plus proche possible de la taille préférée compte tenu des contraintes dues à sa stratégie et dues à la taille réelle du conteneur
32
![Page 33: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/33.jpg)
Gestionnaires de placement
¨ Utilisation de la méthode setLayout (définie dans la classe Container) pour définir la stratégie de placement d’un Container
¨ fenetre.getContentPane().setLayout(new FlowLayout(FlowLayout.CENTER));
33
![Page 34: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/34.jpg)
BorderLayout
¨ Layout par défaut des conteneurs de haut-niveau¨ Le composant au centre essaie d’occuper le
maximum d’espace disponible
34
![Page 35: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/35.jpg)
FlowLayout
¨ Conteneur par défaut des JPanel¨ Place les éléments graphiques les uns à côté des
autres
35
![Page 36: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/36.jpg)
GridLayout
¨ L’espace du container est découpé en une grille¨ Les composants sont égaux en taille
36
![Page 37: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/37.jpg)
BoxLayout
¨ Alignement des composants suivant une seule ligne ou colonne
¨ Possibilité d’aligner les composants¨ Possibilité d’ajouter des Filler
37
![Page 38: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/38.jpg)
GridbagLayout
¨ Utilisation d’une grille¨ Un composant peut occuper plusieurs cellules¨ Toutes les lignes ne sont pas forcément de même
hauteur (idem colonnes)
38
![Page 39: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/39.jpg)
CardLayout
¨ Affichage de composants différents à des moments différents
39
![Page 40: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/40.jpg)
GroupLayout
¨ Utilisé par les générateurs d’interfaces¨ Spécification des contraintes horizontales et
verticales séparément
40
![Page 41: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/41.jpg)
SpringLayout
¨ Utilisé par les générateurs d’interfaces¨ Déconseillé de l’utiliser manuellement¨ Définition de contraintes suivant les bords des
composants
41
![Page 42: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/42.jpg)
Positionnement absolu
¨ Définition de la taille et de la position de chaque composant
¨ L’origine est le coin supérieur gauche du conteneur
x
y
42
![Page 43: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/43.jpg)
Créer son propre Layout
¨ Création d’une classe qui implémente l’interface LayoutManager
¨ Le conteneur s’adresse à son LayoutManager à des moments clés pour positionner ses composants
¨ Méthodes à implémenter:¤ Dimension preferredLayoutSize(Container)¤ Dimension minimumLayoutSize(Container)¤ void layoutContainer(Container)
n Positionne et dimensionne chacun des composants du layout suivant la stratégie choisie (setSize, setLocation, setBounds)
43
![Page 44: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/44.jpg)
Créer son propre Layout
¨ La méthode void layoutContainer(Container)¤ 1) récupérer la liste des composants du container:
Component[] composants = parent.getComponents();¤ 2) pour chaque composant, définir sa taille (setSize), et
sa position (setLocation) ou utiliser setBounds pour définir la position et la taille
¤ 3) Ne pas tenir compte des composants invisibles
44
![Page 45: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/45.jpg)
Exercice45
![Page 46: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/46.jpg)
Générateurs d’interfaces
¨ But: aider la mise en œuvre d’interfaces¨ De nombreux noms
¤ User Interface Management Systems (UIMS)¤ User interface builder¤ User interface development environment
¨ Principe¤ Placer les widgets, modifier leurs attributs (couleur, etc …)¤ Les connecter à l’application¤ Tester leur comportement
46
![Page 47: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/47.jpg)
Générateurs d’interfaces
¨ Ex: Visual * (Windows), interface builder (Mac), glade (multi-plateformes), NetBeans
47
![Page 48: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/48.jpg)
Générateurs d’interfaces
¨ Inconvénients: What You See Is All You Get¤ Solutions partielles¤ Le code reste à écrire¤ Difficile de modifier le code généré
48
![Page 49: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/49.jpg)
Pourquoi utiliser une boite à outils?
¨ Pour optimiser les paramètres suivants:¤ Temps de construction¤ Efficacité¤ Robustesse¤ Confort d’utilisation
49
![Page 50: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/50.jpg)
MVC50
¨ Trois composantes:¤ Modèle : données de l’application¤ Vue : présentation, interface utilisateur¤ Contrôleur : traitements, logique de contrôle, gestion des
événements, synchronisation
![Page 51: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/51.jpg)
MVC51
¨ Le modèle¤ Représente le comportement de l’application
n Contient les données manipulées par l’applicationn Assure la gestion de ces données et leur intégritén Mise à jour des données (insertion, suppression, modification)n Méthodes pour accéder à ces données
¤ Possibilité d’avoir plusieurs vues partielles des données
![Page 52: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/52.jpg)
MVC52
¨ La vue¤ Correspond à l’interface avec laquelle l’utilisateur
interagit¤ Présentation des résultats renvoyés par le modèle¤ Réception des actions de l’utilisateur (clics souris..) et
envoi de ces informations au contrôleur¤ La vue n’effectue aucun traitement, se contente
d’afficher les traitements effectués par le modèle
![Page 53: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/53.jpg)
MVC53
¨ Le contrôleur¤ Gestion des événements de synchronisation pour mettre
à jour le modèle¤ Reçoit tous les événements de l’utilisateur et enclenche
les actions à effectuer¤ Si changement des données, le contrôleur demande la
modification des données au modèle¤ Le contrôleur n’effectue aucun traitement, ne modifie
aucune donnée¤ Peut notifier la vue qu’il y a eu une erreur
![Page 54: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/54.jpg)
Mise en œuvre de MVC54
¨ Modèle asymétrique¤ Une paire Contrôleur/Vue est associée à un seul modèle¤ Un modèle peut se voir associé plusieurs paires Contrôleur/
vue¨ Listes des dépendants et notification
¤ Les paires Contrôleur/Vue d’un modèle sont enregistrées dans une liste de « dépendants »
¤ Lorsque l’état du modèle est modifié, tous les dépendants sont notifiés
![Page 55: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/55.jpg)
Implémentation de MVC dans Smalltalk-8055
¨ 3 classes abstraites définissent les comportements génériques des composants MVC
¨ Class Model¤ Mécanismes permettant la gestion des dépendants¤ Mécanismes de diffusion des notifications
¨ Class View¤ Affiche une représentation du modèle¤ Transmet les interactions utilisateur au contrôleur
¨ Class Controller¤ Permet le contrôle et la manipulation d’un modèle et d’une vue
![Page 56: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/56.jpg)
MVC : exemple d’interaction56
¨ 1. L’utilisateur clique sur un bouton de l’interface¨ 2. Le contrôleur est notifié de l’action de l’utilisateur et
vérifie la cohérence de cette action¨ 3. Si l’action est cohérente, le contrôleur notifie le modèle
de l’action de l’utilisateur (éventuellement modification de l’état du modèle)
¨ 4. Le modèle notifie les vues qu’un changement d’état a eu lieu
¨ 5. Les vues utilisent le modèle pour générer l’interface appropriée
¨ 6. Attente des événements suivants
![Page 57: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/57.jpg)
Conclusion sur le MVC57
¨ Avantages:¤ Vues multiples synchronisées¤ Vues et contrôleurs modulaires¤ Développement de composants réutilisables
¨ Inconvénients¤ Complexité de communication entre les composants
(principalement entre C et V)
![Page 58: COMPOSANTS GESTIONNAIRES DE PLACEMENT MVCcasiez/IHM/CTD/Composants.pdf · Les 4 prochaines séances! Composants, gestionnaires de placement, MVC! Gestion des événements! Transfert](https://reader031.vdocuments.mx/reader031/viewer/2022031104/5ba30d6f09d3f26f6e8d13af/html5/thumbnails/58.jpg)
MVC58
¨ Adopté par de nombreuses boites à outils (Java AWT, Swing, Microsoft MFC, .NET, QT, GTK…)