XWT Documentation

What is XWT?

XWT stands for Eclipse XML Window Toolkit. It is a powerful and lightweight declarative UI framework designed for Eclipse, based on XML as markup language.

XWT simplifies UI development by a physical separation of UI definition in XML from the run-time logic in programing language. It is very intuitive for creating interfaces directly or via tools such as Visual Editor^[1]. Especially for people with a background in web design and technologies.

Doc: Overview

Getting started

Hello, world!

Here is a simple example.

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt">
    <Shell.layout>
       <FillLayout/>
    </Shell.layout>
    <Button text="Hello, world!">
    </Button>
</Shell>

The same UI can be developed in Java corresponding:

Shell parent = new Shell();
parent.setLayout(new FillLayout());
Button button = new Button(parent, SWT.NONE);
button.setText("Hello, world!");

To load and start a simple application, we use the class XWT:

Shell shell = (Shell)XWT.load(file);
shell.pack();
shell.open();
while (!shell.isDisposed()) {
   if (!shell.getDisplay().readAndDispatch()) {
	shell.getDisplay().sleep();
   }
}

Or it's better to use the following API to handle event loop:

XWT.open(uri);

It is possible to load a UI resource under a Composite:

XWT.load(parent, uri);

To use XWT, your project must import at least the following plugins

org.eclipse.swt
org.eclipse.jface
org.eclipse.e4.xwt
org.eclipse.jface.databinding
org.eclipse.core.databinding
com.ibm.icu

Event Handling

In the previous example, we just rewrite Java code in XML. This example illustrates the separation between UI and event handling.

The appearance is defined in XWT.

<Shell xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    x:Class="ui.EventHandler">
    <Shell.layout>
       <GridLayout/>
    </Shell.layout>
    <Button text="Click Me!" SelectionEvent="clickButton">
    </Button>
</Shell>

The extension attribute x:Class declares the Java class to handle all events. The Button event is handled by clickButton method in the class ui.EventHandler. The association is setup during the loading:

package ui;
import org.eclipse.swt.widgets.Event;
import org.eclipse.swt.widgets.Button;
 
public class EventHandler {
    protected void clickButton(Event event) {
        Button button = (Button )event.widget;
        button.setText("Hello, world!");
    }
}

When the button gets selected, the method clickButton is invoked to change the Button text to "Hello, world!".

Layout

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt">
   <Composite.layout>
       <GridLayout numColumns="2"/>
   </Composite.layout>
   <Label text="Hello, world"/>
   <Text x:style="BORDER">
      <Text.layoutData>
         <GridData horizontalAlignment="FILL"
            grabExcessHorizontalSpace="true"/>
      </Text.layoutData>
   </Text>   
</Composite>

The simple element name (<Composite>) corresponds to a class name.
The qualified element name (i.g. <Composite.layout>) corresponds to a property defined by an element.
The default namespace corresponds to system packages.
User defined package can be declared as a namespace in the format: ”clr-namespace:<package>=<jar>”

This is functionally equivalent to:

