Eclipse : développement d'Eclipse Forms

Développement de clients
riches : Plateforme Eclipse
Mickaël BARON - 2010
mailto:[email protected] ou mailto:[email protected]
@mickaelbaron
Chapitre 3 : Conception de plug-ins
Workbench : Eclipse Forms

View Slide

2
Eclipse Forms - M. Baron - Page
keulkeul.blogspot.com @mickaelbaron
Creative Commons
Contrat Paternité
Partage des Conditions Initiales à l'Identique
2.0 France
http://creativecommons.org/licenses/by-sa/2.0/fr
Licence

View Slide

3
Organisation du cours sur le Workbench : Eclipse Forms
Tous les exemples du cours
sont disponibles directement à l’adresse
mbaron.developpez.com/eclipse/forms
FormToolkit
Form et ScrolledForm
Agents de placement
Composants
ExpandableComposite, Section, PageBook, FormText
MasterDetailsBlock
FormEditor

View Slide

4
Workbench Eclipse Forms : déroulement du cours
Ceci est une alerte
Ceci est une astuce
Pédagogie du cours
Illustration avec de nombreux exemples qui sont disponibles à
l’adresse mbaron.developpez.com/eclipse/forms
Des bulles d’aide tout au long du cours
Logiciels utilisés
Eclipse 3.6 Helios
Pré-requis
Connaître la structure d’un plug-ins et savoir créer une extension
Structure du Workbench

View Slide

5
Workbench Eclipse Forms : ressources …
Des liens sur Eclipse Forms de manière générale
www.eclipse.org/articles/Article-Forms/article.html
www.eclipse.org/articles/article.php?file=Article-Forms33/index.html
www.jdg2e.com/forms/EclipseForms.html
www.ibm.com/developerworks/opensource/library/os-eclipse-forms
www.vogella.de/articles/EclipseForms/article.html

View Slide

6
Eclipse Forms : Généralités
L’utilisation des boîtes à outils SWT / JFace ne permet pas,
nativement, d’obtenir des IHMs homogènes
L’API Eclipse Forms permet d’obtenir des IHMs ressemblant
fortement aux interfaces Web
Cette API s’appuie sur les composants natifs SWT en les
décorant de telle sorte que tous les composants aient une
apparence identique
L’API Eclipse Forms fournit également de nouveaux
composants et agents de placement
L’outil PDE est un exemple d’IHMs à base d’Eclipse Forms
que nous utilisons depuis le début de ces supports de cours

View Slide

7
Eclipse Forms : Généralités
Exemple : IHMs du PDE développées avec Eclipse Forms
Une apparence homogène digne des IHMs du Web

View Slide

8
Eclipse Forms : FormToolkit
Le point de départ de toutes constructions d’IHMs à base
d’Eclipse Forms est l’objet FormToolkit
Cet objet fournit les fonctionnalités suivantes
Fabrique de l’ensemble des composants SWT (Button, Label, Text, …)
Fabrique du composant FormText
Fabrique de conteneurs (Composite, ExpandableComposite, Form,
ScrolledForm, Section, PageBook)
Les nouveaux composants ou conteneurs doivent être
construits à partir d’un FormToolkit sous peine de ne pas
obtenir des interfaces homogènes
Construction d’un objet FormToolkit
FormToolkit formtoolkit = new FormToolkit(parent.getDisplay());

View Slide

9
Exemple : HelloWorld avec Eclipse Forms
package eclipse.workbench.eclipseformsexample.views;
public class HelloWorldPart extends ViewPart {
public HelloWorldPart() {
}
public void createPartControl(Composite parent) {
FormToolkit toolkit = new FormToolkit(parent.getDisplay());
ScrolledForm form = toolkit.createScrolledForm(parent);
form.setText("Hello World with Eclipse Forms");
toolkit.decorateFormHeading(form.getForm());
}
public void setFocus() {
}
}
Classe HelloWorldPart.java du projet
eclipseformsexample
Un objet FormToolkit utilisé
comme fabrique des
composants Eclipse Forms
Depuis la version 3.3
possibilité de modifier
l’apparence de l’en-tête

View Slide

10
Exemple : Composants SWT sans FormToolkit
public class NativeSWTPart extends ViewPart {
public NativeSWTPart() {
}
form.setText("Native SWT components with Eclipse Forms");
GridLayout layout = new GridLayout();
layout.numColumns = 2;
form.getBody().setLayout(layout);
Label label = new Label(form.getBody(), SWT.NULL);
label.setText("Text field label : ");
Text text = new Text(form.getBody(), SWT.BORDER);
text.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
Button button = new Button(form.getBody(), SWT.CHECK);
button.setText("A SWT natif checkbox component in a form");
GridData gd = new GridData();
gd.horizontalSpan = 2;
button.setLayoutData(gd);
}
}
Classe NativeSWTPart.java du projet
eclipseformsexample
Les composants SWT ne
sont pas construits à
partir de FormToolkit
Nécessitera une
modification du code pour
uniformiser l’apparence

View Slide

