The Graphical Editing Framework (GEF) enables developers to create client-side rich graphical editors based on existing domain models. In the past building interactive box-and-arrow applications has mostly meant being limited to running them on the desktop. Moving them to the browser required a significant re-write and was only possible after severely limiting the application's capabilities. Inspired by Eclipse RAP, we have been working on supporting the Eclipse GEF APIs in the browser. The goal is to enable an easy transition of GEF-based client applications to the web and support fully functional visualization applications in the browser. See http://www.architexa.com/labs#gef for more information on our work.

1. Creating well designed graphical editors
... and bringing them to the Web

2. Vineet Sinha Elias Volanakis
 
Elizabeth Murnane
  Works for EclipseSource
 Work for Architexa  Committer on Riena and
RAP
 Built visual dev tools:
 Worked on GEF during his
▪ Microsoft
▪ Masters
IBM
▪ Nokia
▪ Accenture
Anthony Hunter

▪ Progress/IONA
 Works for IBM
 Focus on solving
 Lead committer on GEF
developers' problems
(and GMF Runtime)
 Not modeling
 Building on GEF for 5 yrs

3. Creating a well designed Graphical Editor

 User Experience
 Key Concepts
 Coding Challenges
Bringing GEF apps to the web

 Demo
 Approaches & Challenges

5. Basic idea - use flash on the browser.

But how much of the code should run on the

browser? Options:
 Run everything on the server.
 Run everything on the browser.
 Allow developers to choose
Allowing developers to choose requires us to be

able to do the other two approaches first.

6. Implementation:

 Provide the Graphics class on browser.
 Group graphics requests on the server for sending to the
browser.
Credits:

 Porting of Draw2D done by EclipseSource.
 GEF support added by Architexa.
Limitations:

 Custom support is needed for highly-interactive features, such as
drag-n-drop and mouse hover.

7. Implementation:

 Compile Java to Flash/ActionScript.
 Provide implementation of 'native' Java (SWT, etc) using
Flash methods.
Credits:

 Porting of SWT and Draw2D done as part of e4 by IBM.
 Porting of GEF done by Architexa.
Limitations:

 Main challenge is that download size can be large.
 e4 work will take until next year to be robust.

8. Java to ActionScript compiler is good - but we found

bugs
 Only 6, but more could be there.
 We are working on getting fixes into the repository, but
resources are limited
Most of 'native' Java code has been implemented -

but not everything
 We needed to implement Math.ieeeRemainder and some
ICU methods
 Implementations might need to emulate workbench or
filesystems
 Implementations might need to be debugged in Flash.

9. Use our GEF fork

 See link to our code in the talk abstract.
Instead of draw2d.rectangle use the draw2d.rectd2d

 Currently conflict between draw2d and swt versions.
Instead of depending on gef plugin add

dependencies to gef.base and gef.baseplus
 We are trying to get around heap errors.
Add dependency to some extra code provided by us:

gef.e4

10. Figure out what should run on the server and on the client.

 We currently don't provide any support to help manage this.
 Download size can be an issue...
▪ GEF and its dependencies itself can be >2MB.
▪ We have stubs for dependencies to workbench.
▪ Flash libraries *can* be lazily loaded.
Need to think about where files and preferences are stored.

 And properly implement them.
 Images in the source folders are supported.
Need to think about differing user experience

 Likely not need the typical workbench toolbar, etc.
 Using concept of Widgets (instead of Editors)

11. Download the source.
1.
Remove file handling dependencies.
2.
Take your app's *Editor class and make a
3.
*Widget class inheriting from
GraphicalWidget.
Add a main method.
4.
Launch:
5.
Use instructions - similar to the swt demo:
http://wiki.eclipse.org/E4/Running_the_demos#SWT_for_Flex

12. For information updates and source code

access notes, see:
Architexa Labs - GEF
http://www.architexa.com/labs#gef