Skip to main content

Notice: this Wiki will be going read only early in 2024 and edits will no longer be 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
Line 5: Line 5:
 
'''What is XWT Designer?'''  
 
'''What is XWT Designer?'''  
  
−
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 Designer 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 Designer 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 Designer provide you, such as WYSIWYG Designer, Tool Palette, Outline, Wizard, Preview Feature etc.
 +
 
 +
Click [http://www.soyatec.org/wiki/demo/HelloWorld.html here] to watch the flash video demo
  
−
<source lang="xml">
+
<br>
−
<Composite xmlns="http://www.eclipse.org/xwt/presentation"
+
−
xmlns:x="http://www.eclipse.org/xwt">
+
−
<Button text="hello world" x:style="SWT.PUSH" bounds="0,0,100,25"
+
−
toolTipText="hello tip" background="255,255,0">
+
−
</Button>
+
−
</Composite>
+
−
</source>  
+
  
 
=== Property Page  ===
 
=== Property Page  ===
  
−
Here is a simple example.Click [http://www.soyatec.org/wiki/demo/PropertyPage.html here] to check the video
+
Here is a simple example which demonstrates the powerful propreties setting tool.  
  
−
<source lang="xml">
+
Click [http://www.soyatec.org/wiki/demo/PropertyPage.html here] to watch the flash video demo
−
<Shell xmlns="http://www.eclipse.org/xwt/presentation"
+
 
−
    xmlns:x="http://www.eclipse.org/xwt">
+
<br>
−
    <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 Designer 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  
+
Click [http://www.soyatec.org/wiki/demo/EventHandler.html here] to watch the flash video demo
  
−
The appearance is defined in XWT. <source lang="xml">
+
<br>
−
<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:
+
−
 
+
−
<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 Designer 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:
+
Click [http://www.soyatec.org/wiki/demo/DataBinding.html here] to watch the flash video demo which demonstrates the Data Binding Tools.
  
−
<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">
+
<br>
−
<Label>
+
−
  <Label.text>
+
−
      <Binding path=”Name”/>
+
−
  </Label.text>
+
−
<Label>
+
−
</source>
+
−
 
+
−
The data context of Label should be a person.
+
−
 
+
−
=== <br> ===
+
  
 
== Work Areas  ==
 
== Work Areas  ==
Line 158: Line 74:
 
| [http://www.soyatec.com Soyatec]  
 
| [http://www.soyatec.com Soyatec]  
 
| Initial and main contributor
 
| 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
 
−
 
 
|}
 
|}

Revision as of 04:20, 6 February 2010


E4/XWT Designer

What is XWT Designer?

XWT Designer 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 Designer 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 Designer provide you, such as WYSIWYG Designer, Tool Palette, Outline, Wizard, Preview Feature etc.

Click here to watch the flash video demo


Property Page

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

Click here to watch the flash video demo


Event Handling

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

Click here to watch the flash video demo


Data Binding

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

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



Work Areas

Interested Parties

  • Thales (Defense)
  • Saab (Defense)
  • CCR (Reinsurance)

Contributors

Soyatec Initial and main contributor
Retrieved from "https://wiki.eclipse.org/index.php?title=E4/XWTDesigner&oldid=188754"

Back to the top