E4/XWTDesigner

E4/XWT Designer

What is XWT Designer?

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. especially for people with a background in web design and technologies.

Getting started

Hello, world!

Here is a simple example.Click here to check the video

<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

Property Page

Here is a simple example.Click here to check the video

<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>

Event Handling

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

Click here to check the video

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="onSelection">
    </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.Event;
import org.eclipse.swt.Button;
 
public class EventHandler {
    protected void onSelection(Event event) {
        Button button = (Button )event.widget;
        button.setText("Hello World");
    }
}

When the button gets selected, the method onSelection 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>

1. The simple element name (<Composite>) corresponds to a class name.
2. The qualified element name (i.g. <Composite.layout>) corresponds to a property defined by an element.
3. The default namespace corresponds to system packages.
4. 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.Click here to check the video. 

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.

Work Areas

• PMF (on going)
• e4 Designer Bug: 297241 (on going)
• Aminmation Bug: 298224 (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 Bug report