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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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