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

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

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

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.

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.

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.

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.

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

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)

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

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