Einführung in das Graphical Editor Framework Tutorial, iX-Konferenz 2005.1 13.6.2005, nh-Hotel, Heidelberg Dr. Boris Bokowski

Einführung in das Graphical Editor Framework

Tutorial, iX-Konferenz 2005.1

13.6.2005, nh-Hotel, Heidelberg

Dr. Boris Bokowski <[email protected]>

2

GEF – Graphical Editor Framework

• Existiert seit ca. fünf Jahren

• Ursprünglich com.ibm.etools.gef, dann org.eclipse.gef

• Basis für graphische Editoren in IBM-Produkten (z.B. WSAD)

• Wird zunehmend in Open Source- und kommerziellen Produkten verwendet

Einbindung in Eclipse

• Einbindung in das Top-Level-Projekt "Eclipse Tools"

• Versionsnummern sind synchron zu Eclipse Platform

• Aktuelle Version: 3.0.1

• Nächste Version: 3.1, Mitte 2005

• Releases in der Regel eine Woche nach Eclipse Platform

Maßgeschneiderte grafische Editoren mit GEFKontext

© 2005 by Boris Bokowski; made available under the EPL v1.0

3

Graphical Editor FrameworkScreenshots


4

1.Set-Up

2.Features von GEF

3.Hello, World

4.Architektur von GEF

5.Hands-On:

Schrittweise Weiterentwicklung von Hello World

6.Hands-On: Ein fertiger Beispieleditor

Maßgeschneiderte grafische Editoren mit GEFGliederung


5

Set-Up

Maßgeschneiderte grafische Editoren mit GEF


6

Eclipse 3.1 RC2

• eclipse-SDK-3.1RC2-win32.zip entpacken, z.B. nach C:\GEF-Tutorial

(Optional: JRE

• jre.zip entpacken, nach C:\ GEF-Tutorial\eclipse)

Workspace: GEF, GEF-Examples, Tutorial-Projekte

• workspace.zip entpacken, nach C:\GEF-Tutorial

Eclipse starten

• C:\GEF-Tutorial\eclipse\eclipse.exe

• Als Workspace auswählen: C:\GEF-Tutorial\workspace

• Häkchen bei Default

• Welcome-View schließen

Maßgeschneiderte grafische Editoren mit GEFSet-Up


7

Maßgeschneiderte grafische Editoren mit GEFSet-Up – Import von Plug-Ins

Inkrementellen Compiler temporär ausschalten

8

Import der vorbereiteten Projekte

• File->Import…



1

4

32

9

Close Projects

Inkrementellen Compiler wieder anschalten



1

2

10

Features



11

Empfehlungen zum Vorgehen Was ist einfach, was ist aufwändig


AccessibilityAccessibility

ZoomZoom

OverviewOverview

Undo/RedoUndo/RedoPrintingPrinting

MenuMenu ToolsTools

HandlesHandles

Direct EditDirect Edit

Grid, SnapGrid, Snap

PalettePalette

AnimationAnimation

NestingNestingLayersLayersConnectionsConnectionsShapesShapes

RulerRuler

LayoutLayoutIntegrationIntegration

12

FeaturesShapes Example

© 2005 by International Business Machines; made available under the EPL v1.0

ConnectionsConnections

ShapesShapes

IntegrationIntegration

13

FeaturesFlow Example


AnimationAnimation

NestingNesting

LayoutLayout

ToolsTools

14

FeaturesLogic Example


ZoomZoomUndo/RedoUndo/RedoPalettePalette

RulerRuler

15

FeaturesMETUS


AccessibilityAccessibility

HandlesHandles

Direct EditDirect Edit

LayersLayers

16

GEF-Examples ausprobieren

• Run->Run…

Maßgeschneiderte grafische Editoren mit GEFFeatures


1

2

3

4

17

File->New->Project…

"Testprojekt" eingeben, Finish

File->New->Example…

Window->Show View->Other…, Basic->Palette



18



19

Demo



20

Hello, World



21

Maßgeschneiderte grafische Editoren mit GEFHello, World


1

2

3

4

22



56

7

23



8

9

10

24



package de.eclipseteam.geftutorial.simple.views;

import org.eclipse.swt.widgets.Composite;

import org.eclipse.ui.part.ViewPart;

public class SampleView extends ViewPart {

public void createPartControl(Composite parent) {

// TODO Auto-generated method stub

}

public void setFocus() {

// TODO Auto-generated method stub

}

}

25



1

23

4

26



public class SampleView extends ViewPart {

private GraphicalViewer graphicalViewer;

public void createPartControl(Composite parent) {

graphicalViewer = new GraphicalViewerImpl();

graphicalViewer.createControl(parent);

graphicalViewer.setEditDomain(new EditDomain());

graphicalViewer.setEditPartFactory(new EditPartFactory() {

……

});

graphicalViewer.setContents(new Object());

}

public void setFocus() {

}

}

27



public EditPart createEditPart(EditPart context, Object model) {

EditPart result = new AbstractGraphicalEditPart() {

protected IFigure createFigure() {

return new Label("Hello, World");

}

protected void createEditPolicies() {

}

};

result.setModel(model);

return result;

}

