c dric dumas jean daniel fekete ecole des mines de nantes n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Conception d’IHM en Java PowerPoint Presentation
Download Presentation
Conception d’IHM en Java

Loading in 2 Seconds...

play fullscreen
1 / 122

Conception d’IHM en Java - PowerPoint PPT Presentation


  • 143 Views
  • Uploaded on

Cédric Dumas Jean-Daniel Fekete Ecole des Mines de Nantes. Conception d’IHM en Java. Cedric.Dumas@emn.fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License. Concepts Généraux. Conception d’IHM en Java.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Conception d’IHM en Java' - wells


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
c dric dumas jean daniel fekete ecole des mines de nantes
Cédric Dumas

Jean-Daniel Fekete

Ecole des Mines de Nantes

Conception d’IHM en Java

Cedric.Dumas@emn.frcontrat Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License

java et les interfaces graphiques interactives
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.

application graphique interactive architecture
Application graphique interactive : architecture

Les boîtes à outils 2D sont maintenant très stéréotypées

3 composants

système de fenêtrage

API graphique

gestion de l'arbre d'affichage et d'interaction

Organisation sous forme d'objets

le syst me de fen trage
Le 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

les api graphiques
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

la gestion de l arbre d affichage
La gestion de l'arbre d'affichage

Afficher = appeler une succession de fonctions graphiques

Représentation sous forme d'un arbre d'affichage (ou graphe directe acyclique)

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

la gestion de l interaction
La gestion de l'interaction

Les dispositifs d'entrée génèrent des événements (petit bloc mémoire contenant un type, un temps, une fenêtre cible et des détails suivant le type)

La boîte à outils achemine l'événement vers un nœud cible

Le nœud gère l'événement, ce qui peut modifier l'état de l'arbre d'affichage

On passe à l'événement suivant

acheminement des v nements
Acheminement des événements

Positionnel (souris)

on regarde quel est le nœud de l'arbre le plus près de la position

On l'envoie au plus prés, qui renvoie a son père s'il ne veut pas le gérer

Non positionnel (clavier)

si un nœud à le "focus", on lui envoie

traduction d'une touche en caractère(s) ou action

sinon, on cherche une cible

gestion des raccourcis clavier

les composants graphiques interactifs
Les composants graphiques interactifs

Le nœud est capable de s'afficher et de gérer les événement

On lui ajoute une interface de communication suivant sa sémantique

bouton, label, menu, ligne de texte, etc.

On appelle ce nœud communicant un composant ou widget ou gadget ou objet de contrôle.

organisation sous forme d objets
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 (Component dans Java)

Chaque composant particulier spécifie une interface particulière adaptée à sa sémantique

principales diff rences entre les guis
Principales différences entre les GUIs

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

Lire le chapitre consacré aux GUIs

les bo tes outils graphiques interactives de java
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.

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

organisation d awt
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.

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 souvent lent.

programmation avec java swing
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

swing et awt
SWING et AWT

SWING cohabite avec AWT et utilise le minimum de ses services

Tous les composants sont redéfinis

AWT n ’est pas régulier

pas de canvas dans un menu

SWING est totalement régulier

tout conteneur peut afficher tout objet graphique

concepts de swing
Concepts de SWING

Séparation du composant et de son apparence

plusieurs apparences existent: Windows, Unix, Mac et « Metal »

L ’apparence par défaut dépend de la plate forme

Séparation du composant et de son modèle

Séparation du composant et de son modèle de sélection

concepts de swing1
Concepts de SWING

Basé sur des containers

générique

gère collection de composants

design Pattern composite

programmation swing
Programmation SWING

Package javax.swing

Relativement proche de AWT pour faciliter la migration, ajout « J » avant le nom des classes:

construction d une application
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

exemple
Exemple

import java.awt.*;

import javax.swing.*;

class hwSwing {

public static void main(String args[]) {

JFrame f = new JFrame("Hello World");

Jlabel texte = new JLabel("Hello World");

f.getContentPane().add(texte);

f.pack();

f.setVisible(true);

}

}

