Software(technik)praktikum Tutorial: Einführung in GEF

Präsentation zum Thema: "Software(technik)praktikum Tutorial: Einführung in GEF"—  Präsentation transkript:

1 Software(technik)praktikum Tutorial: Einführung in GEF
GEF-Tutorial

2 Motivation: Editor für einen Graphen
Editor für Graphstruktur bestehend aus Knoten und Kanten soll erstellt werden Vision: Graph Node Connection/Edge GEF-Tutorial

3 Modell für einen Graphen
Objektstruktur Daten, auf denen der Editor arbeitet :Graph :Node :Edge :Node :Edge :Node :Edge GEF-Tutorial

4 Modell für einen Graphen
Modell (Klassendiagramm)‏ Anleitung für den Bau eines Graphen Meta-Modell von Graphen Modell eines Graphen GEF-Tutorial

5 Vision: Rectangle-Figure Canvas Connection-Figure Grafischer Editor
GEF-Tutorial

6 Grafischer Editor: Darstellung
Figure-Hierarchie Visualisierung der Objektstruktur eines Graphen :Canvas :Rectangle-Figure :Connection-Figure :Rectangle-Figure ... GEF-Tutorial

7 Grafischer Editor: Darstellung
Figure-Hierarchie Es kann mehr geben! :Canvas :Rectangle-Figure :Connection-Figure :Rectangle-Figure ... :Label :Rectangle-Figure :Rectangle-Figure GEF-Tutorial

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 :Graph ? :Canvas :Rectangle-Figure :Connection-Figure :Rectangle-Figure GEF-Tutorial

9 Grafischer Editor: Modell und Darstellung
Wie hängen Modell und Grafik zusammen? durch EditParts :GraphEditPart :Node-EditPart :Edge-EditPart :Node-EditPart :Node :Edge :Graph :Canvas :Rectangle-Figure :Connection-Figure :Rectangle-Figure GEF-Tutorial

10 Grafischer Editor: Modell und Darstellung
Model-View-Controller-Paradigma (MVC)‏ Controller :GraphEditPart :Node-EditPart :Edge-EditPart :Node-EditPart :Node :Edge :Graph :Canvas :Rectangle-Figure :Connection-Figure :Rectangle-Figure Model View GEF-Tutorial

11 Grafischer Editor: Modell und Darstellung
Model-View-Controller-Paradigma (MVC)‏ Anwendungslogik Synchronisation Darstellung Model Controller (EditParts)‏ View (Figures)‏ GEF-Tutorial

12 Grafischer Editor: Synchronisation
EditParts 1. Aktion Modell Figures Editor GEF-Tutorial

13 Grafischer Editor: Synchronisation
EditParts 2. Request 1. Aktion Modell Figures Editor GEF-Tutorial

14 Grafischer Editor: Synchronisation
EditParts Command 3. erzeugt 2. Request 1. Aktion Modell Figures Editor GEF-Tutorial

15 Grafischer Editor: Synchronisation
EditParts Command 3. erzeugt 2. Request 4. modifiziert 1. Aktion Modell Figures Editor GEF-Tutorial

16 Grafischer Editor: Synchronisation
EditParts Command 3. erzeugt 2. Request 4. modifiziert 1. Aktion Modell Figures 5. Notification Editor GEF-Tutorial

17 Grafischer Editor: Synchronisation
EditParts Command 3. erzeugt 2. Request 4. modifiziert 1. Aktion 6. aktualisiert Modell Figures 5. Notification Editor GEF-Tutorial

18 Grafischer Editor: Synchronisation
EditParts und EditPolicies Verhalten von EditParts beschrieben durch EditPolicies für bestimmte Rollen EditParts Command 3. erzeugt public class GraphEditPart{ protected void createEditPolicies() { installEditPolicy(EditPolicy.LAYOUT_ROLE, new ExampleXYEditPolicy()); } ... GEF-Tutorial

19 Grafischer Editor: Synchronisation
EditParts und EditPolicies EditPolicies bearbeiten Requests erzeugen Commands EditParts Command 3. erzeugt 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; GEF-Tutorial

20 Grafischer Editor: Synchronisation
Commands und CommandStack Änderung des Modells durch Commands 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); ... ausgeführtes Command CommandStack GEF-Tutorial

21 Grafischer Editor: Synchronisation
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)‏ Modell EditParts 5. Notification GEF-Tutorial

22 Grafischer Editor: Synchronisation
Empfang von Notifications Modellobjekte sind Notifier EditParts sind Adapter und reagieren auf Notifications Modell EditParts 5. Notification NodeEditPart Adapter notifyChanged(Notification)‏ «implements» nodeEP:NodeEditPart node:Node 1.2: nodeEP.notifyChanged(new Notification(…))‏ 1.1: node.setXPos(5)‏ GEF-Tutorial

23 Grafischer Editor: Synchronisation
Empfang von Notifications EditParts müssen sich als Listener bei Modellobjekten registrieren nur dann erhalten sie Notifications Modell EditParts 5. Notification nodeEP:NodeEditPart node:Node 1: node.eAdapters().add(nodeEP)‏ GEF-Tutorial

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

25 Überblick: Model-View-Controller
EditParts Command 3. erzeugt 2. Request 4. modifiziert 1. Aktion 6. aktualisiert Modell Figures 5. Notification Editor GEF-Tutorial

26 Eclipse: Eclipse-eigene Hilfe
Wo Hilfe suchen? Eclipse: Eclipse-eigene Hilfe Eclipse-Artikel: Viele Beiträge zu Eclipse, SWT, JFace, GEF, EMF, ... Eclipse-Forum: Source Code und speziell Beispiel-Plug-ins, z.B. Logic- und Shapes-Editoren (GEF Examples)‏ EclipseWiki: GEF-Tutorial

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: „PDE Does Plug-ins“ „Eclipse User Interface Guidelines“ (Version 2.1)‏ GEF-Tutorial

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, 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), Eclipse-Artikel: „A Shape Diagram Editor“ „Using GEF with EMF“ „Display a UML Diagram using Draw2D“ GEF-Tutorial

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: GEF-Tutorial