Embedding Web UI Components    EclipseCon 2011           Boris Bokowski                              © 2010 IBM Corporation
Motivation                          http://vimeo.com/21166223     2© 2011 IBM Corp., licensed under EPL, v1.0 unless other...
Your Cross-Platform Choices     3© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
suggestion: bring these closer together     4© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Web and Desktop User Interfaces      Web and desktop are similar        – Both have basic widgets like push buttons, entr...
Idea: Share components, not applications      Run web components on the desktop        – Use the SWT Browser control     ...
SWT Browser widget     7© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
What you get              new Browser(parent, SWT.NONE)              new Browser(parent, SWT.MOZILLA)              new Bro...
Setup          Browser b = ...;          b.setURL("http://www.foo.com");          "Begins loading a URL. The loading of it...
Exercise 1                          Create plug-in project                          Add SWT dependency                    ...
Example: Google Maps     11© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Google Maps API       (from http://code.google.com/apis/maps/documentation/introduction.html,          Apache 2.0, see htt...
Exercise 2                          Copy "Hello World" code from                          http://code.google.com/apis/maps...
Java to JavaScript        public Object browser.evaluate(String         script)        The supported mappings are:      ...
Exercise 3                          Add buttons "Zoom In", "Zoom Out"                          window.map instead of var m...
JavaScript to Java          Install function at JavaScript window level:          new BrowserFunction(browser, "hello") { ...
Exercise 4                          new Text(shell, SWT.BORDER |                                           SWT.READ_ONLY);...
Exercise 4                          Work some more on JavaScript side                          Get address from Google…   ...
Advanced Topics     19© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Initialization          browser.addProgressListener(new ProgressListener() {                      public void completed(Pr...
Other useful API        Cookies             – Browser.getCookie             – Browser.setCookie             – Browser.cle...
Some limitations          Trying 0          Trying 1          Trying 2          Trying 3          Trying 4           ...
Debugging        Sorry, no JavaScript debugger        Use Firebug / Firefox (or other browser debugger)        May be a...
Case Studies     24© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Case Study: Jazz Work Item Editor     25© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Jazz Work Item Editor: Integration Examples         Passing login information into the widget to achieve          single ...
Jazz Work Item Editor : Lessons learned         80% integration with 20% effort possible            – Editor lifecycle (d...
PDE site.xml editor (e4 0.9)     28© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
OpenSocial Gadgets     29© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Eclipse Application Services (“Twenty Things”)       Editor lifecycle                                              Long-...
Exercise 5 (at home?)                          Pick an “Eclipse Application Service”                          Implement an...
Web gadgets could use “20 things” too     32     33             IBM Confidential                                 © 2009 IB...
Other approaches     33© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Alternative Approach: RAP      RAP is a community driven Eclipse open source       project      RCP app running on a ser...
The Promise       Single sourcing          – Write once, run both desktop and/or web          – Quickly re-deploy existin...
The Problems       Desktop and web metaphors differ         – Toolbars, page metaphor, navigation, wizards, pop ups      ...
SWT Browser Edition        Program to existing SWT API             – Perhaps subset        Cross-compile to “native” web...
The Promise       Single sourcing          – Write once, run both desktop and/or web          – Reuse existing desktop or...
The Problems       Story does not address client/server split          – No existing UI components that could be reused  ...
In Closing…     40© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Be Aware of Trade-offs       Web look and feel potentially different       Form-based UIs a good candidate, since alread...
Conclusion       No silver bullet for reuse of desktop code on web       There is opportunity for reuse of web UI code  ...
Recommendations            1. Existing Desktop Apps                  • You are likely using the Eclipse application framew...
Comments?                                                          Questions?     44             IBM Confidential         ...
Legal Notice        Copyright © IBM Corp., 2007-2010. All rights reserved. This presentation and the source code in      ...
Upcoming SlideShare
Loading in …5
×

Embedding Web UIs in your Eclipse application

8,982 views

Published on

It is very common that Eclipse-based applications need a web UI for at least part of their functionality. Ideally, you would want to write your code once and deploy on the web and in Eclipse. How is this possible?
As part of the e4 project, we have explored how web UI components can be written isuch that they can be embedded in Eclipse as first-class views or editors. This tutorial will go into detail on what's involved when you want to embed web UI components in Eclipse.
Topics include: approaches for achieving code reuse, a deep dive on SWT's Browser control, details about how to communicate between Java and JavaScript, more advanced API for authentication, cookies etc.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,982
On SlideShare
0
From Embeds
0
Number of Embeds
116
Actions
Shares
0
Downloads
152
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • KM 07/28: Do we have other “easy wins”?\n
  • \n
  • \n
  • Embedding Web UIs in your Eclipse application

    1. 1. Embedding Web UI Components EclipseCon 2011 Boris Bokowski © 2010 IBM Corporation
    2. 2. Motivation http://vimeo.com/21166223 2© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    3. 3. Your Cross-Platform Choices 3© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    4. 4. suggestion: bring these closer together 4© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    5. 5. Web and Desktop User Interfaces Web and desktop are similar – Both have basic widgets like push buttons, entry fields – Tab folders, menus (menu bars, drop down, pop up) – Many more examples … Web and desktop are different – Web content scrolls, banner on every page – Web has built-in navigation model – Desktop content is packed (banner a “waste of space”) – Many more examples … Observation – Can’t just cram desktop UI into web browser (or vice versa) • Want “appropriate” web experience • Want “appropriate” desktop experience 5© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    6. 6. Idea: Share components, not applications Run web components on the desktop – Use the SWT Browser control • Backed by IE, Mozilla, or Safari • Improved API for Java™-JavaScript interop in 3.5 – Use web technology (AJAX, Flash, Silverlight, …) – Provide first class interoperability with Eclipse  Implement single source components that work on the web, Eclipse (and elsewhere…) 6© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    7. 7. SWT Browser widget 7© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    8. 8. What you get new Browser(parent, SWT.NONE) new Browser(parent, SWT.MOZILLA) new Browser(parent, SWT.WEBKIT) @since 3.7 8© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    9. 9. Setup Browser b = ...; b.setURL("http://www.foo.com"); "Begins loading a URL. The loading of its content occurs asynchronously." Alternative: b.setText("<html>…</html>"); New in 3.6: b.setURL(String url, String postData, String[] headers); 9© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    10. 10. Exercise 1 Create plug-in project Add SWT dependency main, mainloop Create browser shell.setSize(600, 400) 10© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    11. 11. Example: Google Maps 11© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    12. 12. Google Maps API (from http://code.google.com/apis/maps/documentation/introduction.html, Apache 2.0, see http://code.google.com/apis/ajaxsearch/faq/#license) <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2"></script> <script type="text/javascript"> function init() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.setUIToDefault(); } } </script> <body onload="init()"> <div id="map_canvas"></div> </body> 12© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    13. 13. Exercise 2 Copy "Hello World" code from http://code.google.com/apis/maps/documentation/introduction.html Preferences: Java > Editor > Typing "Escape text when pasting into string" Use browser.setText("…") 13© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    14. 14. Java to JavaScript  public Object browser.evaluate(String script)  The supported mappings are: – JavaScript null or undefined -> null – JavaScript number -> java.lang.Double – JavaScript string -> java.lang.String – JavaScript boolean -> java.lang.Boolean – JavaScript array whose elements are all of supported types -> java.lang.Object[] 14© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    15. 15. Exercise 3 Add buttons "Zoom In", "Zoom Out" window.map instead of var map browser.evaluate( "window.map.zoomIn();"); 15© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    16. 16. JavaScript to Java Install function at JavaScript window level: new BrowserFunction(browser, "hello") { public Object function(Object[] args) { // ... } }; Call BrowserFunction from JavaScript: alert(window.hello("42", 42)); Same rules for mapping from JavaScript to Java apply 16© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    17. 17. Exercise 4 new Text(shell, SWT.BORDER | SWT.READ_ONLY); use static field for Text Maps > Event > Event Arguments 17© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    18. 18. Exercise 4 Work some more on JavaScript side Get address from Google… http://code.google.com/apis/ajax/playground Maps > Service > Geocoding Reverse 18© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    19. 19. Advanced Topics 19© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    20. 20. Initialization browser.addProgressListener(new ProgressListener() { public void completed(ProgressEvent event) { // execute JavaScript code here } public void changed(ProgressEvent event) { // or here } }); 20© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    21. 21. Other useful API  Cookies – Browser.getCookie – Browser.setCookie – Browser.clearSessions  Simple authentication – Browser.addAuthenticationListener  Intercepting link clicks – Browser.addLocationListener – Browser.addOpenWindowListener  Safe close (vetoable) – Browser.close 21© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    22. 22. Some limitations  Trying 0  Trying 1  Trying 2  Trying 3  Trying 4 e.g. recursive calls between JavaScript and Java  Trying 5  Trying 6  Trying 7  Trying 8  Trying 9  Trying 10  Trying 11  Trying 12  Trying 13  Trying 14 22© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    23. 23. Debugging  Sorry, no JavaScript debugger  Use Firebug / Firefox (or other browser debugger)  May be able to use Firebug Light in SWT Browser  Make small steps  Test on all browsers  Log to a useful place (Java side?)  Last resort: insert print statements or alerts 23© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    24. 24. Case Studies 24© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    25. 25. Case Study: Jazz Work Item Editor 25© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    26. 26. Jazz Work Item Editor: Integration Examples Passing login information into the widget to achieve single sign-on Editor lifecycle and save actions Confirmations, warnings, and errors in standard dialog (as opposed to JavaScript alerts) Drag and drop from web UI to view Adopt workbench preferences (e.g. colors) 26© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    27. 27. Jazz Work Item Editor : Lessons learned 80% integration with 20% effort possible – Editor lifecycle (dirty bit, File > Save, title in tab) – Intercept links to not leave the page – Authentication (single sign on) – Use standard dialogs Service injection idea useful even web only – Addresses consistency issues across web UI Gaps remain between web and desktop version – No shared model and change propagation • Item changes not updated to web UI Footprint an issue: ~ 3MB per browser instance 27© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    28. 28. PDE site.xml editor (e4 0.9) 28© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    29. 29. OpenSocial Gadgets 29© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    30. 30. Eclipse Application Services (“Twenty Things”)  Editor lifecycle  Long-running operations  Receiving input  Progress reporting  Producing selection  Error handling  Standard dialogs  Navigation model  Persisting UI state  Resource management  Logging  Status line  Interface to help system  Drag and drop  Menu contributions  Undo/Redo  Authentication  Accessing preferences  Authorization 30 32 IBM Confidential © 2009 IBM Corporation© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    31. 31. Exercise 5 (at home?) Pick an “Eclipse Application Service” Implement an Eclipse View or Editor based on a Web UI, connecting to Eclipse using one of the “20 things” 10 31© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    32. 32. Web gadgets could use “20 things” too 32 33 IBM Confidential © 2009 IBM Corporation© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    33. 33. Other approaches 33© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    34. 34. Alternative Approach: RAP RAP is a community driven Eclipse open source project RCP app running on a server Widgets virtualized to the web browser – Think XWindows for SWT – SWT widget is replaced by a facade, forwarded to web control 34© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    35. 35. The Promise  Single sourcing – Write once, run both desktop and/or web – Quickly re-deploy existing desktop oriented app to the web  Continue to write in Java – Keep your existing code base – Continue to use same libraries – Same tools (JDT) – Leverage skill set 35© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    36. 36. The Problems  Desktop and web metaphors differ – Toolbars, page metaphor, navigation, wizards, pop ups – Easy to achieve ‘unnatural’ web UIs  Difficult to leverage native web advantages – Model is server based with extremely thin client  Some Eclipse platform APIs are desktop centric – Make assumptions about locality of data, responsiveness 36© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    37. 37. SWT Browser Edition  Program to existing SWT API – Perhaps subset  Cross-compile to “native” web – e.g. GWT compiler for JavaScript as target – custom cross-compilation to ActionScript  Using a “port” of SWT to web UI technology – Dojo (incomplete, experimental) – Flex (working, usable) 37© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    38. 38. The Promise  Single sourcing – Write once, run both desktop and/or web – Reuse existing desktop oriented component in web application  Continue to write in Java – Keep your existing code base – Continue to use same libraries – Same tools (JDT) – Leverage skill set 38© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    39. 39. The Problems  Story does not address client/server split – No existing UI components that could be reused – "Big ball of mud" problem  Footprint issues – SWT itself is of substantial size already – Desktop code ususally has lots of dependencies because it can  Exceptions (where SWT BE makes sense): – StyledText widget – Reuse of draw2d / GEF graphical editors interesting 39© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    40. 40. In Closing… 40© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    41. 41. Be Aware of Trade-offs  Web look and feel potentially different  Form-based UIs a good candidate, since already different looking  Simple widgets have native L&F – buttons, text fields, combos  More advanced widgets don’t – tables, trees 41© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    42. 42. Conclusion  No silver bullet for reuse of desktop code on web  There is opportunity for reuse of web UI code – In embedded browser • write once HTML, CSS, JavaScript code • with some trade offs – Using Eclipse Application Services • for consistency, proper integration  OpenSocial Gadgets – Existing spec, existing gadgets – Opens up Eclipse 42© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    43. 43. Recommendations 1. Existing Desktop Apps • You are likely using the Eclipse application framework already • Moving to e4 application services may make sense (simplification) 2. Existing Desktop, Transition to Web • No compelling solution for reusing desktop code in web context • Port components to web Easy wins: form-based UIs 3. Targeting the Web • Modify to use services • Results in better consistency 43 • Option to embed in desktop environment© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    44. 44. Comments? Questions? 44 IBM Confidential © 2009 IBM Corporation© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
    45. 45. Legal Notice  Copyright © IBM Corp., 2007-2010. All rights reserved. This presentation and the source code in it are made available under the EPL, v1.0 unless otherwise marked.  Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.  Eclipse and the Eclipse logo are trademarks of Eclipse Foundation, Inc.  IBM and the IBM logo are trademarks or registered trademarks of IBM Corporation, in the United States, other countries or both.  Rational and the Rational logo are trademarks or registered trademarks of International Business Machines Corporation in the United States, other countries or both.  Other company, product, or service names may be trademarks or service marks of others.  THE INFORMATION DISCUSSED IN THIS PRESENTATION IS PROVIDED FOR INFORMATIONAL PURPOSES ONLY. WHILE EFFORTS WERE MADE TO VERIFY THE COMPLETENESS AND ACCURACY OF THE INFORMATION, IT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, AND IBM SHALL NOT BE RESPONSIBLE FOR ANY DAMAGES ARISING OUT OF THE USE OF, OR OTHERWISE RELATED TO, SUCH INFORMATION. ANY INFORMATION CONCERNING IBMS PRODUCT PLANS OR STRATEGY IS SUBJECT TO CHANGE BY IBM WITHOUT NOTICE 45© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked

    ×