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.
Difference between revisions of "E4/XWTDesigner"
< E4
| Line 67: | Line 67: | ||
In the previous example, we just rewrite Java code in XML. This example illustrates the separation between UI and event handling. | In the previous example, we just rewrite Java code in XML. This example illustrates the separation between UI and event handling. | ||
| − | Click [http://www.eclipse.org/wiki/demo/EventHandler.html here] to check the video | + | Click [http://www.eclipse.org/wiki/demo/EventHandler.html here] to check the video |
The appearance is defined in XWT. <source lang="xml"> | The appearance is defined in XWT. <source lang="xml"> | ||
| Line 159: | Line 159: | ||
The data context of Label should be a person. | The data context of Label should be a person. | ||
| − | === | + | === <br> === |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
== Work Areas == | == Work Areas == | ||
Revision as of 05:45, 3 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
<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>
The same UI can be developed in Java corresponding:
Shell parent = new Shell(); parent.setLayout(new FillLayout()); Button button = new Button(parent, SWT.NONE); button.setText("Hello, world!");
To load and start a simple application, we use the class XWT: Shell shell = (Shell)XWT.load(file); shell.pack(); shell.open(); while (!shell.isDisposed()) { if (!shell.getDisplay().readAndDispatch()) { shell.getDisplay().sleep(); } }
XWT.open(uri);
XWT.load(parent, uri);
To use XWT, your project must import at least the following plugins
org.eclipse.swt org.eclipse.jface org.eclipse.e4.xwt org.eclipse.jface.databinding org.eclipse.core.databinding com.ibm.icu
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[1]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 |
|