Interfaces graphiques avec SWT

Les interfaces
graphiques en
Java avec SWT

MSIAG 2007-2008 UML & POO – SWT 1

 Conception des IHM

Utilisation de diagramme d’états UML

Un état = un écran

Une transition = passage d’un écran à un autre

Activité = les actions possibles sur l’écran considéré

Design Pattern : Modèle – Vue – Controleur (MVC)

La notion de Design Pattern (modèle de conception)

Séparer l’affichage du modèle métier de sa gestion

Plusieurs vues possible du même modèle métier

MSIAG 2007-2008 UML & POO – SWT 2

 Conception d’IHM et UML

Renuméroter une voie

Déb ut

<<Include>> <<Ecran>>
GTONSN 01 - Sélection de voie

Statechart Diagram: GTOV / Bloc-Notes

RGT420 - Sélection d'une
<<Ecran>> <<Extension>>
voie active GTONSN02 -
Renumérotation de voie
Annuler

Quitter Valider
<<Pop up>> Saisie du
Les données mémorisées Bloc-Notes Oui
seront perdues <<popup>>
Confirmation

Fin de la renumérotatio n - Oui

Renumérotation non effectuée

<<Ecran>>
Accusé de réception - Demande de
nouvelle renumérotation

Non

Fin de renumérotation:
Renumérotation effectuée

MSIAG 2007-2008 UML & POO – SWT 3

 Conception des IHM : Pattern MVC

Modèle : contient la logique et l'état de l'application.

notifie les vues lorsqu'il a été modifié.
Vue : représente l'interface utilisateur
Contrôleur : gère la synchronisation entre la vue et le modèle.
Impacte les actions de l'utilisateur sur le modèle.
transmet les actions utilisateur au
Controleur

sélectionne la vue à afficher

accède à la Vue
met à jour

notifie la vue d'un changement

user

Modèle
affiche les données du

MSIAG 2007-2008 UML & POO – SWT 4

 SWT : Standard Widget Toolkit

Structure d’une application SWT

Les conteneurs

Les composants graphiques

Les layouts (disposition des composants)

La gestion des évènements

Les boites de dialogues

MSIAG 2007-2008 UML & POO – SWT 5

 SWT : Structure d’un programme

Exemple de programme SWT

public class HelloWorld
{ Display : lien avec l’OS
public static void main(String[] args)
{
Display display = Display.getDefault();
Shell shell = new Shell(display); Shell = fenêtre graphique
shell.setText("Hello world");
shell.setSize(200, 150);
// ouverture de la fenêtre
shell.open();
while (shell.isDisposed() == false)
{
if (display.readAndDispatch() == false)
{
display.sleep();
Boucle d’écoute
} des évènements
} utilisateurs
display.dispose();
}
}
MSIAG 2007-2008 UML & POO – SWT 6
 SWT : Display et Shell

L’objet Display permet :

d’accéder aux ressources graphiques de l’OS.

d’écouter les évènements déclenchés par l’utilisateur

 méthode readAndDispatch

L’objet Shell :
représente la fenêtre graphique de l’application

est un conteneur de composants graphiques

définit la politique de placement des composants (layout)

Pour créer une fenêtre, il faut associer un shell et un display

MSIAG 2007-2008 UML & POO – SWT 7

 SWT : les composants

Il existe deux types de composants

Le type « conteneur »
Le type « contrôle »

Conteneur
Réceptacle de composants
L’utilisateur n’interagit pas directement avec un conteneur

Contrôle
Génère des évènements suite à une action utilisateur
Exemple : bouton, listbox, onglets, …
Évènements : KeyUp, MouseDoubleClick, …

MSIAG 2007-2008 UML & POO – SWT 8

 SWT : les principaux contrôles

Button : bouton, varie selon le style :

CHECK

PUSH

RADIO

TOGGLE

Combo : liste déroulante avec saisie de texte

Label : étiquette / libellé

Spinner