autre approche
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); }

}

explications
explications

Création de l ’arbre de composants :

JFrame + JLabel ou JButton

Déclaration des actions:

addEventHandler + création d ’une « inner class »

Calcul du placement des composants:

pack

Affichage

mon premier composant
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)

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

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

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

jmachinbutton
JmachinButton

JToggleButton

deux états (setIcon et setSelectedIcon)

JCheckBox

cases à cocher

JRadioButton

dans un groupe de bouttons “radio”

penser à regarder Abstract Button

exemple de radio
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);

le mod le de bouton poussoir
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 »

le mod le de bouton poussoir 2
Le modèle de bouton poussoir (2)

public interface ButtonModel extends ItemSelectable {

attribute boolean armed;

attribute boolean selected;

attribute boolean enabled;

attribute boolean pressed;

attribute boolean rollover;

attribute int mnemonic;

attribute String actionCommand;

attribute ButtonGroup group;

listener ActionListener;

listener ItemListener;

listener ChangeListener;

}

jcombobox
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

jmenu
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 !!!

jpanel
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

les composants de swing
Les composants de SWING

Dialog

Frame

Tabbed Pane

Split pane

Tool bar

Internal frame

Layered pane

composants de swing
Composants de Swing

List

Tool tip

File chooser

Color chooser

Progress bar

Slider

Table

Text

Tree

capacit s communes des composants
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);

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

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

quelques difficult s retenir
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

pourquoi getcontentpane
Pourquoi getContentPane ?

Les containers Swing ont un JRootPane

monContainer.getContentPane().add(...)

composants « lourds » : JDialog, JFrame, JWindow

Root pane

la classe jcomponent
La classe JComponent

Tool tip

Bords

Actions associées aux touches

Propriétés

Accès aux handicapés

Double buffer

calcul du placement
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

mise en place d un gestionnaire de placement
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

les gestionnaires de placement
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

ou layout manager
...ou Layout Manager
  • BorderLayout
    • Découpe en 5 régions: south, north, east, west, center
  • Aucun : .setBounds(x,y,h,l);
parcours des v nements
Parcours des événements

Plusieurs boucles envoient des événements dans une file unique

System.getSystemEventQueue()

Un Thread lit la file et distribue les événements à la racine de l ’arbre des composants associé à la fenêtre de l ’événement

L ’événement est acheminé au composant auquel il est destiné

gestion des actions
Gestion des actions

Associer une action à un événement

2 types d ’événements

issu du système de fenêtrage (bas niveau)

issu d ’un composant ou d’un sous-système Java (haut niveau)

2 niveaux de gestion

dérivation des composants

association de gestionnaires d’actions

les v nements
Les événements

Package java.awt.event.*

Héritent de la classe java.awt.AWTEvent

identificateur (numéro unique)

consumed (a-t-il été utilisé?)

