Skip to main content

Notice: This Wiki is now read only and edits are no longer possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.

Jump to: navigation, search

Difference between revisions of "E4/XWTDesigner"

< E4
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<br>  
 
<br>  
  
−
== E4/XWT Designer  ==
+
== XWT Visual Design Editor (VDE) ==
  
−
'''What is XWT Designer?'''
+
=== What is XWT VDE ? ===
  
−
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 VDE is a new generation Visual editor based on declarative UI - XWT. It is part of e4 project. It is defined for non software programmer.  
  
−
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.
+
XWT VDE has rich features, some of the features are list as following:
  
−
== Getting started ==
+
Key features:
 +
- WYSIWYG edition <br>
 +
- Support of SWT and JFace <br>
 +
- Support of XML edition with the code completion <br>
 +
- Tabbed Properties View <br>
 +
- Tree view wth DnD support, copy/paste and Undo/Redo <br>
 +
- Support All layouts <br>
 +
- Data Binding edition <br>
 +
 
 +
== Demos ==
  
 
=== Hello, world!  ===
 
=== Hello, world!  ===
  
−
Here is a simple example.Click [http://www.soyatec.org/wiki/demo/HelloWorld.html here] to check the video
+
The demo demonstrates the powerful tools XWT VDE provide you, such as WYSIWYG editor, Tool Palette, Outline, Wizard, Preview Feature etc.
  
−
<source lang="xml">
+
[[Image:xwt_hello_world.jpg]]
−
<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>
+
−
</source>
+
  
−
The same UI can be developed in Java corresponding:  
+
Click [http://www.soyatec.org/wiki/demo/HelloWorld.html here] to watch the flash video demo
  
−
<source lang="java">
+
<br>
−
Shell parent = new Shell();
+
−
parent.setLayout(new FillLayout());
+
−
Button button = new Button(parent, SWT.NONE);
+
−
button.setText("Hello, world!");
+
−
</source> [[Image:XAMl4SWT HelloWorld.png]]
+
  
−
To load and start a simple application, we use the class XWT: <source lang="java">
+
=== Property Page  ===
−
Shell shell = (Shell)XWT.load(file);
+
−
shell.pack();
+
−
shell.open();
+
−
while (!shell.isDisposed()) {
+
−
  if (!shell.getDisplay().readAndDispatch()) {
+
−
shell.getDisplay().sleep();
+
−
  }
+
−
}
+
−
</source>
+
  
−
Or it's better to use the following API to handle event loop: <source lang="java">
+
Here is a simple example which demonstrates the powerful properties setting tool.  
−
XWT.open(uri);
+
−
</source>
+
  
−
It is possible to load a UI resource under a Composite: <source lang="java">
+
[[Image:Xwt_properties.jpg]]
−
XWT.load(parent, uri);
+
−
</source>
+
  
−
<br> To use XWT, your project must import at least the following plugins <source lang="java">
+
Click [http://www.soyatec.org/wiki/demo/PropertyPage.html here] to watch the flash video demo
−
org.eclipse.swt
+
−
org.eclipse.jface
+
−
org.eclipse.e4.xwt
+
−
org.eclipse.jface.databinding
+
−
org.eclipse.core.databinding
+
−
com.ibm.icu
+
−
</source>
+
  
−
=== Property Page  ===
+
<br>
−
 
+
−
Here is a simple example.Click [http://www.soyatec.org/wiki/demo/PropertyPage.html here] to check the video
+
−
 
+
−
<source lang="xml">
+
−
<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>
+
−
</source>  
+
  
 
=== Event Handling  ===
 
=== Event Handling  ===
  
−
In the previous example, we just rewrite Java code in XML. This example illustrates the separation between UI and event handling.  
+
This example illustrates how to use the XWT VDE tools to implement the event handling feature (XWT support to separate the UI and event handling to 2 parts).
  
−
Click [http://www.soyatec.org/wiki/demo/EventHandler.html here]&nbsp;to check the video
+
[[Image:Xwt_event.jpg]]
  
−
The appearance is defined in XWT. <source lang="xml">
+
Click [http://www.soyatec.org/wiki/demo/EventHandler.html here] to watch the flash video demo
−
<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>
+
−
</source>
+
  
−
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:
+
<br>
−
 
+
−
<source lang="java">
+
−
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");
+
−
    }
+
−
}
+
−
</source> When the button gets selected, the method onSelection is invoked to change the Button text to "Hello World!".
+
−
 
+
−
=== Layout  ===
+
−
 
+
−
<source lang="xml">
+
−
<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>
+
−
</source>
+
−
 
+
−
<br>
+
−
 
+
−
#The simple element name (&lt;Composite&gt;) corresponds to a class name.
+
−
#The qualified element name (i.g. &lt;Composite.layout&gt;) corresponds to a property defined by an element.
+
−
#The default namespace corresponds to system packages.
+
−
#User defined package can be declared as a namespace in the format: ”clr-namespace:&lt;package&gt;=&lt;jar&gt;”
+
−
 
+
−
This is functionally equivalent to: <source lang="java">
+
−
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));
+
−
</source>  
+
  
 
=== Data Binding  ===
 
=== Data Binding  ===
  
−
The DataBinding engine relies on Eclipse DataBinding component. To enable this feature, your project must import at least the following plugins.Click [http://www.soyatec.org/wiki/demo/DataBinding.html here]&nbsp;to check the video.&nbsp;<source lang="java">
+
XWT VDE provides you an powerful tool to set the Data Binding between controls.  
−
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
+
−
</source>
+
−
 
+
−
If we bind the text attribute of Label to a property “Name” of a Person, here is the data binding expression:
+
−
 
+
−
<source lang="xml">
+
−
<Label text="{binding path=Name}"/>
+
−
</source>
+
−
 
+
−
It has the same result as following, but the expression is in pure XML: <source lang="xml">
+
−
<Label>
+
−
  <Label.text>
+
−
      <Binding path=”Name”/>
+
−
  </Label.text>
+
−
<Label>
+
−
</source>
+
−
 
+
−
The data context of Label should be a person.
+
−
 
+
−
=== <br>  ===
+
−
 
+
−
== Work Areas  ==
+
−
 
+
−
*[http://wiki.eclipse.org/pmf PMF] (on going)
+
−
*e4 Designer [https://bugs.eclipse.org/bugs/show_bug.cgi?id=297241 Bug: 297241] (on going)
+
−
*Aminmation [https://bugs.eclipse.org/bugs/show_bug.cgi?id=298224 Bug: 298224] (on going)
+
−
*DnD [https://bugs.eclipse.org/bugs/show_bug.cgi?id=267191 Bug: 267191] (in preparation)
+
−
*JavaScript support [https://bugs.eclipse.org/bugs/show_bug.cgi?id=266772 Bug: 266772] (in preparation)
+
−
*UI Template
+
−
 
+
−
== Interested Parties  ==
+
−
 
+
−
*Thales (Defense)
+
−
*Saab&nbsp;(Defense)
+
−
*CCR&nbsp;(Reinsurance)
+
  
−
== Contributors  ==
+
[[Image:Xwt_databinding.jpg]]
  
−
{| border="1" cellspacing="1" cellpadding="1" width="400"
+
Click [http://www.soyatec.org/wiki/demo/ControlBinding.html here] to watch the flash video demo which demonstrates the Data Binding Tools.
−
|-
+
−
| [http://www.soyatec.com Soyatec]
+
−
| Initial and main contributor
+
−
|-
+
−
| [[Hceylan@batoo.org|Hasan Ceylan]]
+
−
|
+
−
*Data Binding Validation
+
−
*Bug report
+
  
−
|-
 
−
| [[Erdal.karaca.de@googlemail.com|Erdal Karaca]]
 
−
|
 
−
*eclipse xform
 
−
*Bug report
 
  
−
|}
+
<br>

Latest revision as of 05:13, 17 June 2010


XWT Visual Design Editor (VDE)

What is XWT VDE ?

XWT VDE is a new generation Visual editor based on declarative UI - XWT. It is part of e4 project. It is defined for non software programmer.

XWT VDE has rich features, some of the features are list as following:

Key features: - WYSIWYG edition
- Support of SWT and JFace
- Support of XML edition with the code completion
- Tabbed Properties View
- Tree view wth DnD support, copy/paste and Undo/Redo
- Support All layouts
- Data Binding edition

Demos

Hello, world!

The demo demonstrates the powerful tools XWT VDE provide you, such as WYSIWYG editor, Tool Palette, Outline, Wizard, Preview Feature etc.

Xwt hello world.jpg

Click here to watch the flash video demo


Property Page

Here is a simple example which demonstrates the powerful properties setting tool.

Xwt properties.jpg

Click here to watch the flash video demo


Event Handling

This example illustrates how to use the XWT VDE tools to implement the event handling feature (XWT support to separate the UI and event handling to 2 parts).

Xwt event.jpg

Click here to watch the flash video demo


Data Binding

XWT VDE provides you an powerful tool to set the Data Binding between controls.

Xwt databinding.jpg

Click here to watch the flash video demo which demonstrates the Data Binding Tools.



Retrieved from "https://wiki.eclipse.org/index.php?title=E4/XWTDesigner&oldid=206984"

This page was last modified 05:13, 17 June 2010 by Yves YANG. Based on work by bo zhou.

Back to the top