Life’s Passion

My Projects in Eclipse

XWT - Getting started

« XWT - Declarative UI designed for Eclipse
Next: Eclipse VE gets revived! »

As a candidate of the declarative UI solution in e4, XWT contributed by Soyatec has been integrated in e4 official CVS repository and is available for download. Click here to jump on the download page.

This framework consists of two features:

The tools “feature” provides some wizards and a powerful XML editor with instant preview to simplify the development tasks. Of course, for development purpose, you needs to install both features.

This release has already implemented the following features:

I take your attention that this version is certified on Windows XP/Vista and Mac OS with eclipse Ganymede and eclipse 3.5M4 with JDK//JRE 1.5.

Hello world

The following tutorial shows you how to get started with XWT by developing step by step a simple Java application. It illustrates the following aspects:

To use XWT, you should import at least the following plugins in your project:

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

Create a UI Component

First of all, we need to create a Java project to host our application. If you have already one, you can reuse it without any additional configuration.
In Java project, you can create a UI component via the context menu in Package explorer: New -> Other… -> XWT -> New UI Component:

In the pop-up dialog, fill the Package as ‘demo’ and Name as ‘Hello’.

Click the Finish button. We have created a UI component which consists of the two files: Hello.xwt and Hello.java. The Hello.xwt is UI resource file, and Hello.java is the associated Java class to handle relative events.

Now our project looks like below.

Use XWT editor to develop UI appearance

Open Hello.xwt file, switch on the “Source” mode edition in the XWT UI editor to modify directly the XML code. This editor provides a powerful code completion and palette tools to help the UI design.

Modify the XWT code as below:

<Composite xmlns="http://www.eclipse.org/xwt/presentation"
    xmlns:x="http://www.eclipse.org/xwt" xmlns:j="clr-namespace:demo"
    x:Class="demo.Hello">
    <Composite.layout>
        <FillLayout />
    </Composite.layout>
    <Button text="Hello, world!">
    </Button>
</Composite>

If you are a SWT developer, you can find the mapping from XML to SWT library is direct 1-1. It gives the result as the corresponding code in Java:

Composite composite = new Composite(parent, SWT.NONE);
composite.addLayout(new FillLayout());
Button button = new Button(composite, SWT.NONE);
button.setText("Hello, world!");

Save the file, and click to view it. A new window will open as below.

Load and open a UI component in API

The load and open a UI component in API is pretty straightforward. We need call the services of the class XWT: load() or open() .

Create a new Java class named ‘Application’ with main method and you can use the following codes to load and open our UI component.

public class Application {
    public static void main(String[] argus){
        URI content = Hello.class.getResource("Hello.xwt");
        Shell shell = XWT.load(content).getShell();
        shell.pack();
        shell.open();
        while (!shell.isDisposed()) {
            if (!shell.getDisplay().readAndDispatch()) {
                shell.getDisplay().sleep();
            }
        }
    }
}

Or simply 

public class Application {
    public static void main(String[] argus){
        URI content = Hello.class.getResource("Hello.xwt");
        try {
              XWT.open(content);
        } catch (Exception e) {
              e.printStackTrace();
        }
    }
}

Please feel free to give us your feedback and feature requests via https://bugs.eclipse.org/bugs/

Posted January 17th, 2009 by Yves YANG in category: Declarative UI
You can skip to the end and leave a response. Pinging is currently not allowed.

