The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda!...
Transcript of The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda!...
![Page 1: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/1.jpg)
© 2004 IBM Corporation | February 2-5, 2004
The Graphical Editing Framework
![Page 2: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/2.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Agenda
! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On the horizon! Q & A
![Page 3: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/3.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
What is GEF?
! Graphical Editing Framework! Part of the Eclipse Tools Project
! http://www.eclipse.org/gef! A feature with 2 plug-ins
! Draw2d
! GEF! Stable! Active
! news://news.eclipse.org/eclipse.tools.gef
![Page 4: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/4.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF History
! Visual Age! Create a foundation for GUI builders, and more
! (Now the Eclipse Visual Editor Project)
! 4 years active development! Used for
! Class diagrams! Organization charts! Flow/Activity diagrams! State machines! E-R diagrams! GUI builders
![Page 5: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/5.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF Overview
! Interaction Layer! Model-to-View mapping! Workbench Integration
! Rendering! Layout! Printing
! Native (SWT) Layer
![Page 6: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/6.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEFWorkbench
GEF Overview
SWTJFace Draw2D
![Page 7: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/7.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d
! Lightweight toolkit built with SWT! Optimized layout and painting
! Features:
! Hierarchical Tree Layout 3.0
! Directed Graph Layout 3.0
! Non-rectangular figures! Decorated connections
! Zoom! Print! Overview! Layering
![Page 8: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/8.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF (the plug-in)
! An editing framework based on Viewers! The “interaction” layer! Draw2d for graphics! MVC architecture
! Flexible mappings between model and view! B.Y.O.M.
![Page 9: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/9.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF Features
! Palette! Standard set of tools
! User customization allowed
! Undo/Redo support! Direct-edit (in place editing)! Rulers and Guides 3.0
! Snap-to-{Guide, Grid, Geometry} 3.0
! Accessible: keyboard, voice, magnifier
![Page 10: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/10.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – Introduction
! Hello World! Constructing a UML diagram
![Page 11: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/11.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – Hello World
Display d = new Display();Shell shell = new Shell(d);shell.setLayout(new FillLayout());
FigureCanvas canvas = new FigureCanvas(shell);canvas.setContents(new Label("Hello World"));
shell.open();while (!shell.isDisposed())
while (!d.readAndDispatch())d.sleep();
123456789
1011
![Page 12: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/12.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – Behind the Scenes
FigureCanvas
swt.widgets.Canvas
IFigure
contents
EventDispatcher
UpdateManager! Schedule layouts! Calculate damage
IFigure
IFigure IFigure
IFigure
IFigure IFigure
LightweightSystem
! Mouse! Keyboard! Focus
![Page 13: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/13.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – UML Diagram Example
! Class (or type) figure! Name and icon
! Compartments for attributes/methods! Associations/Inheritance
! “Sticky” notes for documentation
![Page 14: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/14.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – UML Class Figure design
! Extend Figure! Header
! Just a Label figure
! Compartments! Vertical ToolbarLayout
! Custom border for separator line
! LineBorder around class! Another ToolbarLayout for
the whole figure
String
ToolbarLayout
1
2
3
…x2
![Page 15: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/15.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – UML Class
! Hmm, Not quite perfect..! Toolbar layout tweaks
! #setMinorAlignment(TOP_LEFT)
! #setStretchMinorAxis(false)
![Page 16: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/16.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – Relationships and Inheritance
! PolylineConnection
! Delegating layout manager
! PolygonDecoration
! #setTemplate(PointList)
! ChopboxAnchor
-1-2-3-4
2
1
-1
-2
![Page 17: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/17.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – Labeling Connections
! ConnectionEndpointLocator! ConnectionLocator
Fig 1
Fig 2
Midpoint
Endpoint }u
v{
![Page 18: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/18.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – Sticky Notes
! org.eclipse.draw2d.text! FlowPage – root for “flowing” figures! TextFlow – wraps text in a paragraph! Custom “folded-corner” border
![Page 19: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/19.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Draw2d – UML Diagram
![Page 20: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/20.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF – Tutorial
! Based on article @ developerWorks! For more reference articles, go to:
http://www.eclipse.org/gef
![Page 21: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/21.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF – Tutorial
Step 1:Model
Step 1:Model
Step 2:View
Step 2:View
Step 3:ControllerStep 3:
Controller
Step 4:“Editor”Step 4:“Editor”
Edit PoliciesEdit Policies
Property Sheet
Property Sheet
Palette and Tools
Palette and Tools
Editing Behavior
![Page 22: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/22.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Step 1 – The model
! Bring your own model! Model requirements
! Notification mechanism
! Persistence is your responsibility
! Business model vs. Diagram model! Commands
![Page 23: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/23.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Step 2 – The View
! Draw2d Figures! Don’t reinvent the wheel! Information hiding! Encapsulate to reduce coupling
![Page 24: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/24.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Step 3 – Controllers: EditParts
! Unit of “interaction”! Selection is comprised of EditParts! Figure or TreeItem-based! EditPartViewer! Special EditParts:
! Root! Contents! Connections
![Page 25: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/25.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Step 4 – Bring it all together
! Create your workbench part (EditorPart)! An EditDomain! Instantiate some viewer! Set the factory and contents for the viewers
![Page 26: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/26.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Next – Adding Edit Support
! Add editing capability! Commands to change model
! Install Edit Policies for commands and feedback
! Add listeners to the model to refresh UI! Edit policies
! Pluggable helpers on an editpart
! Handle a specific part feature
! May contribute to feedback, commands, and targeting
! Examples include
![Page 27: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/27.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF – Conventions and Patterns
! Tools to interpret mouse and keyboard! Requests to encapsulate interactions! Absolute coordinates! Edit Policies for separation of concerns! Command pattern for undo/redo! Use of IAdaptable
![Page 28: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/28.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF: Model - Controller – View
Model EditParts Figures
RequestsRequests
CommandsCommands
xxxx
![Page 29: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/29.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
GEF – Tips and Techniques
![Page 30: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/30.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Accessibility
! Eclipse is accessible! GEF is accessible! IAdaptable#getAdapter(Class)
! AccessibleEditPart
! Magnifier and Screen reader API
! Focus indication (Selection Edit Policies)! Default keyboard handlers! Accessible Tools
! AccessibleAnchorProvider! AccessibleHandleProvider
![Page 31: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/31.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Auto Scrolling! During drag operations, including native DND! Search from target part upwards! AutoExposeHelper
! #detect(Point)! #step(Point)
! Not just for scrolling! Expanding! Page-flipping
! Related: ExposeHelper! Programmatically “reveal” an EditPart
![Page 32: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/32.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Rulers and Guides! Work in progress! Viewers now have properties! Ruler-specific properties:
! Horizontal ruler! Vertical ruler! Ruler visibility
! RulerComposite! RulerProvider
! Provide guide locations
![Page 33: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/33.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Snap-To-“G”
! Grid! Dragging and resizing confined to
grid coordinates! Geometry
! Dragging and resizing snap to the rows or columns implied by existing objects in the diagram
! Guides! Snap to user defined horizontal or
vertical guides
![Page 34: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/34.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Snap-To-“G” continued
! IAdaptable#getAdapter(Class)! SnapToStrategy
! Extended data on Request! Client’s responsibilities
! Representing guides in the model
! Model/Command support to attach parts to guides
![Page 35: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/35.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Direct Editing
! DirectEditRequest sent by select tracker! May contain mouse location or modifier keys! DirectEditManager
! Manages CellEditor lifecycle! Tracks modification and committing! Live feedback on diagram! Value validation! Obtains the command for applying value
! Improved CellEditor API in Eclipse 3.0
![Page 36: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/36.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Animation
! Demonstrated in GEF palette and Flow Example! Create an Animation coordinator class! Capture the effects of layouts as they occur! Playback the layout incrementally
! 0 < progress < 1
! Each step calls revalidate on participants of animation! Force layouts without repainting! It’s not always easy
![Page 37: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/37.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Property Sheet Support
! Implement IPropertySource on! the model object
! the EditPart
! Custom adapter for combining multiple sources! GEF provides undo/redo support via commands
![Page 38: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/38.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
T&T: Zoom and Scaling
! Use a root EditPart supporting scaling! Actions and widgets for toolbars/menus
! Separation and compression! Use back-to-front painting! Same issues apply for overview and printing
![Page 39: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/39.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Future Work
! More and better graph layout algorithms! Connection Routers! Investigate new mediums
! OpenGL
! Java2D
! Provide common shapes/symbols! WYSIWYG Documents and Text! New Palette objects and presentations
![Page 40: The Graphical Editing Framework · Graphical Editing Framework | © 2004 IBM Corporation Agenda! About the GEF project! Draw2d Introduction! GEF Tutorial! Tips and Techniques! On](https://reader036.fdocuments.in/reader036/viewer/2022070921/5fba22d6cd92f269b229671e/html5/thumbnails/40.jpg)
Graphical Editing Framework | © 2004 IBM Corporation
Questions?