Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Einführung in das Graphical Editor Framework Tutorial, iX-Konferenz 2005.1 13.6.2005, nh-Hotel, Heidelberg Dr. Boris Bokow...
<ul><li>GEF – Graphical Editor Framework </li></ul><ul><ul><li>Existiert seit ca. fünf Jahren </li></ul></ul><ul><ul><li>U...
Graphical Editor Framework Screenshots © 2005 by Boris Bokowski; made available under the EPL v1.0
<ul><li>Set-Up </li></ul><ul><li>Features von GEF </li></ul><ul><li>Hello, World </li></ul><ul><li>Architektur von GEF </l...
<ul><li>Set-Up </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EP...
<ul><li>Eclipse 3.1 RC2 </li></ul><ul><ul><li>eclipse-SDK-3.1RC2-win32.zip entpacken, z.B. nach C:GEF-Tutorial </li></ul><...
Maßgeschneiderte grafische Editoren mit GEF Set-Up – Import von Plug-Ins <ul><li>Inkrementellen Compiler temporär ausschal...
<ul><li>Import der vorbereiteten Projekte </li></ul><ul><ul><li>File->Import… </li></ul></ul>Maßgeschneiderte grafische Ed...
<ul><li>Close Projects </li></ul><ul><li>Inkrementellen Compiler wieder anschalten </li></ul>Maßgeschneiderte grafische Ed...
<ul><li>Features </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the ...
Empfehlungen zum Vorgehen  Was ist einfach, was ist aufwändig © 2005 by Boris Bokowski; made available under the EPL v1.0 ...
Features Shapes Example © 2005 by International Business Machines; made available under the EPL v1.0 Connections Shapes In...
Features Flow Example © 2005 by International Business Machines; made available under the EPL v1.0 Animation Nesting Layou...
Features Logic Example © 2005 by International Business Machines; made available under the EPL v1.0 Zoom Undo/Redo Palette...
Features METUS © 2005 by Boris Bokowski; made available under the EPL v1.0 Accessibility Handles Direct Edit Layers
<ul><li>GEF-Examples ausprobieren </li></ul><ul><ul><li>Run->Run… </li></ul></ul>Maßgeschneiderte grafische Editoren mit G...
<ul><li>File->New->Project… </li></ul><ul><li>&quot;Testprojekt&quot; eingeben, Finish </li></ul><ul><li>File->New->Exampl...
Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0
<ul><li>Demo </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL ...
<ul><li>Hello, World </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under ...
Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2 3 4
Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 5 6 7
Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 8 9 10
Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 packa...
Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2 3 4
Maßgeschneiderte grafische Editoren mit GEF Hello, World <ul><li>public class SampleView extends ViewPart { </li></ul><ul>...
Maßgeschneiderte grafische Editoren mit GEF Hello, World <ul><li>public EditPart createEditPart(EditPart context, Object m...
<ul><li>Architektur </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under t...
Architektur Plug-In-Abhängigkeiten GEF ui.views RCP  Platform Runtime © 2005 by International Business Machines; made avai...
Architektur Schichten Interaction Layer Model-to-View mapping Workbench Integration Rendering Layout Scaling Native (SWT) ...
Architektur Model-View-Controller Model Figure Events / Requests © 2005 by Boris Bokowski; made available under the EPL v1...
Architektur Modell <ul><li>Keine Annahmen in GEF, was das Modell angeht. </li></ul><ul><li>Sinnvoll sind: </li></ul><ul><u...
Architektur View <ul><li>View-Klassen </li></ul><ul><ul><li>Vieles in Draw2D vorhanden </li></ul></ul><ul><ul><li>Ansonste...
Architektur  Figures (Draw2D) 1 3 6 4 5 1 2 2 3 4 5 6 © 2005 by International Business Machines; made available under the ...
Architektur  Layouts (Draw2D) Top BorderLayout FlowLayout Bottom Left Right Center 1 2 3 4 ToolbarLayout XYLayout 12,8,20,...
Architektur Controller <ul><li>EditPart </li></ul><ul><ul><li>(i.d.R.) ein EditPart-Objekt pro Modell-Objekt </li></ul></u...
Architektur Erzeugung von EditParts Model GraphicalViewer EditParts Figures EditPart Factory © 2005 by International Busin...
Hands-On Schrittweise Erweiterung von Hello, World <ul><li>Schritt 1:   </li></ul><ul><li>Schritt 2: Liste von Strings </...
Architektur Kontrollfluss im Detail SWT Events Requests Commands SWT Canvas © 2005 by International Business Machines; mad...
Hands-On Schrittweise Erweiterung von Hello, World <ul><li>Schritt 1:   </li></ul><ul><li>Schritt 2: Liste von Strings </...
Architektur Sonstiges <ul><li>Connections </li></ul><ul><ul><li>Sind grundsätzlich gerichtet </li></ul></ul><ul><ul><li>St...
Empfehlungen zum Vorgehen Cheat Sheet <ul><ul><li>Unterklasse von GraphicalEditor </li></ul></ul><ul><ul><li>EditDomain, E...
Empfehlungen zum Vorgehen Informationsquellen <ul><li>High-Level-Overview </li></ul><ul><ul><li>GEF-Tutorial von der Eclip...
<ul><li>Fragen? </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the E...
Upcoming SlideShare
Loading in …5
×

old presentation

738 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

old presentation

  1. 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. 2. <ul><li>GEF – Graphical Editor Framework </li></ul><ul><ul><li>Existiert seit ca. fünf Jahren </li></ul></ul><ul><ul><li>Ursprünglich com.ibm.etools.gef, dann org.eclipse.gef </li></ul></ul><ul><ul><li>Basis für graphische Editoren in IBM-Produkten (z.B. WSAD) </li></ul></ul><ul><ul><li>Wird zunehmend in Open Source- und kommerziellen Produkten verwendet </li></ul></ul><ul><li>Einbindung in Eclipse </li></ul><ul><ul><li>Einbindung in das Top-Level-Projekt &quot;Eclipse Tools&quot; </li></ul></ul><ul><ul><li>Versionsnummern sind synchron zu Eclipse Platform </li></ul></ul><ul><ul><li>Aktuelle Version: 3.0.1 </li></ul></ul><ul><ul><li>Nächste Version: 3.1, Mitte 2005 </li></ul></ul><ul><ul><li>Releases in der Regel eine Woche nach Eclipse Platform </li></ul></ul>Maßgeschneiderte grafische Editoren mit GEF Kontext © 2005 by Boris Bokowski; made available under the EPL v1.0
  3. 3. Graphical Editor Framework Screenshots © 2005 by Boris Bokowski; made available under the EPL v1.0
  4. 4. <ul><li>Set-Up </li></ul><ul><li>Features von GEF </li></ul><ul><li>Hello, World </li></ul><ul><li>Architektur von GEF </li></ul><ul><li>Hands-On: Schrittweise Weiterentwicklung von Hello World </li></ul><ul><li>Hands-On: Ein fertiger Beispieleditor </li></ul>Maßgeschneiderte grafische Editoren mit GEF Gliederung © 2005 by Boris Bokowski; made available under the EPL v1.0
  5. 5. <ul><li>Set-Up </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0
  6. 6. <ul><li>Eclipse 3.1 RC2 </li></ul><ul><ul><li>eclipse-SDK-3.1RC2-win32.zip entpacken, z.B. nach C:GEF-Tutorial </li></ul></ul><ul><li>(Optional: JRE </li></ul><ul><ul><li>jre.zip entpacken, nach C: GEF-Tutorialeclipse) </li></ul></ul><ul><li>Workspace: GEF, GEF-Examples, Tutorial-Projekte </li></ul><ul><ul><li>workspace.zip entpacken, nach C:GEF-Tutorial </li></ul></ul><ul><li>Eclipse starten </li></ul><ul><ul><li>C:GEF-Tutorialeclipseeclipse.exe </li></ul></ul><ul><ul><li>Als Workspace auswählen: C:GEF-Tutorialworkspace </li></ul></ul><ul><ul><li>Häkchen bei Default </li></ul></ul><ul><ul><li>Welcome-View schließen </li></ul></ul>Maßgeschneiderte grafische Editoren mit GEF Set-Up © 2005 by Boris Bokowski; made available under the EPL v1.0
  7. 7. Maßgeschneiderte grafische Editoren mit GEF Set-Up – Import von Plug-Ins <ul><li>Inkrementellen Compiler temporär ausschalten </li></ul>
  8. 8. <ul><li>Import der vorbereiteten Projekte </li></ul><ul><ul><li>File->Import… </li></ul></ul>Maßgeschneiderte grafische Editoren mit GEF Set-Up © 2005 by Boris Bokowski; made available under the EPL v1.0 1 4 3 2
  9. 9. <ul><li>Close Projects </li></ul><ul><li>Inkrementellen Compiler wieder anschalten </li></ul>Maßgeschneiderte grafische Editoren mit GEF Set-Up © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2
  10. 10. <ul><li>Features </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0
  11. 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. 12. Features Shapes Example © 2005 by International Business Machines; made available under the EPL v1.0 Connections Shapes Integration
  13. 13. Features Flow Example © 2005 by International Business Machines; made available under the EPL v1.0 Animation Nesting Layout Tools
  14. 14. Features Logic Example © 2005 by International Business Machines; made available under the EPL v1.0 Zoom Undo/Redo Palette Ruler
  15. 15. Features METUS © 2005 by Boris Bokowski; made available under the EPL v1.0 Accessibility Handles Direct Edit Layers
  16. 16. <ul><li>GEF-Examples ausprobieren </li></ul><ul><ul><li>Run->Run… </li></ul></ul>Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0 1 2 3 4
  17. 17. <ul><li>File->New->Project… </li></ul><ul><li>&quot;Testprojekt&quot; eingeben, Finish </li></ul><ul><li>File->New->Example… </li></ul><ul><li>Window->Show View->Other…, Basic->Palette </li></ul>Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0
  18. 18. Maßgeschneiderte grafische Editoren mit GEF Features © 2005 by Boris Bokowski; made available under the EPL v1.0
  19. 19. <ul><li>Demo </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0
  20. 20. <ul><li>Hello, World </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0
  21. 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. 22. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 5 6 7
  23. 23. Maßgeschneiderte grafische Editoren mit GEF Hello, World © 2005 by Boris Bokowski; made available under the EPL v1.0 8 9 10
  24. 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. 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. 26. Maßgeschneiderte grafische Editoren mit GEF Hello, World <ul><li>public class SampleView extends ViewPart { </li></ul><ul><li>private GraphicalViewer graphicalViewer; </li></ul><ul><li>public void createPartControl(Composite parent) { </li></ul><ul><li>graphicalViewer = new GraphicalViewerImpl(); </li></ul><ul><li>graphicalViewer.createControl(parent); </li></ul><ul><li>graphicalViewer.setEditDomain(new EditDomain()); </li></ul><ul><li>graphicalViewer.setEditPartFactory(new EditPartFactory() { </li></ul><ul><li>…… </li></ul><ul><li>}); </li></ul><ul><li>graphicalViewer.setContents(new Object()); </li></ul><ul><li>} </li></ul><ul><li>public void setFocus() { </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  27. 27. Maßgeschneiderte grafische Editoren mit GEF Hello, World <ul><li>public EditPart createEditPart(EditPart context, Object model) { </li></ul><ul><li>EditPart result = new AbstractGraphicalEditPart() { </li></ul><ul><li>protected IFigure createFigure() { </li></ul><ul><li>return new Label(&quot;Hello, World&quot;); </li></ul><ul><li>} </li></ul><ul><li>protected void createEditPolicies() { </li></ul><ul><li>} </li></ul><ul><li>}; </li></ul><ul><li>result.setModel(model); </li></ul><ul><li>return result; </li></ul><ul><li>} </li></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  28. 28. <ul><li>Architektur </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0
  29. 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. 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. 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. 32. Architektur Modell <ul><li>Keine Annahmen in GEF, was das Modell angeht. </li></ul><ul><li>Sinnvoll sind: </li></ul><ul><ul><li>Notification bzw. Observer-Pattern </li></ul></ul><ul><ul><li>Command-Pattern </li></ul></ul><ul><ul><li>Persistenz </li></ul></ul><ul><ul><li>Keine Abhängigkeit zu Controller oder View </li></ul></ul><ul><li>Möglichkeiten: </li></ul><ul><ul><li>Java Beans, PropertyChangeSupport </li></ul></ul><ul><ul><li>Eclipse Modeling Framework (EMF) </li></ul></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  33. 33. Architektur View <ul><li>View-Klassen </li></ul><ul><ul><li>Vieles in Draw2D vorhanden </li></ul></ul><ul><ul><li>Ansonsten Unterklasse von org.eclipse.draw2d.Figure </li></ul></ul><ul><li>Draw2D </li></ul><ul><ul><li>Toolkit auf der Basis von SWT </li></ul></ul><ul><ul><li>Figure, Layout, Layer, Scrolling, Events, … </li></ul></ul><ul><ul><li>Kann unabhängig von GEF verwendet werden </li></ul></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  34. 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. 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. 36. Architektur Controller <ul><li>EditPart </li></ul><ul><ul><li>(i.d.R.) ein EditPart-Objekt pro Modell-Objekt </li></ul></ul><ul><ul><ul><li>Genauer: ein EditPart-Objekt pro Einheit, die für sich selektierbar / editierbar / löschbar sein soll </li></ul></ul></ul><ul><ul><li>Zuständigkeiten </li></ul></ul><ul><ul><ul><li>Erzeugung des Figure-Objekts </li></ul></ul></ul><ul><ul><ul><li>Bestimmung der enthaltenen Objekte </li></ul></ul></ul><ul><ul><ul><li>Aktualisierung des Figure-Objekts bei Modelländerungen </li></ul></ul></ul><ul><ul><ul><li>Umsetzung von Requests in Commands </li></ul></ul></ul><ul><ul><li>Erzeugung von EditParts durch eine Factory </li></ul></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  37. 37. Architektur Erzeugung von EditParts Model GraphicalViewer EditParts Figures EditPart Factory © 2005 by International Business Machines; made available under the EPL v1.0 @#!
  38. 38. Hands-On Schrittweise Erweiterung von Hello, World <ul><li>Schritt 1:  </li></ul><ul><li>Schritt 2: Liste von Strings </li></ul><ul><li>Schritt 3: Editierbarkeit (Verschieben) </li></ul><ul><li>Schritt 4: Editierbarkeit (Nesting) </li></ul><ul><li>Schritt 5: … </li></ul><ul><li>Schritt 6: Überraschung! </li></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  39. 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. 40. Hands-On Schrittweise Erweiterung von Hello, World <ul><li>Schritt 1:  </li></ul><ul><li>Schritt 2: Liste von Strings </li></ul><ul><li>Schritt 3: Editierbarkeit (Verschieben) </li></ul><ul><li>Schritt 4: Editierbarkeit (Nesting) </li></ul><ul><li>Schritt 5: BulletBorder </li></ul><ul><li>Schritt 6: Outline Editor! </li></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  41. 41. Architektur Sonstiges <ul><li>Connections </li></ul><ul><ul><li>Sind grundsätzlich gerichtet </li></ul></ul><ul><ul><li>Start- und Endpunkt sind Anchor-Objekte </li></ul></ul><ul><li>Commands </li></ul><ul><ul><li>Undo/Redo </li></ul></ul><ul><ul><li>CommandStack </li></ul></ul><ul><li>Palette </li></ul><ul><ul><li>Enthält Tools </li></ul></ul><ul><ul><li>Gruppiert in Ordnern </li></ul></ul><ul><li>U.v.m… </li></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  42. 42. Empfehlungen zum Vorgehen Cheat Sheet <ul><ul><li>Unterklasse von GraphicalEditor </li></ul></ul><ul><ul><li>EditDomain, EditPartFactory, Top-Level-Modellobjekt setzen </li></ul></ul><ul><ul><li>Pro EditPart: </li></ul></ul><ul><ul><ul><li>Erzeugung des Objekts in der EditPartFactory </li></ul></ul></ul><ul><ul><ul><li>createFigure() Figure erzeugen </li></ul></ul></ul><ul><ul><ul><li>refreshVisuals() Figure aktualisieren </li></ul></ul></ul><ul><ul><ul><li>getModelChildren() Nesting </li></ul></ul></ul><ul><ul><ul><li>activate(), deactivate() Notification einrichten </li></ul></ul></ul><ul><ul><ul><li>createEditPolicies() Editierbarkeit konfigurieren (Command-Objekte erzeugen) </li></ul></ul></ul><ul><ul><li>Für Connections: </li></ul></ul><ul><ul><ul><li>getModelSourceConnections() ausgehende Verbindungen </li></ul></ul></ul><ul><ul><ul><li>getModelTargetConnections() eingehende Verbindungen </li></ul></ul></ul><ul><ul><ul><li>createEditPolicies() </li></ul></ul></ul><ul><ul><li>Palette, Tools, Handles, Drag and Drop, … </li></ul></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  43. 43. Empfehlungen zum Vorgehen Informationsquellen <ul><li>High-Level-Overview </li></ul><ul><ul><li>GEF-Tutorial von der EclipseCon 2005 </li></ul></ul><ul><ul><li>GefDescription auf eclipsewiki </li></ul></ul><ul><li>Anleitungen </li></ul><ul><ul><li>&quot;Maßgeschneiderte grafische Editoren&quot;, Boris Bokowski, Frank Gerhardt Eclipse Magazin Vol. 2 </li></ul></ul><ul><ul><li>Artikel auf www.eclipse.org </li></ul></ul><ul><ul><ul><li>&quot;A Shape Diagram Editor&quot;, Bo Majewski (Cisco) </li></ul></ul></ul><ul><ul><ul><li>&quot;Using GEF with EMF&quot;, Chris Aniszczyk (IBM) </li></ul></ul></ul><ul><ul><ul><li>&quot;Building a Database Schema Diagram Editor with GEF&quot;, Phil Zoio (Realsolve Solutions) </li></ul></ul></ul><ul><li>Buch </li></ul><ul><ul><li>SWT in Action (Manning), enthält ca. 50 Seiten zu GEF (Anhang) </li></ul></ul>© 2005 by Boris Bokowski; made available under the EPL v1.0
  44. 44. <ul><li>Fragen? </li></ul>Maßgeschneiderte grafische Editoren mit GEF © 2005 by Boris Bokowski; made available under the EPL v1.0

×