Conception d’IHM en Java

Concepts Généraux

[email protected]
contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage des Conditions Initiales à l'Identique 2.0 France License
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

2
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

3
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
4
1 - Modèles de fenêtrage
 Sans superposition

 Avec superposition

 Hiérarchique

5
 1 - Systèmes de fenêtrage

window manager  desktop environments  working environments

 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)
6
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
7
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
8
 JFrame

JTree JPanel

JPanel JToolbar

JRadioButton JButton

JRadioButton JButton
9
2 – Arbre Swing

JFrame

JToolBar JPanel JList

JButton JButton JButton JTextArea

2 – Arbre Swing
JFrame

JMenuBar

JMenu File JMenu View JMenu Help

JMenuItem Open JMenuItem Undo JMenuItem About…

JMenuItem Save JMenuItem

JMenuItem Save as… JMenuItem Paste

JMenuItem Quit JMenuItem Copy

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
12
Boîtes à Outils utilisent 1+2+3
 X11/Motif
 X11/GTK
 Tcl/Tk
 MFC
 Swt
 Swing
 etc.

13
Principales différences
 Ilexiste 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

14
Les boîtes à outils graphiques
interactives de Java
 Javapropose 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.

15
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. 16
Conception d’IHM en Java
AWT
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

18
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.
19
Conception d’IHM en Java
SWING
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.
21
Programmation avec Java SWING
 Généralitéssur Java SWING
 SWING et AWT
 Concepts de SWING
 Une application Java SWING pas à pas
 TPs

 Lescomposants standards de SWING

 Créer ses propres composants

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

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

24
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

25
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);
}

26
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); }
}
27
explications
 Création de l ’arbre de composants :
 JFrame + JLabel ou JButton
 Déclaration des actions
 Calcul du placement des composants:
 pack

 Affichage

28
Arbre Swing
JFrame

JTree JPanel

JPanel JToolbar

JRadioButton JButton

JRadioButton JButton

29
Mon premier Composant

 JFrame
 fenêtre principale
 JDialog
 fenêtre de dialogue (modale)
 Jwindow
show()
hide() ou dispose()
toFront() ou toBack()
setTitle(“titre !”) 30

setSize(int, int)et setResizable(false)

Les autres composants

31
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);
32
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();

33
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();

34
JmachinButton
 JToggleButton
 deux états (setIcon et setSelectedIcon)
 JCheckBox
 cases à cocher
 JRadioButton
 dans un groupe de boutons “radio”

35
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);

36
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 »

37
JComboBox
 Listedé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

38
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 !!!
39
JPanel
 JPanel
 conteneur

 JScrollPane Panel
 un seul composant !
 barres de défilement

JScrollPane sp = new JScrollPane();

sp.add(monJLabel);
ScrollPane
sp.setViewportView (monJLabel);
 composants implémentant Scrollable
class MonLabel extends Jlabel implements Scrollable 40
Les composants de SWING

Dialog Tabbed Pane Frame Split pane

Tool bar

Internal frame
Layered pane

41
Composants de Swing

List

File chooser Tool tip

Color chooser
Progress bar

Slider
Table Text Tree

42
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);
43
Factory
 Bordures
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);
44
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);

45
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

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

47
Conception d’IHM en Java
Swing : la gestion du placement
des composants
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
 besoinsdu composant (taille min, max,
normale) + positionnement relatif
49
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 50
Les gestionnaires de placement...
 FlowLayout  GridLayout
 Place les composants  Découpe en une grille
de gauche à droite régulière sur laquelle
les composants sont
 CardLayout
placés
 Superpose les
composants  GridBagLayout
 Découpe en une grille
et place les
composants sur une ou
plusieurs cases

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

52
Conception d’IHM en Java
Conclusion sur Swing
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

54