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.
Difference between revisions of "E4/XWTDesigner"
Line 16: | Line 16: | ||
<source lang="xml"> | <source lang="xml"> | ||
− | < | + | <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> | </source> | ||
Revision as of 05:11, 4 February 2010
Contents
E4/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 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.
Getting started
Hello, world!
Here is a simple example.Click here to check the video
<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>
Property Page
Here is a simple example.Click here to check the video
<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>
Event Handling
In the previous example, we just rewrite Java code in XML. This example illustrates the separation between UI and event handling.
Click here to check the video
The appearance is defined in XWT.<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>
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; import org.eclipse.swt.Button; public class EventHandler { protected void onSelection(Event event) { Button button = (Button )event.widget; button.setText("Hello World"); } }
Layout
<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>
- The simple element name (<Composite>) corresponds to a class name.
- The qualified element name (i.g. <Composite.layout>) 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:<package>=<jar>”
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));
Data Binding
The DataBinding engine relies on Eclipse DataBinding component. To enable this feature, your project must import at least the following plugins.Click here to check the video.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
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}"/>
<Label> <Label.text> <Binding path=”Name”/> </Label.text> <Label>
The data context of Label should be a person.
Work Areas
- PMF (on going)
- e4 Designer Bug: 297241 (on going)
- Aminmation Bug: 298224 (on going)
- DnD Bug: 267191 (in preparation)
- JavaScript support Bug: 266772 (in preparation)
- UI Template
Interested Parties
- Thales (Defense)
- Saab (Defense)
- CCR (Reinsurance)
Contributors
Soyatec | Initial and main contributor |
Hasan Ceylan |
|
Erdal Karaca |
|