11
Exemple : Composants SWT avec FormToolkit
public class NoNativeSWTPart extends ViewPart {
public NoNativeSWTPart() {
}
form.setText("FormTookit SWT components with Eclipse Forms");
toolkit.createLabel(form.getBody(), "Text field label : ");
Text text = toolkit.createText(form.getBody(), "",SWT.BORDER);
text.setLayoutData(new GridData(GridData.FILL_HORIZONTAL));
Button button = toolkit.createButton(form.getBody(), "A SWT natif checkbox
component in a form", SWT.CHECK);
GridData gd = new GridData();
gd.horizontalSpan = 2;
button.setLayoutData(gd);
}
}
Classe NoNativeSWTPart.java du
projet eclipseformsexample
Les composants SWT ne
sont construits à partir de
FormToolkit
L’apparence des
interfaces est uniforme

View Slide

12
Eclipse Forms : Form et ScrolledForm
Les composants Form et ScrolledForm sont généralement
utilisés comme conteneur de plus haut niveau d’une IHM à
base d’Eclipse Forms
ScrolledForm ajoute en plus la possibilité de gérer des
ascenseurs horizontaux et verticaux quand son contenu est
trop important
Ces composants sont constitués de deux parties
Un en-tête (titre, barre de menus, barre d’outils, messages, …)
Un corps qui est un conteneur pour ajouter d’autres composants
Corps des Forms
En-tête

View Slide

13
Eclipse Forms : Form et ScrolledForm
Les deux parties d’un composant Form sont accessibles via
les méthodes suivantes
Composite getHead() : accès au conteneur de l’en-tête
Composite getBody() : accès au conteneur du corps
Dans le cas de ScrolledForm, il encapsule un composant
Form qui peut être accessible directement via
Form getForm() : accès à l’objet Form encapsulé par ScrolledForm
De cette manière tout ce qui est accessible dans Form
(corps, en-tête, …) peut l’être à partir d’un ScrolledForm

View Slide

14
Eclipse Forms : customiser Form et ScrolledForm
L’en-tête d’un composant Form peut être customisé
Image
personnalisée
Ajout d’un menu
Ajout d’actions
dans la barre
d’outils
Personnalisation de la
zone cliente de l’en-tête
Gestion des
messages
Image adaptée en
fonction de la gravité
du message

View Slide

15
Le composant Form fournit des méthodes spécifiques pour
effectuer la customisation de l’en-tête
void setText(String text) : modification du titre
void setImage(Image img) : modification de l’image du titre
void setHeadClient(Control headClient) : modification de la zone
cliente de l’en-tête
IToolBarManager getToolBarManager() : accès au gestionnaire de la
boîte à outils
IMenuManager getMenuManager() : accès au gestionnaire du menu
void setMessage(String message, int type) : modification du message
(IMessageProvider.WARNING, ERROR, NONE, INFORMATION)
void addMessageHyperlinkListener(IHyperlinkListener hl) : écouteur
sur le lien du message
…

View Slide

16
Exemple : Customisation de l’en-tête d’un Form
public class FormCustomizationPart extends ViewPart {
public FormCustomizationPart() {
}
final ScrolledForm form = toolkit.createScrolledForm(parent);
form.setText("Form Customization");
form.setHeadClient(
toolkit.createButton(form.getForm().getHead(), "This is the head client", SWT.PUSH));
form.setImage(Activator.getDefault().getImageRegistry().get(Activator.TINY_ECLIPSE_LOGO));
form.getForm().getToolBarManager().add(new Action("ToolBar Action",
Activator.getDefault().getImageRegistry().getDescriptor(Activator.TINY_ECLIPSE_LOGO)) { });
form.getForm().getToolBarManager().update(true);
// Suite dans le prochain transparent
}
}
Classe FormCustomizationPart.java du
Création d’un bouton
dans la zone client de
l’en-tête

View Slide

17
Exemple (suite) : Customisation de l’en-tête d’un Form
form.getForm().getMenuManager().add(new Action("MenuBar Action",
Activator.getDefault().getImageRegistry().getDescriptor(Activator.TINY_ECLIPSE_LOGO)) { });
form.getForm().getMenuManager().update(true);
form.getForm().addMessageHyperlinkListener(new HyperlinkAdapter() {
public void linkActivated(HyperlinkEvent e) {
System.out.println("Link active : " + e.getLabel());
form.getForm().setMessage(null);
}
});
form.getForm().setMessage("This is an error message", IMessageProvider.WARNING);
}
}
Classe FormCustomizationPart.java du
Création de menus à
partir du gestionnaire de
menu
Ajout d’un écouteur sur
le lien du message
Ecriture d’un message
dans l’en-tête

View Slide

18
Eclipse Forms : Composants supportés
Tous les composants de SWT sont supportés (au sens qui
ne sont pas des conteneurs ni des agents de placement) et
d’autres spécifiques à Eclipse Forms (Hyperlink)
Button via createButton(…)
Hyperlink via createHyperlink(…)
ImageHyperlink via createImageHyperlink(…)
Label via createLabel(…)
Text via createText(…)
Table via createTable(…)
Tree via createTree(…)

View Slide

