Eclipse Tip: Create Rich User Interfaces with the HTML Browser Widget

Wednesday Nov 15th 2006 by Peter Nehrer

Discover how the SWT Browser widget allows you to embed HTML pages directly into your Eclipse application. Learn how to use it to create visually appealing user interfaces in Eclipse.

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.

Listing 1: Method for extracting the value of a form field.
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.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:

  1. 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.
  2. 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.


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.

Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved