The document provides an overview of the Graphical Editing Framework (GEF). GEF allows developers to create graphical editors and consists of three main components: Draw2D, Zest, and GEF. Draw2D provides primitive shapes, figures, layout managers and rendering capabilities. Zest is a graph layout and editing framework built on Draw2D. GEF implements the model-view-controller architecture and allows connecting models to views and handling user interactions. Several example applications developed using GEF are also presented such as a shapes editor, logic editor, and flow editor.

1. Graphical Editing Framework
(GEF) 101
Dan Rubel and Jaime Wren
March 24, 2011

2. Who are we?
Dan Rubel Jaime Wren Eric Clayberg

3. Upcoming Book
The Eclipse Graphical Editing Framework (GEF)
Dan Rubel - Jaime Wren - Eric Clayberg

4. What is GEF?

5. What is GEF?
GEF = GEF + Zest + Draw2D

6. Draw2D

7. Draw2D = Primitives
Figures
LayoutManagers
Event Dispatcher
Rendered onto SWT Canvas

8. Draw2D - Architecture

9. Draw2D - Figures & Borders

10. Draw2D - Layout Managers

11. Draw2D - Layout Managers Example

12. Draw2D - Connection Anchors

13. Draw2D - Connection Routers

14. Draw2D - Connection Decorations

15. Draw2D - Layers and Viewports

16. Draw2D - Layers and Viewports
Crop and Zoom

17. Zest

18. Zest
(JFace for GEF)
Model
Label Provider
Layout Algorithm

19. Zest - Examples

20. GEF

21. GEF - MVC Architecture

22. GEF- EditPartViewer

23. GEF- Book Example

24. Example - Shapes editor

25. Example - Logic editor

26. Example - Text editor

27. Example - Flow editor

28. Example - XMind

29. Example - WindowBuilder Pro