Einführung in das Graphical Editor Framework
Tutorial, iX-Konferenz 2005.1
13.6.2005, nh-Hotel, Heidelberg
Dr. Boris Bokowski <[email protected]>
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 "Eclipse Tools"
• 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 GEFKontext
© 2005 by Boris Bokowski; made available under the EPL v1.0
3
Graphical Editor FrameworkScreenshots
© 2005 by Boris Bokowski; made available under the EPL v1.0
4
1.Set-Up
2.Features von GEF
3.Hello, World
4.Architektur von GEF
5.Hands-On:
Schrittweise Weiterentwicklung von Hello World
6.Hands-On: Ein fertiger Beispieleditor
Maßgeschneiderte grafische Editoren mit GEFGliederung
© 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 GEFSet-Up
© 2005 by Boris Bokowski; made available under the EPL v1.0
7
Maßgeschneiderte grafische Editoren mit GEFSet-Up – Import von Plug-Ins
Inkrementellen Compiler temporär ausschalten
8
Import der vorbereiteten Projekte
• File->Import…
Maßgeschneiderte grafische Editoren mit GEFSet-Up
© 2005 by Boris Bokowski; made available under the EPL v1.0
1
4
32
9
Close Projects
Inkrementellen Compiler wieder anschalten
Maßgeschneiderte grafische Editoren mit GEFSet-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
AccessibilityAccessibility
ZoomZoom
OverviewOverview
Undo/RedoUndo/RedoPrintingPrinting
MenuMenu ToolsTools
HandlesHandles
Direct EditDirect Edit
Grid, SnapGrid, Snap
PalettePalette
AnimationAnimation
NestingNestingLayersLayersConnectionsConnectionsShapesShapes
RulerRuler
LayoutLayoutIntegrationIntegration
12
FeaturesShapes Example
© 2005 by International Business Machines; made available under the EPL v1.0
ConnectionsConnections
ShapesShapes
IntegrationIntegration
13
FeaturesFlow Example
© 2005 by International Business Machines; made available under the EPL v1.0
AnimationAnimation
NestingNesting
LayoutLayout
ToolsTools
14
FeaturesLogic Example
© 2005 by International Business Machines; made available under the EPL v1.0
ZoomZoomUndo/RedoUndo/RedoPalettePalette
RulerRuler
15
FeaturesMETUS
© 2005 by Boris Bokowski; made available under the EPL v1.0
AccessibilityAccessibility
HandlesHandles
Direct EditDirect Edit
LayersLayers
16
GEF-Examples ausprobieren
• Run->Run…
Maßgeschneiderte grafische Editoren mit GEFFeatures
© 2005 by Boris Bokowski; made available under the EPL v1.0
1
2
3
4
17
File->New->Project…
"Testprojekt" eingeben, Finish
File->New->Example…
Window->Show View->Other…, Basic->Palette
Maßgeschneiderte grafische Editoren mit GEFFeatures
© 2005 by Boris Bokowski; made available under the EPL v1.0
18
Maßgeschneiderte grafische Editoren mit GEFFeatures
© 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 GEFHello, World
© 2005 by Boris Bokowski; made available under the EPL v1.0
1
2
3
4
22
Maßgeschneiderte grafische Editoren mit GEFHello, World
© 2005 by Boris Bokowski; made available under the EPL v1.0
56
7
23
Maßgeschneiderte grafische Editoren mit GEFHello, World
© 2005 by Boris Bokowski; made available under the EPL v1.0
8
9
10
24
Maßgeschneiderte grafische Editoren mit GEFHello, 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 GEFHello, World
© 2005 by Boris Bokowski; made available under the EPL v1.0
1
23
4
26
Maßgeschneiderte grafische Editoren mit GEFHello, World
© 2005 by Boris Bokowski; made available under the EPL v1.0
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() {
}
}
27
Maßgeschneiderte grafische Editoren mit GEFHello, World
© 2005 by Boris Bokowski; made available under the EPL v1.0
public EditPart createEditPart(EditPart context, Object model) {
EditPart result = new AbstractGraphicalEditPart() {
protected IFigure createFigure() {
return new Label("Hello, World");
}
protected void createEditPolicies() {
}
};
result.setModel(model);
return result;
}
28
Architektur
Maßgeschneiderte grafische Editoren mit GEF
© 2005 by Boris Bokowski; made available under the EPL v1.0
29
ArchitekturPlug-In-Abhängigkeiten
GEFui.views
RCP SWT
Platform Runtime
Draw2D
© 2005 by International Business Machines; made available under the EPL v1.0
30
ArchitekturSchichten
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
ArchitekturModel-View-Controller
Model Figure
Events / Requests
© 2005 by Boris Bokowski; made available under the EPL v1.0
EditPart
CommandsNotification
Refresh
32
ArchitekturModell
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
ArchitekturView
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 512
2 34 5 6
© 2005 by International Business Machines; made available under the EPL v1.0
35
Architektur Layouts (Draw2D)
Top
BorderLayout FlowLayout
Bottom
Left
RightCenter
1 2
3 4
ToolbarLayoutXYLayout
12,8,20,10
30,20,27,14
1 2 3
© 2005 by International Business Machines; made available under the EPL v1.0
36
ArchitekturController
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
ArchitekturErzeugung von EditParts
Model
GraphicalViewer
EditParts Figures
@#!
EditPartFactory
© 2005 by International Business Machines; made available under the EPL v1.0
38
Hands-OnSchrittweise 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
ArchitekturKontrollfluss im Detail
SWT Events
ToolTool
Requests
EditPartEditPart
Commands
EditPart EditPart EditPolicyEditPolicyEditPolicyEditPolicyEditPolicyEditPolicy
Requests
Commands
StackStack
Commands
?
© 2005 by International Business Machines; made available under the EPL v1.0
40
Hands-OnSchrittweise 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
ArchitekturSonstiges
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 VorgehenCheat Sheet
1. Unterklasse von GraphicalEditor
2. EditDomain, EditPartFactory, Top-Level-Modellobjekt setzen
3. Pro EditPart:
a) Erzeugung des Objekts in der EditPartFactory
b) createFigure() Figure erzeugen
c) refreshVisuals() Figure aktualisieren
d) getModelChildren() Nesting
e) activate(), deactivate() Notification einrichten
f) createEditPolicies() Editierbarkeit konfigurieren(Command-Objekte erzeugen)
4. Für Connections:
a) getModelSourceConnections() ausgehende Verbindungen
b) getModelTargetConnections() eingehende Verbindungen
c) createEditPolicies()
5. Palette, Tools, Handles, Drag and Drop, … © 2005 by Boris Bokowski; made available under the EPL v1.0
43
Empfehlungen zum VorgehenInformationsquellen
High-Level-Overview
• GEF-Tutorial von der EclipseCon 2005
• GefDescription auf eclipsewiki
Anleitungen
• "Maßgeschneiderte grafische Editoren", Boris Bokowski, Frank GerhardtEclipse Magazin Vol. 2
• Artikel auf www.eclipse.org• "A Shape Diagram Editor", Bo Majewski (Cisco)• "Using GEF with EMF", Chris Aniszczyk (IBM)• "Building a Database Schema Diagram Editor with GEF",
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