Introduction

The e4 project, currently in the incubation phase, is the next generation of Eclipse. Eclipse V4.0 is to be released in 2010. Building on current Eclipse and OSGi technology as a solid foundation, a major goal of e4 is to make it easier for you to write and reuse components. There will be a uniform pervasive platform across computing environments (Web/RIA, desktop, server, cloud, embedded), and more technologies that can be seamlessly integrated into Eclipse. Look for:

• An enhanced programming model based on OSGi that provides better isolation of software components.
• XWT, a new toolkit or framework, for defining the structure of SWT/JFace applications declaratively.
• Cascading Style Sheets (CSS) to present the UI components without explicitly modifying the application code.
• A new port of the standard widget toolkit (SWT), called SWT browser edition, which allows existing SWT applications to be executed in the browser's Flash player.
• Software written in JavaScript to execute in the Eclipse runtime.

In this article, learn some of the major features in e4. You will also create an example application to use e4's new XWT interface and data-binding feature. XWT is a declarative toolkit for writing SWT/JFace UI components in XML.

Back to top

New features

e4 has several new features, from a programming model to a runtime extension. The new features position the Eclipse platform to be extensible for the future. This section briefly outlines some of the noteworthy features. See Resources for more detailed information.

Service programming model

In the original service programming model (OSGi, or Eclipse extension registry), there are three participants: service broker, service provider, and service consumer. The provider registers itself to the broker, while the consumer looks up desired services from the broker. This nicely decouples the service provider and consumer, but it requires them to have clear knowledge of the particular service broker.

The enhanced service programming model in e4 introduces the notion of context, which is part of the service broker, as a mechanism that stores and knows how to locate the services and provide them to service consumers. The service consumer uses the dependency injection technology to inject the required service provider implementation at runtime. This eliminates the knowledge of the service broker. The service providers can use various technologies to declare or register themselves to the service broker. Figure 1 shows the evolution of the service programming model.

Modeled UI

In the previous generation of the Eclipse platform UI, the workbench was explicitly hard-coded to lay out workbench windows, workbench pages, an editor area, and view stacks. Customizing the structure of the Eclipse-based application was restricted.

e4 introduces a layer that abstracts the UI elements to a model. Applications can reconfigure or extend this model to make different presentations. The model can also be manipulated on the fly; the model change will reflect the UI change immediately.

Declarative styling

e4 introduces a pluggable styling engine used to customize the style of widget presentation, such as magnitude, font, color, etc. Styles can be defined in external CSS files, which support standard CSS selectors and pseudo-classes.

Separating content from style was a great idea introduced for the Web, where we develop Web content in HTML and leave the styling in a single place in CSS files. Now the same idea can be applied in SWT development. You do not need to hard-code the styling of the widgets, but can leave it in external CSS files.

Web to desktop

e4 is exploring component reuse across multiple target platforms and across different languages. Now you can write bundles in JavaScript and integrate them to the Java-based OSGi runtime. Eclipse's JavaScript framework is responsible for parsing the manifest and resolving dependencies between JavaScript bundles to make it transparent to the OSGi runtime. Bundles can register and look up JavaScript services without even knowing the underlying implementation technology.

Desktop to Web

It's possible for a desktop application to go on the Web. e4 introduce a port of SWT called SWT browser edition (SWT/BE) that renders the SWT component in Flash.

SWT provides a common graphical programming interface and a native toolkit to draw the components in Windows®, Linux®, and now a browser. Currently, e4 supports rendering the SWT component in Flash and actionscript. Plans are to also port the JavaScript Silverlight version.

XWT

XWT, the XML UI for SWT, is a framework for writing SWT/JFace widgets declaratively in XML (.xwt). In XWT, the complete structure of an application or widget hierarchy is defined declaratively in XML. A Java file that can implement the widget, event call-backs, and business logic is also created. The UI components can bind an underlying application model that will feed the data to UI components.

The benefit of XWT is significant. XWT, along with the external CSS, can clearly decouple the business logic and UI-related aspects, thereby saving you work and making the SWT code easier to maintain.

Back to top

Using XWT

In this section, learn about XWT by creating a simple application. With the application, you'll use e4’s new XWT perspective and take a look at the XWT data-binding feature. See Download to download the source code used here.

Hello XWT

The first step is to create an empty plug-in project based on Eclipse V3.5. You don't create a rich client platform (RCP) application or use any other application template. Here's how:

1. Create the XWT sample from scratch, as shown in figures 2 and 3.
   
   Figure 2. Create new plug-in project
   
   
   
   
   Figure 3. Create new plug-in project, continued
   
   
   
2. In the newly created Hello project, add the following plug-ins as project dependencies. They are the minimum requirements to use XWT and data binding.
   • org.eclipse.swt
   • org.eclipse.jface
   • org.eclipse.core.runtime
   • org.eclipse.e4.xwt
   • org.eclipse.core.databinding
   • org.eclipse.core.databinding.property
   • org.eclipse.jface.databinding
   • com.ibm.icu

   The project is now set up.

3. Create a new UI Element to start XWT programming. Eclipse will automatically create an XWT UI declaration (xwt file) and the Java class for you, as shown in Figure 4.
   
   Figure 4. Create UI element
   
   
   

   You might notice that a new perspective called XWT is opened. It contains a view to preview the application UI and a palette from which you can drag and drop SWT/JFace components to your code editor.

4. Drag and drop a Button control to the XML code. It should then look like Figure 5.
   
   Figure 5. XWT with one button
   
   
   

   Notice that the application structure, or widget hierarchy, is declared in XML (.xwt), which will save you a lot of layout work that initially will be written in a Java class. The underlying Java class contains the event handlers, constructors, etc. If you are familiar with Adobe Flex, you might find some commonalities here.