MSIAG 2007-2008 UML & POO – SWT 9

 SWT : les principaux contrôles

List : sélection d'items dans une liste

Menu

MenuItem

Scale : échelle numérique

Slider: choix d'une valeur par un curseur

Text: texte éditable (single ou multi line)

MSIAG 2007-2008 UML & POO – SWT 10

 SWT : les principaux contrôles

TabFolder: regroupement d'onglets

TabItem: onglet

Table: tableau

TableColumn: colonne

TableItem: cellule

Tree : arbre

TreeItem: feuille d’un arbre

MSIAG 2007-2008 UML & POO – SWT 11

 SWT : Exemple basique

Exemple : créer un bouton

Button button = new Button(shell, SWT.NONE);

button.setText("Valider");
button.setSize(100,25);

Autre exemple de code de création des contrôles :

http://www.eclipse.org/swt/snippets/#tabfolder

http://www.jmdoudoux.fr/java/dej/chap015.htm#chap_15_6

MSIAG 2007-2008 UML & POO – SWT 12

 SWT : La gestion des évènements

PRINCIPE GENERAL

Un événement est déclenché par une action utilisateur

L’évènement est transmis aux Listeners

Un Listener est une classe qui peut écouter les évènements

d’un composant particulier et agir en conséquence.

Les Listeners doivent s’enregistrer auprès des composants

pour être notifié de l’événement

MSIAG 2007-2008 UML & POO – SWT 13

 SWT : Listener (écouteur)

Classe possédant au moins une méthode, appelée si l’événement

attendu est déclenché

Une classe « écouteur » implémente une interface

Quelques exemples de types « d’écouteur » :

« SelectionListener » réagit à la sélection d’un contrôle
 ex : click sur un bouton

« MouseListener » réagit aux évènements souris

« ModifyListener » réagit aux changements d’état d’un contrôle

 ex : Text

Adapter : classe avec implémentation vide du Listener

 sous classer et redéfinir juste la méthode qui nous intéresse

MSIAG 2007-2008 UML & POO – SWT 14

 SWT : Exemple de listener

On implémente les 2 méthodes de SelectionListener

public class MySelectionListener implements SelectionListener

{
public void widgetDefaultSelected(SelectionEvent event)
{
System.out.println("widgetDefaultSelected");
}
Méthode déclenchée à la réception d’un évènement

public void widgetSelected(SelectionEvent event)

{
System.out.println("widgetSelected");
}
} Évènement reçu par le listener

MSIAG 2007-2008 UML & POO – SWT 15

 SWT : gérer un click sur un bouton

Button button = new Button(shell, SWT.NONE);

button.setText("Valider");
crée un MySelectionListener qui
button.setBounds(1, 1, 100, 25); implémente SelectionListener

// instancie le listener
MySelectionListener listener = new MySelectionListener();
//enregistre l’objet listener auprès de button
Enregistre listener
button.addSelectionListener(listener); auprès de button

Quand on clique sur button, un évènement est envoyé

Comme listener écoute les évenements de button, la méthode

widgetSelected est appelée

Il suffit donc de mettre le traitement souhaité dans widgetSelected

MSIAG 2007-2008 UML & POO – SWT 16

 SWT : gérer un click sur un bouton

Version light avec des classes anonymes Java

Pas besoin de créer la classe implémentant le Listener dans un fichier à part

Moins de code mais un peu moins lisible

Classe anonyme de type

Button button = new Button(shell); SelectionAdapter implémentant
SelectionListener
button.setText("Valider");
button.setBounds(1, 1, 100, 25);
button.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent arg0) {
System.out.println("Appui sur le bouton");
}
Redéfinition de la méthode
}); widgetSelected qui va être appelée
quand on cliquera sur button

MSIAG 2007-2008 UML & POO – SWT 17

 Synthèse : gestion des évènements

Regarder l’événement pertinent sur le contrôle considéré :

click, frappe clavier, déplacement souris , etc …

Regarder les listeners possibles du contrôle