Composite parent = new Composite(shell, SWT.NONE);
parent.setLayout(new GridLayout(2, false);
Label label = new Label(parent, SWT.NULL);
label.setText("Hello, world");
Text text = new Text(parent, SWT.BORDER);
text.setLayoutData(new GridData(GridData.FILL_HORIZONTAL | GridData.GRAB_HORIZONTAL));

Data Binding

The DataBinding engine relies on Eclipse DataBinding component. To enable this feature, your project must import at least the following plugins

org.eclipse.swt
org.eclipse.jface
org.eclipse.e4.xwt
org.eclipse.jface.databinding
org.eclipse.core.databinding
org.eclipse.core.databinding.beans
org.eclipse.core.databinding.property
com.ibm.icu

If we bind the text attribute of Label to a property “Name” of a Person, here is the data binding expression:

<Label text="{binding path=Name}"/>

It has the same result as following, but the expression is in pure XML:

 
<Label>
   <Label.text>
      <Binding path=”Name”/>
   </Label.text>
<Label>

The data context of Label should be a person.

JFace integration

The following example shows the JFace direct integration with ListViewer.

We have a Class Company that has a name and a collection of Employee. The company is bound to the root Composite object. The child Text is bound to Name of company and ListViewer to property employees of type Java Collection.

 
<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    xmlns:j="clr-namespace:jface.listviewer"
    x:DataContext="{StaticResource myCompany}">
   <Composite.layout>
      <GridLayout numColumns="2"/>
   </Composite.layout>
   <x:Composite.Resources>
      <j:Company x:Key="myCompany" Name="Soyatec">
         <j:Company.employees>
            <j:Employee Name="Thomas"/>
            <j:Employee Name="Jin"/>
         </j:Company.employees>
      </j:Company>
   </x:Composite.Resources>
   <Label text="Name"/>
   <Text text="{Binding Path=Name}"/>
   <ListViewer input="{Binding Path=employees}">
      <ListViewer.contentProvider>
         <j:ContentProvider/>
      </ListViewer.contentProvider>
      <ListViewer.labelProvider>
         <j:LabelProvider/>
      </ListViewer.labelProvider>
 
      <ListViewer.control.layoutData>
         <GridData horizontalAlignment="FILL"
            grabExcessHorizontalSpace="true"
            horizontalSpan="2"/>
      </ListViewer.control.layoutData>
   </ListViewer>
</Composite>

Features

Extensibility and Re-usability

In case, if you have your own layout named as ui.MyGridLayout, it can be used directly. The code will be:

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    xmlns:y="clr-namespace:ui">
    <Composite.layout>
        <y:MyGridLayout numColumns="2"/>
    </Composite.layout>
    <Label text="Hello, world"/>
    <Text x:style="BORDER">
        <Text.layoutData>
           <GridData horizontalAlignment="FILL"
               grabExcessHorizontalSpace="true"/>
        </Text.layoutData>
    </Text>
</Composite>

In the same way, a customized UI component can be used directly:

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    xmlns:y="clr-namespace:ui">
    <Composite.layout>
        <GridLayout numColumns="2"/>
    </Composite.layout>
    <y:PersonView />
        <y:PersonView.layoutData>
           <GridData horizontalAlignment="FILL"
               grabExcessHorizontalSpace="true"/>
        </y:PersonView.layoutData>
    </y:PersonView>
</Composite>

Where the ui.PersonView is a UI component developed by two files:

XWT file PersonView.xwt

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    x:Class="ui.PersonView"
    xmlns:y="clr-namespace:ui">
    <Composite.layout>
        <GridLayout numColumns="2"/>
    </Composite.layout>
    <Label text="Name"/>
    <Text x:style="BORDER">
        <Text.layoutData>
           <GridData horizontalAlignment="FILL"
               grabExcessHorizontalSpace="true"/>
        </Text.layoutData>
    </Text>
</Composite>

Java class PersonView.java

package ui;
import org.eclipse.swt.widgets.Composite;
 
public class PersonView extends Composite {
   ...
}

Style

XWT is a high extensible framework. It can be extended easily in almost all aspects, including Style. When we talk about the Style, we talk about CSS in general. Indeed, CSS is one of more used declarative style solution in Web. But it is not the only one.

From the point of view of its definition, there are two kinds of style: inline style and external style. Inline style is defined in UI resource file. External style is specified in a separated file.

XWT provides a general style concept.

Inline style

External style

Basic concept

CSS

Dynamic UI

Control binding

Control binding is a kind of data binding, but UI control is used as data binding source.

If your view looks like this: XWT file ExampleView.xwt

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt"
    x:Class="ui.ExampleView"
    xmlns:y="clr-namespace:ui">
    <Composite.layout>
        <GridLayout numColumns="2"/>
    </Composite.layout>
    <Label text="First Name"/>
    <Text x:Name="firstName" x:style="BORDER">
        <Text.layoutData>
           <GridData horizontalAlignment="FILL"
               grabExcessHorizontalSpace="true"/>
        </Text.layoutData>
    </Text>
    <Label text="Last Name"/>
    <Text x:Name="lastName" x:style="BORDER">
        <Text.layoutData>
           <GridData horizontalAlignment="FILL"
               grabExcessHorizontalSpace="true"/>
        </Text.layoutData>
    </Text>
</Composite>

Then you can let the Widgets be injected into your HandlerClass like this. Java class ExampleView.java

package ui;
import org.eclipse.e4.xwt.ui.workbench.views.XWTStaticPart;
 
public class ExampleView extends XWTStaticPart {
 
   @UI
   Text firstName;
 
   @UI
   Text lastName;
 
   ...
}

Trigger

Property Trigger

See this post: Property Trigger

Data Trigger

See this post: Data Trigger

Event Trigger

Data Binding

Java Bean Binding and Pojo Binding

EMF Binding

XML Binding

User-defined Binding

Animation

Property Animation

Class	Properties	Widget
ColorAnimation	background, foreground	Control
IntAnimation	alpha	Shell
PointAnimation	location	Control
SizeAnimation	size	Control
RectangleAnimation	bounds	Control

Using Key Frames

Spring Integration

XWT provides Spring support to manage the CLR (Common Language Runtime) Java Class of XWT file with Spring. On other words it's possible to declare your CLR Java class with Spring XML files. CLR Class can benefit from Spring features like :

Spring AOP.
Spring Dependency Injection to set services, dao...into CLR Class.
Spring Dynamic Module to get and use OSGi services into CLR Class.

For more information about XWT/Spring support please read Using Spring with XWT section.

RAP Support

Thanks for the contribution of Erdal Karaca and Alexey Moshchenikov (Bug 298589). Now, XWT can run over RAP.

Plugins

XWT framework consists of several plugins. Each plugin has a specifc role.

Plugins	Description
org.eclipse.e4.xwt	Main plugin of XWT. It contains XWT engine, and it is independent of eclipse. It can be bundled directly in a standalone Java application.
org.eclipse.e4.xwt.emf	It is an integration plugin, which provides some default configuration to work with EMF dynamic object such as data converter, data provider.
org.eclipse.e4.xwt.pde	This plugin connects XWT in eclipse environment by providing:some extension points for the Metaclass, Style, etc. It defines the default implementation of IViewPart and IEditorPart.
org.eclipse.e4.xwt.css	It is an integration with CSS style..
org.eclipse.e4.xwt.forms	This plugin makes eclipse forms be marked up natively.
org.eclipse.e4.xwt.xml	This plugin enables XWT UI form to connect the same data binding expression with XML file.
org.eclipse.e4.xwt.workbench	It is an integration plugin of XWT in e4 workbench. It defines the default view part and editor.

Environment and integration

e4 Workbench integration

EMF integration

The plugin org.eclipse.e4.xwt.emf handles the connection of XWT with EMF. Particuliarily, il provides the data binding with EMF dynamic object, known as EObject.

Eclipse RCP integration

WYSIWYG Editor (VDE)

In e4 build, there are two Visual tools:

XML based editor with instant preview is provided.
WYSIWYG editor

Some screen shots can be found in this blog: XWT Visual Design Editor

References

SWT Developer Guide

SWT to XWT Mapping roles

FAQ

Web Demos

Articles and Tutorials

↑ http://code.google.com/javadevtools/wbpro/index.html

Work Areas

PMF (on going)
Animation Bug: 298224 (on going)
Spring Integration Bug: 320405 (on going)
DnD Bug: 267191 (in preparation)
JavaScript support Bug: 266772 (in preparation)
UI Template

Interested Parties

Thales (Defense)
Saab (Defense)
CCR (Reinsurance)

Contributors

Soyatec	Initial and main contributor
Hasan Ceylan	Data Binding Validation Bug report
Erdal Karaca	eclipse xform RAP support Bug report
Angelo Zerr	Spring Integration
Alexey Moshchenikov	RAP support

[1] ttp://code.google.com/javadevtools/wbpro/index.html

[1]

Breadcrumbs

Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

XWT Documentation

Contents

Getting started

Hello, world!

Event Handling

Layout

Data Binding

JFace integration

Features

Extensibility and Re-usability

Style

Inline style

External style

Basic concept

CSS

Dynamic UI

Control binding

Trigger

Property Trigger

Data Trigger

Event Trigger

Data Binding

Java Bean Binding and Pojo Binding

EMF Binding

XML Binding

User-defined Binding

Animation

Property Animation

Using Key Frames

Spring Integration

RAP Support

Plugins

Environment and integration

e4 Workbench integration

EMF integration

Eclipse RCP integration

WYSIWYG Editor (VDE)

References

SWT Developer Guide

FAQ

Web Demos

Articles and Tutorials

Work Areas

Interested Parties

Contributors