Eclipse Tip: Create Rich User Interfaces with the HTML Browser Widget
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.)
Figure 1: Example wizard page with an embedded HTML input form.
Interacting with the HTML
- 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.
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.