gwtXP Overview

Writing UI code takes time, writing GWT UI code takes more time. Developers spend lot of time to write code to copy data from data model to UI widget and vice versa. And it is hard for developers to realize the UI hierarchy during adding a widget to its container.

gwtXP eases this tedious and error-prone process by allowing developers to quickly build UI in XML.

In below sections, you will find out how gwtXP works

Declarative User Interface in XML files

gwtXP uses XML files to define User Interface elements. XML, by its nature, is a structural elements. Using XML to define User Interface let it easier to read and to understand the UI attributes and its structure.

Unlike other XML UI frameworks which build up the UI at runtime, gwtXP validates the XML files and generate Java code at compile time. It has following advantages:

• Early detect errors in XML files
• Utilize compiler type checking
• Run faster because no XML parsing and validating at runtime.

gwtXP uses file extension gwtxp.xml for this purpose.

For simplified notation, we prefer gwtxp.xml XML definition file

Code Generation

gwtXP uses GWT’s Generator concept to generate Java code from XML files.

The class GwtXPGenerator is responsible for this process. It scans for XML definition files in your project source path and generate code for these files.

Below snippets show how Java code is generated.

...
<label j_name="labHello" text="Hello"/>
...

will be transformed to

...
Label labHello = new Label();
  ...
labHello.setText("Hello");
...

In addition, using HostedMode (DevMode in GWT version 2) parameter ‘-gen’ to specify the output directory for the generated code, you can easily review and debug it.

Code Generation for databinding

gwtXP also generates code to bind your data to the UI widgets using Eclipse’s databinding. Data binding frees the developers to manipulate UI widget attributes, instead, he can focus on manipulating data and processing business logic.

Below snippets show generated databinding code.

...
<textBox j_name="txtUserName" text="${user.name}"/>
...

will be transformed to

...
private DataBindingContext __dbc__ = new GWTDataBindingContext();
private TextBox txtUserName = new TextBox();
  ...
dbc.bindValue(
      new HasTextObservableValue(txtUserName)
      , new UserObservableValue(null, __this__.getUser(), "name")
      , new GWTUpdateValueStrategy()
      , new GWTUpdateValueStrategy()
    );
...

Code Generation for handling user actions

And for a complete solution, gwtXP also generates code to register handlers to handler user actions.

Snippets of generated code for handler registration.

...
<g:button j_name="btnHello" text="Hello" onClick="#{sayHello}"/>
...

will be transformed to

...
Button btnHello = new Button();
  ...
btnHello.addClickHandler(new ClickHandler(){
  public void onClick(ClickEvent event){
    __this__.sayHello();
  }
});
...

Next steps

Let see the Getting Started Guide to see how easy to build a traditional HelloWorld example.

You also can see the demo (to be updated) here.