ECLIPSE RCP. Modèle d'application et SWT. Gaël QUEMENER Ifremer Février 2014 1/26

ECLIPSE RCP Modèle d'application et SWT Gaël QUEMENER Ifremer Février 2014 1/26

Table des matières 1.Créer une application Eclipse RCP...2 2. Lier une vue à une classe... 10 2.1 Exemple de code... 13 2.2 Event listener... 14 3. GridLayout... 15 4. Tableau... 16 4.1 Exemple de création d'un tableau de 128 lignes et 6 colonnes...17 4.2 Insertion d'images dans la ligne de titres...17 4.3 Récupérer la position du curseur de la souris dans le tableau...18 4.4 Editer un champ dans un tableau...20 5.Commands et Handlers... 22 6. Références... 25 6.1 Eclipse... 25 6.2 SWT... 25 1. Créer une application Eclipse RCP Créer un nouveau projet File->New->Other... 2/26

Figure 1: Création d'un nouveau projet Choisir un projet de type "Eclipse 4 Application Project" : 3/26

Figure 2: Projet "Eclipse 4 Application Project" Entrer comme Project Name : myfirstappli. Laisser les options comme dans la figure ci-dessous. 4/26

Figure 3: Nouveau projet plug-in Cliquer sur "Next". La page Contents apparait, vérifier que les paramètres sont semblables à ceux de la figure ci-dessous: 5/26

Figure 4: Content Laisser les paramètres par défaut dans la page e4 Application comme sur la figure ci-dessous: 6/26

Figure 5: Eclipse 4 Application Cliquer sur "Finish". Eclipse génère le projet. 7/26

On peut maintenant voir dans le Project explorer l'arborescence du projet : Figure 6: Représentation du projet dans le Package Explorer Double cliquer sur le fichier myfirstappli.product. On voit apparaitre la vue suivante : 8/26

Figure 7: Edition du fichier.product Cliquer sur Launch an Eclipse application. L'application est lancée : 9/26

Figure 8: Première application 2. Lier une vue à une classe Le but est de créer une classe java qui permettra d'ajouter des éléments graphiques à la vue dans le code. Dans le Package Explorer, cliquer droit sur le folder myfirstappli/src/myfirstappli et cliquer sur New-Class. On lui donne le nom SWTPart comme ci-dessous: 10/26

Figure 9: Création d'une nouvelle classe Cliquer sur Finish, et vérifier que le fichier SWTPart.java a bien été créé. Retourner sur la page de conficuration de la vue SWT dans Application.e4xmi, cliquer sur le bouton "Find" à droite du label "Class URI", commencer à taper "swt" dans le champ text. La complétion propose "myfirstappli.swtpart", la sélectionner comme ci-dessous, et cliquer sur OK: 11/26