SelectionListener, KeyListener, etc …

Implémenter le XXXListener ou le XXXAdapter correspondant à

l’évènement

Enregistrer le Listener auprès du contrôle

Allez voir les exemples :

http://www.eclipse.org/swt/widgets/ ou

http://www.jmdoudoux.fr/java/dej/chap015.htm#chap_15_10

MSIAG 2007-2008 UML & POO – SWT 18

 SWT : les conteneurs

Conteneur
Réceptacle de composants
Style de bordure et scrollbar possible
2 conteneurs : composite et group
Composite
Conteneur basique
Ne permet pas de définir de politique de placement
Group
Conteneur plus élaboré que Composite
Permet de définir une politique de placement (layout)
Libellé possible

MSIAG 2007-2008 UML & POO – SWT 19

 SWT : les conteneurs

Exemples d’utilisation d’un Composite Le composite est

associé au shell
// shell et display déjà initialisé
Composite composite = new Composite(shell, SWT.BORDER);
Color couleur = new Color(display,131,133,131);
composite.setBackground(couleur);
Définition de la bordure

Label label = new Label(composite, SWT.NONE);

label.setBackground(couleur);
label.setText("Saisir la valeur"); Le composant est inclut
label.setBounds(10, 10, 100, 25); dans le composite

Text text = new Text(composite, SWT.BORDER);

text.setText("mon texte");
text.setBounds(10, 30, 100, 25);

Button button = new Button(composite, SWT.BORDER);

button.setText("Valider");
button.setBounds(10, 60, 100, 25);
Définition de la taille du composite
composite.setSize(140,140);
shell.pack();

MSIAG 2007-2008 UML & POO – SWT 20

 SWT : les conteneurs

Exemples d’utilisation d’un Group

Définition de la bordure
Le group est associé au shell (ici pas de bordure)

Group group = new Group(shell, SWT.NONE);

Politique de placement
group.setLayout(new FillLayout());
group.setText("Actions"); Définition du libellé du group

Button button1 = new Button(group, SWT.NONE);

button1 est inclut dans le group
button1.setText("Bouton 1");
Button button2 = new Button(group, SWT.NONE);
button2.setText("Bouton 2");

MSIAG 2007-2008 UML & POO – SWT 21

 SWT : politique de placement

Un layout (politique de placement) permet de :

gérer automatiquement le positionnement des composants
définir comment se redimensionnent les composants quand on
redimensionne la fenêtre ou le conteneur.
Placement sans layout
Positionnement absolu par rapport au conteneur
Ne fait rien au redimensionnement du conteneur
4 layouts possible en SWT
RowLayout
FillLayout
GridLayout
FormLayout

MSIAG 2007-2008 UML & POO – SWT 22

 SWT : FillLayout

FillLayout
Disposition en ligne ou colonne en occupant tout l'espace
Tous les composants ont la même taille

shell.setLayout(new
FillLayout(SWT.HORIZONTAL));
Button bouton1 = new Button(shell, SWT.FLAT);
bouton1.setText("bouton 1");
Button bouton2 = new Button(shell, SWT.FLAT);
bouton2.setText("bouton 2");
Button bouton3 = new Button(shell, SWT.FLAT);
bouton3.setText("bouton 3");

MSIAG 2007-2008 UML & POO – SWT 23

 SWT : RowLayout

RowLayout : comme FillLayout mais …

Possibilité de définir des marges entre composants
Les composants peuvent être de taille différente

shell.setLayout(new RowLayout());
Button bouton1 = new Button(shell, SWT.FLAT);
bouton1.setText("bouton 1");
Button bouton2 = new Button(shell, SWT.FLAT);
bouton2.setText("bouton 2");
Button bouton3 = new Button(shell, SWT.FLAT);
bouton3.setText("bouton 3");

MSIAG 2007-2008 UML & POO – SWT 24

 SWT : GridLayout

