Difference between revisions of "E4/XWTDesigner"

Revision as of 05:11, 4 February 2010

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

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
	xmlns:x="http://www.eclipse.org/xwt">
	<Button text="hello world" x:style="SWT.PUSH" bounds="0,0,100,25"
		 toolTipText="hello tip" background="255,255,0">
	</Button>
</Composite>

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

<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");
    }
}

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

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

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}"/>

 
<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