This document provides an introduction to the Eclipse GEF (Graphical Editing Framework). It outlines key GEF concepts like MVC architecture and basic components. It then walks through an example of creating a graphical editor to display wafers and dies, explaining how to define models, views, and controllers. It describes key classes like EditPart, GraphicalEditor, and GraphicalViewer and how they integrate. The document recommends references for further GEF learning.

1. Brief Introduction to
Eclipse GEF (Part I)
Yongqiang

2. Outlines
• What’s GEF?
• Basic Concepts in GEF
• Brief Introduction to Draw2d
• Dive into a Real Case – How to draw a wafer and dies on it?
• Summary
• References

3. What’s GEF?
• Stands for Graphical Editing Framework
• A library to ease the task of building a graphical editor, in
Eclipse
• Model – View – Controller Architecture

4. Samples

6. Basic Concepts
 Interaction Layer
 Model-to-View mapping
 Workbench Integration
 Rendering
 Layout
 Scaling
 Native (SWT) Layer

7. GEF Components & Dependencies
ui.views GEF
RCP
SWT Draw2D
Platform Runtime

8. Model View Controller
• Hold all data you • Not hold any • Make the link
want to be edited important data between M and V
by the users • Know nothing • In GEF, controllers
• Know nothing about the model are subclasses of
about the view EditPart.
• Must be
• Must implement completely dumb
some kind of
notification • In GEF, view is
mechanism built with Draw2d
Figures

9. • Model Notification Mechanism
• Dumb View

10. • MVC Working Together

11. Brief Introduction to Draw2d
• a lightweight system of graphical components
• Its purpose is only to show things on the screen, not to hold
and manipulate any data.
• Figures

12. • Painting of Figures
• Bounds of Figures

13. • Interesting features
• Layout Managers
• Hit-testing
• Events
• Predefined types of Figures
• Predefined types of Borders
• Connections
• Cursors and tooltips
• Layers

14. Dive into a Real Case –
How to draw a wafer and dies on it?
Q: What is in
your mind now?
How to solve
this problem?
Die
Wafer

15. Maybe…
• We need to write a model to represent wafer, die and their
relations.
• We need to write the view to represent them on screen to
users.
• And also create subclasses of EditPart (controllers).

16. Model classes? Emm… seems easy!
Just my own implementation.
If you have better idea, let me
know! 
Q: What’s the relationship
between Wafer and Die?

17. View classes (Let’s simplify it)
• A wafer is a round plate.
• A die is a square.
Ellipse RectangleFigure
If so, I believe there must be predefined figures
in draw2d to represent ellipse and rectangle!

18. The next is the subclasses of EditPart!
• Actually, we are going to use AbstractGraphicalEditPart (an
abstract class which implements the interface of EditPart).
a class org.eclipse.gef
g
«abstract»
AbstractGraphicalEditPart
+ createEditPolicies() : void
+ createFigure() : IFigure
Q: What is createFigure() used
for?
Q: How to derive it and create the link
between model and view?
Q: How many subclasses do we need? 1 or
2?

19. We need 2! One for Wafer, the other is for Die.
Cover this line first!
Return an Ellipse
Tell GEF what is my model children

20. Return an DieRectangleFigure, an
subclass of RectangleFigure

21. All classes are ready! How to integrate them into
Eclipse?
• In Eclipse, editing action happens in some Editors!
• We call such classes as EditorParts.
• Graphical editing action also happens there!
G
class org.eclipse.gef.editpart
EditorPart
GraphicalEditor
+ setEditPartFactory(EditPartFactory) : void
+ setRootEditPart(RootEditPart) : void
GraphicalViewer
+ setContents(Object) : void
GraphicalEditorWithFlyoutPalette GraphicalEditorWithPalette

22. Oh, many new classes!  See this sample
Palette GraphicalEditor GraphicalViewer

23. Data Flow Wait! the parameter is Object!
How does GEF know it is a wafer object
Wafer Data and create WaferPart?
GraphicalEditor
GraphicalViewer
Wafer View
WaferPart
Die View
DiePart

24. Let’s introduce EditPartFactory!
EditoPartFactory will tell GEF the relationship between model classes
and EditPart classes.

25. See the implementation…

26. Let’s create the Eclipse RCP App…
• Omit N words…
• Run it…
 Why are all dies
there?

27. Remember this feature?

29. So the covered line is…

30. Re-run the app…

31. Summary
• You should know…
• The basic concepts of GEF, draw2D and MVC archiecture
• How to write model, view and controller
• What GraphicalEditor and GraphicalViewer are.
• How to use EditorPartFactory
• How to use LayoutManager
• Next, in Part II, I will cover…
• how to add EditPolicy
• how to do notification?
• how to use EditDomain?
• How to add Tool and Commands?
• …

32. References
• GEF Main Page (http://www.eclipse.org/gef/)
• Good GEF tutorial (http://wiki.eclipse.org/GEF_Description,
http://wiki.eclipse.org/GEF_Description2)
• Good Chinese GEF tutorial (
http://liugang594.iteye.com/blog/152084,
http://liugang594.iteye.com/blog/152086,
http://liugang594.iteye.com/blog/152087)