Mageschneiderte grafische Editoren mit GEF Vortrag auf der

Maßgeschneiderte grafische Editoren mit GEF Vortrag auf der i. X-Konferenz 2005. 1 14. 6. 2005, Heidelberg Dr. Boris Bokowski <bokowski@ca. ibm. com>

Graphical Editor Framework Screenshots 2 © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF Gliederung 3 1. Kontext, Hintergrund 2. Features 3. Demo 4. Architektur 5. Empfehlungen zum Vorgehen © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF 4 Kontext © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF Kontext 5 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 © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r • Releases in der Regel eine Woche nach Eclipse Platform

Maßgeschneiderte grafische Editoren mit GEF 6 Features © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Empfehlungen zum Vorgehen Was ist einfach, was ist aufwändig Figures Connections 7 Layers Nesting Palette Menu Tools Direct Edit Handles Undo/Redo Grid, Snap Zoom Ruler Animation Printing Layout Integration © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r Accessibility Overview

Features Shapes Example Integration 8 Connections Figures © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m

Features Flow Example 9 Tools Layout Nesting © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m Animation

Features Logic Example Palette Ruler 10 Undo/Redo Zoom © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m

Features METUS 11 Handles Accessibility Layers Direct Edit © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF 12 Demo © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF 13 Architektur © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Plug-In-Abhängigkeiten 14 ui. views GEF RCP SWT Platform Runtime Draw 2 D © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m

Architektur Schichten 15 Interaction Layer Model-to-View mapping Workbench Integration Rendering Layout Scaling © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m Native (SWT) Layer

Architektur Model-View-Controller 16 1. Ausgangssituation Model © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 17 2. Edit. Part. Factory Model Factory Create Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 18 3. Erzeugung des Figure-Objekts Model Figure Create Figure Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 19 4. Aktualisierung Figure-Objekt Model Figure Refresh Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 20 5. Eventverarbeitung Model Figure Edit. Part Events / Request © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 21 6. Modelländerung Model Figure Command Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 22 7. Benachrichtigung über Änderung Model Figure Notification Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 23 8. Aktualisierung Figure-Objekt Model Figure Refresh Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 24 9. Änderung auf anderem Weg Model Figure Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 25 11. Benachrichtigung über Änderung Model Figure Notification Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 26 12. Aktualisierung Figure-Objekt Model Figure Refresh Edit. Part © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Model-View-Controller 27 Model Figure Refresh Commands Notification Edit. Part Events / Requests © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Modell 28 GEF schreibt Implementierung des Modells nicht vor • Kein Interface zu implementieren, kein Subclassing Konzeptuell notwendig: • Notification bzw. Observer-Pattern • Command-Pattern • Persistenz • Keine Abhängigkeit zu Controller oder View Möglichkeiten der Implementierung: • Java Beans, Property. Change. Support, Serializable • Eclipse Modeling Framework (EMF) • Roll Your Own © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Figures 29 View-Klassen = Figures • Vieles in Draw 2 D vorhanden • Label, Border, Polyline, Shapes, … • Komposition von Figures • Ansonsten Unterklasse von org. eclipse. draw 2 d. Figure Draw 2 D • Toolkit auf der Basis von SWT • Figure, Layout, Layer, Scrolling, Events, … • Kann unabhängig von GEF verwendet werden © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Figures (Draw 2 D) 30 Zeichenreihenfolge Eventverarbeitung erfolgt entsprechend • Inhalt • Unterfigures • Rahmen 1 2 13 4 5 6 2 6 3 4 © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m 5

Architektur Layouts (Draw 2 D) 31 Border. Layout Flow. Layout Top Right Left Center 1 2 3 4 Bottom XYLayout Toolbar. Layout 12, 8, 20, 10 30, 27, 14 1 2 3 © 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m

