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
Concepts Généraux contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique 2.0 France License

2 GUI Toolkits / Boîtes à Outils
Les boîtes à outils 2D sont maintenant très stéréotypées 3 composants 1 - Système de fenêtrage 2 - API graphique 3 - Gestion de l'arbre d'affichage et d'interaction Organisation sous forme d'objets

3 1 - Systèmes de fenêtrage
Structurer l’espace d’affichage Partager la ressource écran Gestionnaire de fenêtres interface utilisateur système de fenêtrage 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)

4 1 - Système de fenêtrage 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) Modèle graphique d'affichage Modèle d'événements Communication entre les applications Gestion de ressources spécifiques

5 1 - Modèles de fenêtrage Sans superposition Avec superposition
Hiérarchique sans superspoition : le plus simple avec : 2D 1/2 (<> feuilles sur le bureau) chaque fenetre a un rang zone de clip = union des zones visibles (rectangles) de la fenetre hiérarchiques : deux niveaux avant : ecran + fenetre si hierarchique, chaque fenetre peut contenir d'autres fenetres. coherance : il faut qu'une fenetre fille ne soit visible que sur l'espace de sa fenetre mere. racine de l'arbre = ecran lui meme. X utilise intensivement l'imbrication de fenetres.

6 1 - Systèmes de fenêtrage
X-windows et ses window managers Motif/Motif CDE/Motif OLWM/Openwin AfterStep Fvwm Enlightenment GNOME (Sawfish), KDE (Kwm), Qt Explorer de Windows (MFC) Finder de MacOS (QuartzExtreme) window manager  desktop environments  working environments

7 2 - Les API graphiques Dans une fenêtre, une application dessine en utilisant des fonctions qui prennent des paramètres 2 catégories en 2D orientée pixel orientée "dimension réelle", ou "indépendante de la résolution" Richesse variable suivant les plate formes

8 3 - La gestion de l'arbre d'affichage
Afficher = appeler une succession de fonctions graphiques Représentation sous forme d'un arbre d'affichage On affiche récursivement, en profondeur d'abord, tous les nœuds de l'arbre On modifie l'arbre pour changer l'affichage puis on réaffiche

9 JFrame JTree JPanel JToolbar JButton JRadioButton

10 2 – Arbre Swing JFrame JToolBar JPanel JTextArea JButton JList

11 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

12 3 - La gestion de l'arbre d'affichage Organisation sous forme d'objets
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

13 Boîtes à Outils utilisent 1+2+3
X11/Motif X11/GTK Tcl/Tk MFC Swt Swing etc.

14 Principales différences
Il existe un grand nombre de boîtes à outils graphiques interactives (Graphical User Interfaces ou GUI) Langage / portabilité / performances / mécanismes de communications / extensibilité / rapidité de développement / robustesse Pas de "meilleur" mais des spécialisations

15 Les boîtes à outils graphiques interactives de Java
Java propose deux boîtes à outils graphiques : AWT (Abstract Window Toolkit), simple, petite et limitée SWING, cohérente, grosse et extensible. Les deux peuvent s'utiliser dans les applets SWING facilite la transition à partir d'AWT.

16 Java et les interfaces graphiques interactives
Langage conçu d'emblée avec une interface graphique interactive Ajout de mécanismes spécifiques pour les interfaces inner classes 2 interfaces et 2 modèles graphiques en standard Beaucoup d'exemples, de documentations et d'expérience.

17 Conception d’IHM en Java
AWT

18 Java AWT Interface indépendante de la plate-forme
API simple (simpliste) Composants peu nombreux Apparence pauvre Relativement rapide Similaire sur toutes les plate-formes

19 Organisation d ’AWT Packages java.awt et java.applet
Classes de composants (dérivées de Component) Composants conteneurs Composants « feuille » Classes de gestionnaire d’événements Myriade de classes utilitaires Image, Color, Cursor, Dimension, Font, etc.

20 Conception d’IHM en Java
SWING

21 Java SWING SWING implémente tous les composants en Java
SWING offre plusieurs mécanismes originaux, pratiques et puissants SWING peut se programmer à plusieurs niveaux SWING est très gros et a des performances variables.

22 Programmation avec Java SWING
Généralités sur Java SWING SWING et AWT Concepts de SWING Une application Java SWING pas à pas TPs Les composants standards de SWING Créer ses propres composants

23 Concepts de SWING Basé sur des containers générique
gère collection de composants design Pattern composite

24 Programmation SWING Package javax.swing
Relativement proche de AWT pour faciliter la migration, ajout « J » avant le nom des classes:

25 Construction d ’une application
Construire un arbre d ’objets dérivés de « JComponent » Attacher des gestionnaires d ’événements Ce sont les gestionnaires d ’événements qui feront les actions et modifieront les composants

