Eclipse : développement d'Eclipse Forms

Développement de clients riches : Plateforme Eclipse Mickaël BARON -
2010 mailto:baron.mickael@gmail.com ou mailto:baron@ensma.fr mickael-baron.fr mickaelbaron Chapitre 3 : Conception de plug-ins Workbench : Eclipse Forms

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

3 À propos de l’auteur … Mickaël BARON Ingénieur de Recherche au LIAS https://www.lias-lab.fr Equipe : Ingénierie des Données et des Modèles Responsable des plateformes logicielles, « coach » technique Ancien responsable Java de Developpez.com (2011-2021) Communauté Francophone dédiée au développement informatique https://java.developpez.com 4 millions de visiteurs uniques et 12 millions de pages vues par mois 750 00 membres, 2000 forums et jusqu'à 5000 messages par jour mickael-baron.fr mickaelbaron

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

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 mickael-baron.fr/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

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

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

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

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

Eclipse Forms : FormToolkit 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

Eclipse Forms : FormToolkit Exemple : Composants SWT sans FormToolkit package eclipse.workbench.eclipseformsexample.views; public class NativeSWTPart extends ViewPart { public NativeSWTPart() { } public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("Native SWT components with Eclipse Forms"); toolkit.decorateFormHeading(form.getForm()); 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

Eclipse Forms : FormToolkit Exemple : Composants SWT avec FormToolkit package eclipse.workbench.eclipseformsexample.views; public class NoNativeSWTPart extends ViewPart { public NoNativeSWTPart() { } public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("FormTookit SWT components with Eclipse Forms"); toolkit.decorateFormHeading(form.getForm()); GridLayout layout = new GridLayout(); layout.numColumns = 2; form.getBody().setLayout(layout); 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

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

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

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

Eclipse Forms : customiser Form et ScrolledForm 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 …

Eclipse Forms : customiser Form et ScrolledForm Exemple : Customisation de l’en-tête d’un Form package eclipse.workbench.eclipseformsexample.views; public class FormCustomizationPart extends ViewPart { public FormCustomizationPart() { } public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); final ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("Form Customization"); toolkit.decorateFormHeading(form.getForm()); 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 projet eclipseformsexample Création d’un bouton dans la zone client de l’en-tête

Eclipse Forms : customiser Form et ScrolledForm 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 projet eclipseformsexample 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

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(…)

Eclipse Forms : Composants supportés Exemple : Composants supportés package eclipse.workbench.eclipseformsexample.views; public class SupportedComponentPart extends ViewPart { public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("All Eclipse Form Supported Components"); toolkit.decorateFormHeading(form.getForm()); GridLayout layout = new GridLayout(); layout.numColumns = 1; form.getBody().setLayout(layout); // 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

Eclipse Forms : Composants supportés 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 du projet eclipseformsexample

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(…)

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

Eclipse Forms : TableWrapLayout 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

Eclipse Forms : TableWrapLayout 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 projet eclipseformsexample

Eclipse Forms : TableWrapLayout Exemple (suite) : TableWrapLayout en action package eclipse.workbench.eclipseformsexample.views; public class TableWrapLayoutPart extends ViewPart { public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("TableWrapLayout Layout Example"); toolkit.decorateFormHeading(form.getForm()); TableWrapLayout layout = new TableWrapLayout(); layout.verticalSpacing = 25; form.getBody().setLayout(layout); layout.numColumns = 3; 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 projet eclipseformsexample Création de l’agent de placement TableWrapLayout TableWrapData fournit des paramètres de TableWrapLayout spécifique à label

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

Eclipse Forms : ColumnLayout Exemple : ColumnLayout en action package eclipse.workbench.eclipseformsexample.views; public class ColumnLayoutPart extends ViewPart { public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("TableWrapLayout Layout Example"); toolkit.decorateFormHeading(form.getForm()); ColumnLayout layout = new ColumnLayout(); layout.minNumColumns = 1; layout.maxNumColumns = 2; form.getBody().setLayout(layout); 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 projet eclipseformsexample 1 colonne minimum et 2 colonnes maximum

Eclipse Forms : ColumnLayout 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

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)

Eclipse Forms : ExpandableComposite 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é)

Eclipse Forms : ExpandableComposite Exemple : ExpandableComposite en action package eclipse.workbench.eclipseformsexample.views; public class ExpandableCompositePart extends ViewPart { public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); final ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("Expandable Composite Example"); toolkit.decorateFormHeading(form.getForm()); TableWrapLayout layout = new TableWrapLayout(); form.getBody().setLayout(layout); 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 du projet eclipseformsexample Création d’un ExpandableComposite avec un style particulier

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)

Eclipse Forms : Section Exemple : Section en action package eclipse.workbench.eclipseformsexample.views; public class SectionCompositePart extends ViewPart { public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); final ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("Section Composite Example"); toolkit.decorateFormHeading(form.getForm()); TableWrapLayout layout = new TableWrapLayout(); form.getBody().setLayout(layout); 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 projet eclipseformsexample Si style DESCRIPTION est précisé, une zone pour une description est prévue sous le titre

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

Eclipse Forms : PageBook Exemple : PageBook en action package eclipse.workbench.eclipseformsexample.views; public class PageBookPart extends ViewPart { public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); final ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("PageBook Composite Example"); toolkit.decorateFormHeading(form.getForm()); TableWrapLayout layout = new TableWrapLayout(); layout.numColumns = 2; layout.topMargin = 0; form.getBody().setLayout(layout); 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

Eclipse Forms : PageBook Exemple (suite) : PageBook en action package eclipse.workbench.eclipseformsexample.views; public class PageBookPart extends ViewPart { public void createPartControl(Composite parent) { // 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

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

Eclipse Forms : FormText 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

Eclipse Forms : FormText 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)

Eclipse Forms : FormText 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

Eclipse Forms : FormText Exemple : FormText en action Tout ce contenu est défini dans un texte décoré de balises HTML <form> Here is some plain text for the text to render; this text is at <a href=\"http://www.eclipse.org\" nowrap=\"true\">http://www.eclipse.org</a> web site. This text is in header font and color. This line will contain some bold and some source text. We can also add <img href=\"image\"/> an image. <li>A default (bulleted) list item.</li> <li>Another bullet list item.</li> <li style=\"text\" value=\"1.\">A list item with text.</li> <li style=\"text\" value=\"2.\">Another list item with text</li> <li style=\"image\" value=\"image\">List item with an image bullet</li> <li style=\"text\" bindent=\"20\" indent=\"40\" value=\"3.\"> A list item with text.</li> <li style=\"text\" bindent=\"20\" indent=\"40\" value=\"4.\"> A list item with text.</li> leading blanks; more white \n\n new lines \n more bb white . </form> Utilisation d’une fonte et d’une couleur spécifiques Ajout de liens hypertextes Des puces qui peuvent prendre des apparences différentes

Eclipse Forms : FormText Exemple (suite) : FormText en action package eclipse.workbench.eclipseformsexample.views; public class FormTextPart extends ViewPart { public void createPartControl(Composite parent) { ... StringBuffer buf = new StringBuffer(); buf.append("<form>"); buf.append("Here is some plain text for the text to render; "); buf.append("this text is at <a href=\"http://www.eclipse.org\" " + "nowrap=\"true\">http://www.eclipse.org</a> 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 <img href=\"image\"/> an image."); buf.append("<li>A default (bulleted) list item.</li>"); buf.append("<li>Another bullet list item.</li>"); buf.append("<li style=\"text\" value=\"1.\">A list item with text.</li>"); buf.append("<li style=\"text\" value=\"2.\">Another list item with text</li>"); buf.append("<li style=\"image\" value=\"image\">List item with an image bullet</li>"); buf.append("<li style=\"text\" bindent=\"20\" indent=\"40\" value=\"3.\">" + "A list item with text.</li>"); buf.append("<li style=\"text\" bindent=\"20\" indent=\"40\" value=\"4.\">" + "A list item with text.</li>"); buf.append(" leading blanks; more white \n\n new " + "lines \n more bb white . "); buf.append("</form>"); // 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

Eclipse Forms : FormText Exemple (suite) : FormText en action package eclipse.workbench.eclipseformsexample.views; public class FormTextPart extends ViewPart { public void createPartControl(Composite parent) { // 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()); } }); } } Classe FormTextPart.java du projet 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

Eclipse Forms : FormText Exemple : FormText et la gestion des espaces package eclipse.workbench.eclipseformsexample.views; public class FormTextPart extends ViewPart { public void createPartControl(Composite parent) { ... FormText formText = toolkit.createFormText(form.getBody(), true); formText.setWhitespaceNormalized(true); ... } } Classe FormTextPart.java du projet eclipseformsexample Prise en compte des espaces successifs

Eclipse Forms : FormText Exemple : FormText et l’intégration d’objets Control SWT package eclipse.workbench.eclipseformsexample.views; public class FormTextWithSWTControlPart extends ViewPart { public void createPartControl(Composite parent) { ... StringBuffer buf = new StringBuffer(); buf.append("<form>"); buf.append(""); buf.append("Here is some plain text for the text to render; "); buf.append("this text is at <a href=\"http://www.eclipse.org\" " + "nowrap=\"true\">http://www.eclipse.org</a> web site." + "<control href=\"mybutton\"/>"); buf.append("<control href=\"mytable\"/>"); buf.append(""); buf.append("</form>"); FormText formText = toolkit.createFormText(form.getBody(), true); 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 projet eclipseformsexample 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

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

Eclipse Forms : MasterDetailsBlock 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

Eclipse Forms : MasterDetailsBlock 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

Eclipse Forms : MasterDetailsBlock Exemple : Initialiser un composant MasterDetailsBlock package eclipse.workbench.eclipseformsexample.views; public class MasterDetailsBlockPart extends ViewPart { public MasterDetailsBlockPart() { } @Override public void createPartControl(Composite parent) { FormToolkit toolkit = new FormToolkit(parent.getDisplay()); ScrolledForm form = toolkit.createScrolledForm(parent); form.setText("MasterDetails block Example"); toolkit.decorateFormHeading(form.getForm()); 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

Eclipse Forms : MasterDetailsBlock Exemple (suite) : Construire l’IHM de la partie Master package eclipse.workbench.eclipseformsexample.views; 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

Eclipse Forms : MasterDetailsBlock Exemple (suite) : Ajouter des actions package eclipse.workbench.eclipseformsexample.views; public class MyMasterDetailsBlock extends MasterDetailsBlock { ... 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); } ... } Classe MyMasterDetailsBlock.java du projet eclipseformsexample Ajout des actions au ManagedForm

Eclipse Forms : MasterDetailsBlock Exemple (suite) : Ajouter des DetailsPage package eclipse.workbench.eclipseformsexample.views; public class MyMasterDetailsBlock extends MasterDetailsBlock { ... Suite du précédent transparent. protected void registerPages(DetailsPart detailsPart) { detailsPart.registerPage(TablePerson.class, new MyDetailsPage(viewer)); } } Classe MyMasterDetailsBlock.java du projet eclipseformsexample Quand l’élément sélectionné est de type TablePerson la page MyDetailsPage sera affichée dans la partie Details du composant MasterDetailsBlock

Eclipse Forms : MasterDetailsBlock 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

Eclipse Forms : MasterDetailsBlock Exemple (suite) : Création d’un DetailsPage package eclipse.workbench.eclipseformsexample.views; 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

Eclipse Forms : MasterDetailsBlock Exemple (suite) : Création d’un DetailsPage package eclipse.workbench.eclipseformsexample.views; 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

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

Eclipse Forms : Multi-page FormEditor 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 projet eclipseformsexample 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

Eclipse Forms : Multi-page FormEditor 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) { FormToolkit toolkit = managedForm.getToolkit(); final ScrolledForm form = managedForm.getForm(); form.setText("First Page Content"); toolkit.decorateFormHeading(form.getForm()); GridLayout layout = new GridLayout(); layout.numColumns = 1; form.getBody().setLayout(layout); // 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) { FormToolkit toolkit = managedForm.getToolkit(); final ScrolledForm form = managedForm.getForm(); form.setText("Second Page Content"); toolkit.decorateFormHeading(form.getForm()); GridLayout layout = new GridLayout(); layout.numColumns = 1; form.getBody().setLayout(layout); // Button component with push style. toolkit.createButton(form.getBody(), "Eclipse Form Button", SWT.PUSH); } } Classe FirstFormPage.java du projet eclipseformsexample Classe SecondFormPage.java du projet Eclipseformsexample

Eclipse : développement d'Eclipse Forms

Eclipse : développement d'Eclipse Forms

More Decks by Mickael BARON

Other Decks in Programming

Featured

Transcript