28

Architektur



29

ArchitekturPlug-In-Abhängigkeiten

GEFui.views

RCP SWT

Platform Runtime

Draw2D


30

ArchitekturSchichten

Interaction Layer

Model-to-View mapping

Workbench Integration

Rendering

Layout

Scaling

Native (SWT) Layer


31

ArchitekturModel-View-Controller

Model Figure

Events / Requests


EditPart

CommandsNotification

Refresh

32

ArchitekturModell

Keine Annahmen in GEF, was das Modell angeht.

Sinnvoll sind:

• Notification bzw. Observer-Pattern

• Command-Pattern

• Persistenz

• Keine Abhängigkeit zu Controller oder View

Möglichkeiten:

• Java Beans, PropertyChangeSupport

• Eclipse Modeling Framework (EMF)


33

ArchitekturView

View-Klassen

• Vieles in Draw2D vorhanden

• Ansonsten Unterklasse von org.eclipse.draw2d.Figure

Draw2D

• Toolkit auf der Basis von SWT

• Figure, Layout, Layer, Scrolling, Events, …

• Kann unabhängig von GEF verwendet werden


34

Architektur Figures (Draw2D)

1

3 6

4 512

2 34 5 6


35

Architektur Layouts (Draw2D)

Top

BorderLayout FlowLayout

Bottom

Left

RightCenter

1 2

3 4

ToolbarLayoutXYLayout

12,8,20,10

30,20,27,14

1 2 3


36

ArchitekturController

EditPart

• (i.d.R.) ein EditPart-Objekt pro Modell-Objekt• Genauer: ein EditPart-Objekt pro Einheit,

die für sich selektierbar / editierbar / löschbar sein soll

• Zuständigkeiten• Erzeugung des Figure-Objekts• Bestimmung der enthaltenen Objekte• Aktualisierung des Figure-Objekts bei Modelländerungen• Umsetzung von Requests in Commands

• Erzeugung von EditParts durch eine Factory


37

ArchitekturErzeugung von EditParts

Model

GraphicalViewer

EditParts Figures

@#!

EditPartFactory


38

Hands-OnSchrittweise Erweiterung von Hello, World

Schritt 1:

Schritt 2: Liste von Strings

Schritt 3: Editierbarkeit (Verschieben)

Schritt 4: Editierbarkeit (Nesting)

Schritt 5: …

Schritt 6: Überraschung!


39

ArchitekturKontrollfluss im Detail

SWT Events

ToolTool

Requests

EditPartEditPart

Commands

EditPart EditPart EditPolicyEditPolicyEditPolicyEditPolicyEditPolicyEditPolicy

Requests

Commands

StackStack

Commands

?


40

Hands-OnSchrittweise Erweiterung von Hello, World

Schritt 1:

Schritt 2: Liste von Strings

Schritt 3: Editierbarkeit (Verschieben)

Schritt 4: Editierbarkeit (Nesting)

Schritt 5: BulletBorder

Schritt 6: Outline Editor!


41

ArchitekturSonstiges

Connections

• Sind grundsätzlich gerichtet

• Start- und Endpunkt sind Anchor-Objekte

Commands

• Undo/Redo

• CommandStack

Palette

• Enthält Tools

• Gruppiert in Ordnern

U.v.m…


42

Empfehlungen zum VorgehenCheat Sheet

1. Unterklasse von GraphicalEditor

2. EditDomain, EditPartFactory, Top-Level-Modellobjekt setzen

3. Pro EditPart:

a) Erzeugung des Objekts in der EditPartFactory

b) createFigure() Figure erzeugen

c) refreshVisuals() Figure aktualisieren

d) getModelChildren() Nesting

e) activate(), deactivate() Notification einrichten

f) createEditPolicies() Editierbarkeit konfigurieren(Command-Objekte erzeugen)

4. Für Connections:

a) getModelSourceConnections() ausgehende Verbindungen

b) getModelTargetConnections() eingehende Verbindungen

c) createEditPolicies()

5. Palette, Tools, Handles, Drag and Drop, … © 2005 by Boris Bokowski; made available under the EPL v1.0

43

Empfehlungen zum VorgehenInformationsquellen

High-Level-Overview

• GEF-Tutorial von der EclipseCon 2005

• GefDescription auf eclipsewiki

Anleitungen

• "Maßgeschneiderte grafische Editoren", Boris Bokowski, Frank GerhardtEclipse Magazin Vol. 2

• Artikel auf www.eclipse.org• "A Shape Diagram Editor", Bo Majewski (Cisco)• "Using GEF with EMF", Chris Aniszczyk (IBM)• "Building a Database Schema Diagram Editor with GEF",

Phil Zoio (Realsolve Solutions)

Buch

• SWT in Action (Manning), enthält ca. 50 Seiten zu GEF (Anhang)


44

Fragen?



Documents

Einführung in das Graphical Editor Framework Tutorial, iX-Konferenz 2005.1 13.6.2005, nh-Hotel, Heidelberg Dr. Boris Bokowski