Figure 10: Déclaration de la classe contribuant à une Part Retournez dans le code de SWTPart.java et faites évoluer le classe de la façon suivante : package myfirstappli; import java.awt.borderlayout; import javax.inject.inject; import org.eclipse.swt.swt; import org.eclipse.swt.awt.swt_awt; import org.eclipse.swt.browser.browser; import org.eclipse.swt.layout.griddata; import org.eclipse.swt.widgets.composite; public class SWTPart { @Inject public void init(composite parent) { Relancez l'application. final Browser b = new Browser(parent, SWT.NONE); b.seturl("www.youtube.com/"); 12/26

2.1 Exemple de code Reprenez le code de la méthode SWTPart.init: @Inject public void init(composite parent) { // creation de la grille GridLayout layout = new GridLayout(2, false); parent.setlayout(layout); // objet texte final Text text = new Text(parent, SWT.NONE); text.settext("www.google.com"); GridData data = new GridData(GridData.FILL, GridData.BEGINNING, true, false, 1, 1); text.setlayoutdata(data); // objet bouton Button button = new Button(parent, SWT.NONE); button.settext("go To"); data = new GridData(GridData.FILL, GridData.BEGINNING, false, false, 1, 1); button.setlayoutdata(data); Relancer l'application et regarder le résultat. Rajoutons le browser : String httpaddress="www.google.com"; @Inject 13/26

public void init(composite parent) { GridLayout layout = new GridLayout(2, false); parent.setlayout(layout); final Text text = new Text(parent, SWT.NONE); text.settext(httpaddress); GridData data = new GridData(GridData.FILL, GridData.BEGINNING, true, false, 1, 1); text.setlayoutdata(data); Button button = new Button(parent, SWT.NONE); button.settext("go To"); data = new GridData(GridData.FILL, GridData.BEGINNING, false, false, 1, 1); button.setlayoutdata(data); final Browser b = new Browser(parent, SWT.NONE); b.seturl(httpaddress); data = new GridData(GridData.FILL, GridData.FILL, true, true, 2, 1); b.setlayoutdata(data); 2.2 Event listener Le but est de récupérer un événement graphique. Dans notre cas, le but est de rafraîchir le browser quand on clique sur le bouton "Go To". Insérer le code suivant à la fin de la méthode init : button.addselectionlistener(new SelectionAdapter() { @Override public void widgetselected(selectionevent e) { // Handle the selection event System.out.println("Button pressed! "+text.gettext()); httpaddress=text.gettext(); b.seturl(httpaddress); ); 14/26

3. GridLayout Dans une grille 4x4, le but est de placer des boutons calés horizontalement à gauche, au centre, à droite, et sur la largeur de la cellule. On placera des boutons en haut, au centre, en bas, et sur toute la hauteur d'une case. Illustration 1: exemple GridLayout Déclarer : GridLayout layout = new GridLayout(4, false); L'attacher au Composite. Instancier un bouton. Lui affecter (button.setlayoutdata) un objet GridData(SWT.LEFT, SWT.TOP, true, true, 1, 1) public GridData(int horizontalalignment, int verticalalignment, 15/26

boolean grabexcesshorizontalspace, boolean grabexcessverticalspace, int horizontalspan, int verticalspan) Constructs a new instance of GridData according to the parameters. Parameters: horizontalalignment - how control will be positioned horizontally within a cell, one of: SWT.BEGINNING (or SWT.LEFT), SWT.CENTER, SWT.END (or SWT.RIGHT), or SWT.FILL verticalalignment - how control will be positioned vertically within a cell, one of: SWT.BEGINNING (or SWT.TOP), SWT.CENTER, SWT.END (or SWT.BOTTOM), or SWT.FILL grabexcesshorizontalspace - whether cell will be made wide enough to fit the remaining horizontal space grabexcessverticalspace - whether cell will be made high enough to fit the remaining vertical space horizontalspan - the number of column cells that the control will take up verticalspan - the number of row cells that the control will take up 4. Tableau Ajouter une seconde "Part" dans le fichier Application.e4xmi. Créer une classe pour gérer cette Part. 16/26

4.1 Exemple de création d'un tableau de 128 lignes et 6 colonnes public class Table1 { @Inject public void toto(composite shell){ Table table = new Table (shell, SWT.MULTI SWT.BORDER SWT.FULL_SELECTION); table.setlinesvisible (true); table.setheadervisible (true); GridData data = new GridData(SWT.FILL, SWT.FILL, true, true); data.heighthint = 200; table.setlayoutdata(data); String[] titles = {"Id", "Titre", "Description", "Auteur", "Répertoire", "Location"; for (int i=0; i<titles.length; i++) { TableColumn column = new TableColumn (table, SWT.NONE); column.settext (titles [i]); int count = 128; for (int i=0; i<count; i++) { TableItem item = new TableItem (table, SWT.NONE); item.settext (0, "x="+i); item.settext (1, "blabla"); item.settext (2, "what i want"); item.settext (3, "the one who wrote that data"); item.settext (4, "somewhere"); item.settext (5, "don't know"); for (int i=0; i<titles.length; i++) { table.getcolumn (i).pack (); 4.2 Insertion d'images dans la ligne de titres Utilisation de TableColumn.setImage(Image image); @Inject public void init(composite shell){ Image images[] = new Image[] { new Image(null, "C:\\Users\\gael\\Desktop\\cours eclipse\\uml.jpg"), new Image(null, "C:\\Users\\gael\\Desktop\\cours eclipse\\uml.jpg"), new Image(null, "C:\\Users\\gael\\Desktop\\cours eclipse\\uml.jpg"), new Image(null, "C:\\Users\\gael\\Desktop\\cours eclipse\\uml.jpg"), ; String[] titles = {"Information", "Error", "Question", "Warning"; String[] questions = {"who?", "what?", "where?", "when?", "why?"; 17/26

shell.setlayout(new GridLayout()); Table table = new Table (shell, SWT.MULTI SWT.BORDER SWT.FULL_SELECTION); GridData data = new GridData (SWT.FILL, SWT.FILL, true, true); data.heighthint = 200; table.setlayoutdata (data); table.setlinesvisible (true); table.setheadervisible (true); for (int i=0; i<titles.length; i++) { TableColumn column = new TableColumn (table, SWT.NONE); column.settext (titles [i]); column.setimage(images [i]); int count = 128; for (int i=0; i<count; i++) { TableItem item = new TableItem (table, SWT.NONE); item.settext (0, "some info"); item.settext (1, "error #" + i); item.settext (2, questions [i % questions.length]); item.settext (3, "look out!"); for (int i=0; i<titles.length; i++) { table.getcolumn (i).pack (); 4.3 Récupérer la position du curseur de la souris dans le tableau Récupérer le click de la souris par un addlistener Récupérer la zone graphique du tableau par getclientarea Récupérer la zone de chaque TableItem avec TableItem.getItem(...) Point size = table.computesize (SWT.DEFAULT, 200); table.setsize (size); table.addlistener (SWT.MouseDown, new Listener () { public void handleevent (Event event) { Rectangle clientarea = table.getclientarea (); Point pt = new Point (event.x, event.y); int index = table.gettopindex (); while (index < table.getitemcount ()) { boolean visible = false; TableItem item = table.getitem (index); for (int i=0; i < 6; i++) { Rectangle rect = item.getbounds (i); if (rect.contains (pt)) { System.out.println ("Item " + index 18/26

+ "-" + i); (clientarea)) { ); table.setselection(i); if (!visible && rect.intersects visible = true; if (!visible) return; index++; 19/26

4.4 Editer un champ dans un tableau Dans un org.eclipse.swt.widgets.table, déclarer 3 TableColumn. Instancier les TableItems Utilisation de la classe org.eclipse.swt.custom.tableeditor Ajouter un listener au Table de la façon suivante: SWT.NONE); e) { shell.setlayout (new FillLayout ()); final Table table = new Table(shell, SWT.BORDER SWT.MULTI); table.setlinesvisible (true); for (int i=0; i<3; i++) { TableColumn column = new TableColumn (table, SWT.NONE); column.setwidth(100); for (int i=0; i<3; i++) { TableItem item = new TableItem (table, SWT.NONE); item.settext(new String [] {"" + i, "" + i, "" + i); final TableEditor editor = new TableEditor (table); editor.horizontalalignment = SWT.LEFT; editor.grabhorizontal = true; table.addlistener (SWT.MouseDown, new Listener () { public void handleevent (Event event) { Rectangle clientarea = table.getclientarea (); Point pt = new Point (event.x, event.y); int index = table.gettopindex (); while (index < table.getitemcount ()) { boolean visible = false; final TableItem item = table.getitem (index); for (int i=0; i<table.getcolumncount (); i++) { Rectangle rect = item.getbounds (i); if (rect.contains (pt)) { final int column = i; final Text text = new Text (table, (column, text.gettext ()); Listener textlistener = new Listener () { public void handleevent (final Event switch (e.type) { case SWT.FocusOut: item.settext text.dispose (); break; case SWT.Traverse: switch (e.detail) 20/26

{ SWT.TRAVERSE_RETURN: item.settext (column, text.gettext ()); LL THROUGH SWT.TRAVERSE_ESCAPE: text.dispose (); case case //FA e.doit = false; textlistener); textlistener); ); break; ; text.addlistener (SWT.FocusOut, text.addlistener (SWT.Traverse, editor.seteditor (text, item, i); text.settext (item.gettext (i)); text.selectall (); text.setfocus (); return; if (!visible && rect.intersects (clientarea)) { visible = true; if (!visible) return; index++; 21/26

5. Commands et Handlers Command : déclaration abstraite d'une action (par exemple Save, Open, Quit). Handler : définit le comportement de la commande (la liaison entre la command et le handler est faite dans le fichier e4xmi, tag conributionuri). Définir dans le menu un item "New Tab": Créer une commande "newtabcommand". 22/26

Créer un handler relié à "newtabcommand" 23/26

Créer une classe java NewTabHandler package projet01.handlers; import java.util.list; import javax.inject.named; import org.eclipse.e4.core.di.annotations.execute; import org.eclipse.e4.ui.model.application.mapplication; import org.eclipse.e4.ui.model.application.ui.melementcontainer; import org.eclipse.e4.ui.model.application.ui.advanced.mperspective; import org.eclipse.e4.ui.model.application.ui.advanced.impl.perspectivestackimpl; import org.eclipse.e4.ui.model.application.ui.basic.mbasicfactory; import org.eclipse.e4.ui.model.application.ui.basic.mpart; import org.eclipse.e4.ui.model.application.ui.basic.mpartsashcontainer; import org.eclipse.e4.ui.model.application.ui.basic.mpartstack; import org.eclipse.e4.ui.model.application.ui.basic.mwindow; import org.eclipse.e4.ui.model.application.ui.basic.mwindowelement; import org.eclipse.e4.ui.services.iserviceconstants; import org.eclipse.e4.ui.workbench.modeling.emodelservice; import org.eclipse.jface.dialogs.messagedialog; import org.eclipse.swt.widgets.shell; public class NewTabHandler { @Execute public void execute(mapplication application, EModelService service) { MPart part = MBasicFactory.INSTANCE.createPart(); part.setlabel("new part"); part.setcontributionuri("platform:/plugin/projet01/projet01.newpart"); List<MPartStack> findelements = service.findelements(application, "mypartstack",mpartstack.class, null); System.out.println("Found part PartStack(s) : " + findelements.size()); findelements.get(0).getchildren().add(part); 24/26

6. Références 6.1 Eclipse www.eclipse.org Eclipse 4 RCP wiki: http://wiki.eclipse.org/eclipse4/rcp Eclipse 4 RCP FAQ: http://wiki.eclipse.org/eclipse4/rcp/faq Eclipse 4 wiki tutorials http://wiki.eclipse.org/eclipse4/tutorials Lars Vogel Tutorial : http://www.vogella.com/articles/eclipsercp/article.html Eclipse 4 wiki Injection de dépendances : http://wiki.eclipse.org/eclipse4/rcp/dependency_injection La "bible" Eclipse 4 : Eclipse 4 RCP: The complete guide to Eclipse application development Lars Vogel ISBN-10: 3943747077 ISBN-13: 978-3943747034 http://www.amazon.fr/eclipse-rcp-complete-application-development/dp/3943747077/ 6.2 SWT Description des widgets: http://www.eclipse.org/swt/widgets/ Exemples de code SWT : 25/26

http://www.eclipse.org/swt/snippets/ Comprendre les layouts dans SWT : http://www.eclipse.org/articles/article.php?file=article-understanding-layouts/index.html Lars Vogel SWT tutorial : http://www.vogella.com/articles/swt/article.html FIN DU DOCUMENT 26/26