Embedding Web UIs in your Eclipse application

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 otherwise marked

Your Cross-Platform Choices

3

suggestion: bring these closer together

4

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

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

SWT Browser widget

7

What you get

new Browser(parent, SWT.NONE)

new Browser(parent, SWT.MOZILLA)

new Browser(parent, SWT.WEBKIT) @since 3.7

8

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

Exercise 1
Create plug-in project
Add SWT dependency
main, mainloop
Create browser
shell.setSize(600, 400)
10

Example: Google Maps

11

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

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

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

Exercise 3
Add buttons "Zoom In", "Zoom Out"
window.map instead of var map
browser.evaluate(
"window.map.zoomIn();");

15

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

Exercise 4
new Text(shell, SWT.BORDER |
SWT.READ_ONLY);
use static field for Text

Maps > Event > Event Arguments

17

Exercise 4'
Work some more on JavaScript side
Get address from Google…
http://code.google.com/apis/ajax/playground
Maps > Service > Geocoding Reverse

18

Advanced Topics

19

Initialization

browser.addProgressListener(new ProgressListener() {
public void completed(ProgressEvent event) {
// execute JavaScript code here
}
public void changed(ProgressEvent event) {
// or here
}
});

20

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

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

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

Case Studies

24

Case Study: Jazz Work Item Editor

25

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

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

PDE site.xml editor (e4 0.9)

28

OpenSocial Gadgets

29

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

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

Web gadgets could use “20 things” too

32

Other approaches

33

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

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

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

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

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

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

In Closing…

40

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

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

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

Comments?
Questions?


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

Embedding Web UIs in your Eclipse application

More Related Content

What's hot (20)

Similar to Embedding Web UIs in your Eclipse application (20)

Recently uploaded (20)

Embedding Web UIs in your Eclipse application

Editor's Notes