19
Exemple : Composants supportés
public class SupportedComponentPart extends ViewPart {
form.setText("All Eclipse Form Supported Components");
// Button component with push style.
toolkit.createButton(form.getBody(), "Eclipse Form Button", SWT.PUSH);
// Hyperlink component.
Hyperlink createHyperlink = toolkit.createHyperlink(form.getBody(), "Eclipse Hyperlink", SWT.WRAP);
createHyperlink.setText("Eclipse Form Hyperlink");
// ImageHyperlink component.
ImageHyperlink createImageHyperlink = toolkit.createImageHyperlink(form.getBody(), SWT.WRAP);
createImageHyperlink.setText("Eclipse Form ImageHyperlink");
createImageHyperlink.setImage(Activator.getDefault().getImageRegistry().get(Activator.ECLIPSE_LOGO));
// Suite dans le prochain transparent
}
}
Classe SupportedComponentPart.java
du projet eclipseformsexample
Utilisation de fabriques
pour construire des
objets SWT

View Slide

20
Exemple (suite) : Composants supportés
// Label component.
toolkit.createLabel(form.getBody(), "Eclipse Form Label");
// Text component.
toolkit.createText(form.getBody(), "Eclipse Form Text", SWT.BORDER);
// Table component.
Table createTable = toolkit.createTable(form.getBody(), SWT
.FULL_SELECTION);
createTableViewer(createTable);
// Tree component.
Tree myTree = toolkit.createTree(form.getBody(), SWT.FULL_SELECTION);
createTreeViewer(myTree);
}
private void createTreeViewer(Tree myTree) {
final TreeViewer treeViewer = new TreeViewer(myTree);
...
}
private void createTableViewer(Table createTable) {
final TableViewer viewer = new TableViewer(createTable);
...
}
}
Utilisation des Viewers à partir des composants
natifs pour ajouter une touche Modèle / Vue
Classe SupportedComponentPart.java

View Slide

21
Eclipse Forms : Agents de placement
Lors de l’agencement des interfaces à base d’Eclipse Forms,
il est possible d’employer les agents de placement SWT
De façon à fournir une apparence Web deux nouveaux
agents de placement ont été ajoutés
TableWrapLayout : il s’agit d’un GridLayout avec possibilité de
retour à la ligne du contenu quand la place est manquante
ColumnLayout : il s’agit d’un RowLayout qui agence des composants
uniquement en colonne dans la mesure du possible
Ces nouveaux agents de placement peuvent être utilisés
en dehors d’interfaces Eclipse Forms, pour du « pur » SWT
La modification de l’agent de placement d’un
composant Form (Form et ScrolledForm) doit se
faire à partir du corps form.getBody().setLayout(…)

View Slide

22
Eclipse Forms : TableWrapLayout
L’agent de placement TableWrapLayout se comporte
comme GridLayout
Il permet en plus le retour à la ligne du contenu quand
l’espace client se réduit à la manière d’une page HTML
Il contrôle une grille avec la possibilité de fusionner des
cellules et de contraindre ou pas la largeur des cellules
TableWrapLayout() : une grille avec une colonne et les colonnes
n’auront pas la même taille
Paramétrages après sa construction
int numColumns : nombre de colonne
int horizontalSpacing et verticalSpacing : espace horizontal et
vertical entre les cellules
int leftMargin, rightMargin, topMargin et bottomMargin : espace sur
les bords du conteneur

View Slide

23
Possibilité de contraindre chaque composant par un objet
de type TableWrapData
TableWrapData(int align, int valign) : construit avec un style spécifié
pour alignement horizontal (align) et l’alignement vertical (valign)
TableWrapData peut être paramétré après sa construction
int colspan : nombre de colonne occupé
int rowspan : nombre de ligne occupée
Les différentes constantes utilisées
LEFT, CENTER, RIGHT, FILL et FILL_GRAB : utilisées pour
l’alignement horizontal
TOP, MIDDLE, BOTTOM, FILL et FILL_GRAB : utilisées pour
l’alignement vertical
L’alignement horizontal
et vertical doit être
précisé à la construction

View Slide

24
Exemple : TableWrapLayout en action
Lors de la réduction de la largeur de la vue,
le contenu de chaque label est
automatiquement mise en forme
Classe TableWrapLayoutPart.java du

View Slide

25
Exemple (suite) : TableWrapLayout en action
public class TableWrapLayoutPart extends ViewPart {
form.setText("TableWrapLayout Layout Example");
TableWrapLayout layout = new TableWrapLayout();
layout.verticalSpacing = 25;
Label label;
TableWrapData td;
label = toolkit.createLabel(form.getBody(), "What happened? Remember that we are ...", SWT.WRAP);
td = new TableWrapData();
td.colspan = 3;
label.setLayoutData(td);
...
}
}
Classe TableWrapLayoutPart.java du
Création de l’agent de placement
TableWrapLayout
TableWrapData fournit des
paramètres de TableWrapLayout
spécifique à label

View Slide

26
Eclipse Forms : ColumnLayout
L’agent de placement ColumnLayout se comporte comme
RowLayout
Il permet d’agencer des composants uniquement en colonne
dans la mesure du possible
Si pas assez de place débordement sur une nouvelle ligne
Il contrôle le nombre de colonne minimum et maximum qui
peut être créé
ColumnLayout() : création d’un ColumnLayout avec une colonne
minimum et trois colonnes maximums
Paramétrages après sa construction
int minNumColumns : nombre de colonne minimum
int maxNumColumns : nombre de colonne maximum

View Slide

27
Exemple : ColumnLayout en action
public class ColumnLayoutPart extends ViewPart {
form.setText("TableWrapLayout Layout Example");
ColumnLayout layout = new ColumnLayout();
layout.minNumColumns = 1;
layout.maxNumColumns = 2;
Label label;
ColumnLayoutData cld = new ColumnLayoutData();
label = toolkit
.createLabel(form.getBody(), "First Content used to demonstrate ColumnLayout", SWT.WRAP);
label.setLayoutData(cld);
label = toolkit.createLabel(form.getBody(),
"Second Content used to demonstrate ColumnLayout", SWT.WRAP);
label = toolkit
.createLabel(form.getBody(), "Third Content used to demonstrate ColumnLayout", SWT.WRAP);
cld = new ColumnLayoutData();
label.setLayoutData(cld);
}}
Classe ColumnLayoutPart.java du
1 colonne minimum et 2
colonnes maximum

View Slide

28
Exemple (suite) : ColumnLayout en action
Espace suffisante pour
créer 2 colonnes
Espace insuffisant pour
créer 2 colonnes
Même si l’espace est suffisant, la
troisième colonne n’est pas créée

View Slide

29
Eclipse Forms : ExpandableComposite
Le composant ExpandableComposite permet de réduire ou
déplier un composant de manière à masquer la complexité
de grandes interfaces
Le composant
ExpandableComposite est
constitué d’un titre
Une icône pour le rendu qui
indique si le composant est en
mode réduit ou déplié
Lorsque le composant
ExpandableComposite est
déplié, le composant client est
affiché (Control ou Composite)

View Slide

30
Un composant ExpandableComposite se construit
ExpandableComposite createExpandableComposite(Composite c, int
style) : création à partir d’un objet Toolkit
TWISTIE et TREE_NODE : icône pour le rendu qui indique si l’état
réduit ou déplié
CLIENT_INDENT : indentation par rapport au titre
EXPANDED : dans l’état déplié à la construction
NO_TITLE : pas de titre
Des méthodes pour modifier son comportement
void setText(String p) : modifie le titre
void setClient(Control client) : modifie le composant client
void addExpansionListener(IExpansionListener list) : ajout d’un
listener pour être informé du changement d’état (réduit ou déplié)

View Slide

31
Exemple : ExpandableComposite en action
public class ExpandableCompositePart extends ViewPart {
form.setText("Expandable Composite Example");
ExpandableComposite ec = toolkit.createExpandableComposite(form
.getBody(), ExpandableComposite.CLIENT_INDENT | ExpandableComposite.TREE_NODE);
ec.setText("This is the first Expandable composite title");
Composite expandableClient = toolkit.createComposite(ec);
expandableClient.setLayout(new GridLayout());
toolkit.createButton(expandableClient, "Radio 1", SWT.RADIO);
toolkit.createButton(expandableClient, "Radio 2", SWT.RADIO);
ec.setClient(expandableClient);
ec.addExpansionListener(new ExpansionAdapter() {
public void expansionStateChanged(ExpansionEvent e) {
form.reflow(true);
}
});
}
}
Classe ExpandableCompositePart.java
Création d’un
ExpandableComposite
avec un style particulier

View Slide

32
Eclipse Forms : Section
Le composant Section se comporte comme le composant
ExpandableComposite en ajoutant
une description au dessous du titre
une titre avec une apparence différente
Le composant Section est
constitué d’un titre décoré
Le composant Section est
constitué d’un composant
description (Control)
Lorsque le composant Section est déplié, le
composant client est affiché (Control ou
Composite)

View Slide

33
Eclipse Forms : Section
Exemple : Section en action
public class SectionCompositePart extends ViewPart {
form.setText("Section Composite Example");
Section section = toolkit.createSection(form.getBody(),
Section.DESCRIPTION | Section.TITLE_BAR | Section.TWISTIE
| Section.EXPANDED);
TableWrapData td = new TableWrapData(TableWrapData.FILL_GRAB);
section.setLayoutData(td);
section.setText("Section title");
section
.setDescription("This is the description that goes below the title");
Composite sectionClient = toolkit.createComposite(section);
sectionClient.setLayout(new GridLayout());
toolkit.createButton(sectionClient, "Radio 1", SWT.RADIO);
toolkit.createButton(sectionClient, "Radio 2", SWT.RADIO);
section.setClient(sectionClient);
}
}
Classe SectionCompositePart.java du
Si style DESCRIPTION est précisé,
une zone pour une description est
prévue sous le titre

View Slide

