The e4 project is the next generation of Eclipse. e4 will provide a platform for pervasive component-based applications and tools. In this article, learn about some of the new features in e4, such as XWT and declarative styling. XWT is a new toolkit for defining the structure of SWT/JFace applications declaratively in XML, while leaving the business logic in Java™ code. It can separate the model and representation while saving much of the layout and UI-related code originally developed for your SWT/JFace application. An example application walks you through the XWT interface and data-binding feature.

Share:

Yi Ming Huang, Software Engineer, IBM

Yi Ming Huang is a software engineer working on Lotus ActiveInsight in the China Development Lab. He has experience on Portlet/Widget-related Web development and is interested in REST, OSGi, and Spring technologies.



08 December 2009

Also available in Japanese

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.


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.

Figure 1. Service programming model
Screenshot 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.


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
    Image shows how to begin to create a plug-in project
    Figure 3. Create new plug-in project, continued
    Image shows more about creating a new plug-in project
  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
    Screenshot shows how to begin to create a UI Element to start XWT programming

    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
    Image shows 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
    Image shows the separation of the UI layout and the action/event code in XWT and the Java source code
  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.

Figure 7. New UI presentation for Contact class
Screen shows that a dialog displays, where you create a UI presentation for the Contact class

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.

Listing 3. Application.java that opens the ContactUI
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());
}

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.


Download

DescriptionNameSize
Source codeos-eclipse-e4.code.zip6KB

Resources

Learn

Get products and technologies

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.
  • Join the developerWorks community, a professional network and unified set of community tools for connecting, sharing, and collaborating.

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Open source on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Open source
ArticleID=452614
ArticleTitle=Eclipse e4 highlights
publish-date=12082009