Getting Started

Create HelloWorld example

Using GWT webAppCreator command line to create HelloWorld example

webAppCreator -out hello com.gdevelop.samples.hello.Hello

Setup required libraries

Download gwtXP and unzip it. All required libraries are included in the download file.

In your favorite IDE, add following to project library path: org.eclipse.equinox.common.jar, org.eclipse.core.databinding.jar, gwtx-1.5-20081912.jar and gwtXP.jar

Please note:
+ org.eclipse.equinox.common.jar and org.eclipse.core.databinding.jar is modified version to support GWT.
+ gwtx-1.5-20081912.jar: used for bean properties change support in GWT

Setup HelloWorld module

Add below line to Hello.gwt.xml file

<inherits name='com.gdevelop.gwtxp.GwtXP'/>

Create Controller class

We will create a Controller class which control the program logic and handle user actions.

The HelloController class is as below:

public class HelloController {
  private static final HelloConstants constants = GWT.create(HelloConstants.class);

  public HelloConstants getConstants(){
     return constants;
  }

  public void sayHello(){
    Window.alert("Hello gwtXP");
  }
}

For Internationalization support, we create a new HelloConstants interface and a properties file:

public interface HelloConstants extends Constants{
  String greeting();
}

# HelloConstants.properties
greeting=Hello

Create gwtXP file

gwtXP file is a XML file which declares User Interface.

Create a file named Hello.gwtxp.xml in the client package as below:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp"
 controllerClassName="com.gdevelop.samples.hello.client.HelloController">

<g:verticalPanel width="100%">
 <g:textBox enabled="true"/>
 <g:button text="${constants.greeting}" onClick="#{sayHello}"/>
</g:verticalPanel>

</g:gwtxp>

Create new EntryPoint

In this HelloWorld example, we create a new EntryPoint class named HelloGwtXP

public class HelloGwtXP implements EntryPoint{
  private static Map<String, GwtXP> gwtxpMap =
    (Map<String, GwtXP>)GWT.create(GwtXP.class);

  public HelloGwtXP() {
  }

  public void onModuleLoad() {
    GwtXP gwtXP = gwtxpMap.get("com.gdevelop.samples.hello.client.Hello.gwtxp.xml");
    RootPanel.get("nameFieldContainer").add((Widget)gwtXP.getGUI());
  }
}

And then modify Hello.gwt.xml file to use the new EntryPoint class instead.

<entry-point class='com.gdevelop.samples.hello.client.HelloGwtXP'/>

Now, run the Hello example and click on the Hello button. You should see a dialog showing ‘Hello gwtXP’ message.

Summary

We built a simple User Interface using declarative XML file in three steps:

• Inherit gwtXP module: <inherits name=’com.gdevelop.gwtxp.GwtXP’/>
• Define a Controller class which build up UI and handles user actions
• Define a gwtXP file (XML file) which declares the UI

Next, see the in-depth Understanding gwtXP for gwtXP code generation process.