Post on 02-Jan-2016
description
1© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
Software(technik)praktikum
Tutorial: Einführung in GEF
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
2
• Editor für Graphstruktur bestehend aus Knoten und Kanten soll erstellt werden
• Vision:
Connection/Edge
Graph
Node
Motivation: Editor für einen Graphen
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
3
Modell für einen Graphen
Objektstruktur Daten, auf denen der Editor arbeitet
:Edge
:Node:Edge :Node
:Edge
:Node
:Graph
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
4
Modell für einen Graphen
Modell (Klassendiagramm) Anleitung für den Bau eines Graphen
Meta-Modell von Graphen
Modell eines Graphen
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
5
Grafischer Editor
Vision: Rectangle-Figure
Connection-Figure
Canvas
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
6
Grafischer Editor: Darstellung
Figure-Hierarchie Visualisierung der Objektstruktur
eines Graphen
:Canvas
:Rectangle-Figure
:Connection-Figure
:Rectangle-Figure
...
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
7
Grafischer Editor: Darstellung
Figure-Hierarchie Es kann mehr geben!
:Canvas
:Rectangle-Figure
:Connection-Figure
:Rectangle-Figure
...
:Rectangle-Figure
:Rectangle-Figure:Label
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
8
Grafischer Editor: Modell und Darstellung
Wie hängen Modell und Grafik zusammen? Wie stellt die Grafik das Modell dar? Wie wird das Modell geändert? Wie stelle ich Änderungen am Modell dar?
?
:Node:Edge :Node
:Graph :Canvas
:Rectangle-Figure
:Connection-Figure
:Rectangle-Figure
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
9
Grafischer Editor: Modell und Darstellung
Wie hängen Modell und Grafik zusammen? durch EditParts :GraphEditPart
:Node-EditPart
:Edge-EditPart
:Node-EditPart
:Node:Edge :Node
:Graph :Canvas
:Rectangle-Figure
:Connection-Figure
:Rectangle-Figure
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
10
Grafischer Editor: Modell und Darstellung
Model-View-Controller-Paradigma (MVC)
Model View
Controller
:GraphEditPart
:Node-EditPart
:Edge-EditPart
:Node-EditPart
:Node:Edge :Node
:Graph :Canvas
:Rectangle-Figure
:Connection-Figure
:Rectangle-Figure
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
11
Grafischer Editor: Modell und Darstellung
Model-View-Controller-Paradigma (MVC)
Model View
(Figures)
Controller
(EditParts)
Anwendungslogik DarstellungSynchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
12
Modell Figures
EditParts
Editor
1. Aktion
Grafischer Editor: Synchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
13
Modell Figures
EditParts2. Request
Editor
1. Aktion
Grafischer Editor: Synchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
14
Modell Figures
EditParts2. Request
Editor
1. Aktion
Command
3. erzeugt
Grafischer Editor: Synchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
15
Modell Figures
EditParts2. Request
Editor
1. Aktion
Command
3. erzeugt
4. modifiziert
Grafischer Editor: Synchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
16
Modell Figures
EditParts2. Request
Editor
1. Aktion
Command
3. erzeugt
4. modifiziert
5. Notification
Grafischer Editor: Synchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
17
Modell Figures
EditParts2. Request
Editor
1. Aktion
Command
3. erzeugt
4. modifiziert
5. Notification
6. aktualisiert
Grafischer Editor: Synchronisation
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
18
EditParts und EditPolicies
Verhalten von EditPartsbeschrieben durch EditPolicies für bestimmte Rollen
Grafischer Editor: Synchronisation
EditParts
Command
3. erzeugt
public class GraphEditPart{
protected void createEditPolicies() {installEditPolicy(EditPolicy.LAYOUT_ROLE, new
ExampleXYEditPolicy());}...
}
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
19
EditParts und EditPolicies
EditPolicies bearbeiten Requests
erzeugen Commands
Grafischer Editor: Synchronisation
public class ExampleXYEditPolicy {
public Command getCommand(Request request) {...}
protected Command createChangeConstraintCommand(EditPart child, Object constraint) {
ChangeNodePositionCommand locationCommand =new ChangeNodePositionCommand();
locationCommand.setModel((Node) child.getModel());locationCommand.setLocation((Rectangle) constraint);return locationCommand;
}...
}
EditParts
Command
3. erzeugt
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
20
Commands und CommandStack Änderung des Modells durch Commands
Grafischer Editor: Synchronisation
Modell
Command
4. modifiziert
public class ChangeNodePositionCommand extends Command {
public void execute() {oldXPos = node.getXPos();oldYPos = node.getYPos();node.setXPos(newXPos);node.setYPos(newYPos);
}
public void undo() {node.setXPos(oldXPos);node.setYPos(oldYPos);
}...
}
CommandStack
ausgeführtes Command
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
21
Grafischer Editor: Synchronisation
Modell
EditParts
5. Notification
Notifications Informieren über Modelländerungen Eine Notification gibt an
geändertes Objekt (notifier,z.B.: Node-Objekt)
Art der Änderung (event type,z.B.: REMOVE)
Geänderte Eigenschaft (feature,z.B.: Referenz outgoingEdge)
Vorherigen Wert (old value,z.B.: bisheriges Edge-Objekt)
Neuen Wert (new value,z.B.: null)
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
22
Grafischer Editor: Synchronisation
Modell
EditParts
5. Notification
Empfang von Notifications Modellobjekte sind Notifier EditParts sind Adapter
und reagieren auf Notifications
nodeEP:NodeEditPart
node:Node
1.2: nodeEP.notifyChanged(new Notification(…))
1.1: node.setXPos(5)
NodeEditPartAdapter
notifyChanged(Notification)
«implements»
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
23
Grafischer Editor: Synchronisation
Modell
EditParts
5. Notification
Empfang von Notifications EditParts
müssen sich als Listener beiModellobjekten registrieren
nur dann erhalten sie Notifications
nodeEP:NodeEditPart
node:Node
1: node.eAdapters().add(nodeEP)
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
24
Grafischer Editor: Synchronisation
Reagieren auf Notifications EditParts aktualisieren Figures bei
Modelländerungen
Figures
EditParts
6. aktualisiert
public class NodeEditPart implements Adapter {
public void notifyChanged(Notification notification) {
refreshVisuals();}
protected void refreshVisuals(){
Point loc = new Point(((Node) getModel()).getXPos(),((Node)getModel()).getYPos());
Dimension size = new Dimension(50,50);Rectangle r = new Rectangle(loc ,size);((GraphEditPart) getParent())
.setLayoutConstraint(this,getFigure(), r);
}...
}
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
25
Überblick: Model-View-Controller
Modell Figures
EditParts2. Request
Editor
1. Aktion
Command
3. erzeugt
4. modifiziert
5. Notification
6. aktualisiert
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
26
Wo Hilfe suchen?
1) Eclipse: Eclipse-eigene Hilfe
2) Eclipse-Artikel: http://www.eclipse.org/articles/
Viele Beiträge zu Eclipse, SWT, JFace, GEF, EMF, ...
3) Eclipse-Forum: http://www.eclipse.org/forums/
4) Source Code und speziell Beispiel-Plug-ins,
z.B. Logic- und Shapes-Editoren (GEF Examples)
5) EclipseWiki: http://wiki.eclipse.org/
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
27
Quellen und nützliche Links
Eclipse und Plug-ins: Buch: „Eclipse – Building Commercial-Quality Plug-ins“, Eric Clayberg,
Dan Rubel, Addison-Wesley, 2006
Buch: „Contributing to Eclipse – Principles, Patterns, and Plug-ins“, Erich Gamma, Kent Beck, Addison-Wesley, 2004
Eclipse Artikel: http://www.eclipse.org/articles/
• „PDE Does Plug-ins“
• „Eclipse User Interface Guidelines“ (Version 2.1)
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
28
Quellen und nützliche Links
GEF, Draw2d, SWT, JFace: Buch (PDF): „Eclipse Development using the Graphical Editing
Framework and the Eclipse Modeling Framework“, William Moore et al., IBM Redbook, http://www.redbooks.ibm.com/abstracts/sg246302.html?Open
Buch: „SWT/JFace in Action – GUI Design with Eclipse 3.0“, Matthew Scarpino et al., Manning, 2004
Artikel: „Create an Eclipse-based application using the Graphical Editing Framework“, Randy Hudson (IBM),http://www-128.ibm.com/developerworks/opensource/library/os-gef/
Eclipse-Artikel: http://www.eclipse.org/articles/
• „A Shape Diagram Editor“
• „Using GEF with EMF“
• „Display a UML Diagram using Draw2D“
GEF-Tutorial
© F
achg
ebie
t S
oftw
aret
echn
ik,
Hei
nz N
ixdo
rf I
nstit
ut,
Uni
vers
ität
Pad
erbo
rn
29
Quellen und nützliche Links
EMF: „Eclipse Modeling Framework“, Frank Budinsky et al.,
Prentice Hall, 2003
Artikel: The Eclipse Modeling Framework (EMF) Overview
Sonstiges: FAQs auf SWTPRA-Web-Seite
Weitere Eclipse-Plug-ins: http://eclipse-plugins.2y.net/eclipse/index.jsp
GEF-Tutorial