Conception d’IHM en Java

Présentation au sujet: "Conception d’IHM en Java"— Transcription de la présentation:

1 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

2 GUI Toolkits / Boîtes à Outils : Swing
Window Manager Graphics(2D) OpenGL Java Machine Virtuelle Système d'Exploitation

3 Construire une application (en Swing)
1 fenêtre 1 arbre d'affichage 1 gestionnaire d'espace des widgets des gestionnaires d'évènements

4 1 – Une fenêtre Structurer l’espace d’affichage
Partager la ressource écran Dépendante du Gestionnaire de fenêtres Fenêtre = zone autonome pour l’affichage pour les entrées systeme de fenetrage -> structure l'espace d'affichage -> plusieurs applications en meme temps (multi plexage de l'ecran) Fenêtre = zone autonome vis à vis de l’affichage des entrées vue d'une application, une fenetre est comme un écran fenetre rectangulaire ne general, visible de l'utilisateur manipulable pas l'utilisateur = role du window manager NE pas confondre : - systeme de fenetrage : couche logicielle qui s'interpose entre les applications et le systeme graphique, et qui fournit notamment la notion de fenetre aux applications - gestionnaire de fenetre : module logiciel qui fournit une interface de manipulation des fenetres à l'utilisateur Il est : - integre au systeme de fenetrage (win) - appli séparée (X) - a la charge de chaque application (Mac Toolbox) Communication entre appli et systeme a fenetre : - envoyer des requetes graphiques : creer, detruire, déplacer, changer de taille (base commune) afficher des objets graphiques dans la fenetre (boutons, etc) - récupérer des évènements entrées de l'utilisateur evt liés au systeme de fenetrage : fenetre déplacée, etc (note : le gestionnaire de fenetre peut representer une fenetre sous différente forme, c'est independant du systeme de fenetrage)

5 1 – Une fenêtre Accès partagé à l'écran
Subdivision de l'écran en fenêtres Chaque fenêtre est positionné (x, y, z) et dimensionnée (largeur x hauteur)

6 2 – Un arbre d'affichage Afficher = appeler une succession de fonctions graphiques Représentation sous forme d'un arbre d'affichage

7 2 – Arbre Swing JFrame JTree JPanel JToolbar JButton JRadioButton

8 2 – Arbre Swing JFrame JToolBar JPanel JTextArea JButton JList

9 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

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

11 2 – Un arbre d'affichage Basé sur des containers générique
gère collection de composants design Pattern composite

12 2bis – Layout Manager Liés aux containers

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

14 2bis – Mise en place d ’un gestionnaire de placement
Les 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

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

16 2bis – ...ou Layout Manager BorderLayout Aucun : .setBounds(x,y,h,l);
Découpe en 5 régions: south, north, east, west, center Aucun : .setBounds(x,y,h,l);

17 3 – les widgets

18 3 – Les composants graphiques interactifs = widgets
Le 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.

19 3 – JMenu Une instance de JMenuBar par Jframe
setJMenuBar(JMenuBar mb); Plusieurs Jmenu par JMenuBar add(JMenu jm); Plusieurs JMenuItem/JCheckboxMenu par Jmenu add(JMenuItem mi); addSeparator(); Structurez !!!

20 3 – JPanel JPanel JScrollPane conteneur 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

21 3 – Les composants de SWING
Dialog Frame Tabbed Pane Split pane Layered pane Internal frame Tool bar

22 3 – Composants de Swing List File chooser Tool tip Color chooser
Progress bar Slider Table Text Tree

23 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

24 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érer Non 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

25 4 – Arbre Swing Y X Event |time | (X,Y) JFrame JToolBar JPanel
JTextArea JButton JList Event |time | (X,Y)

26 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

27 4 – Types d’événements

28 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 ActionListener Button addActionListener( ActionListener) actionPerformed( ActionEvent e)

29 4 – Les listeners Chaque composant peut renvoyer certains événements à l'application si elle le demande Le renvoi se fait par un Listener actionListener, AdjustmentListener, FocusListener, InputMethodListener, ItemListener, KeyListener, MouseListener, MouseMotionListener, TextListener, WindowListener

30 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.