Contenu connexe Similaire à Embedding Web UIs in your Eclipse application (20) Embedding Web UIs in your Eclipse application1. Embedding Web UI Components
EclipseCon 2011
Boris Bokowski
© 2010 IBM Corporation
2. Motivation
http://vimeo.com/21166223
2
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. SWT Browser widget
7
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. 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
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&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. 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. 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. 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. 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. 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. 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. Advanced Topics
19
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. 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. 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. Case Studies
24
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
25. Case Study: Jazz Work Item Editor
25
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. PDE site.xml editor (e4 0.9)
28
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
29. OpenSocial Gadgets
29
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. 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. Other approaches
33
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. 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. 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. 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. 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. In Closing…
40
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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. 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. 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. Comments?
Questions?
44 IBM Confidential © 2009 IBM Corporation
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
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 IBM'S PRODUCT
PLANS OR STRATEGY IS SUBJECT TO CHANGE BY IBM WITHOUT NOTICE
45
© 2011 IBM Corp., licensed under EPL, v1.0 unless otherwise marked
Notes de l'éditeur \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 &#x201C;easy wins&#x201D;?\n \n \n