Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

© Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Software(technik)praktikum Tutorial: Einführung in GEF 1 GEF-Tutorial.

Ähnliche Präsentationen


Präsentation zum Thema: "© Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Software(technik)praktikum Tutorial: Einführung in GEF 1 GEF-Tutorial."—  Präsentation transkript:

1 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Software(technik)praktikum Tutorial: Einführung in GEF 1 GEF-Tutorial

2 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Editor für Graphstruktur bestehend aus Knoten und Kanten soll erstellt werden Vision: Connection/Edge Graph Node Motivation: Editor für einen Graphen 2 GEF-Tutorial

3 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell für einen Graphen Objektstruktur Daten, auf denen der Editor arbeitet :Edge :Node :Edge :Node :Edge :Node :Graph 3 GEF-Tutorial

4 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell für einen Graphen Modell (Klassendiagramm) Anleitung für den Bau eines Graphen Meta-Modell von Graphen Modell eines Graphen 4 GEF-Tutorial

5 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Grafischer Editor Vision: Rectangle- Figure Connection- Figure Canvas 5 GEF-Tutorial

6 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Grafischer Editor: Darstellung Figure-Hierarchie Visualisierung der Objektstruktur eines Graphen :Canvas :Rectangle- Figure :Connection- Figure :Rectangle- Figure... 6 GEF-Tutorial

7 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Grafischer Editor: Darstellung Figure-Hierarchie Es kann mehr geben! :Canvas :Rectangle- Figure :Connection- Figure :Rectangle- Figure... :Rectangle- Figure :Label 7 GEF-Tutorial

8 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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 8 GEF-Tutorial

9 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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 9 GEF-Tutorial

10 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Grafischer Editor: Modell und Darstellung Model-View-Controller-Paradigma (MVC) ModelView Controller :GraphEditPart :Node- EditPart :Edge- EditPart :Node- EditPart :Node :Edge :Node :Graph :Canvas :Rectangle- Figure :Connection- Figure :Rectangle- Figure 10 GEF-Tutorial

11 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Grafischer Editor: Modell und Darstellung Model-View-Controller-Paradigma (MVC) Model View (Figures) Controller (EditParts) AnwendungslogikDarstellungSynchronisation 11 GEF-Tutorial

12 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell Figures EditParts Editor 1. Aktion Grafischer Editor: Synchronisation 12 GEF-Tutorial

13 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell Figures EditParts 2. Request Editor 1. Aktion Grafischer Editor: Synchronisation 13 GEF-Tutorial

14 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell Figures EditParts 2. Request Editor 1. Aktion Command 3. erzeugt Grafischer Editor: Synchronisation 14 GEF-Tutorial

15 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell Figures EditParts 2. Request Editor 1. Aktion Command 3. erzeugt 4. modifiziert Grafischer Editor: Synchronisation 15 GEF-Tutorial

16 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell Figures EditParts 2. Request Editor 1. Aktion Command 3. erzeugt 4. modifiziert 5. Notification Grafischer Editor: Synchronisation 16 GEF-Tutorial

17 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Modell Figures EditParts 2. Request Editor 1. Aktion Command 3. erzeugt 4. modifiziert 5. Notification 6. aktualisiert Grafischer Editor: Synchronisation 17 GEF-Tutorial

18 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn EditParts und EditPolicies Verhalten von EditParts beschrieben 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()); }... } 18 GEF-Tutorial

19 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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 19 GEF-Tutorial

20 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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 20 GEF-Tutorial

21 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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 ) 21 GEF-Tutorial

22 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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) NodeEditPart Adapter notifyChanged(Notification) «implements» 22 GEF-Tutorial

23 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Grafischer Editor: Synchronisation Modell EditParts 5. Notification Empfang von Notifications EditParts müssen sich als Listener bei Modellobjekten registrieren nur dann erhalten sie Notifications nodeEP:NodeEditPart node:Node 1: node. eAdapters().add(nodeEP) 23 GEF-Tutorial

24 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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); }... } 24 GEF-Tutorial

25 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Überblick: Model-View-Controller Modell Figures EditParts 2. Request Editor 1. Aktion Command 3. erzeugt 4. modifiziert 5. Notification 6. aktualisiert 25 GEF-Tutorial

26 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Wo Hilfe suchen? 1)Eclipse: Eclipse-eigene Hilfe 2)Eclipse-Artikel: Viele Beiträge zu Eclipse, SWT, JFace, GEF, EMF,... 3)Eclipse-Forum: 4)Source Code und speziell Beispiel-Plug-ins, z.B. Logic- und Shapes-Editoren (GEF Examples) 5)EclipseWiki: 26 GEF-Tutorial

27 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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) 27 GEF-Tutorial

28 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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 28 GEF-Tutorial

29 © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn 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: 29 GEF-Tutorial


Herunterladen ppt "© Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn Software(technik)praktikum Tutorial: Einführung in GEF 1 GEF-Tutorial."

Ähnliche Präsentationen


Google-Anzeigen