26 Exemple import java.awt.*; import javax.swing.*; class hwSwing {
public static void main(String args[]) { JFrame f = new JFrame("Mini"); f..setPreferredSize(new Dimension(400,400)); f.pack(); f.setVisible(true); }

27 Autre approche import java.awt.*; import javax.swing.*;
public class Test { public static void main(String args[]) { Simple f = new Simple(); f.pack(); f.setVisible(true); } public class Simple extends JFrame { JLabel texte = new JLabel("Hello World"); public Simple() { getContentPane().add(texte); }

28 explications Création de l ’arbre de composants :
JFrame + JLabel ou JButton Déclaration des actions Calcul du placement des composants: pack Affichage

29 Arbre Swing JFrame JTree JPanel JToolbar JButton JRadioButton

30 Mon premier Composant JFrame JDialog Jwindow fenêtre principale
fenêtre de dialogue (modale) Jwindow show() hide() ou dispose() toFront() ou toBack() setTitle(“titre !”) setSize(int, int) et setResizable(false)

31 Les autres composants

32 JLabel Javax.swing.Jlabel descriptif : texte statique + image
exemple : devant un champ de saisie JLabel jl = new Jlavel(“Label 1”); ou jl.setText(“Label 1”); // -> .getText() jl.setIcon(new ImageIcon(“java.gif”)); jl.setVerticalTextPosition(SwingConstants.BOTTOM) jl.setHorizontalTextPosition(SwingConstants.CENTER);

33 JTextField Javax.swing.JTextField saisie de texte (non typé)
JTextField jt = new JTextField(“Thomas”); String nom = new String(“Thomas”); jt.setText(nom); jt.setColumns(nom.length()); jt.copy(); jt.cut(); jt.paste();

34 JButton Bouton simple à états
JButton jb= new JButton(“OK”,new ImageIcon(“boc.gif)); jb.setRolloverIcon(new ImageIcon(“cob.gif”)); jb.setPressedIcon(new ImageIcon(“ocb.gif”)); jb.setDisabledIcon(new ImageIcon(“obc.gif”)); jb.setMnemonic(‘o’); // ALT + o jb.setBorderPainted(false); jb.setFocusPainted(false); jb.doClick();

35 JmachinButton JToggleButton JCheckBox JRadioButton
deux états (setIcon et setSelectedIcon) JCheckBox cases à cocher JRadioButton dans un groupe de boutons “radio” penser à regarder Abstract Button

36 Exemple de Radio ButtonGroup grp = new ButtonGroup();
JRadioButton r1 = new JRadioButton(“it1”); JRadioButton r2 = new JRadioButton(“it2”); r2.setSelected(true); grp.add(r1); grp.add(r2);

37 Le modèle de bouton poussoir
Modèle utilisé pour les CheckBox, RadioButton et Button Plusieurs niveaux d ’utilisation gère l’état du bouton, au repos, sous le pointeur, appuyé et relâché. Gère la notification vers les listeners Gère l ’envoie d ’un événement « action »

38 JComboBox Liste déroulante (ouverte ou fermée)
vector ou tableau d’objets passés en paramètres JComboBox cb = new JComboBox( items); cb.setMaximumRowCount(4); cb.setEditable(true); // JTextField

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

40 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

41 Les composants de SWING
Dialog Frame Tabbed Pane Split pane Layered pane Internal frame Tool bar

42 Composants de Swing List File chooser Tool tip Color chooser
Progress bar Slider Table Text Tree

43 Capacités communes des composants
(dés)activation isEnabled() setEnabled(…) (in)visible setVisible(…) isVisible() module le coût de l’instanciation d’un container ! tailles réelle et souhaitable Dimension getSize() ou Dimension getSize(Dimension r) setSize(…) Dimension getPreferredSize() ; setPreferredSize(Dimension r);

44 Factory Bordures Curseur Border mbd= new Border(
BorderFactory.createEtchedBorder() BorderFactory.createLoweredBevelBorder() BorderFactory.createTitledBorder(“Titre !”) etc… ); monJbutton.setBorder(mbd); Curseur Cursor nc = new Cursor(Cursor.CROSSHAIR_CURSOR); monJbutton.setCursor(nc);

45 Couleurs new Color (r,g,b) new Color (r,g,b,a) 0 -> 255
a=255 opaque monJbutton.setBackground(Color.white); //constantes monJbutton.setForeground(Color.black); monJbutton.setOpaque(true);

46 Quelques difficultés à retenir
Conteneurs de fenêtre : ne pas ajouter directement avec "add" mais ajouter avec "getContentPane()" Pas de multi-threading, sauf autorisation explicite dans la documentation

47 La classe JComponent Tool tip Bords Actions associées aux touches
Propriétés Accès aux handicapés Double buffer

48 Conception d’IHM en Java
Swing : la gestion du placement des composants

49 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

50 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

51 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

52 ...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);

53 Conception d’IHM en Java
Conclusion sur Swing

54 Conclusion et perspectives
Java facilite la construction d’applications graphiques interactives Les APIs sont bien conçues Plusieurs niveaux de complexité Problèmes performances parfois complexité parfois