34
Eclipse Forms : PageBook
Le composant PageBook permet d’empiler plusieurs pages
(Composite) et de choisir celle qui sera visible
Ce composant est décrit par la classe ScrolledPageBook
Chaque page est un Composite qui peut contenir
directement des objets Control ou des objets Composite
Différents méthodes pour son utilisation
Composite createPage(Object key) : création d’une page identifiée
par key
Control getCurrentPage() : récupère la page en cours
void showPage(Object key) : affiche la page identifié par key

View Slide

35
Exemple : PageBook en action
public class PageBookPart extends ViewPart {
form.setText("PageBook Composite Example");
layout.topMargin = 0;
final ScrolledPageBook pageBook = toolkit.createPageBook(form.getBody(), SWT.BORDER);
Composite page1 = pageBook.createPage("page 1");
page1.setLayout(new GridLayout());
Composite sectionClient1 = toolkit.createComposite(page1);
sectionClient1.setLayout(new GridLayout());
toolkit.createButton(sectionClient1, "Radio 1", SWT.RADIO);
toolkit.createButton(sectionClient1, "Radio 2", SWT.RADIO);
GridData layoutData = new GridData(GridData.FILL_BOTH);
sectionClient1.setLayoutData(layoutData);
... // Suite dans le prochain transparent.
}
}
Classe PageBookPart.java du projet
eclipseformsexample
Création d’un composant
ScrolledPageBook

View Slide

36
Exemple (suite) : PageBook en action
public class PageBookPart extends ViewPart {
// Suite du précédent transparent
Composite page2 = pageBook.createPage("page 2");
page2.setLayout(new GridLayout());
Composite sectionClient2 = toolkit.createComposite(page2);
sectionClient2.setLayout(new GridLayout());
toolkit.createButton(sectionClient2, "Radio 1", SWT.CHECK);
toolkit.createButton(sectionClient2, "Radio 2", SWT.CHECK);
layoutData = new GridData(GridData.FILL_BOTH);
sectionClient2.setLayoutData(layoutData);
TableWrapData td = new TableWrapData(TableWrapData.FILL_GRAB);
td.heightHint = 80;
td.colspan = 2;
pageBook.setLayoutData(td);
pageBook.showPage("page 1");
final Button createButton = toolkit.createButton(form.getBody(), "Show Page 1", SWT.FLAT);
createButton.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent e) { pageBook.showPage("page 1"); }
});
final Button createButton2 = toolkit.createButton(form.getBody(), "Show Page 2", SWT.FLAT);
createButton2.addSelectionListener(new SelectionAdapter() {
public void widgetSelected(SelectionEvent e) { pageBook.showPage("page 2"); }
});
}
}
Classe PageBookPart.java du projet
eclipseformsexample
A l’ouverture de la vue, la page
identifiée par « page 1 » sera visible

View Slide

