conception dihm en java concepts généraux cedric.dumas@emn.fr contrat creative commons...
Post on 03-Apr-2015
104 Views
Preview:
TRANSCRIPT
Conception d’IHM en Java
Concepts Généraux
Cedric.Dumas@emn.frcontrat 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 composants1 - 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’affichagePartager la ressource écranGestionnaire de fenêtres
interface utilisateur système de fenêtrage
Fenêtre = zone autonome pour l’affichage pour les entrées
4
1 - Système de fenêtrage
Accès partagé à l'écranSubdivision de l'écran en fenêtresChaque fenêtre est positionné (x, y, z) et
dimensionnée (largeur x hauteur)Modèle graphique d'affichageModèle d'événementsCommunication entre les applicationsGestion de ressources spécifiques
5
1 - Modèles de fenêtrage
Sans superposition
Avec superposition
Hiérarchique
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
JPanel JToolbar
JButton
JButton
JRadioButton
JRadioButton
2 – Arbre Swing
JFrame
JToolBar JPanel
JTextAreaJButton JButton
JList
JButton
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/MotifX11/GTKTcl/TkMFCSwtSwingetc.
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 JavaJava 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 interactivesLangage conçu d'emblée avec une
interface graphique interactiveAjout 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.
Conception d’IHM en Java
AWT
18
Java AWT
Interface indépendante de la plate-formeAPI simple (simpliste)Composants peu nombreuxApparence pauvreRelativement rapideSimilaire sur toutes les plate-formes
19
Organisation d ’AWT
Packages java.awt et java.appletClasses de composants (dérivées de
Component) Composants conteneurs Composants « feuille »
Classes de gestionnaire d’événementsMyriade de classes utilitaires
Image, Color, Cursor, Dimension, Font, etc.
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 SWINGSWING et AWTConcepts de SWINGUne application Java SWING pas à pas
TPs
Les composants standards de SWINGCréer ses propres composants
23
Concepts de SWING
Basé sur des containersgénériquegère collection de composantsdesign Pattern composite
24
Programmation SWING
Package javax.swingRelativement 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énementsCe 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 actionsCalcul du placement des composants:
pack
Affichage
29
Arbre Swing
JFrame
JTree JPanel
JPanel JToolbar
JButton
JButton
JRadioButton
JRadioButton
30
Mon premier Composant
JFrame fenêtre principale
JDialog fenêtre de dialogue (modale)
Jwindowshow()
hide() ou dispose()
toFront() ou toBack()
setTitle(“titre !”)
setSize(int, int)et setResizable(false)
31
Les autres composants
32
JLabel
Javax.swing.Jlabeldescriptif : texte statique + imageexemple : 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.JTextFieldsaisie 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 à étatsJButton 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 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ètresJComboBox cb = new JComboBox( items);
cb.setMaximumRowCount(4);
cb.setEditable(true); // JTextField
39
JMenu
Une instance de JMenuBar par JframesetJMenuBar(JMenuBar mb);
Plusieurs Jmenu par JMenuBaradd(JMenu jm);
Plusieurs JMenuItem/JCheckboxMenu par Jmenu
add(JMenuItem mi);
addSeparator();
Structurez !!!
40
JPanel
JPanel conteneur
JScrollPane 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 Split paneTabbed Pane
Tool bar
Internal frameLayered pane
42
Composants de Swing
File chooser Color chooser
Table Text Tree
List
Slider
Progress bar
Tool tip
43
Capacités communes des composants(dés)activation
isEnabled() setEnabled(…)
(in)visiblesetVisible(…) isVisible() module le coût de l’instanciation d’un container !
tailles réelle et souhaitableDimension getSize() ou Dimension getSize(Dimension r)
setSize(…)
Dimension getPreferredSize() ;
setPreferredSize(Dimension r);
44
Factory
BorduresBorder mbd= new Border(
BorderFactory.createEtchedBorder()
BorderFactory.createLoweredBevelBorder()
BorderFactory.createTitledBorder(“Titre !”)
etc… );
monJbutton.setBorder(mbd);
CurseurCursor 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 tipBordsActions associées aux touchesPropriétésAccès aux handicapésDouble buffer
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 placementLes 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 Découpe en 5 régions:
south, north, east, west, center
Aucun : .setBounds(x,y,h,l);
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çuesPlusieurs niveaux de complexitéProblèmes
performances parfois complexité parfois
top related