Difference between revisions of "E4/DeclarativeUI/XAML Roundup"

Revision as of 17:04, 10 November 2008

Name of Technology

XAML for eclipse

Purpose

Adopt XAML technology as UI XML serialization and provide a direct mapping to SWT with the support of JFace DataBinding

Contact

Yves YANG

Committers

Yves YANG, Thomas Guiu and others

Current License

XAML specification is licensed under OSP license (Open Specification Promesses)

"XAML for SWT" is an Open Source under EPL Licnese.

Description

Extensible Application Markup Language (XAML) is a markup language for declarative application programming. Windows Presentation Foundation (WPF) implements a XAML loader and provides XAML language support for Windows Presentation Foundation (WPF) types such that you can create the majority of your application UI in XAML markup. Silverlight uses the same technology for Declarative UI.

Soyatec has developed a solution for Java: eFace, which is compatible with XAML/WPF. Obviously, XAML is a generic solution that can be used not only in .NET environment, but also in Java/Eclipse.

"eXAML" under license EPL is a specific solution of using XAML grammar for SWT directly. It is a combination of XAML serialization technology with SWT semantic.

Precisely, XAML simplifies creating a UI programming model. You can create visible UI elements in the declarative XAML markup, and then separate the UI definition from the run-time logic by using code-behind files. The ability to mix code with markup in XAML is important because XML by itself is declarative. An XML based declarative language is very intuitive for creating interfaces ranging from prototype to production, especially for people with a background in web design and technologies. Unlike most other markup languages, XAML directly represents the instantiation of managed objects. This general design principle enables simplified code and debugging access for objects that are created in XAML.

There are two ways to apply XAML to e4:

1. SWT Centric - "XAML for SWT"
2. Abstraction UI Model

The benefices of XAML for e4 are following:

1. XAML is more human-readable and light-weight markup without ambiguity between properties and child type
2. Well defined and complete specification
3. Mature and Generic Declarative UI solution
4. High Extensible
5. Possible to keep the interoperability with .NET/Silverlight
6. Share the common tools like eclipse SLDT

Examples of XAML for SWT

1. Hello, world

Here is a simple example.

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

The same UI can be developed in Java corresponding:

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

2. Appearance and Event

The appearance is defined in XAML.

<Shell xmlns=”http://www.eclipse.org/swt/presentation”
    xmlns:x=”http://www.eclipse.org/swt”
    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.Event;
 
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!".

3. Layout

<Composite xmlns=”http://www.eclipse.org/swt/presentation”
    xmlns:x=”http://www.eclipse.org/swt”>
   <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));

4. Extensibility and Re-usability

In case, if you have your owner layout named as ui.MyGridLayout, the code will be:

<Composite xmlns=”http://www.eclipse.org/swt/presentation”
    xmlns:x=”http://www.eclipse.org/swt”
    xmlns:y=”cls-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/swt/presentation”
    xmlns:x=”http://www.eclipse.org/swt”
    xmlns:y=”cls-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 an UI component developed by two files:

XAML file PersonView.xaml

<Composite xmlns=”http://www.eclipse.org/swt/presentation”
    xmlns:x=”http://www.eclipse.org/swt”
    x:Class="ui.PersonView"
    xmlns:y=”cls-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 UserControl extends Composite {
   ...
}

5. Data Binding

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 DataContext of Label should be a person.