Architektur Edit. Parts 32 Edit. Part • (i. d. R. ) ein Edit. Part-Objekt pro Modell-Objekt • Genauer: ein Edit. Part-Objekt pro Einheit, die für sich selektierbar / editierbar / löschbar sein soll • Zuständigkeiten • Erzeugung des Figure-Objekts • Aktualisierung des Figure-Objekts bei Modelländerungen © • Umsetzung von Requests in Commands 20 05 by • Bestimmung der enthaltenen Objekte Bo • Erzeugung von Edit. Parts durch eine Factory ris Bo ko ws ki; m ad e av ail ab le un de r

Architektur Kontrollfluss im Detail 33 Edit. Part Tool Edit. Policy SWT Events Requests Commands © Commands ? Stack Commands 20 05 by Int er na tio na l Bu si ne ss M ac hi ne s; m

Architektur Sonstiges 34 Connections • Sind grundsätzlich gerichtet • Start- und Endpunkt sind Anchor-Objekte Commands • Undo/Redo • Command. Stack Palette • Enthält Tools • Gruppiert in Ordnern U. v. m… © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF 35 Empfehlungen zum Vorgehen © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Empfehlungen zum Vorgehen Tipps 36 EMF für die Modellobjekte verwenden • Liefert Notification und Persistenz • Bietet einen einfachen (nichtgrafischen) Editor Vorgehen • Mit einem sehr einfachen Editor beginnen (z. B. Beispiel aus dem Eclipse Magazin) • Parallele Editierbarkeit auf anderem Weg ermöglichen © (z. B. Properties-View) 20 05 by • Politik der kleinen Schritte Bo (Nachvollziehen des Kontrollflusses im Debugger ist. Boris nicht einfach) ko ws • Beispielcode lesen, Features abgucken ki; m (Shapes Example zuerst, dann erst Logic bzw. Flowad Example) e av ail ab le un de r

Empfehlungen zum Vorgehen Informationsquellen 37 High-Level-Overview • GEF-Tutorial von der Eclipse. Con 2005 • Gef. Description auf eclipsewiki Anleitungen • "Maßgeschneiderte grafische Editoren", Boris Bokowski, Frank Gerhardt Eclipse Magazin Vol. 2 • Artikel auf www. eclipse. org, u. a. © 20 05 • "A Shape Diagram Editor", Bo Majewski (Cisco) by Bo • "Building a Database Schema Diagram Editor with GEF", ris Bo ko Phil Zoio (Realsolve Solutions) ws Buch ki; m ad e av ail ab le un de r • SWT in Action (Manning), enthält ca. 50 Seiten zu GEF (Anhang)

Empfehlungen zum Vorgehen Was ist einfach, was ist aufwändig Shapes Connections 38 Layers Nesting Palette Menu Tools Direct Edit Handles Undo/Redo Grid, Snap Zoom Ruler Animation Printing Layout Integration © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r Accessibility Overview

Empfehlungen zum Vorgehen Schritt für Schritt zum grafischen Editor 39 1. Unterklasse von Graphical. Editor 2. Edit. Domain, Edit. Part. Factory, Top-Level-Modellobjekt setzen 3. Pro Edit. Part: a) Erzeugung des Objekts in der Edit. Part. Factory b) create. Figure() Figure erzeugen c) refresh. Visuals() Figure aktualisieren d) get. Model. Children() Nesting e) activate(), deactivate() Notification einrichten © 20 f) notify. Changed() Reagieren auf Notification -05 refresh() g) create. Edit. Policies() Editierbarkeit konfigurieren Boby ris Bo (Command-Objekte erzeugen) ko ws ki; 4. Falls Connections, zusätzlich: m ad a) get. Model. Source. Connections() ausgehende Verbindungen e av ail b) get. Model. Target. Connections() eingehende Verbindungen ab le un c) create. Edit. Policies() de r

Maßgeschneiderte grafische Editoren mit GEF Fazit 40 • GEF ermöglicht das Erstellen maßgeschneiderter grafischer Editoren • Aufwand ist vertretbar (abhängig von der Anzahl der Features) • Dokumentation war ein Problem, ist aber deutlich besser geworden Steile Lernkurve… …aber es lohnt sich! © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r

Maßgeschneiderte grafische Editoren mit GEF 41 Fragen? © 20 05 by Bo ris Bo ko ws ki; m ad e av ail ab le un de r