37
Eclipse Forms : FormText
Nous avons vu précédemment que pour créer du contenu
texte avec des liens hypertextes, on utilisait une
combinaison d’objets Label et Hyperlink
Cela peut devenir assez contraignant de manipuler des
composants SWT (répétition et lourdeur du code)
Le composant FormText permet de résoudre en offrant
Un rendu de texte (avec retour automatique à la ligne)
Une gestion automatique des liens hypertextes (tout mot débutant
par http:// est désigné comme URL)
Une prise en compte des balises proches du HTML
Le point d’entrée du composant FormText reste du texte
void setText(String text, boolean parseTags, boolean expandURLS) :
le contenu à afficher est défini dans text. Si parseTags vaut TRUE
les balises dans text sont prises en compte. Si expandURLS vaut
TRUE la gestion automatique des liens hypertextes est activée

View Slide

38
FormText peut traiter du contenu XML dont la balise racine
doit être form
Les balises suivantes peuvent être enfants de form
p : définit un paragraphe, l’attribut suivant est autorisé
vspace : si true espace vertical ajouté, si false pas d’espace
li : définit des listes d’élément, les attributs suivants sont autorisés
vspace : si true espace vertical ajouté, si false pas d’espace
style : le style de la puce bullet, text ou image
value : valeur pour le style uniquement pour text et image
indent : espace en pixel pour indenter le texte après la puce
bindent : espace en pixel pour indenter la puce

View Slide

39
Des sous balises à p et li peuvent être utilisées
img : afficher une image, l’attribut suivant est autorisé
href : référence de l’image (voir transparent suivant)
align : alignement de l’image par rapport au texte. Les valeurs
autorisées sont top, middle et bottom
a : afficher un lien, les attributs suivant sont autorisés
href : lien hypertexte envoyé à l’événement
nowrap : si true le lien peut être coupé
b et br : pour afficher le texte en gras et retour à la ligne
span : spécifie couleur et fonte du texte
color : référence de la couleur (voir transparent suivant)
font : référence de la fonte (voir transparent suivant)
nowrap : si true le texte peut être coupé
control : pour ajouter un control SWT (FormText étant le parent)
href : référence au control (voir transparent suivant)

View Slide

40
La particularité du composant FormText est de dissocier la
définition des ressources (Image, Couleur et Fonte) de la
structure de la page
La définition est réalisée par directement par l’API de
FormText ce qui permet d’utiliser des ressources déjà
définies dans le Workbench
void setImage(String key, Image img) : création d’une référence
d’une image identifiée par key
void setFont(String key, Font font) : création d’une référence d’une
fonte identifiée par key
void setColor(String key, Color color) : création d’une référence
d’une couleur identifiée par key
void setControl(String key, Control control) : création d’une
référence sur un Control SWT identifiée par key

View Slide

41
Exemple : FormText en action
Tout ce contenu est défini
dans un texte décoré de
balises HTML

Here is some plain text for the text to render; this text is at nowrap=\"true\">http://www.eclipse.org web site.
This text is in header font and color.
This line will contain some bold and some source text. We can also add
an image.
A default (bulleted) list item.
Another bullet list item.
A list item with text.
Another list item with text
List item with an image bullet
leading blanks; more white \n\n new lines
\n more bb white .

Utilisation d’une fonte et
d’une couleur spécifiques
Ajout de liens hypertextes
Des puces qui peuvent prendre
des apparences différentes

View Slide

42
Exemple (suite) : FormText en action
public class FormTextPart extends ViewPart {
...
StringBuffer buf = new StringBuffer();
buf.append("");
buf.append("Here is some plain text for the text to render; ");
buf.append("this text is at + "nowrap=\"true\">http://www.eclipse.org web site.");
buf.append("");
buf.append(""
+ "This text is in header font and color.");
buf.append("This line will contain some bold and "
+ "some source text. ");
buf.append("We can also add an image.");
buf.append("A default (bulleted) list item.");
buf.append("Another bullet list item.");
buf.append("A list item with text.");
buf.append("Another list item with text");
buf.append("List item with an image bullet");
buf.append(""
+ "A list item with text.");
buf.append(""
+ "A list item with text.");
buf.append(" leading blanks; more white \n\n new "
+ "lines
\n more bb white . ");
buf.append("");
// Suite dans le prochain transparent.
}
}
Classe FormTextPart.java du projet
eclipseformsexample
La fonte identifiée par
header est référencée
dans la suite

View Slide

43
Exemple (suite) : FormText en action
// Suite du précédent transparent
FormText formText = toolkit.createFormText(form.getBody(), true);
formText.setWhitespaceNormalized(false);
formText.setImage("image", Activator.getDefault().getImageRegistry()
.get(Activator.TINY_ECLIPSE_LOGO));
formText.setColor("header", toolkit.getColors().getColor(IFormColors.TITLE));
formText.setFont("header", JFaceResources.getHeaderFont());
formText.setFont("code", JFaceResources.getTextFont());
formText.setText(buf.toString(), true, false);
formText.addHyperlinkListener(new HyperlinkAdapter() {
public void linkActivated(HyperlinkEvent e) {
System.out.println("Link active: " + e.getHref());
}
});
}
}
eclipseformsexample
Les espaces « enchainés » ne
sont pas pris en comptes
Création d’une référence
Image identifiée par image
Création d’une référence
Color identifiée par header
Création de références
Font identifiées par
header et code
Ajout d’un écouteur sur les liens
hypertextes découverts par FormText

View Slide

44
Exemple : FormText et la gestion des espaces
...
formText.setWhitespaceNormalized(true);
...
}
}
eclipseformsexample
Prise en compte des
espaces successifs

View Slide

45
Exemple : FormText et l’intégration d’objets Control SWT
public class FormTextWithSWTControlPart extends ViewPart {
...
StringBuffer buf = new StringBuffer();
buf.append("");
buf.append("");
buf.append("Here is some plain text for the text to render; ");
buf.append("this text is at + "nowrap=\"true\">http://www.eclipse.org web site."
+ "");
buf.append("");
buf.append("");
buf.append("");
formText.setWhitespaceNormalized(false);
Button myButton = new Button(formText, SWT.FLAT);
myButton.setText("Bonjour");
formText.setControl("mybutton", myButton);
Table createTable = toolkit.createTable(formText, SWT.FULL_SELECTION);
createTableViewer(createTable);
formText.setControl("mytable", createTable);
formText.setText(buf.toString(), true, false);
}
}
Classe FormTextWithSWTControlPart.java du
Construction des
deux objets Control
dont le parent est
FormText
FormText ne gère pas la
destruction des objets
Control (dispose)
Dans le contenu
texte, liaison avec
deux objets Control

View Slide

46
Eclipse Forms : MasterDetailsBlock
Le composant MasterDetailsBlock est un patron de conception
orienté graphique qui permet de séparer un objet Form en
deux parties
Master : un composant Viewer offrant une sélection (ListViewer,
TableViewer, TreeViewer, …)
Details (DetailsPart) : un ensemble de propriétés (affichées par des
composants SWT) qui réagit à la sélection du Master
La partie Details est composé d’un ensemble de DetailsPage
Le choix de la DetailsPage est fonction de l’élément sélection-
né dans la partie Master
Les parties Master et Details sont contenues dans un
SashForm permettant à l’utilisateur de modifier la taille de
chaque partie

View Slide

