Transcript Document 7495879

Conception d’IHM en Java
Concepts Généraux
[email protected]
contrat Creative Commons Paternité-Pas d'Utilisation CommercialePartage 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

Enlightenment

GNOME (Sawfish), KDE (Kwm), Qt
 Explorer
 Finder
Fvwm
de Windows (MFC)
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
JButton
JButton
JPanel
JButton
JTextArea
JList
2 – Arbre Swing
JFrame
JMenuBar
JMenu File
JMenu View
JMenu Help
JMenuItem Open
JMenuItem Undo
JMenuItem Save
JMenuItem
JMenuItem Save as…
JMenuItem Paste
JMenuItem Quit
JMenuItem Copy
JMenuItem About…
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
 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
14
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.
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é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
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
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
 Construire
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
 JFrame
de l ’arbre de composants :
+ 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 !”)
setSize(int, int) et setResizable(false)
30
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
 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
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);
sp.setViewportView (monJLabel);
 composants
ScrollPane
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
Progress bar
Color chooser
Tool tip
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
 besoins
du 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



Place les composants
de gauche à droite
GridLayout

CardLayout

Superpose les
composants

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
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