source (qui l'a émis)

Envoyés dans une file unique

Toolkit.getSystemEventQueue()

Lus par un thread spécique

d rivation d un composant obsol te
Dérivation d ’un composant (obsolète)

Redéfinition de la méthode processEvent(AWTEvent e)

Test de la classe de l ’événement

if (e instanceof FocusEvent) processFocusEvent((FocusEvent)e);else super.processFocusEvent(e);

Ne pas oublier d ’appeler super sinon, rien ne marche plus.

association de gestionnaires d actions
Association de gestionnaires d ’actions
  • Pour chaque famille d ’événements, une interface « listener » est définie
    • MouseListener, MouseMoveListener, KeyListener, etc.
  • Chaque classe composant définit « add<nom>Listener(<nom>Listener )

Frame

ActionListener

Button

addActionListener(ActionListener)

actionPerformed(ActionEvent e)

les listeners
Les listeners

Chaque composant peut renvoyer certains événements à l'application si elle le demande

Le renvoi se fait par un Listener

actionListener, AdjustmentListener, FocusListener, InputMethodListener, ItemListener, KeyListener, MouseListener, MouseMotionListener, TextListener, WindowListener

exemple1
Exemple

public class MyClass implements MouseListener {

...

someObject.addMouseListener(this);

...

public void mousePressed(MouseEvent e) { }

public void mouseReleased(MouseEvent e) { }

public void mouseEntered(MouseEvent e) { }

public void mouseExited(MouseEvent e) { }

public void mouseClicked(MouseEvent e) { ...//Event handler implementation goes here... }

}

les adaptateurs
Les adaptateurs

Les Adapters sont des classes concrètes qui facilitent l'utilisation des Inner Classes

Pour chaque Listener ayant plusieurs méthodes, un Adapter est défini

Il implémente toutes les méthodes en ne faisant rien

Seules les méthodes faisant quelque chose doivent être implémentés par des inner classes

exemple adapt
Exemple adapté

public class MyClass extends MouseAdapter {

...

someObject.addMouseListener(this);

...

public void mouseClicked(MouseEvent e) {

//Event handler implementation goes here...

}

}

rappel sur les inner classes
Rappel sur les "inner classes"

Existent depuis Java 1.1

3 versions

classe définie dans l'espace de nommage d'une autre classe

classe définie dans le contexte d'une autre classe

classe anonyme définie au fil du code dans le contexte courant

syntaxe des inner classes
Syntaxe des inner classes

class a { static class B { … } …}

class a { class B { … } …}

class a { type method(args) { … Thread t = new Thread() { void run() { … } }; …} }

d finition d un listener
Définition d ’un Listener

4 méthodes

Définition d’une classe qui implémente l’interface ActionListener

Définition de l’interface ActionListener dans la classe qui gère l’action

Utilisation des « inner classes », définition à la volée du code

Utilisation d ’un classe « Adapter » pour ne pas avoir à définir toutes les méthodes

inner classes
Inner classes

public class MyClass extends Applet {

...

someObject.addMouseListener(new MyAdapter());

...

class MyAdapter extends MouseAdapter {

public void mouseClicked(MouseEvent e) { ...//Event handler implementation goes here... }

}

}

anonymous inner classes
Anonymous Inner classes

public class MyClass extends Applet {

...

someObject.addMouseListener(

new MouseAdapter() { public void mouseClicked(MouseEvent e) { //Event handler implementation goes here... }

}

);

...

}

}

graphics
Graphics

Java définit deux interfaces pour le graphique passif: Graphics et Graphics2D

Graphics implémente un modèle graphique très simple et orienté pixel

Graphics2D implémente un modèle graphique sophistiqué indépendant de la résolution

On peut aussi créer une image et créer un graphique pour dessiner dessus

capacit s d un graphics
Capacités d ’un Graphics

Les attributs sont:

Color, PaintMode, Font, clip, origin, taille

Les primitives graphiques sont:

line, rect, roundRect, oval, arc, polyline, polygon, string, image

On peut tracer le contour ou remplir les rect, roundRect, oval, arc et polygones

On ne peut pas changer l ’épaisseur des traits ou faire des pointillés par exemple.

les couleurs
Les couleurs

Modèle simple: 3 composants rouge, vert et bleu

Modèle complexe : ColorSpace, Color et ColorModel

ColorSpace est un espace de couleur (RGB, CIEXYZ, etc)

Color représente une couleur dans un espace de couleur

ColorModel spécifie comment une image code la couleur

les images
Les Images

Image: tableau de pixels

peut être

chargé du WEB ou d ’un fichier

créé pour accélérer l’affichage

créé pour éviter des clignottements

créé pour dessiner dedans

Plusieurs niveaux d ’API

Ici, le plus simple.

cr ation d une image
Création d ’une image

Dans Component:

Image img = createImage(largeur, hauteur)

Pour dessiner dedans, créer un Graphics :

Graphics g = img.createGraphics();

g.setBackground(getBackground());

On peut ensuite dessiner dans g

On peut dessiner l’image sur le graphics courant.

chargement d une image
Chargement d ’une image

java.awt.Toolkit.getImage(String file);

java.awt.Toolkit.getImage(URL url);

createImage fait la même chose mais ne partage pas les images

Attention, dans une applet, getImage ne marche que sur le répertoire de l ’URL de l ’applet

affichage d une image
Affichage d ’une image

Graphics.drawImage(Image img, int x, int y, ImageObserver o);

Plusieurs autres version qui retaillent l ’image

java.awt.image.ImageObserver interface

boolean imageUpdate(Image i, int info, int x, int y, int w, int h)

appelé lors d ’un chargement incrémental d ’image

les polices de caract res
Les polices de caractères

Java utilise des caractères Unicode (16 bits)

Les polices traduisent des suites de caractères en suite de glyphes affichables

Une police a un nom, un style et une taille

noms systèmes: Dialog, DialogInput, Monospaced, Serif, SansSerif, Symbol

Styles: PLAIN, BOLD, ITALIC

La famille est gérée en interne

les m triques de polices
Les métriques de polices
  • Ascent hauteur / ligne de base
  • Leading avance / début à gauche
  • charWidth largeur d ’un caractère
  • charsWidth largeur de plusieurs caractères
capacit s d un graphics2d java2d
Capacités d ’un Graphics2D (Java2D)

Dérive d’un Graphics

Ajoute les attributs suivants:

composite, paint, stroke, RenderingHints, transform

Les primitives obéissent à la transformation affine installée

Les « stroke » et « paint » définissent les attributs d ’affichage des remplissages et des traits.

les objets g om triques de java2d
Les objets géométriques de Java2D

Package java.awt.geom.*

Définit les objets de gestion de la géométrie et leurs interfaces

les transformations affines
Les transformations affines

Spécifie à la fois l ’échelle en X et Y, la rotation, la translation et des déformations affines

Les transformations se composent

Une transformation courante est appliquée aux primitives graphiques

les formes
Les formes

Ligne, rectangle, arcs, ellipse, polygone, etc.

Courbes quadratiques et cubiques

Area

les courbes cubiques
Les courbes cubiques

Courbes de Bézier

Relativement facile àcontrôler

les area
Les "area"

Permet de calculer avec des Shapes:

intersection

ajout, soustraction, différence symétrique

Lent mais puissant

la notion de path
La notion de "Path"

Forme définie par son contour

point de départ

suite de lignes ou courbes

levé du crayon

fermeture

On peut remplir ou tracer le Path

On peut itérer le long du Path

suite de segments typés connus

les traits
Les traits

Nombreux attributs:

épaisseur, style de fin (end cap), style de join (join style), pointillé

BasicStroke : transformer un trait en son contour (pour lui appliquer un remplissage)

les remplissages
Les remplissages

Couleur pleine

Composition avec mélange (translucide)

Texture

Gradient

Pochoir

imprimer avec java2d
Imprimer avec Java2D

public void actionPerformed(ActionEvent e) {

if (e.getSource() instanceof JButton) {

PrinterJob printJob = PrinterJob.getPrinterJob();

printJob.setPrintable(this);

if (printJob.printDialog()) {

try {

printJob.print();

} catch (Exception ex) {

ex.printStackTrace();

}

}

}

}

modifier l affichage
Modifier l’Affichage

Deux cas de figure:

composant primitif, l ’affichage est laissé au « peer »

composant redéfini, l ’affichage est géré par

update et paint

En principe, seul le Canvas est censé être dérivé pour modifier son affichage

L ’affichage se fait sur une surface graphique, le « Graphics »

les composants sp cifiques swing
Les composants spécifiques SWING

Dériver de JComponent

paint appelle paintComponent, paintBorder et paintChildren

On peut changer l’un des trois ou paint directement

Similaire à AWT

On peut utiliser Java2D

r cup ration d un graphics
Récupération d’un Graphics

Pas de composant ZonedeDessin

rafraichissement :

public static void main(...) {

[…}

JPanel pa = new JPanel();

Graphics g = pa.getGraphics();

g.drawOval(10,10,50,50); // centre supérieur gche

}

dessiner tous les coups
Dessiner à tous les coups

Public class MonPanel extends JPanel {

public void PaintComponent(Graphics g) {

super.paintComponent(g);

g.drawOval(10,10,50,50);

}

}

comment tre multi
Comment être multi ?

Plusieurs vues :

DessinListener listDessin = new DessinListener();

CoordListener listCoord = new CoordListener();

maZoneDessin.addMouseMotionListener(listDessin);

maZoneDessin.addMouseMotionListener(listCoord);

Coordonnées : 83 28

le mod le de liste
Le modèle de liste

Utilisé pour les listes

public interface ListModel { int getSize(); Object getElementAt(int index); Listener ListDataListener;}

Facilite l ’affichage d ’un conteneur par une liste

CellRenderer pour changer l ’apparence des items

cr ation d une liste
Création d ’une liste

String[] data = {« un », « deux »};

Jlist l = new JList(data);

JList peut être créé avec un modèle ou un tableau (le modèle est créé implicitement)

On peut lui changer son CellRenderer

On peut lui changer son SelectionModel

un ou plusieurs séléctionnés

plusieurs contigus ou non

le contrôle peut être plus fin

le mod le de bo te combin combo box
Le modèle de boîte combiné (combo box)

Comme List plus un item sélectionné

Le modèle de sélection est « un seul »

Peut être modifiable ou non (ajout implicite d ’un item saisi au clavier dans la liste)

le mod le d intervalle born
Le modèle d'intervalle borné

BoundedRangeModel

Utilisé par les sliders, scrollbar et les progress bars

Minimun <= value <= value+extent <= Maximum

JScrollBar j = new JScrollBar(myBRModel);

le mod le d arbre jtree
Le modèle d'arbre JTree

TreeModel

Object getRoot(), Object getChild(Object parent, int index), int getChildCount(Object parent), boolean isLeaf(Object node), valueForPathChanged(TreePath p, Object newValue), int getIndexOfChild(Object parent, Object child), TreeModelListener

Pour déplacer, ajouter ou retirer une colonne dans une table

le mod le de table jtable
Le modèle de table JTable

JTable(Object[][] rowData, Object[] columnNames)

JTable(Vector rowData, Vector columnNames)

new AbstractTableModel() {

public String getColumnName(int col) {

return columnNames[col].toString();

}

public int getRowCount() { return rowData.length; }

public int getColumnCount() { return columnNames.length; }

public Object getValueAt(int row, int col) {

return rowData[row][col];

}

public boolean isCellEditable(int row, int col)

{ return true; }

public void setValueAt(Object value, int row, int col) {

rowData[row][col] = value;

fireTableCellUpdated(row, col);

}

}

la gestion du texte
La gestion dutexte

Gestion simple et configurable

Niveau de configuration très poussé

Texte simple, Texte HTML, Texte XML?

Interface « Document » pour gérer l ’intérieur d ’un texte

Plusieurs Viewers pour les différentes classes de documents

imprimer
Imprimer

La classe qui imprime dérive de Graphics et doit être passée à la méthode « printAll(Graphics g) » de la racine des composants à imprimer

Pour obtenir le Graphics, il faut un java.awt.PrintJob

class PrintJob { PrintJob(); void end(); Graphics getGraphics(); … }

imprimer 2
Imprimer (2)

Pour obtenir un PrintJob, utiliser un dialogue d’ impression

java.awt.Toolkit.getPrintJob(Frame f, String jobtitle, JobAttributes jobAttributes,

PageAttributes pageAttributes)

On peut tester dans la méthode « paint » si on affiche à l ’écran ou si on imprime:

if (g instanceof PrintGraphics) …

imprimer 3
Imprimer (3)

PrintJob pjob = getToolkit().getPrintJob(frame,

"Printing Test", null, null);

if (pjob != null) {

Graphics pg = pjob.getGraphics();

if (pg != null) {

root.printAll(pg);

pg.dispose(); // flush page

}

pjob.end();

awt et les applets
AWT et les applets

Les applets sont téléchargées à partir de pages WEB

<applet codebase="http://java.sun.com/applets/NervousText/1.1" code="NervousText.class" width=400 height=75> <param name="text" value="Welcome to HotJava!"> <hr> If you were using a Java-enabled browser such as HotJava, you would see dancing text instead of this paragraph. <hr> </applet>

Le classe NervousText doit dériver de Applet dans java.Applet

les applets
Les Applets

Applet dérive de Panel

Définit les méthodes suivantes:

void init() appelé une fois au chargement

void start() appelé quand la page s’affiche

void stop() appelé quand la page disparaît

String getParameter(String) récupère un argument passé en paramètre

surprises avec les applets
Surprises avec les Applets

Des mécanismes de sécurité sont activés

Le focus n’est pas implicitement sur l’applet, elle ne reçoit pas les touches du clavier par défaut

Il faut que la taille de la fenêtre soit fixe

L’apparence varie d ’une machine à l’autre (les fonts disponibles par exemple).

conclusion et perspectives
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

bibliographie
Bibliographie

Designing the User Interface; Ben Shneiderman, Addison-Wesley 1997; ISBN 0201694972

Developing User Interfaces, Dan R. Olsen, Morgan Kaufmann, 1998; ISBN 1558604189

The Java Class Libraries : Java.Applet, Java.Awt, Java.Beans (Vol 2) P. Chan, R. Lee Addison-Wesley, 1997; ISBN 0201310031

The JFC Swing Tutorial: A Guide to Constructing GUIs K. Walrath, M. Campione; Addison-Wesley, 1999; ISBN 0201433214

Systèmes d'information et Interaction Homme-Machine, Ed. C. Kolski, 2000; Hermes.

The Java Tutorial http://java.sun.com/docs/books/tutorial/index.html

bibliographie1
Bibliographie

java.sun.com

tutorials

references

http://manning.spindoczine.com/sbe/

organisation graphique d une interface
Organisation graphique d'une interface

Connaître les utilisateurs

Concevoir avec eux l'interface

Se rattacher à des choses connues

code de couleurs, organisation spatiale, vocabulaire, etc.

Tester les interfaces

comment conna tre les utilisateurs
Comment connaître les utilisateurs ?

Pas d'introspection: vous n'êtes pas un utilisateur type!

Modèle mental de l'utilisateur vs. Modèle d'implémentation

Conception participative

Use cases

Analyse des tâches : que fait-il et comment le fait-il ?

faire participer les utilisateurs
Faire participer les utilisateurs

Dessin d'interfaces sur papier

Prototypage rapide et scénarios d'utilisation

Cycle de développement en spirale

hi rarchisation de l information
Hiérarchisation de l'information

Organiser les écrans de manière hiérarchique

Utiliser un vocabulaire simple

Bien délimiter les zones

regrouper les objets similaires

détacher les objets différents

Faire appel à des graphistes

utilisation des couleurs
Utilisation des couleurs

Concevoir avec des niveaux de gris puis passer à la couleur

10% de daltoniens ou autres trouble de la perception

Utiliser peu de couleurs

Utiliser des teintes pastels et des couleurs complémentaires

utilisation des polices de caract res
Utilisation des polices de caractères

Prendre des polices réglées pour les écrans et non traditionnelles à l'impression

Pas d'italique ou de penché mais plutôt du gras

Utiliser des couleurs contrastées fond / lettre

Faire attention à la taille

animations images et sons
Animations, images et sons

Attention à ne pas divertir l'attention

L'œil est très sensible aux animations:

il est attiré par ce qui bouge

il ne peut pas contrôler cette attirance

peut provoquer de la fatigue et des maux de tête

Image très colorées perturbantes

Sons à éviter, sauf pour les erreurs graves

redondance pour les erreurs