XWT/SWT2XWT

From Eclipsepedia

< XWT(Redirected from E4/XWT/SWT2XWT)
Jump to: navigation, search

Contents

SWT/Jface to XWT Mapping rules

XWT is a model-based UI solution. It provides a dynamic 1:1 mapping from UI element classes to XML tags It relies on Java refection to capture UI element model. If you're familiar with eclipse UI framework such as SWT, JFace, Nebula, eclipse forms etc, you only need to learn few rules. And the you can edit your XML file straightforward.

Basic rules

  • Standard UI elements are defined by XML element in a specific namespace, which is in generak a default namespace. The definition of the name is http://www.eclipse.org/xwt/presentation.
  • Another namespace maps XWT with programming language. The definition of the name si http://www.eclipse.org/xwt. And by convention, it is prefixed by "x".
  • Every UI Element class is represented by a XML tag. So you have <Button/>, <Text/>, <Label/> and so on:
<xml version="1.0" encoding="utf-8">;
<Composite xmlns="http://www.eclipse.org/xwt/presentation">
   <Button/>
</Composite>;
  • Composite tags can have children, these are added as child elements in XML to the containing composite:
<Composite>
   <Label/>
   <Text/>
</Composite>
  • Every writable property of the widget class corrresponds to an attribute for the tag. For example: button.setText("sometext") is <Button text="sometext"/>:
<Button text="hello" enabled="false"/>
  • Style constants are specified with the style attribute in the Language namespace, the value can be multiple and they are separated by a comma:
<Button text="hello" x:style="TOGGLE,FLAT"/>
  • Colors are specified by name, by the colors defined in SWT (as defined in SWT.COLOR_*) or by a hex triplet:
<Label foreground="red" background="#EE0000"/>
  • Images can be specified using either a relative or absolutely path to the .xwt file. You can refer to the root of the containing plugin using the scheme prefix "bundle:":
<Label image="someimage.png">
<Label image="platform:/plugins/org.eclipse.e4.xwt.example/icons/someicon.png"/>
  • A UI property with a primitive type is expressed in XML attribute. It can be expressed in a XML element as well. All elements for UI property must be prefixed by the UI Type with a dot character as separator
<Button>
  <Button.text>
     <j:String>Name</j:String>
  </Button.text>
</Button>
 =
<Button text="name"/>
  • A UI property with a complex type is in general expressed in XML element to indicate the exact type. Typically, the layout of Composite has to be expressed in XML Element  
<Composite>
   <Composite.layout>
      <GridLayout numColumn="2"/>
   </Composite.layout>
</Composite>

Event rules

  • In SWT, some class has a property and an event of the same name. For example, Button has a property selection to descrpt the Button state and an event selection to react when users click on the button. In XWT, an event is expressed in a XML attribute. To prevent this conflict, all event must be suffixed by "Event".  
<Button text="OK" selectionEvent="onSelection"/>
  • In XWT with Java, all events are handled by Java class. The Java class can be specified by the attribute "Class" in XML file under the language namespace. 
<Composite x:Class="org.eclipse.e4.xwt.example.MyEventHandler"> 
   <Button text="OK" selectionEvent="onSelection"/>
</Composite>

Customization

XWT is a high extensible UI framework. XWT can markup not only all UI standard widgets, but also any customied widgets and most of Java data objects without any additional development. The markup of customozed widget consists of two steps:

  1. Declare a XML namespace for a Java package
  2. Using this namespace to make classes in the package
  • The namespace should be prefixed by a keyword "clr-namespace:", and then this namepace can be used in the scope of XML Element 
<Composite xmlns:j="clr-namespace:org.eclipse.e4.xwt.example">
  ...
</Composite>
  • Each customized widget must be prefixed by the namespace of its package
<Composite xmlns:j="clr-namespace:org.eclipse.e4.xwt.example">
  <j:DecoratedText text="name" />
</Composite>

where DecoratedText  is a customized widget defined in the package clr-namespace:org.eclipse.e4.xwt.example.