Data binding is a process that establishes a connection between the application UI and business logic. Since 2006, eclipse has worked on this solution. Here is the purpose of JFace data binding, given in JFace Data Binding Introduction:

Developing line of business applications as Eclipse Rich Client Platform applications presents a number of unique challenges.

• How does one validate data entry when the number of possible interactions between validation rules rises proportional to the square of the number of data entry fields on an input form?
• How does one avoid coding repetitive, dull, tedious, and error-prone SWT event handlers?
• How can one improve reuse of data-driven user interfaces?

All of these concerns are improved upon by using JFace Data Binding.

This component gains the popularity day by day, not only in enterprise applications, but also in eclipse it-self. But in the practice, a lot of users have noticed this solution needs to be improved. There are still some problems which are still an obstacle for a wide adoption:

• Requires a deep knowledge in the implementation of this component
• A lot of codes with poor lisibility
• Hard codes for a specific data model

What’s Declarative Data Binding?

Declarative Data Binding is an expression of the Data binding concept in abstract and high level langauge. XWT has developed this concept in two ways:

• Pure XML
• XWT Data Binding expression

For example, we have a class Person that contains two attributes: First name and last name. We’d like to create a UI presentation for this object:

Here is the declaration in pure XML,

<Label Text="First name:"/>
<Text>
   <Text.text>
     <Binding path="firstName"/>
   </Text.text>
</Text>
<Label Text="Last name:"/>
<Text>
   <Text.text>
     <Binding path="lastName"/>
   </Text.text>
</Text>

And the version in XWT Data Binding expression, which is more compact:

<Label Text="First name:"/>
<Text text="{Binding Path=FirstName}"/>
<Label Text="Last name:"/>
<Text text="{Binding Path=LastName}"/>

This solution presents the following benefices:

In terms of features, XWT supports already all layouts and controls with Tabbed propertiew view. In summary, all feature of VE has been supported such as:
- Palette
- DnD
- Event
- Layout
- User-firendly Tabbed Properties View
- Tree View

And furthermore, it overcomes the limitations of VE by providing some tools for Data/Control Binding edition. And it is definitively designed for non-SWT programmer.

Soyatec has planned to contribute it as a subproject of VE. It takes some time to get in eclipse. But by now, you can already install it using the following URL with the last daily build (here) of e4 :
http://www.xwtdesigner.org/update

Any feedback and suggestion are welcome.

This post will deal with Data Trigger. The source of Trigger is data context of UI control instead of UI Control it-self. Like Trigger, Data Trigger has also two implementation classes, one for the simple case and another for the complexe one:

• DataTrigger
• MultiDataTrigger

DataTrigger

A DataTrigger allows you to set property values when a property value of the data object matches a specified Value. For example, if you are displaying a list of Employee objects, you may want the foreground color of the name to be different based on each Employee’s current attendance: employees who are currently on vacation are displayed with a purple foreground.

<Label>
  <Label.triggers>
    <DataTrigger binding="{Binding path=attendance}" value="inVacation" >
      <Setter property="foreground" value="Purple"/>	 </DataTrigger>
  </Label.triggers>
</Label>

MultiDataTrigger

A MultiDataTrigger object is similar to a MultiTrigger, except the conditions of a MultiDataTrigger are based on property values of bound data instead of those of a UI Control. In a MultiDataTrigger, a condition is met when the property value of the data item matches the specified Value. You can then use setters to apply changes when all conditions are met.

Using the same example above, we can add a new condition like location is in France.

<Label>
  <Label.triggers>
     <MultiDataTrigger>
        <MultiDataTrigger.conditions>
          <Condition binding="{Binding path=attendance}" value="inVacation"/>
          <Condition binding="{Binding path=location}" value="France" />
        </MultiDataTrigger.conditions>
        <Setter property="foreground" value="Purple"/>
     </MultiDataTrigger>
  </Label.triggers>
</Label>

Another trigger we have not talked about is EventTrigger. The source of EventTrigger is an event of UI Control. This trigger is mainly used with graphic animation. It will be supported later.

In almost of cases, this kind of interactivity is achieved through the use of some kind of scripting mechanism or in Java through event handling. In web pages, for example, there is usually some JavaScript code that is assigned to execute when certain events are triggered on a given page element, like an <IMG> tag whose src attribute changes in response to mouse-over and mouse-out events.

In XWT, you can achieve the same kinds of interactive effects without writing a single line of script or Java code by using a feature known as Triggers. These triggers are defined within styles or a specific UI element to respond to changes on a given property and event of the object. When they are triggered, some actions defined in XML will be executed. One of the most useful action is the Setter, which set the values of other properties on the object. In general, a trigger is somewhat like an if block in procedural code; it only executes what it contains when some condition evaluates to true.

There are five kinds of triggers, each has a different way of determining when it should execute:

• UI Property trigger
• Multiple UI Property triggers
• Data Property trigger
• Multiple Data Property trigger
• UI Event trigger

Along with Control Binding, Trigger is another powerful feature to minimize the pure UI codes in Java and keep Java code more readable.

UI Element Property trigger

The source of a property trigger is UI Element. The condition is defined by two attributes: property and value. Each Trigger has a list of Setter.

The properties changed by triggers are automatically reset to their previous value when the triggered condition is no longer satisfied. Triggers are optimized for transient states which are expected to change and return to original state, such as selection of a check button.

The property Trigger construction is very simple. It consists of a <Trigger> tag, which usually encloses one or more <Setter> tags. The <Trigger> tag also has attributes that govern its actions. The Property attribute indicates the property of the triggered object that the trigger is listening for changes on. The Value attribute contains the value that will cause the Trigger to fire when it is equal to the value of the property that is being watched. It usually looks something like this:

<Trigger Property="selection" Value="true">
   <Set Property="text" Value="green"/>
</Trigger> 

This trigger can be defined in the property triggers of a Style, which will be applied to all buttons:

<Style targetType="Button">
  <Style.triggers>
   <Trigger property="Selection" value="true">
      <Setter property="text" value="Selected"/>
   </Trigger>
  </Style.triggers>
</Style>

or directly in a UI Element

<Button x:Style="CHECK" text="Unselected">
  <Button.triggers>
   <Trigger property="Selection" value="true">
     <Setter property="Text" value="Selected"/>
     </Trigger>
  </Button.triggers>
</Button>

This code indicates when the CheckBox Button gets selected, the text value will be changed to "Selected". When you deselect this button, the previous value will be restored.

If you want to apply the action to another UI element, you just need to add an attribute targetName with the name of referenced UI element as value:

<Button Name="Button1" x:Style="CHECK" text="Unselected"/>
<Button x:Style="CHECK" text="Button State">
  <Button.triggers>
   <Trigger property="selection" value="true">
     <Setter property="Text" value="selected" targetName="Button1"/>
     </Trigger>
  </Button.triggers>
</Button>

You’re not limited to just one Setter in a Trigger. You can have as many Setter as you like. And for a style or a UI Element, you can have as many Trigger as you like.

<Button Name="Button1" x:Style="CHECK" text="Unselected"/>
<Button x:Style="CHECK" text="Button State">
  <Button.triggers>
   <Trigger property="selection" value="true">
     <Setter property="Text" value="selected" targetName="Button1"/>
     <Setter property="selection" value="true" targetName="Button1"/>
     </Trigger>
  </Button.triggers>
</Button>

Multiple UI Element Property trigger

I can imagine many of you saying "well, that’s pretty nice feature, but what if I want some actions only when two different or more triggers match their Value conditions at the same time?". For example, you might want to call Setter to a control only when that control both has the input focus and has the mouse over it.

The MultiTrigger is defined for this purpose. Each MultiTrigger has a list of Condition. Each condition is composed of at least two attributes: property and value. An optional attribute "sourceName" can be used to indicate the source of condition.

<Composite>
   <Button Name="button1" x:Style="CHECK" text="Condition 1"/>
   <Button Name="button2" x:Style="CHECK" text="Condition 2"/>
   <Label Name="messageLabel"/>
   <Composite.triggers>
      <MultiTrigger>
          <MultiTrigger.conditions>
              <Condition property="selection" value="True" sourceName="button1" />
              <Condition property="selection" value="True" sourceName="button2" />
          </MultiTrigger.conditions>
          <Setter property="text" value="OK" targetName="messageLabel" />
      </MultiTrigger>
   </Composite.triggers>
</Composite>

In this example, we define a MultiTrigger in a Composite which contains two CheckBox buttons. When and only when both buttons get selected, a message "OK" will be displayed in Label.

Next post will address on Data Trigger and Multiple Data Trigger. The Event trigger is used to UI animation, which will be covered later. Keep tune!

The VE home page gets updated as well.

I’d like to thank Nick Boldt who had done an excellent job to re-integrate VE into eclipse build system and update the Web page.

Now, it is time to consider new features and the development plan for the next release 1.5. Please use ve-dev@eclipse.org to send us your feedback and requests.

This framework consists of two features:

• Runtime engine (org.eclipse.e4.xwt)
• Development tools (org.eclipse.e4.xwt.tools)

The tools “feature” provides some wizards and a powerful XML editor with instant preview to simplify the development tasks. Of course, for development purpose, you needs to install both features.

This release has already implemented the following features:

• All SWT Widgets
• JFace support
• Basic support of Data binding based on JFace data binding.
• UI Component.

I take your attention that this version is certified on Windows XP/Vista and Mac OS with eclipse Ganymede and eclipse 3.5M4 with JDK//JRE 1.5.

Hello world