10 Responses to “XWT - Getting started”


  1. Tyler Van Says:
    February 20th, 2009 at 1:35 pm

    Hi Yves,

    I am trying to configure the classpath for the hello world demo so that I may actually run the example as a Java Application. Do you have a list of jars or a user library that can be added to the classpath?

    Thanks.


  2. Yves YANG Says:
    February 20th, 2009 at 5:35 pm

    The org.eclipse.e4.xwt.demo is a plugin project. All jars are declared as plugin dependency and others are declared in this project such as Nebula libs.


  3. Raja Says:
    June 11th, 2009 at 1:01 am

    Hi

    I have designd a UI using XWT. The deisgn part is ok but when I was trying to load or open using the command XWT.load or XWT.open I am getting the exception mention below. I have also posted the UI code as well as the java code for your reference

    No JFaces support
    Jun 11, 2009 10:06:28 AM org.eclipse.e4.xwt.utils.LoggerManager log
    SEVERE: null
    org.eclipse.e4.xwt.XWTException: Property “Layout” is null.
    at org.eclipse.e4.xwt.javabean.ResourceLoader.initAttribute(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.init(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.doCreate(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.createCLRElement(Unknown Source)
    at org.eclipse.e4.xwt.impl.Core.createCLRElement(Unknown Source)
    at org.eclipse.e4.xwt.impl.Core.load(Unknown Source)
    at org.eclipse.e4.xwt.impl.Core.load(Unknown Source)
    at org.eclipse.e4.xwt.XWT.loadWithOptions(Unknown Source)
    at org.eclipse.e4.xwt.XWT.load(Unknown Source)
    at Application.main(Application.java:11)
    Jun 11, 2009 10:06:28 AM org.eclipse.e4.xwt.utils.LoggerManager log
    SEVERE: null
    java.lang.NullPointerException
    at org.eclipse.e4.xwt.impl.Core.getMetaclass(Unknown Source)
    at org.eclipse.e4.xwt.XWT.getMetaclass(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.initAttribute(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.init(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.doCreate(Unknown Source)
    at org.eclipse.e4.xwt.javabean.ResourceLoader.createCLRElement(Unknown Source)
    at org.eclipse.e4.xwt.impl.Core.createCLRElement(Unknown Source)
    at org.eclipse.e4.xwt.impl.Core.load(Unknown Source)
    at org.eclipse.e4.xwt.impl.Core.load(Unknown Source)
    at org.eclipse.e4.xwt.XWT.loadWithOptions(Unknown Source)
    at org.eclipse.e4.xwt.XWT.load(Unknown Source)
    at Application.main(Application.java:11)
    java.lang.NullPointerException
    at Application.main(Application.java:11)

    i am also attaching the UI code and the java code

    UI CODE
    ————-

    ————————

    Java Code
    ————–

    public class Application {
    public static void main(String[] argus){
    URL content = XWTMockUp.class.getResource(”com.edifixio.xwt.EmailWindow.xwt”);
    try {
    Shell shell = XWT.load(content).getShell();
    //XWT.
    System.out.println(shell.getChildren()[0]);
    shell.pack();
    shell.open();
    while (!shell.isDisposed()) {
    if (!shell.getDisplay().readAndDispatch()) {
    shell.getDisplay().sleep();
    }
    }

    } catch (Exception e) {
    e.printStackTrace();
    }
    }

    }


  4. Raja Says:
    June 11th, 2009 at 1:02 am

  5. Raja Says:
    June 11th, 2009 at 1:04 am

    Unable to attach the UI code.It is not showing into the post. If you provide your mail id I can attach the whole thing.

    thanks

    Raja Ghosh


  6. Raja Says:
    June 12th, 2009 at 4:55 am

    Sorry I made a mistake. It is working now.The error is with the line URL content = XWTMockUp.class.getResource(”com.edifixio.xwt.EmailWindow.xwt”); It should be URL content = XWTMockUp.class.getResource(”com/edifixio/xwt/EmailWindow.xwt”);


  7. 69002 Says:
    September 14th, 2009 at 7:00 pm

    Really useful post:) Some of you might be interested in starting with an examples: http://maciejgudan.blogspot.com/2009/09/eclipse-e4-and-xwt-first-steps.html


  8. Rencana Says:
    September 19th, 2009 at 1:50 pm

    hi,…
    i get an error when i run org.soyatec.xwt.samples.databinding.Databinding :)
    Exception in thread “main” java.lang.NoClassDefFoundError: com/ibm/icu/text/NumberFormat
    at org.eclipse.core.databinding.conversion.StringToNumberConverter.toInteger(StringToNumberConverter.java:243)
    at org.eclipse.e4.xwt.converters.StringToInteger.(StringToInteger.java:31)
    at org.eclipse.e4.xwt.converters.StringToInteger.(StringToInteger.java:30)
    at org.eclipse.e4.xwt.XWTLoader.initialize(XWTLoader.java:868)
    at org.eclipse.e4.xwt.XWTLoader.(XWTLoader.java:131)
    at org.eclipse.e4.xwt.XWTLoaderManager.(XWTLoaderManager.java:19)
    at org.eclipse.e4.xwt.XWT.open(XWT.java:196)
    at org.soyatec.xwt.samples.databinding.DataBinding.main(DataBinding.java:22)
    Caused by: java.lang.ClassNotFoundException: com.ibm.icu.text.NumberFormat
    at java.net.URLClassLoader$1.run(Unknown Source)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.net.URLClassLoader.findClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at sun.misc.Launcher$AppClassLoader.loadClass(Unknown Source)
    at java.lang.ClassLoader.loadClass(Unknown Source)
    at java.lang.ClassLoader.loadClassInternal(Unknown Source)
    … 8 more

    can you tell me what must i doing with this error ?


  9. Yves YANG Says:
    September 19th, 2009 at 2:11 pm

    add the plugin: com.ibm.icu


  10. Rencana Says:
    September 19th, 2009 at 2:39 pm

    Hi Yves, thanks for reply.
    when i run databinding, it should be display “toto” at the text field, right ?
    but i don’t see any text there, what should i do for this ?

    Thanks,
    CanA

Leave a Reply

You must be logged in using your Eclipse Bugzilla account to post a comment.

Recent Posts

Archives

Categories

Meta