Das Dokument ist ein Tutorial über das Graphical Editor Framework (GEF), das als Grundlage für die Entwicklung grafischer Editoren in IBM-Produkten und Open Source-Anwendungen verwendet wird. Es werden verschiedene Aspekte des GEF behandelt, einschließlich seiner Architektur, der Erstellung maßgeschneiderter Editoren und praktischer Übungen. Zudem werden Empfehlungen für die Vorgehensweise, Ressourcen und Beispiele angeboten.

1. Einführung in das Graphical Editor Framework Tutorial, iX-Konferenz 2005.1 13.6.2005, nh-Hotel, Heidelberg Dr. Boris Bokowski <bokowski@acm.org>

2. GEF – Graphical Editor Framework Existiert seit ca. fünf Jahren Ursprünglich com.ibm.etools.gef, dann org.eclipse.gef Basis für graphische Editoren in IBM-Produkten (z.B. WSAD) Wird zunehmend in Open Source- und kommerziellen Produkten verwendet Einbindung in Eclipse Einbindung in das Top-Level-Projekt &quot;Eclipse Tools&quot; Versionsnummern sind synchron zu Eclipse Platform Aktuelle Version: 3.0.1 Nächste Version: 3.1, Mitte 2005 Releases in der Regel eine Woche nach Eclipse Platform Maßgeschneiderte grafische Editoren mit GEF Kontext © 2005 by Boris Bokowski; made available under the EPL v1.0

3. Graphical Editor Framework Screenshots © 2005 by Boris Bokowski; made available under the EPL v1.0

4. Set-Up Features von GEF Hello, World Architektur von GEF Hands-On: Schrittweise Weiterentwicklung von Hello World Hands-On: Ein fertiger Beispieleditor Maßgeschneiderte grafische Editoren mit GEF Gliederung © 2005 by Boris Bokowski; made available under the EPL v1.0

5. Set-Up Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0

6. Eclipse 3.1 RC2 eclipse-SDK-3.1RC2-win32.zip entpacken, z.B. nach C:\GEF-Tutorial (Optional: JRE jre.zip entpacken, nach C:\ GEF-Tutorial\eclipse) Workspace: GEF, GEF-Examples, Tutorial-Projekte workspace.zip entpacken, nach C:\GEF-Tutorial Eclipse starten C:\GEF-Tutorial\eclipse\eclipse.exe Als Workspace auswählen: C:\GEF-Tutorial\workspace Häkchen bei Default Welcome-View schließen Maßgeschneiderte grafische Editoren mit GEF Set-Up © 2005 by Boris Bokowski; made available under the EPL v1.0

7. Maßgeschneiderte grafische Editoren mit GEF Set-Up – Import von Plug-Ins Inkrementellen Compiler temporär ausschalten

8. Import der vorbereiteten Projekte File->Import… Maßgeschneiderte grafische Editoren mit GEF Set-Up © 2005 by Boris Bokowski; made available under the EPL v1.0 1 4 3 2

9. Close Projects Inkrementellen Compiler wieder anschalten Maßgeschneiderte grafische Editoren mit GEF Set-Up © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2

10. Features Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0

11. Empfehlungen zum Vorgehen Was ist einfach, was ist aufwändig © 2005 by Boris Bokowski; made available under the EPL v1.0 Accessibility Zoom Overview Undo/Redo Printing Menu Tools Handles Direct Edit Grid, Snap Palette Animation Nesting Layers Connections Shapes Ruler Layout Integration

12. Features Shapes Example © 2005 by International Business Machines; made available under the EPL v1.0 Connections Shapes Integration

13. Features Flow Example © 2005 by International Business Machines; made available under the EPL v1.0 Animation Nesting Layout Tools

14. Features Logic Example © 2005 by International Business Machines; made available under the EPL v1.0 Zoom Undo/Redo Palette Ruler

15. Features METUS © 2005 by Boris Bokowski; made available under the EPL v1.0 Accessibility Handles Direct Edit Layers

16. GEF-Examples ausprobieren Run->Run… Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2 3 4

17. File->New->Project… &quot;Testprojekt&quot; eingeben, Finish File->New->Example… Window->Show View->Other…, Basic->Palette Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0

18. Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0

19. Demo Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0

20. Hello, World Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0

21. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2 3 4

22. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 5 6 7

23. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 8 9 10

24. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 package de.eclipseteam.geftutorial.simple.views; import org.eclipse.swt.widgets.Composite; import org.eclipse.ui.part.ViewPart; public class SampleView extends ViewPart { public void createPartControl(Composite parent) { // TODO Auto-generated method stub } public void setFocus() { // TODO Auto-generated method stub } }

25. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2 3 4

26. Maßgeschneiderte grafische Editoren mit GEF Hello, World public class SampleView extends ViewPart { private GraphicalViewer graphicalViewer; public void createPartControl(Composite parent) { graphicalViewer = new GraphicalViewerImpl(); graphicalViewer.createControl(parent); graphicalViewer.setEditDomain(new EditDomain()); graphicalViewer.setEditPartFactory(new EditPartFactory() { …… }); graphicalViewer.setContents(new Object()); } public void setFocus() { } } © 2005 by Boris Bokowski; made available under the EPL v1.0

27. Maßgeschneiderte grafische Editoren mit GEF Hello, World public EditPart createEditPart(EditPart context, Object model) { EditPart result = new AbstractGraphicalEditPart() { protected IFigure createFigure() { return new Label(&quot;Hello, World&quot;); } protected void createEditPolicies() { } }; result.setModel(model); return result; } © 2005 by Boris Bokowski; made available under the EPL v1.0

28. Architektur Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0

29. Architektur Plug-In-Abhängigkeiten GEF ui.views RCP Platform Runtime © 2005 by International Business Machines; made available under the EPL v1.0 SWT Draw2D

30. Architektur Schichten Interaction Layer Model-to-View mapping Workbench Integration Rendering Layout Scaling Native (SWT) Layer © 2005 by International Business Machines; made available under the EPL v1.0

31. Architektur Model-View-Controller Model Figure Events / Requests © 2005 by Boris Bokowski; made available under the EPL v1.0 EditPart Commands Notification Refresh

32. Architektur Modell Keine Annahmen in GEF, was das Modell angeht. Sinnvoll sind: Notification bzw. Observer-Pattern Command-Pattern Persistenz Keine Abhängigkeit zu Controller oder View Möglichkeiten: Java Beans, PropertyChangeSupport Eclipse Modeling Framework (EMF) © 2005 by Boris Bokowski; made available under the EPL v1.0

33. Architektur View View-Klassen Vieles in Draw2D vorhanden Ansonsten Unterklasse von org.eclipse.draw2d.Figure Draw2D Toolkit auf der Basis von SWT Figure, Layout, Layer, Scrolling, Events, … Kann unabhängig von GEF verwendet werden © 2005 by Boris Bokowski; made available under the EPL v1.0

34. Architektur Figures (Draw2D) 1 3 6 4 5 1 2 2 3 4 5 6 © 2005 by International Business Machines; made available under the EPL v1.0

35. Architektur Layouts (Draw2D) Top BorderLayout FlowLayout Bottom Left Right Center 1 2 3 4 ToolbarLayout XYLayout 12,8,20,10 30,20,27,14 1 2 3 © 2005 by International Business Machines; made available under the EPL v1.0

36. Architektur Controller EditPart (i.d.R.) ein EditPart-Objekt pro Modell-Objekt Genauer: ein EditPart-Objekt pro Einheit, die für sich selektierbar / editierbar / löschbar sein soll Zuständigkeiten Erzeugung des Figure-Objekts Bestimmung der enthaltenen Objekte Aktualisierung des Figure-Objekts bei Modelländerungen Umsetzung von Requests in Commands Erzeugung von EditParts durch eine Factory © 2005 by Boris Bokowski; made available under the EPL v1.0

37. Architektur Erzeugung von EditParts Model GraphicalViewer EditParts Figures EditPart Factory © 2005 by International Business Machines; made available under the EPL v1.0 @#!

38. Hands-On Schrittweise Erweiterung von Hello, World Schritt 1:  Schritt 2: Liste von Strings Schritt 3: Editierbarkeit (Verschieben) Schritt 4: Editierbarkeit (Nesting) Schritt 5: … Schritt 6: Überraschung! © 2005 by Boris Bokowski; made available under the EPL v1.0

39. Architektur Kontrollfluss im Detail SWT Events Requests Commands SWT Canvas © 2005 by International Business Machines; made available under the EPL v1.0 Tool EditPart EditPart EditPolicy EditPolicy EditPolicy Requests Commands Stack Commands ?

40. Hands-On Schrittweise Erweiterung von Hello, World Schritt 1:  Schritt 2: Liste von Strings Schritt 3: Editierbarkeit (Verschieben) Schritt 4: Editierbarkeit (Nesting) Schritt 5: BulletBorder Schritt 6: Outline Editor! © 2005 by Boris Bokowski; made available under the EPL v1.0

41. Architektur Sonstiges Connections Sind grundsätzlich gerichtet Start- und Endpunkt sind Anchor-Objekte Commands Undo/Redo CommandStack Palette Enthält Tools Gruppiert in Ordnern U.v.m… © 2005 by Boris Bokowski; made available under the EPL v1.0

42. Empfehlungen zum Vorgehen Cheat Sheet Unterklasse von GraphicalEditor EditDomain, EditPartFactory, Top-Level-Modellobjekt setzen Pro EditPart: Erzeugung des Objekts in der EditPartFactory createFigure() Figure erzeugen refreshVisuals() Figure aktualisieren getModelChildren() Nesting activate(), deactivate() Notification einrichten createEditPolicies() Editierbarkeit konfigurieren (Command-Objekte erzeugen) Für Connections: getModelSourceConnections() ausgehende Verbindungen getModelTargetConnections() eingehende Verbindungen createEditPolicies() Palette, Tools, Handles, Drag and Drop, … © 2005 by Boris Bokowski; made available under the EPL v1.0

43. Empfehlungen zum Vorgehen Informationsquellen High-Level-Overview GEF-Tutorial von der EclipseCon 2005 GefDescription auf eclipsewiki Anleitungen &quot;Maßgeschneiderte grafische Editoren&quot;, Boris Bokowski, Frank Gerhardt Eclipse Magazin Vol. 2 Artikel auf www.eclipse.org &quot;A Shape Diagram Editor&quot;, Bo Majewski (Cisco) &quot;Using GEF with EMF&quot;, Chris Aniszczyk (IBM) &quot;Building a Database Schema Diagram Editor with GEF&quot;, Phil Zoio (Realsolve Solutions) Buch SWT in Action (Manning), enthält ca. 50 Seiten zu GEF (Anhang) © 2005 by Boris Bokowski; made available under the EPL v1.0

44. Fragen? Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0