The following tutorial shows you how to get started with XWT by developing step by step a simple Java application. It illustrates the following aspects:

• Create a UI component
• Use XWL editor to develop UI appearance
• Load and open a UI component in API

To use XWT, you should import at least the following plugins in your project:

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


Create a UI Component

First of all, we need to create a Java project to host our application. If you have already one, you can reuse it without any additional configuration.
In Java project, you can create a UI component via the context menu in Package explorer: New -> Other… -> XWT -> New UI Component:

In the pop-up dialog, fill the Package as ‘demo’ and Name as ‘Hello’.

Click the Finish button. We have created a UI component which consists of the two files: Hello.xwt and Hello.java. The Hello.xwt is UI resource file, and Hello.java is the associated Java class to handle relative events.

Now our project looks like below.

Use XWT editor to develop UI appearance

Open Hello.xwt file, switch on the “Source” mode edition in the XWT UI editor to modify directly the XML code. This editor provides a powerful code completion and palette tools to help the UI design.

Modify the XWT code as below:

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt" xmlns:j="clr-namespace:demo"
    x:Class="demo.Hello">
    <Composite.layout>
        <FillLayout />
    </Composite.layout>
    <Button text="Hello, world!">
    </Button>
</Composite>

If you are a SWT developer, you can find the mapping from XML to SWT library is direct 1-1. It gives the result as the corresponding code in Java:

Composite composite = new Composite(parent, SWT.NONE);
composite.addLayout(new FillLayout());
Button button = new Button(composite, SWT.NONE);
button.setText("Hello, world!");

Save the file, and click to view it. A new window will open as below.

Load and open a UI component in API

The load and open a UI component in API is pretty straightforward. We need call the services of the class XWT: load() or open() .

Create a new Java class named ‘Application’ with main method and you can use the following codes to load and open our UI component.

public class Application {
    public static void main(String[] argus){
        URI content = Hello.class.getResource("Hello.xwt");
        Shell shell = XWT.load(content).getShell();
        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!shell.getDisplay().readAndDispatch()) {
                shell.getDisplay().sleep();
            }
        }
    }
}

Or simply

public class Application {
    public static void main(String[] argus){
        URI content = Hello.class.getResource("Hello.xwt");
        try {
              XWT.open(content);
        } catch (Exception e) {
              e.printStackTrace();
        }
    }
}

Please feel free to give us your feedback and feature requests via https://bugs.eclipse.org/bugs/

With today’s Eclipse 3.x stream, UI development uses still direct programming mode: UI controls and event handling are directly created in Java. This solution presents several drawbacks:

• High technology pre-requisite as UI developer
• Difficult to separate UI appearance and business logic
• Poor reusability
• Limitation of the dynamic UI support
• Very hard to integrate with develop tools

A new UI programming paradigm is widely used in Web Application development: Declarative UI. In fact, this approach is perfectly applicable in Desktop Applications such as Eclipse RCP. This is what Microsoft does in .NET 3 with XAML. NetBeans provides also a similar solution with Matisse. Fortunately, in e4, Declarative UI becomes a important work area.

The purpose of our project XWT (EPL license) is to provide a foundation framework to resolve above problems. Some of them can be resolved directly, and some of them needs a tool built on top of this framework such Visual Editor, Modeling tool.

XWT should address three kinds of developer directly or indirectly:

SWT Developer

SWT Developer, with a deep knowledge on UI technology (such as SWT/JFace, JFace databindng, PDE, etc), needs a ”’component-based”’ framework to develop reusable UI Components for Domain UI Designer.

UI designer

UI Designer, as a domain application developer, focuses on building domain application using UI Components provided by SWT Developer. The knowledge on SWT/JFace is not necessary.

Model designer

Model Designer is a domain application developer using MDA tools. The UI generation via Template engine is key requirement from the business model.

Essential features

The following features are critical for a Declarative UI framework:

• Extensibility - Dynamic mapping with UI technology library such as SWT/Jface
• Component approach to guarantee the reusability
• Support of Data Binding
• Support of the MDA tools

Try out

A POC is available via Eclipse update manager: http://www.soyatec.org/update/xwt. After the installation, you can check out some samples and a demo with EMF model + Nebula via our SVN server: http://www.soyatec.org/xwt.

Your feedback is welcome.

It seems that two projects start from the same concept and try to target the same problem. I believe we should put them together. In our VEX, we have developed following features:

• Multiple renderers support
• Instant Preview
• Template
• Palatte with template

Here is a screen shot of eclipse4SL:

Community Technology Preview(Alpha) version of the Eclipse tools for Microsoft Silverlight is available on the SourceForge Site under the Eclipse Public License Version 1.0. The final complete version Eclipse Tools will be released in spring 2009.

The project has been submitted to the Eclipse Foundation: Eclipse Project Proposal. Hope shortly eclipse4SL will become Eclipse SLDT.

Yves