5. To add a click handler on the Say Hello button, simply add SelectionEvent=”sayHello” in the <Button> tag and click Generate Java code. In the HelloWorld.java, an event handler is generated. The UI layout and the action/event code are nicely separated in XWT and the Java source code. Figure 6 shows an example.
   
   Figure 6. Add SelectionEvent for the button
   
   
   
6. Modify the HelloWorld.java and fill in the click handler, as shown in Listing 1. It opens a message box to say Hello XWT.
   
   Listing 1. sayHello method
   

   public void sayHello(Event event) { Button btn = (Button) event.widget; MessageDialog.openInformation(XWT.findShell(btn), "Hello XWT", "Hello XWT"); }

   
   

   That was pretty simple.

7. The last step is to create a main function that kicks off the application. Create a class named Application and write the straightforward main function shown in Listing 2.
   
   Listing 2. main function
   

   public static void main(String[] args) { URL content = HelloWorld.class.getResource("HelloWorld.xwt"); try { XWT.open(content); } catch (Exception e) { e.printStackTrace(); } }

   
   

   Run the Application.java as a Java application, and it will work as you expect.

Data binding

The e4 data-binding feature works very well with XWT. You can bind a model class to an XWT UI while, at the same time, the data field in the model object will be automatically fed to the UI controls. The sample code in this section shows how it works.

1. Create a new POJO named Contact in the sample.model package. The Contact class will contain name and phone as its member fields.
2. Right-click the Contact class and select New > New UI Presentation. A dialog will display, where you create a UI presentation for the Contact class. Figure 7 shows an example.

When you finish the creation, ContactUI.java and Contact.xwt will be created with the basic configurations.

Pay attention to {Binding path=phone} and {Binding path=name} in the generated xwt file; they imply that text fields are bound to the phone and name field of the context object.

But, where is the contact object in this application context? It's set when you kick off the application.

Let’s create another Application class that will contain a main function to open the ContactUI and set up the context object. Notice the XWT.open method in Listing 3.

public static void main(String[] args) {
	URL content = 
		ContactUI.class.getResource("ContactUI.xwt");
	Contact c1 = new Contact("Huang", "22771");
	try {
		XWT.open(content,c1);
	} catch (Exception e) {
		e.printStackTrace();
	}
}

Run the Application.java, and the text control will be filled with Huang and 22771.

On the other hand, you can also easily get the context object during the UI manipulation. Suppose you add to the UI structure a button whose purpose is to list the current contact information. The selection event handler will look something like Listing 4.

Listing 4. Get the context object

public void submitContact(Event event) {
	Contact c = (Contact) XWT.getDataContext(this);
	Button btn = (Button) event.widget;
	MessageDialog.openInformation(XWT.findShell(btn),
               c.getName(), c.getPhone());
}

Back to top

Conclusion

e4 has many enhancements and new features that modernize the platform and programming models. Though e4 is in the incubation phase, and the code is not entirely stable, the interesting new features are attractive for Eclipse platform developers and Eclipse technology adopters. Check out version 0.9 build and give it a try.

Back to top

Download

Information about download methods

Resources

Learn

• Learn all about the e4 project.
  
  
• Get a description of the e4 V0.9 new and noteworthy features.
  
  
• Read the whiteaper titled "e4 Technical Overview."
  
  
• Check out the "Recommended Eclipse reading list."
  
  
• Browse all the Eclipse content on developerWorks.
  
  
• Follow developerWorks on Twitter.
  
  
• New to Eclipse? Read the developerWorks article "Get started with the Eclipse Platform" to learn its origin and architecture, and how to extend Eclipse with plug-ins.
  
  
• Expand your Eclipse skills by checking out IBM developerWorks' Eclipse project resources.
  
  
• To listen to interesting interviews and discussions for software developers, check out check out developerWorks podcasts.
  
  
• The My developerWorks community is an example of a successful general community that covers a wide variety of topics.
  
  
• Stay current with developerWorks' Technical events and webcasts.
  
  
• Watch and learn about IBM and open source technologies and product functions with the no-cost developerWorks On demand demos.
  
  
• Check out upcoming conferences, trade shows, webcasts, and other Events around the world that are of interest to IBM open source developers.
  
  
• Visit the developerWorks Open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM's products, as well as our most popular articles and tutorials.
  
  

Get products and technologies

• Run e4/XWT demos.
  
  
• Get the Eclipse e4 Release Build: 0.9.
  
  
• Check out the latest Eclipse technology downloads at IBM alphaWorks.
  
  
• Download Eclipse Platform and other projects from the Eclipse Foundation.
  
  
• Download IBM product evaluation versions or explore the online trials in the IBM SOA Sandbox and get your hands on application development tools and middleware products from DB2®, Lotus®, Rational®, Tivoli®, and WebSphere®.
  
  
• Innovate your next open source development project with IBM trial software, available for download or on DVD.
  
  

Discuss

• The Eclipse Platform newsgroups should be your first stop to discuss questions regarding Eclipse. (Selecting this will launch your default Usenet news reader application and open eclipse.platform.)
  
  
• The Eclipse newsgroups has many resources for people interested in using and extending Eclipse.
  
  
• Participate in developerWorks blogs and get involved in the developerWorks community.
  
  

About the author

Rate this article

Comments

Back to top

Table of contents

• Introduction
• New features
• Using XWT
• Conclusion
• Download
• Resources
• About the author
• Comments

Local resources

• IBM Innovation Center - Austin, TX
• IBM Innovation Center - Chicago, IL
• IBM Innovation Center - Dallas, TX
• IBM Innovation Center - San Mateo, CA
• IBM Innovation Center - Waltham, MA
• Technical Briefings in North America

Dig deeper into Open source on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers