Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Anyone involved in developing web-based applications can attest to the importance
of their visual appeal. As users, we have become quite accustomed to seeing nice-looking
web pages, whether we happen to be checking our credit card bills or just reading the latest
headlines. In fact, research has shown that the first few seconds are crucial in
determining if a new visitor will continue exploring the web site.
The Eclipse Rich Client Platform (RCP) also allows developers to create visually
appealing user interfaces. However, most Eclipse UI development today requires an
experienced Java developer well-versed in the usage of SWT, JFace, and UI Forms API.
Compared to web designers, these are still relatively scarce.
The way of the Browser
One possible way to bridge this gap is to simply merge the two technologies.
The Browser widget, part of SWT since version 3.0, allows for embedding of
a “platform-native” web browser into Eclipse-based applications. For instance,
one can use this widget to display an arbitrary HTML page directly in a JFace Wizard.
The actual HTML rendering is delegated to a platform-specific web browser (e.g., Internet
Explorer in MS Windows, Mozilla on Linux, etc.)
To display some HTML in the Browser widget, all the application has to do is
instantiate it with the desired Composite parent and load it with the HTML.
This can come in the form of a URL (local or remote), or the HTML source itself.
The HTML itself can be arbitrarily complex — thanks to the ubiquitous support of
Javascript and the Document Object Model (DOM), web pages can be quite dynamic without
requiring round-trips to the server.
Figure 1: Example wizard page with an embedded HTML input form.
Interacting with the HTML
But how can the host application interact with the embedded HTML page? Simply displaying
it would prove rather limiting. A quick glance at the Browser API reveals that the host
application can install several listeners to monitor events such as new window opening
and closing, changes in window visibility, page loading progress, as well as title,
location, and status line changes. The application can also invoke arbitrary Javascript
code to be executed in the context of the HTML page. The latter capability in particular
allows the application to dynamically change the embedded document’s structure —
it can use Javascript and DOM API to create, modify, and remove parts of the HTML document.
This is quite powerful and may be sufficient in a number of scenarios. Unfortunately,
this method alone does not allow the Javascript to return any meaningful value back
to the caller, and thus it does not support a full two-way interaction between Eclipse
and the embedded web page.
private String getFieldValue(String field) {
final String[] result = new String[1];
browser.addLocationListener(new LocationAdapter() {
public void changing(LocationEvent event) {
int i = event.location.indexOf('#');
String value = event.location.substring(i + 1);
try {
result[0] = URLDecoder.decode(value, "UTF-8");
} catch (UnsupportedEncodingException e) {
// ignore
}
event.doit = false;
browser.removeLocationListener(this);
}
});
browser.execute("window.location = window.location.href
+ "#" + document.forms['input'].elements['"
+ field + "'].value");
return result[0];
}
Ideally, the Browser widget would allow the application to access the embedded
document’s object model (DOM) directly. In fact, support for this has already been
proposed (see bug 57477).
Until this proposal is implemented, it is possible to combine the use of listeners
and Javascript execution to query the embedded DOM. Such interaction “protocol”
could look something like this:
- Install a temporary LocationListener whose
changing(LocationEvent)
method would extract the query result from the location string, cancel the event,
and remove itself as a listener. - Execute a Javascript expression that would query the DOM and set the query
result as the new navigation location, thus triggering a location change event
and invoking the previously installed listener.
While this approach certainly qualifies as a hack and only supports limited interaction
between the application and the web page, it allows experienced web designers to apply
the full range of web browser technologies to create visually compelling HTML components,
such as input forms, tables, menus, and so on.
A full example demonstrating this technique is available
here. To compile, import the downloaded zip file into Eclipse (version 3.2 or later)
as an existing Eclipse project. Run it as an Eclipse Application and in the runtime
workbench choose File -> New -> Other…
In the New Wizard dialog, expand the last category (Other), select New Browser UI Example
and click Next. The first page of this wizard lets you populate a simple HTML input form,
the second page simply displays the entered values as a demonstration of the ability
to interact with the embedded HTML form.
Resources
About the Author
Peter Nehrer is a software consultant specializing in Eclipse-based enterprise solutions and J2EE applications.
He is the founder of Ecliptical Software Inc.
and a contributor to several Eclipse-related Open Source projects. He holds an M.S. in Computer Science
from the University of Massachusetts at Amherst, MA. Peter can be reached at pnehrer AT eclipticalsoftware DOT com.