47
Partie Master
Partie Details (DetailsPart)
Des actions peuvent être définies
spécifiquement pour le MasterDetailsBlock
A chaque modification de sélection de la partie
Master, choix de la DetailsPage et modification
de son contenu

View Slide

48
Un composant MasterDetailsBlock est défini par la classe
abstraite MasterDetailsBlock
Trois méthodes doivent être implémentées
void createMasterPart(IManagedForm mf, Composite parent) :
construction de l’IHM de la partie Master
void createToolBarActions(IManagedForm mf) : ajout des actions
spécifiques pour le MasterDetailsBlock
void registerPages(DetailsPart detailsPart) : ajout de nouveaux
objets DetailsPages dans le DetailsPart
Le composant MasterDetailsBlock nécessite l’utilisation d’un
objet IManagedForm
IManagedForm encapsule un composant Form et lui ajoute
des méthodes pour gérer son cycle de vie

View Slide

49
Exemple : Initialiser un composant MasterDetailsBlock
public class MasterDetailsBlockPart extends ViewPart {
public MasterDetailsBlockPart() {
}
@Override
form.setText("MasterDetails block Example");
MyMasterDetailsBlock refMasterDetailsBlock = new MyMasterDetailsBlock();
ManagedForm refManagedForm = new ManagedForm(toolkit, form);
refMasterDetailsBlock.createContent(refManagedForm);
}
@Override
public void setFocus() {
}
}
Classe MasterDetailsBlockPart.java du projet
eclipseformsexample
Construction d’un
MasterDetailsBlock (voir
implémentation dans la suite)
Construction d’un ManagedForm
à partir d’un Form
Associer le ManagedForm au
MasterDetailsBlock

View Slide

50
Exemple (suite) : Construire l’IHM de la partie Master
public class MyMasterDetailsBlock extends MasterDetailsBlock {
protected void createMasterPart(final IManagedForm managedForm, Composite parent) {
FormToolkit toolkit = managedForm.getToolkit();
Section section = toolkit.createSection(parent, Section.DESCRIPTION | Section.TITLE_BAR);
section.setText("Persons");
section.setDescription("The list contains objects from the model whose details are ...");
Composite client = toolkit.createComposite(section, SWT.WRAP);
Table t = toolkit.createTable(client, SWT.FULL_SELECTION);
...
toolkit.paintBordersFor(client);
section.setClient(client);
final SectionPart spart = new SectionPart(section);
managedForm.addPart(spart);
viewer = new TableViewer(t);
viewer.addSelectionChangedListener(new ISelectionChangedListener() {
public void selectionChanged(SelectionChangedEvent event) {
managedForm.fireSelectionChanged(spart, event.getSelection());
}
});
viewer.setContentProvider(new MyStructuredContentProvider());
viewer.setLabelProvider(new MyTableLabelProvider());
viewer.setInput(...);
}
...
}
Classe MyMasterDetailsBlock.java du projet
eclipseformsexample
Création d’une SectionPart pour
être gérée par ManagedForm
A chaque changement de la
sélection, la SelectionPart est
notifiée

View Slide

51
Exemple (suite) : Ajouter des actions
... Suite du précédent transparent.
protected void createToolBarActions(IManagedForm managedForm) {
final ScrolledForm form = managedForm.getForm();
Action haction = new Action("hor", Action.AS_RADIO_BUTTON) {
public void run() {
sashForm.setOrientation(SWT.HORIZONTAL);
form.reflow(true);
}
};
haction.setToolTipText("Horizontal Orientation");
haction.setImageDescriptor(Activator.getDefault().getImageRegistry()
.getDescriptor(Activator.IMG_HORIZONTAL));
Action vaction = new Action("ver", Action.AS_RADIO_BUTTON) {
public void run() {
sashForm.setOrientation(SWT.VERTICAL);
form.reflow(true);
}
};
vaction.setToolTipText("Vertical Orientation");
vaction.setImageDescriptor(Activator.getDefault().getImageRegistry()
.getDescriptor(Activator.IMG_VERTICAL));
form.getToolBarManager().add(haction);
form.getToolBarManager().add(vaction);
}
...
}
eclipseformsexample
Ajout des actions au
ManagedForm

View Slide

52
Exemple (suite) : Ajouter des DetailsPage
... Suite du précédent transparent.
protected void registerPages(DetailsPart detailsPart) {
detailsPart.registerPage(TablePerson.class, new MyDetailsPage(viewer));
}
}
eclipseformsexample
Quand l’élément sélectionné est de type
TablePerson la page MyDetailsPage sera
affichée dans la partie Details du
composant MasterDetailsBlock

View Slide

53
Un DetailsPage est utilisé pour construire les interfaces
utilisateur de la partie Details
Pour rappel la partie Details est composé d’un ensemble de
DetailsPage
Un DetailsPage est défini par l’interface IDetailsPage
void initialize(IManagedForm form) : appelée lors de la construction d’un
objet IDetailsPage et permet de stocker un objet IManagedForm
void createContents(Composite parent) : construction de l’IHM
void selectionChanged(IFormPart part, ISelection selection) : appelée quand
la partie Master a notifié d’un changement
La notification du changement est réalisée par la méthode
fireSelectionChanged(IFormPart, ISelection) d’un objet IManagedForm

