© Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn...

1© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

Software(technik)praktikum

Tutorial: Einführung in GEF

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

2

• Editor für Graphstruktur bestehend aus Knoten und Kanten soll erstellt werden

• Vision:

Connection/Edge

Graph

Node

Motivation: Editor für einen Graphen

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

3

Modell für einen Graphen

Objektstruktur Daten, auf denen der Editor arbeitet

:Edge

:Node:Edge :Node

:Edge

:Node

:Graph

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

4

Modell für einen Graphen

Modell (Klassendiagramm) Anleitung für den Bau eines Graphen

Meta-Modell von Graphen

Modell eines Graphen

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

5

Grafischer Editor

Vision: Rectangle-Figure

Connection-Figure

Canvas

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

6

Grafischer Editor: Darstellung

Figure-Hierarchie Visualisierung der Objektstruktur

eines Graphen

:Canvas

:Rectangle-Figure

:Connection-Figure

:Rectangle-Figure

...

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

7

Grafischer Editor: Darstellung

Figure-Hierarchie Es kann mehr geben!

:Canvas

:Rectangle-Figure

:Connection-Figure

:Rectangle-Figure

...

:Rectangle-Figure

:Rectangle-Figure:Label

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

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

:Graph :Canvas

:Rectangle-Figure

:Connection-Figure

:Rectangle-Figure

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

9


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

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

10


Model-View-Controller-Paradigma (MVC)

Model View

Controller

:GraphEditPart

:Node-EditPart

:Edge-EditPart

:Node-EditPart

:Node:Edge :Node

:Graph :Canvas

:Rectangle-Figure

:Connection-Figure

:Rectangle-Figure

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

11


Model-View-Controller-Paradigma (MVC)

Model View

(Figures)

Controller

(EditParts)

Anwendungslogik DarstellungSynchronisation

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

12

Modell Figures

EditParts

Editor

1. Aktion

Grafischer Editor: Synchronisation

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

13

Modell Figures

EditParts2. Request

Editor

1. Aktion


GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

14

Modell Figures

EditParts2. Request

Editor

1. Aktion

Command

3. erzeugt


GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

15

Modell Figures

EditParts2. Request

Editor

1. Aktion

Command

3. erzeugt

4. modifiziert


GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

16

Modell Figures

EditParts2. Request

Editor

1. Aktion

Command

3. erzeugt

4. modifiziert

5. Notification


GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

17

Modell Figures

EditParts2. Request

Editor

1. Aktion

Command

3. erzeugt

4. modifiziert

5. Notification

6. aktualisiert


GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

18

EditParts und EditPolicies

Verhalten von EditPartsbeschrieben durch EditPolicies für bestimmte Rollen


EditParts

Command

3. erzeugt

public class GraphEditPart{

protected void createEditPolicies() {installEditPolicy(EditPolicy.LAYOUT_ROLE, new

ExampleXYEditPolicy());}...

}

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

19

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;

}...

}

EditParts

Command

3. erzeugt

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

20

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

}...

}

CommandStack

ausgeführtes Command

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

21


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)

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

22


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)

NodeEditPartAdapter

notifyChanged(Notification)

«implements»

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

23


Modell

EditParts

5. Notification

Empfang von Notifications EditParts

müssen sich als Listener beiModellobjekten registrieren

nur dann erhalten sie Notifications

nodeEP:NodeEditPart

node:Node

1: node.eAdapters().add(nodeEP)

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

24


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

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

25

Überblick: Model-View-Controller

Modell Figures

EditParts2. Request

Editor

1. Aktion

Command

3. erzeugt

4. modifiziert

5. Notification

6. aktualisiert

GEF-Tutorial

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

26

Wo Hilfe suchen?

1) Eclipse: Eclipse-eigene Hilfe

2) Eclipse-Artikel: http://www.eclipse.org/articles/

Viele Beiträge zu Eclipse, SWT, JFace, GEF, EMF, ...

3) Eclipse-Forum: http://www.eclipse.org/forums/

4) Source Code und speziell Beispiel-Plug-ins,

z.B. Logic- und Shapes-Editoren (GEF Examples)

5) EclipseWiki: http://wiki.eclipse.org/

GEF-Tutorial

http://www.eclipse.org/articles/

http://www.eclipse.org/newsgroups/

http://eclipsewiki.editme.com/

© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

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


© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

28


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

http://www.redbooks.ibm.com/abstracts/sg246302.html?Open

http://www-128.ibm.com/developerworks/opensource/library/os-gef/





© F

achg

ebie

t S

oftw

aret

echn

ik,

Hei

nz N

ixdo

rf I

nstit

ut,

Uni

vers

ität

Pad

erbo

rn

29


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

http://eclipse-plugins.2y.net/eclipse/index.jsp

© Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn...

Documents

Transcript of © Fachgebiet Softwaretechnik, Heinz Nixdorf Institut, Universität Paderborn...