GridLayout
Disposition des composants dans une grille
Possibilité de préciser le comportement d’un composant au
redimensionnement avec un GridData
GridLayout gridLayout = new GridLayout();
gridLayout.numColumns = 2;
shell.setLayout(gridLayout);
// création des composants
Label label1 = new Label(shell, SWT.NONE);
label1.setText("Donnee 1 :");
Text text1 = new Text(shell, SWT.BORDER);
text1.setSize(200, 10);
// idem pour label2, text2 et label3, text3
Button button1 = new Button(shell, SWT.NONE);
button1.setText("Valider");
Button button2 = new Button(shell, SWT.NONE);
button2.setText("Annuler");
MSIAG 2007-2008 UML & POO – SWT 25
 SWT : FormLayout

FormLayout : gestionnaire plus précis

impose d'associer à chaque composant un objet de type
FormData qui va préciser les informations de positionnement et
de comportement du composant au travers de FormAttachment.
Complexe !

Label l = new Label( s, SWT.BORDER );

l.setText("Maya");
l.setSize(200,100);

FormData fd = new FormData();

fd.left = new FormAttachment(0,5);
fd.right = new FormAttachment(30,-5);
fd.bottom = new FormAttachment(0,5);
fd.top = new FormAttachment(30,-5);

l.setLayoutData(fd);

MSIAG 2007-2008 UML & POO – SWT 26

 SWT : les boites de dialogues

Une boite de dialogue est un fenêtre modale

SWT offre des boites de dialogue prédéfinies mais

aussi personnalisables

Principales boites de dialogue :

MessageBox : pour afficher un message

FileDialog : pour choisir d’un fichier

DirectoryDialog : pour choisir un répertoire

Aide et exemples :
http://www.jmdoudoux.fr/java/dej/chap015.htm#chap_15_11

MSIAG 2007-2008 UML & POO – SWT 27

 SWT : MessageBox

Permet d’afficher un message paramétrable

setMessage() pour spécifier le message

Icône affichée : ICON_ERROR, ICON_INFORMATION,

ICON_QUESTION, ICON_WARNING, ICON_WORKING

Les boutons à afficher :

OK ou OK | CANCEL

YES | NO, YES | NO | CANCEL

RETRY | CANCEL

ABORT | RETRY | IGNORE

open() ouvre la boite de dialogue et retourne le choix de l’utilisateur

MSIAG 2007-2008 UML & POO – SWT 28

 SWT : MessageBox

MessageBox mb = new MessageBox(shell, SWT.ICON_INFORMATION |

SWT.ABORT | SWT.RETRY | SWT.IGNORE);
mb.setMessage("Message d'information pour l'utilisateur");
int reponse = mb.open();
if (reponse == SWT.ABORT) {
System.out.println("Bouton abandonner selectionne");
}
if (reponse == SWT.RETRY) {
System.out.println("Bouton reessayer selectionne");
}
if (reponse == SWT.IGNORE) {
System.out.println("Bouton ignorer selectionne");
}

MSIAG 2007-2008 UML & POO – SWT 29

 SWT : FileDialog

FileDialog dialog = new FileDialog(shell, SWT.OPEN);

dialog.setFilterExtensions(new String[] { "*.java", "*.*" });
String nomFichier = dialog.open();
if ((nomFichier != null) && (nomFichier.length() != 0)){
System.out.println("selection du fichier "+nomFichier);
}

MSIAG 2007-2008 UML & POO – SWT 30

 SWT : Aide et tutoriaux

Site officiel : http://www.eclipse.org/swt/

Exemples :

Contrôles : http://www.eclipse.org/swt/widgets/

http://www.eclipse.org/swt/examples.php#insideEclipse

http://www.eclipse.org/swt/snippets/

Tutoriaux

http://www.jmdoudoux.fr/java/dej/chap015.htm#chap_15

http://labo-sun.com/resource-fr-essentiels-903-1-java-gui-swt-

creer-des-interfaces-graphiques-performantes.htm

MSIAG 2007-2008 UML & POO – SWT 31