1 / 29

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

Software( technik ) praktikum Tutorial : Einführung in GEF. Motivation: Editor für einen Graphen. Editor für Graphstruktur bestehend aus Knoten und Kanten soll erstellt werden Vision :. Graph. Node. Connection/Edge. Modell für einen Graphen. Objektstruktur

bernard-caldwell
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Software(technik)praktikumTutorial: Einführungin GEF GEF-Tutorial

  2. Motivation: Editor für einen Graphen • Editor fürGraphstrukturbestehendausKnoten und Kantensollerstelltwerden • Vision: Graph Node Connection/Edge GEF-Tutorial

  3. Modell für einen Graphen Objektstruktur • Daten, auf denender 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. Grafischer Editor Vision: Rectangle-Figure Canvas Connection-Figure GEF-Tutorial

  6. Grafischer Editor: Darstellung Figure-Hierarchie • Visualisierung der Objektstruktureines 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 :Graph :Node :Edge :Node 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? ? :Canvas :Rectangle-Figure :Connection-Figure :Rectangle-Figure GEF-Tutorial

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

  10. Grafischer Editor: Modell und Darstellung :Graph :Node :Edge :Node Model-View-Controller-Paradigma (MVC)‏ :GraphEditPart Controller :Node-EditPart :Edge-EditPart :Node-EditPart :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 Controller (EditParts)‏ View (Figures)‏ Model GEF-Tutorial

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

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

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

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

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

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

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

  19. Grafischer Editor: Synchronisation Command 3. erzeugt EditParts EditParts und EditPolicies • EditPolicies • bearbeiten Requests • erzeugen Commands 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 Command 4. modifiziert Modell Commands und CommandStack • Änderung des Modells durch Commands 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 EditParts 5. Notification Modell 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

  22. Grafischer Editor: Synchronisation EditParts Adapter «implements» NodeEditPart notifyChanged(Notification)‏ 5. Notification 1.1: node.setXPos(5)‏ node:Node 1.2: nodeEP.notifyChanged(new Notification(…))‏ Modell nodeEP:NodeEditPart Empfang von Notifications • ModellobjektesindNotifier • EditPartssindAdapterund reagierenauf Notifications GEF-Tutorial

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

  24. Grafischer Editor: Synchronisation EditParts 6. aktualisiert Figures Reagieren auf Notifications • EditParts aktualisieren Figures beiModelländerungen 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 Modell Figures Command 3. erzeugt 2. Request 4. modifiziert 1. Aktion 6. aktualisiert 5. Notification Editor GEF-Tutorial

  26. Wo Hilfe suchen? • Eclipse: Eclipse-eigeneHilfe • Eclipse-Artikel: http://www.eclipse.org/articles/ • VieleBeiträgezu Eclipse, SWT, JFace, GEF, EMF, ... • Eclipse-Forum: http://www.eclipse.org/forums/ • Source Code und speziellBeispiel-Plug-ins, z.B. Logic- und Shapes-Editoren (GEF Examples)‏ • EclipseWiki:http://wiki.eclipse.org/ 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:http://www.eclipse.org/articles/ • „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, 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

  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

More Related