Creating well designed graphical editors
... and bringing them to the Web
Vineet Sinha                      Elias Volanakis
                                 
    Elizabeth Murnane
             ...
Creating a well designed Graphical Editor

     User Experience
     Key Concepts
     Coding Challenges



    Bringi...
Basic idea - use flash on the browser.


    But how much of the code should run on the

    browser? Options:
     Run...
Implementation:

     Provide the Graphics class on browser.
     Group graphics requests on the server for sending to ...
Implementation:

     Compile Java to Flash/ActionScript.
     Provide implementation of 'native' Java (SWT, etc) using...
Java to ActionScript compiler is good - but we found

    bugs
     Only 6, but more could be there.
     We are workin...
Use our GEF fork

     See link to our code in the talk abstract.

    Instead of draw2d.rectangle use the draw2d.rectd2...
Figure out what should run on the server and on the client.

     We currently don't provide any support to help manage ...
Download the source.
1.
     Remove file handling dependencies.
2.
     Take your app's *Editor class and make a
3.
     *...
For information updates and source code

    access notes, see:
    Architexa Labs - GEF
    http://www.architexa.com/lab...
Conquering Gef Part2: Building graphical web-apps with Eclipse
Upcoming SlideShare
Loading in …5
×

Conquering Gef Part2: Building graphical web-apps with Eclipse

5,147 views

Published on

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.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,147
On SlideShare
0
From Embeds
0
Number of Embeds
383
Actions
Shares
0
Downloads
84
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Conquering Gef Part2: Building graphical web-apps with Eclipse

  1. 1. Creating well designed graphical editors ... and bringing them to the Web
  2. 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. 3. Creating a well designed Graphical Editor   User Experience  Key Concepts  Coding Challenges Bringing GEF apps to the web   Demo  Approaches & Challenges
  4. 4. 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.
  5. 5. 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.
  6. 6. 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.
  7. 7. 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.
  8. 8. 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
  9. 9. 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)
  10. 10. 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
  11. 11. For information updates and source code  access notes, see: Architexa Labs - GEF http://www.architexa.com/labs#gef

×