View Slide

54
Exemple (suite) : Création d’un DetailsPage
public class MyDetailsPage implements IDetailsPage {
...
public void createContents(Composite parent) {
FormToolkit toolkit = mform.getToolkit();
Section s1 = toolkit.createSection(parent, Section.DESCRIPTION | Section.TITLE_BAR);
s1.setText("Person Edit Details");
s1.setDescription("Set the properties of the selected Person object.");
...
tabText = new Text[4];
tabText[0] = addNewLabelText(client, "Name", new ModifyListener() {
public void modifyText(ModifyEvent e) {
input.setName(tabText[0].getText());
ref.refresh(input);
}
});
...
toolkit.paintBordersFor(s1);
s1.setClient(client);
}
private Text addNewLabelText(Composite client, String name, ModifyListener ref) {
FormToolkit toolkit = mform.getToolkit();
toolkit.createLabel(client, name);
Text text = toolkit.createText(client, "", SWT.SINGLE); //$NON-NLS-1$
text.addModifyListener(ref);
GridData gd = new GridData(GridData.FILL_HORIZONTAL | GridData.VERTICAL_ALIGN_BEGINNING);
gd.widthHint = 10;
text.setLayoutData(gd);
createSpacer(toolkit, client, 10);
return text;
}
... // Suite dans le prochain transparent.
}
Classe MyDetailsPage.java du projet
eclipseformsexample
Cette méthode est utilisée pour
construire l’IHM de la DetailsPage
Chaque modification de l’IHM
impacte la partie modèle

View Slide

55
Exemple (suite) : Création d’un DetailsPage
public class MyDetailsPage implements IDetailsPage {
... // Suite du précédent transparent.
public void initialize(IManagedForm form) {
this.mform = form;
}
public void selectionChanged(IFormPart part, ISelection selection) {
IStructuredSelection ssel = (IStructuredSelection) selection;
if (ssel.size() == 1) {
input = (TablePerson)ssel.getFirstElement();
} else {
input = null;
}
update();
}
private void update() {
tabText[0].setText(input.getName());
tabText[1].setText(input.getFirstName());
tabText[2].setText(input.getSportName());
tabText[3].setText(Integer.toString(input.getOld()));
flag.setSelection(input.isVegetarian());
}
... // D’autres méthodes qui sont implémentées à vide.
}
Classe MyDetailsPage.java du projet
eclipseformsexample
Cette méthode est appelée, lors
de la modification de la sélection
de la partie Master
L’objet de la sélection de
type TablePerson est
conservé
Tous les éléments graphiques sont mis
à jour en fonction de nouvelles valeurs
contenues dans la sélection courante

View Slide

56
Eclipse Forms : Multi-page FormEditor
Un composant FormEditor permet d’ajouter des Forms dans
un MultiPageEditorPart
Pour rappel un MultiPageEditorPart est un éditeur avec
plusieurs pages où chaque page peut contenir
un éditeur (EditorPart) ou
un composant SWT
Un FormEditor permet d’ajouter des FormPage ayant le
comportement d’un EditorPart mais supportant les Forms
Une page contenant un éditeur
dont le contenu est représenté
via des Forms

View Slide

57
Exemple : Créer un FormEditor avec deux pages
public class SimpleFormEditor extends FormEditor {
public SimpleFormEditor() {
}
protected void addPages() {
try {
this.addPage(new FirstFormPage(this));
this.addPage(new SecondFormPage(this));
} catch (PartInitException e) {
e.printStackTrace();
}
}
public void doSave(IProgressMonitor monitor) {
}
public void doSaveAs() {
}
public boolean isSaveAsAllowed() {
return false;
}
}
Classe SimpleFormEditor.java du
Un FormEditor se comporte comme
un MultiPageEditorPart.
Des informations supplémentaires
sont disponibles dans le support de
cours sur les éditeurs
Deux pages ont été ajoutées au
FormEditor

View Slide

58
Exemple (suite) : Créer un FormEditor avec deux pages
public class FirstFormPage extends FormPage {
public FirstFormPage(FormEditor f) {
super(f, "first","FirstPage");
}
protected void createFormContent(IManagedForm managedForm) {
form.setText("First Page Content");
// Label component.
toolkit.createLabel(form.getBody(), "Eclipse Form Label");
}
}
public class SecondFormPage extends FormPage {
public SecondFormPage(FormEditor f) {
super(f, "second","SecondPage");
}
protected void createFormContent(IManagedForm managedForm) {
form.setText("Second Page Content");
// Button component with push style.
toolkit.createButton(form.getBody(), "Eclipse Form Button", SWT.PUSH);
}
}
Classe FirstFormPage.java du
Classe SecondFormPage.java du
projet Eclipseformsexample

View Slide

Eclipse : développement d'Eclipse Forms

Eclipse : développement d'Eclipse Forms

Mickael BARON

More Decks by Mickael BARON

Other Decks in Programming

Featured

Transcript