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

bernard-caldwell
software technik praktikum tutorial einf hrung in gef n.
Skip this Video
Loading SlideShow in 5 Seconds..
Software( technik ) praktikum Tutorial : Einführung in GEF PowerPoint Presentation
Download Presentation
Software( technik ) praktikum Tutorial : Einführung in GEF

play fullscreen
1 / 29
Download Presentation
Software( technik ) praktikum Tutorial : Einführung in GEF
60 Views
Download Presentation

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

- - - - - - - - - - - - - - - - - - - - - - - - - - - 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