Conception dIHM en Java Concepts Généraux Cedric.Dumas@emn.fr contrat Creative Commons...

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