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