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

506
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
506
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×