aot a o t lab lab dipartimento di ingegneria dell ...negri/gef.pdf · aot lab meet the players...
TRANSCRIPT
![Page 1: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/1.jpg)
Agent and Object Technology LabDipartimento di Ingegneria dell’Informazione
Università degli Studi di Parma
AOTAOTLABLAB
Graphical Editing FrameworkGraphical Editing FrameworkGraphical Editing FrameworkGraphical Editing Framework
(GEF)(GEF)(GEF)(GEF)(GEF)(GEF)(GEF)(GEF)
Alessandro Negri
http://www.ce.unipr.it/people/negri/
![Page 2: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/2.jpg)
AOTAOTLABLAB OverviewOverviewOverviewOverview
� Interaction Layer
� Model-to-View mapping
� Workbench Integration
2
� Rendering
� Layout
� Scaling
� Native (SWT) Layer
![Page 3: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/3.jpg)
AOTAOTLABLAB GEF Components & DependenciesGEF Components & DependenciesGEF Components & DependenciesGEF Components & Dependencies
ui.views*RCP
SWT
GEF
Draw2D
<<requires>>
3
RCP
Platform Runtime
*Optional
GEF
![Page 4: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/4.jpg)
AOTAOTLABLAB GEF OverviewGEF OverviewGEF OverviewGEF Overview
� Consists of 2 Eclipse Plug-ins
� Draw2D: Layout and rendering toolkit for displaying graphics
� GEF: Framework using the old Smalltalk MVC Principles (Model, Figure and EditPart)
� General Working Mechanism:
� Input events are translated into Requests
4
� Input events are translated into Requests
� EditParts hand over Requests to EditPolicies
� EditPolicies translate Requests into GEF Commands (when they know of the particular Request)
� Commands get executed and change the model
� Model is observed by EditPart: upon a change the EditPart refreshes the Figure
![Page 5: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/5.jpg)
AOTAOTLABLAB GEF FeaturesGEF FeaturesGEF FeaturesGEF Features
� Move, resize, create, bend, connect
� Delete, undo, redo, direct-edit
� Overview & zoom
� Palette and workbench view
� Palette customization
5
� Palette customization
� Rulers & guides
� Snap-To-Grid or “geometry”
� Accessibility
� Shortest-path routing algorithm
� Directed graph layout algorithm
![Page 6: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/6.jpg)
AOTAOTLABLAB A Minimal GEF EditorA Minimal GEF EditorA Minimal GEF EditorA Minimal GEF Editor
� Creation of Eclipse plug-in with Editor
� Add the GraphicalViewer: ScrollingGraphicalViewer
� Special kind of EditPartViewer
� EditPartViewers are adapters for SWT controls that manage the EditParts
� They are populated by setting their contents
� Add the RootEditPart: ScalableFreeFormRootEditPart
6
� Brigdes gap between EditPartViewer and its contents
� Can provide servies such as zooming and freeform figures
� Define the model to be used: Graph
� Initially a simplistic subclass of Object
� Will be a container for Nodes later
� Create the view and the controller: GraphEditPart
� Define the GraphEditPartFactory
� Only Graph objects will be considered initially
![Page 7: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/7.jpg)
AOTAOTLABLAB Draw2d OverviewDraw2d OverviewDraw2d OverviewDraw2d Overview
� Lightweight Toolkit built with SWT
� Figures: graphical data structure
� Similarities to other frameworks (Swing, Hotdraw)
Rendering
7
Hotdraw)
� Not a widget toolkit (Swing)
� Built to support GEF function
Rendering
Layout
Scaling
![Page 8: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/8.jpg)
AOTAOTLABLAB Meet the PlayersMeet the PlayersMeet the PlayersMeet the Players
� Canvas – the native SWT control that hosts a “drawing”
� Figure – the fundamental building block
� It’s what you see
� can contain other children figures
� LayoutManager – encapsulates the placement of children
8
� Connection – a special type of figure based on a polyline
� ConnectionRouter – determines a connection’s line, or route
� ConnectionAnchor – provides the endpoints to a connection
� Border – a decoration that can be set on a figure
![Page 9: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/9.jpg)
AOTAOTLABLAB
Draw2d
Meet the Coach: Lightweight Meet the Coach: Lightweight Meet the Coach: Lightweight Meet the Coach: Lightweight
SystemSystemSystemSystem
SWT
Canvas
LightweightSystem
Update
Manager
figure
figure figure
contents
FigureCanvas
9
SystemSWT Events:
� Paint
� Mouse
� Key
� FocusEvent
Dispatcher
Managerfigure figure
![Page 10: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/10.jpg)
AOTAOTLABLAB Hello WorldHello WorldHello WorldHello World
Display d = new Display();
Shell shell = new Shell(d);
shell.setLayout(new FillLayout());
1
2
3
10
shell.setLayout(new FillLayout());
FigureCanvas canvas = new FigureCanvas(shell);
canvas.setContents(new Label("Hello World"));
shell.setText(“draw2d”);
shell.open();
while (!shell.isDisposed())
while (!d.readAndDispatch())
d.sleep();
3
4
5
6
7
8
9
10
11
12
![Page 11: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/11.jpg)
AOTAOTLABLAB
� Are simple lightweight containers
� Nodes forming a Tree structure
� Properties: Font, Colors, Borders, Tooltip, etc.
� Inherit parent’s font and color (all the way up to the Canvas)
� Have a Rectangular Bounds
� Are not necessarily rectangular
FiguresFiguresFiguresFigures
11
� Are not necessarily rectangular
Bounds(x, y, width, height)
Insets(top, left, bottom, right)
Client Area(derived)
![Page 12: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/12.jpg)
AOTAOTLABLAB Painting and Finding FiguresPainting and Finding FiguresPainting and Finding FiguresPainting and Finding Figures
� Figures form a tree
� Painting is pre-order, “LTR”
� Parents clip children
� Last painted is “on top”
� Hit-testing is the opposite
12
� Hit-testing is the opposite
2 34 56
![Page 13: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/13.jpg)
AOTAOTLABLAB Painting continuedPainting continuedPainting continuedPainting continued
� Override paintFigure(), not paint()
� You don’t have to worry about maintaining the state of the Graphics object; change settings as you please
� Order of painting: parent figure, children figures, parent’s border
� Request repaint() when any property that affects the
appearance is changed
13
appearance is changed
� Double-buffered painting (no flicker)
� Painting will be clipped to the figure’s bounds and the
parent figure’s client area
� You can change child figures’ z-order to determine which
one gets painted on top
� Last sibling is painted on top, in case of overlap
![Page 14: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/14.jpg)
AOTAOTLABLAB Layout ManagersLayout ManagersLayout ManagersLayout Managers
� Responsibilities� Position a Figure’s children: IFigure#setBounds()
� Provide the preferred sizes based on children and layout
� Only invalid figures will layout
� Hints passed during size calculations
14
� Hints passed during size calculations� -1 means not confined in that direction
� AbstractHintLayout caches sizes based on hints
� Scrollbars’ visibility determined by preferred size
� Constraint ≈ SWT’s LayoutData� Example: XYLayout uses Rectangle constraints
![Page 15: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/15.jpg)
AOTAOTLABLAB Layout Managers in Draw2dLayout Managers in Draw2dLayout Managers in Draw2dLayout Managers in Draw2d
Top
BorderLayout FlowLayout
Le
ft
Rig
ht
Center
1 2
3 4
15
Bottom
ToolbarLayoutXYLayout
12,8,20,10
30,20,27,14
1 2 3
![Page 16: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/16.jpg)
AOTAOTLABLAB Coordinate SystemsCoordinate SystemsCoordinate SystemsCoordinate Systems
� By default, bounds of parent and children use same coordinates
� Relative Coordinates� useLocalCoordinates()
� Child positioned relative to parent’s client area
� Scaling and Translation
16
� Scaling and Translation� Viewport
� Zoom
� Converting coordinates� translateToParent() – Translate to parent’s coordinate system
� translateFromParent() – Translate from parent’s coordinate system to child’s
� translateToAbsolute() & translateToRelative()
![Page 17: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/17.jpg)
AOTAOTLABLAB Draw2d Interaction SequenceDraw2d Interaction SequenceDraw2d Interaction SequenceDraw2d Interaction Sequence
LightweightSystem
EventDispatcher
Figure
Listeners
SWTEvent
SWTEvent Draw2d
17
Event Draw2dEvent Draw2d
Event
![Page 18: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/18.jpg)
AOTAOTLABLAB
UpdateHandle Event
Markdirty
Making Changes to FiguresMaking Changes to FiguresMaking Changes to FiguresMaking Changes to Figures
“Handler”Figure
UpdateManager
Queueupdate
…
18
Markinvalid
Perform Updatevalidate
paint
…
![Page 19: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/19.jpg)
AOTAOTLABLAB ConnectionsConnectionsConnectionsConnections
� Just Figures with special behavior
� Render a PointList managed by a ConnectionRouter
� Have a source and target ConnectionAnchor
� Define the start and end points of the connection
� Return locations using absolute coordinates
� #getLocation(referencePoint)
� Context sensitive (ChopBoxAnchor or EllipseAnchor)
19
Context sensitive (ChopBoxAnchor or EllipseAnchor)
� Routers
� Responsible for setting all points in a connection
� May use routing constraints such as Bendpoint
� Examples: Fan, Bendpoint, Manhattan, ShortestPath
� Connection can have children too
� Arrowheads, Labels, etc.
� DelegatingLayout
� Locators place children of a connection
� Connections set their own bounds after validating
![Page 20: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/20.jpg)
AOTAOTLABLAB
Fig 2
Midpoint
Endpoint }
u
v{
Anchor Location
Labels placed using ConnectionLocators
Connections et alConnections et alConnections et alConnections et al
20
Fig 1
Midpoint
PolygonDecoration
Anchor Location
-1-2-3-4
2
1
-1
-2
PolylineConnection
![Page 21: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/21.jpg)
AOTAOTLABLAB The GEF plugThe GEF plugThe GEF plugThe GEF plug----inininin
� Interaction Layer
� Model-to-View mapping
� Workbench Integration
21
![Page 22: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/22.jpg)
AOTAOTLABLAB What Problems does GEF Solve?What Problems does GEF Solve?What Problems does GEF Solve?What Problems does GEF Solve?
1. Display a Model graphically
2. Allow the User to interact with that model� Process user input from Mouse & Keyboard
� Interpret that input
� Provide hooks for updating the model
� Make it undo/redo-able
22
3. Provide Workbench integration� Actions and Menus
� Toolbars, Contributions
� Keybindings
� Where Can I use GEF?� EditorParts, Views
� Anywhere in the Workbench
![Page 23: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/23.jpg)
AOTAOTLABLAB Meet the PlayersMeet the PlayersMeet the PlayersMeet the Players
� Viewer – foundation for displaying and editing your
model
� Adapter on an SWT Control
� Selection Provider
� EditPart – elements inside a viewer
� Tool – interprets user input; represents mode
23
� Tool – interprets user input; represents mode
� Palette – displays available tools
� CommandStack – stores Commands for undo/redo
� EditDomain – ties everything together
� GraphicalEditor – for building an EditorPart
![Page 24: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/24.jpg)
AOTAOTLABLAB
Model
Element
UI Task
Comparing GEF to JFaceComparing GEF to JFaceComparing GEF to JFaceComparing GEF to JFace
Company
1) Render
Element
2) Determine
Structure
3) Edit the
Model
JFace:
JFace:
JFace:
JFace:
JFace:
24
Company
JFace:LabelProvider
JFace:LabelDecorator
JFace:ContentProvider
JFace:Filte
r
JFace:N/A
Department
Employee
![Page 25: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/25.jpg)
AOTAOTLABLAB
Model
Element
UI Task
Comparing GEF to JFaceComparing GEF to JFaceComparing GEF to JFaceComparing GEF to JFace
Company
1) Render
Element
2) Determine
Structure
3) Edit the
Model
JFace:
JFace:
JFace:
JFace:
JFace:
GEF:CompanyEditPart
25
Company
JFace:LabelProvider
JFace:LabelDecorator
JFace:ContentProvider
JFace:Filte
r
JFace:N/A
GEF:CompanyEditPart
GEF:DepartmentEditPart
GEF:EmployeeEditPart
Department
Employee
![Page 26: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/26.jpg)
AOTAOTLABLAB Displaying Your Model GraphicallyDisplaying Your Model GraphicallyDisplaying Your Model GraphicallyDisplaying Your Model Graphically
� Setup: Where will the UI appear?
� EditorPart, ViewPart, or somewhere else?
� GraphicalEditorWithFlyoutPalette
� Use a GraphicalViewer
• Manages the Draw2d foundation
26
1. Create the Viewer
2. Configure the Viewer and create its Canvas
3. Set the viewer’s contents
� Next: Mapping the Model into Figures
![Page 27: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/27.jpg)
AOTAOTLABLAB Populating a ViewerPopulating a ViewerPopulating a ViewerPopulating a Viewer
Model
GraphicalViewer
EditParts Figures
EditPart
Factory
27
@#!
![Page 28: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/28.jpg)
AOTAOTLABLAB
Model EditParts Figures
Containment, and More Containment, and More Containment, and More Containment, and More
Containment Containment Containment Containment ---- MVCMVCMVCMVC
Model Root(Diagram)
“Diagram”EditPart
figure
28
… …
Diagramchildren
… figurefigure
![Page 29: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/29.jpg)
AOTAOTLABLAB Model Model Model Model –––– View View View View ---- ControllerControllerControllerController
29
![Page 30: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/30.jpg)
AOTAOTLABLAB
Extending Extending Extending Extending
AbstractGraphicalEditPartAbstractGraphicalEditPartAbstractGraphicalEditPartAbstractGraphicalEditPart
1.createFigure()
� Just builds the figure
2. refreshVisuals()
� Reflect the model’s state in the view
3.getModelChildren()
30
3.getModelChildren()
� Determines children structure
� Looking ahead:
� Changing the model
� Responding to model changes
![Page 31: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/31.jpg)
AOTAOTLABLAB Connection EditPartsConnection EditPartsConnection EditPartsConnection EditParts
� Similarities to children parts:
� Return a list of model objects:getModelSource/TargetConnections()
� Factory can create the Connection Parts
� Differences:
31
� Differences:
� An anchor must be set for the source and target
� Target may come before Source
� Figure gets added to the Connection Layer
� NodeEditPart Interface
� Connection must have a direction
![Page 32: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/32.jpg)
AOTAOTLABLAB More about EditPartsMore about EditPartsMore about EditPartsMore about EditParts
� Deciding on Model � EditPart mapping
� Unit of “interaction”
� Selection is comprised of EditParts
� Can it be deleted?
� Graphical vs. Tree Viewers
32
� Graphical vs. Tree Viewers
� The Root EditPart
![Page 33: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/33.jpg)
AOTAOTLABLAB Editing: Putting the “E” in GEF: Putting the “E” in GEF: Putting the “E” in GEF: Putting the “E” in GEF
Model
GraphicalViewer
EditParts Figures
33
@#!
![Page 34: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/34.jpg)
AOTAOTLABLAB Editing and ToolsEditing and ToolsEditing and ToolsEditing and Tools
SWT Events
Tool
Requests
EditPartEditPart EditPolicyEditPolicyEditPolicy
Requests
34
Commands
Requests
Commands
Stack
Commands
?
� showFeedback()
� eraseFeedback()
� getCommand()
![Page 35: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/35.jpg)
AOTAOTLABLAB EditParts and EditPoliciesEditParts and EditPoliciesEditParts and EditPoliciesEditParts and EditPolicies
� EditPolicies are installed and maintained by their hostpart
� EditPart responsibility is keep view up-to-date
� EditPolicies offload the editing tasks
� Avoid limitations of single inheritance
� Separate unrelated editing tasks
35
� Separate unrelated editing tasks
� Allows editing behavior to be dynamic
� Keyed using Strings (“Roles”)
� May contribute to feedback, commands, targeting, etc.
� Tip: UnexecutableCommand vs. null
� Examples: BendpointEditPolicy, SelectionEditPolicy, etc.
� Pattern used: “Pool of Responsibility”
![Page 36: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/36.jpg)
AOTAOTLABLAB Responding to Model changesResponding to Model changesResponding to Model changesResponding to Model changes
� Extend activate() to hook listeners
� Extend deactivate() to unhook listeners
� Depending on the type of change
� Add, remove, or reorder Children
� Update Connections
36
� Update Connections
� Update the view
![Page 37: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/37.jpg)
AOTAOTLABLAB Building a GEF ApplicationBuilding a GEF ApplicationBuilding a GEF ApplicationBuilding a GEF Application
Step 1:Model
Step 2:View
Edit Policies
Property
37
Step 3:Controller
Step 4:“Editor”
Property Sheet
Palette and Tools
Add EditingBehavior
![Page 38: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/38.jpg)
AOTAOTLABLAB The Big PictureThe Big PictureThe Big PictureThe Big Picture
Model
EditPartViewer
1. acts on
EditPartViewer
EditPartViewer
EditDomain
38
6.
modifies
Palette
Tool1
Tool2
Tool3
ActiveTool
2. events
5. execute
3. request 4. command
CommandStack
Command
Command
Command
Command
![Page 39: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/39.jpg)
AOTAOTLABLAB GEF GEF GEF GEF –––– Conventions and PatternsConventions and PatternsConventions and PatternsConventions and Patterns
� Tools to interpret mouse and keyboard
� Requests to encapsulate interactions
� Tip: performRequest() for REQ_DIRECT_EDITING
and REQ_OPEN
39
� Absolute coordinates
� Edit Policies for separation of concerns
� Command pattern for undo/redo
� Use of IAdaptable
![Page 40: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/40.jpg)
AOTAOTLABLAB PalettePalettePalettePalette
� PaletteViewer: Just another GraphicalViewer
� Tip: #saveState(IMemento)
� Palette Model
� Templates vs. Tools
� Drawers, Groups and Stacks
� Permissions
40
� Permissions
� PaletteViewerProvider
� Add drag source listener for DND
� Fly-out Palette and PaletteView
� GraphicalEditorWithFlyoutPalette
� PalettePage
� FlyoutPreferences
![Page 41: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/41.jpg)
AOTAOTLABLAB Properties ViewProperties ViewProperties ViewProperties View
� Implement IPropertySource on
� The EditPart
� The Model
• Or make the model IAdaptable
� A Custom adapter for combining multiple sources
41
� A Custom adapter for combining multiple sources
� GEF provides undo/redo support via commands
� UndoablePropertySheetEntry
� Auto-Wraps IPropertySource changes in a Command
![Page 42: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/42.jpg)
AOTAOTLABLAB Outline ViewOutline ViewOutline ViewOutline View
� Use the provided TreeViewer class
� Extend AbstractTreeEditPart
� Use SelectionSynchronizer with multiple viewers
� Editor actions can be reused in the outline
� Use ScrollableThumbnail as an Overview
42
� Use ScrollableThumbnail as an Overview
![Page 43: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/43.jpg)
AOTAOTLABLAB ActionsActionsActionsActions
� Editor’s ActionRegistry
� Actions updated as needed
• Editor does the listening, not the actions
� It’s just a Map
� ActionBarContributor
43
� ActionBarContributor
� One for all editor instances
� Declared in plugin.xml
� Use RetargetActions
![Page 44: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/44.jpg)
AOTAOTLABLAB AccessibilityAccessibilityAccessibilityAccessibility
� Eclipse is accessible
� GEF is accessible
� IAdaptable#getAdapter(Class)
� AccessibleEditPart
• Magnifier and Screen reader API
44
� Focus indication (Selection Edit Policies)
� Default keyboard handlers
� Accessible Tools
� AccessibleAnchorProvider
� AccessibleHandleProvider
![Page 45: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/45.jpg)
AOTAOTLABLAB AutoAutoAutoAuto----ScrollingScrollingScrollingScrolling
� During drag operations, including native DND
� Search from target part upwards
� AutoExposeHelper
� #detect(Point)
45
� #step(Point)
� Not just for scrolling
� Expanding
� Page-flipping
� Related: ExposeHelper
� Programmatically “reveal” an EditPart
![Page 46: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/46.jpg)
AOTAOTLABLAB ZoomingZoomingZoomingZooming
� ZoomManager
� Use a Scalable RootEditPart
� Tip: available as a property on the viewer
� Action Contributions
� Zoom-In & Zoom-Out Actions
46
� Zoom-In & Zoom-Out Actions
� ZoomComboContributionItem
� Ctrl + MouseWheel (in 3.1)
� MouseWheelZoomHandler
![Page 47: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/47.jpg)
AOTAOTLABLAB The Future: GMFThe Future: GMFThe Future: GMFThe Future: GMF
http://www.eclipse.org/gmf/
47
� The Eclipse Graphical Modeling Framework (GMF) provides a generative component and runtime infrastructure for developing graphical editors based on EMF and GEF
� The project aims to provide these components, in addition to exemplary tools for select domain models which illustrate its capabilities
![Page 48: AOT A O T Lab LAB Dipartimento di Ingegneria dell ...negri/GEF.pdf · AOT LAB Meet the Players Canvas – the native SWT control that hosts a “drawing” Figure – the fundamental](https://reader036.vdocuments.us/reader036/viewer/2022070713/5ed29bbd016d386359233e4b/html5/thumbnails/48.jpg)
Agent and Object Technology LabDipartimento di Ingegneria dell’Informazione
Università degli Studi di Parma
AOTAOTLABLAB
Graphical Editing FrameworkGraphical Editing FrameworkGraphical Editing FrameworkGraphical Editing Framework
(GEF)(GEF)(GEF)(GEF)
Alessandro Negri
http://www.ce.unipr.it/people/negri/
(GEF)(GEF)(GEF)(GEF)