Here is an article by Yi Ming Huang talks about e4 and XWT. Here is an abstract:
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.
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.
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:
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:
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:
| Data model neutral | The same Data binding expression can be used for any kind of data model like Java Bean, Pojo, Dynamic EMF, XML, Web services, etc. Even it is programming language independent. |
| Easy to use | Developers need only to know the basic concept of Data Binding, |
| Basic foundation of visual tools | It is really straight forward to provide a UI edition in a visual tools like VE. XWT Designer has provided this feature, which allows no software programmers to develop applications. |
During the ESE 2009 last week, I have shown a demo with a WYSIWYG editor for XWT in e4 Symphosium and XWT session. It is a tool like VE of eclipse. But the architecture is completely different. XWT Designer relies on XML, instead of Java in VE. And also it doesn’t have two JVMs as VE.
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.
In the previous post, I have shown up the Trigger, which is in fact a Control Trigger. The source of Trigger is a UI Control such as Button. It looks like Control Binding, but it is a little bit different in features. Control binding is used to synchronize the state of the two controls. It is always bidirectinal and one to one property synchronization. Trigger is one direction from source to target, and it supports the property binding of 1 to N, N to 1 and also N to N .
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:
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>
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.
One of the most common features of any modern application, whether web-based or client-based, is the dynamic aspect of user interface elements. These include buttons that highlight when focused or clicked, images that change when the mouse is rolled over them, text boxes that change color to indicate errors, the visibility/edit-ability of input fields through operator profile or/and data behind.
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:
Along with Control Binding, Trigger is another powerful feature to minimize the pure UI codes in Java and keep Java code more readable.
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>
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!
Here is the screencast to help getting started XWT:
I’m pleased to announce the come-back of VE in Eclipse stream after more than two years’ sleeping. Now the builds for eclipse 3.4 and 3.5 are available here:
http://www.eclipse.org/vep/downloads/
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.
As a candidate of the declarative UI solution in e4, XWT contributed by Soyatec has been integrated in e4 official CVS repository and is available for download. Click here to jump on the download page.
This framework consists of two features:
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:
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.
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:
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
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.
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.
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:
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, 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, 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 is a domain application developer using MDA tools. The UI generation via Template engine is key requirement from the business model.
The following features are critical for a Declarative UI framework:
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.
Dave has dropped a post in his blog about the WTP Visual Editor for XML: VEX. By coincidence, the project SLDT known as eclipse4SL in Sourceforge, has also a VEX, which is used by eFace and eclipse4SL for XAML edition. This component is our donation to the Open Source community via eclipse4SL.
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:
Here is a screen shot of eclipse4SL:
