This post shows you how to use this new feature of SyncProxy.

For example, we have an helloApp application and a RPC service GreetingService

@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {
  String greetServer(String name);
}

And the service implementation is as below

public class GreetingServiceImpl extends RemoteServiceServlet
      implements GreetingService {
  public String greetServer(String name) {
    return "Hello, " + name;
  }
}

Assume the application is deployed on AppEngine and the servlet URL is configured at http://example.appspot.com/helloApp/greet

Create new proxy instance for the service interface:

private static GreetingService rpcService =
  SyncProxy.newProxyInstance(GreetingService.class,
        "http://example.appspot.com/helloApp", "greet");

This will create a new proxy instance which implements your GreetingService.

Then invoke the service method.

String result = rpcService.greetServer("SyncProxy");

We modify our service implement which enforce user to login to access to the service:

public class GreetingServiceImpl extends RemoteServiceServlet
      implements GreetingService {
  public String greetServer(String name) {
    // implement the security
    UserService userService = UserServiceFactory.getUserService();
    if (!userService.isUserLoggedIn()){
      throw new RuntimeException("Access Denied");
    }
    // We can also enforce only admin user can access to the service
    /*
    if (!userService.isUserAdmin()){
      throw new RuntimeException("Access Denied");
    }
    */

    return "Hello, " + name;
  }
}

Before invoke the secured service, you have to login to the application.

SyncProxy.loginGAE("https://example.appspot.com",
    "http://example.appspot.com/helloApp/greet",
    "yourusername@gmail.com", "yourpassword");

Then invoke the service method.

String result = rpcService.greetServer("SyncProxy");

Get SyncProxy (with source code) at our Downloads page

This is a minor release that includes the following changes/fixes:

• Event Handler expression can be in #{#historyToken} format: The handler will create a new history item.
• selectedIndex and selectedValue for ListBox
• Add valuePropName and displayPropName for ListBox
• WidgetPropertyObservableValue, HasTextObservableValue, HasValueObservableValue, HasWordWrapObservableValue and HasCaptionObservableValue: Check the widget before setting value to its property
• Update the demo

Table of Contents

gwtXP uses JFace data binding (with modifications) and Expression Language concepts to allow you declare binding expression like <g:textBox text="${user.userId}"/>.

This post shows how to use data binding (property binding, list binding and table binding) in gwtXP to build gwt applications. It also shows how to build a scrollable table. See the demo.

We use following bound bean during this post. See the examples page for complete source code.

public class User{
  private transient PropertyChangeSupport changeSupport = new PropertyChangeSupport(this);

  private String userId;
  private String fullName;
  private Date dob;
  private String email;
  private int numberOfWrongPassword;
  private String password;
  private Boolean enabled;
  ...
  // getter and setter methods
}

Bind a bean’s property to a GWT widget’s property. gwtXP supports most of common widgets such as Label, TextBox, PasswordTextBox, CheckBox, RadioButton, Button, etc.

Below shows some basic binding examples:

<g:label text="${user.userId}"/>

<g:textBox text="${user.userId}"/>

If you require the build-in user ‘admin’ can not be changed, you can disable the text box for userId value of ‘admin’:

<g:textBox text="${user.userId}" enabled="${user.userId != 'admin'}"/>

For example, you require the admin can set new password for enabled user only, e.g the password text box will be enabled if user.enabled is true.

<g:passwordTextBox text="${user.password}" enabled="${user.enabled}"/>

<g:checkBox value="${user.enabled}"/>

The data binding has build-in data converter which converts one object to another object, for example from Date to String, Number to String, etc and vice versa. Some converter requires additional ‘pattern’ attribute. The ‘pattern’ attribute describe how a converter format/parse data. If no ‘pattern’ specified, the converter uses the default one.

In gwtXP, simply add ‘pattern’ attribute to the tag as below:

<g:textBox text="${user.dob}" pattern="MM/dd/yyyy"/>

The converter also validate user input against the specified pattern.

You can declare the validator which validate the user input as below:

<g:textBox text="${user.email}" validator="${emailValidator}"/>

The validator must implement the IValidator interface.

When the validating the data, validator will report a status (whether OK or error). By default, when error occurs during validation process, we add an ‘error’ style to the widget. To display the error message, we use a special errors tag as below:

<g:errors errorMessage="There was errors during validating your data."/>

Of course, you can internationalize the error message as below:

<g:errors errorMessage="${constants.multipleErrors}"/>

Recall that data binding rely on the property change event firing mechanism. However, The standard java List classes does not fire event when adding/removing elements.

We use WritableList or SingleSelectionList (List supports single selection) as our data list model. When you add/remove element to/from the list, the ListBox’s item will be added/removed accordingly.

In the demo, our UserList class is as below:

public class UserList extends SingleSelectionList{
  public User getSelected() {
    return super.getSelected();
  }
}

And we setup the ListBox as below:

<g:listBox values="${userList}" visibleItemCount="10"
  valuePropName="userId" displayPropName="fullName"/>

In this example, we use the value of ‘userId’ property as ListBox value and the value of ‘fullName’ property as ListBox display value.

Table Binding is a powerful feature of gwtXP. Table Binding binds a List to a scrollable table. And you have all control what is displayed in the header, what is displayed in the table body.

<g:dataTable width="100%" height="300px" values="${userList}" var="_user_" >
  <g:headerCell row="0" col="0" columnWidth="100">
    <g:html HTML="User Name"/>
  </g:headerCell>
  <g:headerCell row="0" col="1" columnWidth="200">
    <g:html HTML="Full Name"/>
  </g:headerCell>
  <g:headerCell row="0" col="2" columnWidth="200">
    <g:html HTML="Date Of Birth"/>
  </g:headerCell>
  <g:headerCell row="0" col="3" columnWidth="200">
    <g:html HTML="EMail"/>
  </g:headerCell>
  <g:headerCell row="0" col="4" columnWidth="70">
    <g:html HTML="Enabled?"/>
  </g:headerCell>

  <g:tableCell row="0" col="0">
    <g:label text="${_user_.userId}"/>
  </g:tableCell>
  <g:tableCell row="0" col="1">
    <g:label text="${_user_.fullName}"/>
  </g:tableCell>
  <g:tableCell row="0" col="2">
    <g:label text="${_user_.dob}"/>
  </g:tableCell>
  <g:tableCell row="0" col="3">
    <g:label text="${_user_.email}"/>
  </g:tableCell>
  <g:tableCell row="0" col="4">
    <g:checkBox value="${_user_.enabled}" enabled="false"/>
  </g:tableCell>
</g:dataTable>

We use dataTable tag to declare a scrollable table. The table data is specified in values attribute and a variable name is declared in the var attribute.

In this example, we use userList as table data and variable name _user_. The variable name _user_ then is used later to setup data binding for widgets in table body section.

Inside the dataTable tag, we use headerCell tag to define widgets in table header and tableCell tag to define widgets in table body. You can specify its attributes such as row (row number), col (column number), rowSpan, colSpan, horizontalAlignment, wordWrap, etc. See Reference page for details.

To make our table scrollable, we need following in our css file:

/* This makes the scrolling table work */
div.gwt-ScrollTableContainer {
  overflow: auto;
  position: relative;
}
html>/**/body div.gwt-ScrollTableContainer table>tbody{
  overflow: auto;
  overflow-x: hidden;
}
div.gwt-ScrollTableContainer td:last-child {
  padding-right: 20px;
}
div.gwt-ScrollTableContainer thead tr	{
  position: relative;
  top: expression(offsetParent.scrollTop);
  left: expression(typeof(myvar) == 'undefined' ? 0+"px"+(myvar='true') : -1+"px");
}

/**
 * Customize this
 */
.gwt-ScrollTable thead tr{
  margin: 0;
  border-right: 1px solid #999;
  border-top: 1px solid #999;
  font-weight: normal;
  padding: 4px 3px 3px 4px;
  background: #ccc;
  font-weight: bold;
}

.gwt-ScrollTable tbody tr{
  cursor: hand;
  cursor: pointer;
}

.gwt-ScrollTable tbody tr.selected{
  background: #92c1f0;
}

In above example, we put Label widgets inside table body. You can even make the data table editable by putting TextBox, ListBox, CheckBox, etc instead of Label widgets.

If you want to know which user is selected in the table, simply add selectedIndex attribute as below:

<g:dataTable width="100%" height="300px" values="${userList}" var="_user_"
  selectedIndex="${userList.selectedIndex}">
...
</g:dataTable>

Thus in the controller class, we can know the selected user. For example:

...
User selectedUser = userList.getSelected();
rpcService.updateUser(selectedUser);
...

Data binding in gwtXP helps us to build up GWT GUI rapidly, by eliminating code to copy data from bean’s property to widget’s property and vice versa.

Useful resources when working with gwtXP:
JFace Data Binding
JFace Data Binding Introduction
Supervising Controller

See the previous post http://www.gdevelop.com/w/blog/2010/01/10/testing-gwt-rpc-services/ for how to use GWT SyncProxy to test GWT RPC services without using GWTTestcase.

SyncProxy 0.1.1 is released with following changes:

• Support cookie. At the moment, the cookie is stored in memory only.

Get SyncProxy (source code included) at the Downloads page.

However, it is still hard to test our RPC remote services. That is the reason I decided to develop SyncProxy which can run directly from pure Java (non JSNI) code.

For example, we have an helloApp application and we want to test our GreetingService

@RemoteServiceRelativePath("greet")
public interface GreetingService extends RemoteService {
  String greetServer(String name);
}

Assume the server side of application is running (whether in DevMode or deployed to an web server) and the servlet URL is configured at http://localhost/helloApp/greet

The test case

public class GreetingServiceTest extends TestCase{
  private static GreetingService rpcService =
    SyncProxy.newProxyInstance(GreetingService.class,
          "http://localhost/helloApp", "greet");

  public void testGreeting() {
    String result = rpcService.greetServer("SyncProxy");
    assertTrue((result != null) && (result.startsWith("Hello, SyncProxy")))
  }
}

SyncProxy.newProxyInstance() method requires a service interface class, a base URL and a relative servlet path.

SyncProxy will search for RPC policy files (*.gwt.rpc files) to determine appropriate policy name for the service interface. Thus, we copy gwt.rpc files from war/helloApp directory to our test case classpath.

SyncProxy.newProxyInstance() will return a new proxy instance which implements our GreetingService interface.

By design SyncProxy is synchronous, e.g it invoke the remote service and wait for the result. However, our GWT logic code invokes the remote service asynchronously. SyncProxy can simulate the ‘Async’ mode too.

GreetingServiceAsync rpcServiceAsync =
SyncProxy.newProxyInstance(GreetingServiceAsync.class,
          "http://localhost/helloApp", "greet");

The code is almost the same as section above, except we use the Async version of the remote service interface.

rpcService.greetServer("SyncProxy", new AsyncCallback<String>(){
  public void onFailure(Throwable caught) {
    ...
  }
  public void onSuccess(String result) {
    ...
  }
});

Get SyncProxy (with source code) at our Downloads page

SyncProxy includes test suite (see the Java source file com.gdevelop.gwt.syncrpc.test.RPCSyncSuite) to test against the standard GTW RPC test.

Updated on 2010/03/03: Version 0.1.1 is released with cookie supports

Updated on 2010/03/13: New post Invoke GWT RPC services deployed on Google App Engine.

For example, our EntryPoint class

public class MyEntryPoint implements EntryPoint, ValueChangeHandler{
  ...

  public void onModuleLoad() {
    History.addValueChangeHandler(this);
  }

  public void onValueChange(ValueChangeEvent event) {
    String token = event.getValue();

    if (token != null) {
      Panel panel = null;

      if (token.equals("list")) {
        panel = new ContactsListPanel();
      } else if (token.equals("add")) {
        panel = new EditContactPanel();
      }else if (token.equals("edit")) {
        panel = new EditContactpanel();
      }

      if (panel != null) {
        container.setWidget(panel);
      }
    }
  }
}

We can archive this by a simple generator

public class MapGenerator extends Generator{
  public String generate(TreeLogger logger, GeneratorContext context,
                         String requestedClass) throws UnableToCompleteException{
    TypeOracle typeOracle = context.getTypeOracle();
    assert(typeOracle != null);

    JClassType baseType = typeOracle.findType(requestedClass);
    if (baseType == null){
      logger.log(TreeLogger.ERROR, "Unable find type " + requestedClass, null);
      throw new UnableToCompleteException();
    }
    String packageName = baseType.getPackage().getName();
    String baseName = baseType.getSimpleSourceName();
    String simpleName = baseName + "Map";
    JClassType[] types = baseType.getSubtypes();

    // Generate the source file
    PrintWriter printWriter = context.tryCreate(logger, packageName, simpleName);
    ClassSourceFileComposerFactory composer =
      new ClassSourceFileComposerFactory(packageName, simpleName);
    composer.setSuperclass("HashMap");
    composer.addImport("java.util.*");
    SourceWriter out = composer.createSourceWriter(context, printWriter);
    out.println("public " + simpleName + "(){");
    out.indent();
    for (JClassType type : types) {
      String key = type.getSimpleSourceName();
      if (key.endsWith(baseName)){
        key = key.substring(0, key.length() - baseName.length());
      }
      out.println("put(\"" + key + "\", new " + type.getQualifiedSourceName() + "());");
    }
    out.outdent();;
    out.println("}");
    out.commit(logger);

    return packageName + "." + simpleName;
  }
}

The Generator will look for all sub-class of requestedClass, and put an instance of each these classes to a HashMap.

<module>
  ...
  <generate-with class="com.example.rebind.MapGenerator">
    <when-type-assignable class="com.example.client.MyBasePanel" />
  </generate-with>
</module>

public class MyEntryPoint implements EntryPoint, ValueChangeHandler{
  private static final Map<String, MyBasePanel> TOKEN_MAP = GWT.create(MyBasePanel.class);
  ...

  public void onModuleLoad() {
    History.addValueChangeHandler(this);
  }

  public void onValueChange(ValueChangeEvent event) {
    String token = event.getValue();

    if (token != null) {
      Panel panel = TOKEN_MAP.get(token);

      if (panel != null) {
        container.setWidget(panel);
      }
    }
  }
}

This post shows how to do it in Eclipse. I recommend to use Google Plugin for Eclipse during developing GWT applications.

In your Eclipse IDE, select File – New

- Type in the project name and the package
- Select “Use Google Web Toolkit” check box and click Finish button.

• Open project properties dialog: Right-click on Hello project and select Properties from pop-up menu
• Go to Run/Debug Settings section
• Click on the “Hello” launch configuration and click Edit button

  

• In the Edit Configuration dialog, click on Arguments tab and change the Working directory option from “Other” to “Default”

  

• Click OK
• Go to Java Build Path section, click on “Add External JARs” and select the gwtXP.jar you downloaded from http://www.gdevelop.com/w/downloads/
• Click OK

Create a new class HelloGwtXP in com.gdevelop.samples.hello.client package as below

package com.gdevelop.samples.hello.client;

import com.gdevelop.gwtxp.client.GwtXP;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

import java.util.Map;

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

  public HelloGwtXP() {
  }

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

Open file Hello.gwt.xml, add a line to inherit the GwtXP module

  <!-- Other module inherits                                      -->
  <inherits name='com.gdevelop.gwtxp.GwtXP'/>

To use new created EntryPoint class, change the line

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

to

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

For demo purpose, we create a new interface and a properties file as below

package com.gdevelop.samples.hello.client;

import com.google.gwt.i18n.client.Constants;

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

# HelloConstants.properties
greeting=Hello

Create a new class also in com.gdevelop.samples.hello.client package

package com.gdevelop.samples.hello.client;

import com.google.gwt.core.client.GWT;

import com.google.gwt.user.client.Window;

import java.beans.PropertyChangeListener;
import java.beans.PropertyChangeSupport;

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

  private transient PropertyChangeSupport changeSupport =
      new PropertyChangeSupport(this);
  private String name;

  public HelloController() {
  }

  /* =========== For property change event =========== */
  public void addPropertyChangeListener(PropertyChangeListener listener) {
    changeSupport.addPropertyChangeListener(listener);
  }
  public void addPropertyChangeListener(String propName,
                                        PropertyChangeListener listener) {
    changeSupport.addPropertyChangeListener(propName, listener);
  }
  public void removePropertyChangeListener(PropertyChangeListener listener) {
    changeSupport.removePropertyChangeListener(listener);
  }
  public void removePropertyChangeListener(String propName,
                                           PropertyChangeListener listener) {
    changeSupport.removePropertyChangeListener(propName, listener);
  }

  public HelloConstants getConstants(){
    return constants;
  }

  public void sayGreeting(){
    Window.alert(constants.greeting() + " " + (name != null ? name : "gwtXP"));
  }

  public String getName() {
    return this.name;
  }
  public void setName(String name) {
    String oldName = this.name;
    this.name = name;
    changeSupport.firePropertyChange("name", oldName, name);
  }
}

For demo purpose, the controller class has a property ‘name’ which will be bound to a TextBox in next section.

For data binding, the controller class also has addPropertyChangeListener and removePropertyChangeListener methods.

Create a new Hello.gwtxp.xml file. This file should reside in com.gdevelop.samples.hello.client too.

<?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 text="${name}" enabled="true"/>
  <g:button text="${constants.greeting}" onClick="#{sayGreeting}"/>
</g:verticalPanel>

</g:gwtxp>

Click the Run button in Eclipse toolbar to run the Hello example in HostedMode.

In the HostedMode window, check to make sure there are no errors while gwtXP translate the Hello.gwtxp.xml to Java code.

The screen shot showing gwtXP’s logging information in the HostedMode log tree.

In the Hosted Browser window, type a name in the TextBox and click Hello button. You should see a greetings dialog box.

Recall the sayGreeting method in HelloController class.

  public void sayGreeting(){
    Window.alert(constants.greeting() + " " + (name != null ? name : "gwtXP"));
  }

It does not have to the TextBox to get the name you typed in. Instead, the data binding take care of synchronization from TextBox to property.

How many key strokes for a single bean property? Too many as you guest.

In JDeveloper 10g, there is extension called Simple Java Bean Editor to allow developers to edit bean’s properties easily.

However, there is no one for JDeveloper 11g. That is one of reasons I decided to develop a new one.

Another reason is our projects require property change supports, the bean should fire property change event when setting new value to a property. Specially, gwtXP’s data binding rely on JFace data binding which in turn requires property change supports for model – UI widget synchronization.

The new Bean properties Editor (beanped) has following features:

• Functionality to edit  bean properties
• Property change supports

• Download it in the Downloads page
• In JDeveloper 11g select menu Help -> Check for Updates
• In the step 2 of “Check for Updates” wizard select “Install from Local File”
• Click Browse button and select the downloaded file.
• Review the license and click button “I Agree”
• Click button “Next” and then “Finish”

Note: After installed, for your convenience, the Bean Properties Editor will create a new Update Source in the JDeveloper. When a new version is released, your JDeveloper will notify you to perform the update.

Figure 1. Bean Properties Editor screen shot – Bean Editor tab

Figure 2. Bean Properties Editor screen shot – Bean Editor screen

Figure 3. Add Property dialog

• Open the bean Java source file. See the figure 1 above.
• Click on “Bean Editor” tab. You will see the screen as in the figure 2 above. Just a simple user interface, there are two buttons and a table for list of properties at the bottom.
• To add a new property: Click “Add” button, input the property name and the property type. You can select/deselect check boxes “Generate Read Method” and “Generate Write Method”. Click OK button when done
• To remove a property: Select the property you want to remove and Click “Delete” button
• To add/remove the property’s Read method: Select/deselect the check box in the Read column in the properties list
• To add/remove the property’s Write method: Select/deselect the check box in the Write column in the properties list

With few key strokes and mouse click, the Bean Properties Editor generates following code

package com.gdevelop.samples.bean;

import java.beans.PropertyChangeListener;
import java.beans.PropertyChangeSupport;

public class Student {
  private String name;
  private transient PropertyChangeSupport changeSupport =
      new PropertyChangeSupport(this);

  public Student() {
  }

  public String getName() {
    return this.name;
  }
  public void setName(String name) {
    String oldName = this.name;
    this.name = name;
    changeSupport.firePropertyChange("name", oldName, name);
  }

  public void addPropertyChangeListener(PropertyChangeListener listener) {
    changeSupport.addPropertyChangeListener(listener);
  }
  public void addPropertyChangeListener(String propName,
                                        PropertyChangeListener listener) {
    changeSupport.addPropertyChangeListener(propName, listener);
  }

  public void removePropertyChangeListener(PropertyChangeListener listener) {
    changeSupport.removePropertyChangeListener(listener);
  }
  public void removePropertyChangeListener(String propName,
                                           PropertyChangeListener listener) {
    changeSupport.removePropertyChangeListener(propName, listener);
  }
}

I hope this JDeveloper’s extension is helpful and appreciated for you feedback and/or features requests.

References

This document is generated from GWT’s source code for your references.

absolutePanel

An absolute panel positions all of its children absolutely, allowing them to overlap.

Note that this panel will not automatically resize itself to allow enough room for its absolutely-positioned children. It must be explicitly sized in order to make room for them.

Once a widget has been added to an absolute panel, the panel effectively “owns” the positioning of the widget. Any existing positioning attributes on the widget may be modified by the panel.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

button

A standard push-button widget.

Attributes

(None)

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

buttonBase (abstract)

Abstract base class for Button, CheckBox, RadioButton.

Attributes

(None)

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

cellPanel (abstract)

A panel whose child widgets are contained within the cells of a table. Each cell’s size may be set independently. Each child widget can take up a subset of its cell and can be aligned within it.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

checkBox

A standard check box widget. This class also serves as a base class for RadioButton.

Attributes

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

complexPanel (abstract)

Abstract base class for panels that can contain multiple child widgets.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

composite (abstract)

A type of widget that can wrap another widget, hiding the wrapped widget’s methods. When added to a panel, a composite behaves exactly as if the widget it wraps had been added.

The composite is useful for creating a single widget out of an aggregate of multiple other widgets contained in a single panel.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

dataTable

Table shows data from its values attribute

Attributes

Attributes inherited from htmlTable

borderWidth, cellPadding, cellSpacing, onClick

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

decoratedTabPanel

A TabPanel that uses a DecoratedTabBar with rounded corners.

Attributes

(None)

Attributes inherited from tabPanel

onBeforeSelection, onSelection

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

decoratorPanel

A SimplePanel that wraps its contents in stylized boxes, which can be used to add rounded corners to a Widget.

Wrapping a Widget in a “9-box” allows users to specify images in each of the corners and along the four borders. This method allows the content within the DecoratorPanel to resize without disrupting the look of the border. In addition, rounded corners can generally be combined into a single image file, which reduces the number of downloaded files at startup. This class also simplifies the process of using AlphaImageLoaders to support 8-bit transparencies (anti-aliasing and shadows) in ie6, which does not support them normally.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

disclosurePanel

A widget that consists of a header and a content panel that discloses the content when a user clicks on the header.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

errors

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

flexTable

A flexible table that creates cells on demand. It can be jagged (that is, each row can contain a different number of cells) and individual cells can be set to span multiple rows or columns.

Attributes

(None)

Attributes inherited from htmlTable

borderWidth, cellPadding, cellSpacing, onClick

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

flowPanel

A panel that formats its child widgets using the default HTML layout behavior.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

focusWidget (abstract)

Abstract base class for most widgets that can receive keyboard focus.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

grid

A rectangular grid that can contain text, html, or a child Widget within its cells. It must be resized explicitly to the desired number of rows and columns.

Attributes

Attributes inherited from htmlTable

borderWidth, cellPadding, cellSpacing, onClick

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

headerCell

Attributes

(None)

Attributes inherited from tableCell

col, colSpan, columnWidth, horizontalAlignment, row, rowSpan, verticalAlignment, wordWrap

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

horizontalPanel

A panel that lays all of its widgets out in a single horizontal column.

Attributes

Attributes inherited from cellPanel

borderWidth, spacing

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

horizontalSplitPanel

A panel that arranges two widgets in a single horizontal row and allows the user to interactively change the proportion of the width dedicated to each of the two widgets. Widgets contained within a HorizontalSplitPanel will be automatically decorated with scrollbars when necessary.

Attributes

Attributes inherited from splitPanel

splitPosition

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

html

A widget that can contain arbitrary HTML. This widget uses a <div> element, causing it to be displayed with block layout.

If you only need a simple label (text, but not HTML), then the Label widget is more appropriate, as it disallows the use of HTML, which can lead to potential security issues if not used properly.

Attributes

(None)

Attributes inherited from label

onClick, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel, pattern

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

htmlTable (abstract)

HTMLTable contains the common table algorithms for Grid and FlexTable.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

hyperlink

A widget that serves as an “internal” hyperlink. That is, it is a link to another state of the running application. When clicked, it will create a new history frame using com.google.gwt.user.client.History#newItem, but without reloading the page.

If you want an HTML hyperlink (<a> tag) without interacting with the history system, use Anchor instead.

Being a true hyperlink, it is also possible for the user to “right-click, open link in new window”, which will cause the application to be loaded in a new window at the state specified by the hyperlink.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

label

A widget that contains arbitrary text, not interpreted as HTML. This widget uses a <div> element, causing it to be displayed with block layout.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

listBox

A widget that presents a list of choices to the user, either as a list box or as a drop-down list.

Attributes

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

menuBar

A standard menu bar widget. A menu bar can contain any number of menu items, each of which can either fire a com.google.gwt.user.client.Command or open a cascaded menu bar.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

menuItem

An entry in a MenuBar. Menu items can either fire a com.google.gwt.user.client.Command when they are clicked, or open a cascading sub-menu. Each menu item is assigned a unique DOM id in order to support ARIA. See Accessibility for more information.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

menuItemSeparator

A separator that can be placed in a MenuBar.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

panel (abstract)

Abstract base class for all panels, which are widgets that can contain other widgets.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

passwordTextBox

A text box that visually masks its input to prevent eavesdropping.

Attributes

(None)

Attributes inherited from textBox

maxLength, pattern, validator, visibleLength

Attributes inherited from textBoxBase

cursorPos, key, onChange, readOnly, text, textAlignment

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

radioButton

A mutually-exclusive selection radio button widget. Fires com.google.gwt.event.dom.client.ClickEvent s when the radio button is clicked, and ValueChangeEvent s when the button becomes checked. Note, however, that browser limitations prevent ValueChangeEvents from being sent when the radio button is cleared as a side effect of another in the group being clicked.

Attributes

Attributes inherited from checkBox

checked, formValue, value

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

scrollPanel

A simple panel that wraps its contents in a scrollable area.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

simplePanel

Base class for panels that contain only one widget.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

splitPanel (abstract)

Abstract base class for HorizontalSplitPanel and VerticalSplitPanel.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

tab

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

tabPanel

A panel that represents a tabbed set of pages, each of which contains another widget. Its child widgets are shown as the user selects the various tabs associated with them. The tabs can contain arbitrary HTML.

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

tableCell

Attributes

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

textArea

A text box that allows multiple lines of text to be entered.

Attributes

Attributes inherited from textBoxBase

cursorPos, key, onChange, readOnly, text, textAlignment

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

textBox

A standard single-line text box.

Attributes

Attributes inherited from textBoxBase

cursorPos, key, onChange, readOnly, text, textAlignment

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

textBoxBase (abstract)

Abstract base class for all text entry widgets.

Attributes

Attributes inherited from focusWidget

enabled, onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onMouseWheel

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

uiObject (abstract)

The superclass for all user-interface objects. It simply wraps a DOM element, and cannot receive events. Most interesting user-interface classes derive from Widget.

Attributes

verticalPanel

A panel that lays all of its widgets out in a single vertical column.

Attributes

Attributes inherited from cellPanel

borderWidth, spacing

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

verticalSplitPanel

A panel that arranges two widgets in a single vertical column and allows the user to interactively change the proportion of the height dedicated to each of the two widgets. Widgets contained within a VerticalSplitterPanel will be automatically decorated with scrollbars when necessary.

Attributes

Attributes inherited from splitPanel

splitPosition

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

widget (abstract)

The base class for the majority of user-interface objects. Widget adds support for receiving events from the browser and being added directly to Panel panels.

Attributes

(None)

Attributes inherited from uiObject

addStyleDependentNames, addStyleNames, height, j_name, styleName, stylePrimaryName, title, visible, width

Building User Interfaces using gwtXP

This document provides practical guide to developing User Interface using gwtXP.

Currently, gwtXP supports standard GWT widgets. Check out GWT Developer’s Guide for more information on how to use GWT widgets.

We also build a demo which included in the Download file and you can see it online by going to the Examples and click on View Demo link.

Using these widget in gwtXP is straightforward. We put some simple examples with their typical attributes for easier understanding how to use them. See gwtXP References for complete document.

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:label text="Some plain text" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:html text="Some plain Text" />
  <g:html HTML="Some <b>HTML</b> Text" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:textBox text="${user.email}" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:textArea text="${user.comments}" characterWidth="80" visibleLines="10" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:passwordTextBox text="${user.password}" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:button text="${constants.send}" onClick="#{sendMail}" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:checkBox value="${user.enabled}" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:radioButton name="color" text="Red" />
  <g:radioButton name="color" text="Green" />
  <g:radioButton name="color" text="Blue" />
</g:gwtxp>

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:hyperlink text="Settings" targetHistoryToken="settings" />
</g:gwtxp>

Panel is ‘container’ widget, e.g contains other widgets. In gwtXP, simply put widgets inside the panel, gwtXP will generate code to add these widgets to panel.

gwtXP supports SimplePanel, FlowPanel, HorizontalPanel, VerticalPanel, DecoratorPanel, AbsolutePanel, HorizontalSplitPanel, VerticalSplitPanel and ScrollPanel.

See gwtXP References for complete document.

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:verticalPanel width="100%"  >
    <g:label text="Email:" />
    <g:textBox text="${user.email}" />
  </g:verticalPanel>
</g:gwtxp>

For DisclosurePanel, a special attribute ‘headerText’ is used to specify the header text above the panel.

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:disclosurePanel headerText="Advanced Criteria"  >
    <g:label text="Location:" />
    <g:textBox text="${criteria.location}" />
  </g:disclosurePanel>
</g:gwtxp>

Add widget to TabPanel using a ‘Tab’ element. Tab element is a pseudo SimplePanel used to declare tabText attribute.
Please note: there must be one widget inside Tab.

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:decoratedTabPanel animationEnabled="true"  >
    <g:tab tabText="Tab 01"  >
      <g:verticalPanel width="100%">
        ... widgets inside verticalPanel
      </g:verticalPanel>
    </g:tab

    <g:tab tabText="Tab 02"  >
      <g:verticalPanel width="100%">
        ... widgets inside verticalPanel
      </g:verticalPanel>
    </g:tab
  </g:decoratedTabPanel>
</g:gwtxp>

Using gwtXP to build Menu is easy. Simply put MenuItem inside MenuBar to build a horizontal menu bar. For sub-menu, just put another MenuBar inside MenuItem.

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <-- Main menu bar-->
  <g:menuBar autoOpen="true" width="99%" animationEnabled="true" >
    <g:menuItem text="File" >
      <-- File menu-->
      <g:menuBar vertical="true" >
        <g:menuItem text="New"        onCommand="#{newFile}" />
        <g:menuItem text="Open..."    onCommand="#{openFile}" />
        <g:menuItem text="Save"       onCommand="#{saveFile}" />
        <g:menuItem text="Save As..." onCommand="#{saveFileAs}" />
        <g:menuSeparator />
        <g:menuItem text="Print"         onCommand="#{printFile}" />
        <g:menuItem text="Print Preview" onCommand="#{previewFile}" />
      </g:menuBar>
    </g:menuItem

    <g:menuItem text="Help" >
      <-- Help menu-->
      <g:menuBar vertical="true" >
        <g:menuItem text="Help Content" onCommand="#{openHelpWindow}" />
        <g:menuSeparator />
        <g:menuItem text="About" onCommand="#{openAboutWindow}" />
      </g:menuBar>
    </g:menuItem
  </g:menuBar>
</g:gwtxp>

gwtXP supports FlexTable and Grid. Using TableCell to specify the row and column to put widget into the table.

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  <g:flexTable width="100%" >
    <g:tableCell row="0" col="0" >
      <g:label text="User Name"/>          <-- A Label at cell (0, 0) -->
    </g:tableCell>
    <g:tableCell row="0" col="1" >
      <g:textBox text="${user.userName}"/> <-- A TextBox at cell (0, 1) -->
    </g:tableCell>
  </g:flexTable>
</g:gwtxp>

There are two typical attributes in ListBox: values and selectedIndex. The attribute values should be a list of values displayed in the ListBox and the The attribute selectedIndex is for the index of selected item in the ListBox.

For example, our Controller class has a method getCategories which return a list of categories, a property selectedCategoryIndex (which has setter and getter methods) and a method updateSubCategories used to update sub-categories when user select a category.

The ListBox widget is then as below:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  ...
  <g:listBox values="${categories}"
    selectedIndex="${selectedCategoryIndex}"
    onChange="#{updateSubCategories}" />
  ...
</g:gwtxp>

gwtXP has a build-in scrollable table which displays data from user-defined list of object. You totally control which fields will be shown in the table.

The attribute values should be a list of object being displayed in the Table, the attribute var is used to define a variable name used in the table body.

Example: In this example, our controller class has a method getUserList which return list of User object. And we user a variable named ‘_user_’ to iterate through the list. For each User in the list, we show User Name in column 0, email in column 1, etc.

Our Data Table is then as below:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  ...
  <g:dataTable width="100%" height="400px"
    values="${userList}"
    var="_user_"
    selectedIndex="${userList.selectedIndex}">

    <g:tableCell row="0" col="0" >
      <g:label text="${_user_.userName}" /> <-- User Name is shown in column 0 -->
    </g:tableCell>

    <g:tableCell row="0" col="1" >
      <g:label text="${_user_.email}" /> <-- Email is shown in column 1 -->
    </g:tableCell>

  </g:dataTable
  ...
</g:gwtxp>

Examples

Below classes is used during this demo. It is straightforward.

package com.gdevelop.examples.demo.client;

import java.beans.PropertyChangeListener;
import java.beans.PropertyChangeSupport;

import java.util.Date;

public class User {
  private transient PropertyChangeSupport changeSupport =
      new PropertyChangeSupport(this);

  private String userId;
  private String fullName;
  private Date dob;
  private String email;
  private int numberOfWrongPassword;
  private String password;
  private Boolean enabled;

  public User() {
  }
  public User(String userId, String fullName, Date dob, String email,
      int numberOfWrongPassword, Boolean enabled) {
    this.userId = userId;
    this.fullName = fullName;
    this.dob = dob;
    this.email = email;
    this.numberOfWrongPassword = numberOfWrongPassword;
    this.enabled = enabled;
  }

  /*
   * Property Change Support
   */
  public void addPropertyChangeListener(PropertyChangeListener listener){
    changeSupport.addPropertyChangeListener(listener);
  }
  public void addPropertyChangeListener(String propName,
      PropertyChangeListener listener){
    changeSupport.addPropertyChangeListener(propName, listener);
  }
  public void removePropertyChangeListener(PropertyChangeListener listener){
    changeSupport.removePropertyChangeListener(listener);
  }
  public void removePropertyChangeListener(String propName,
       PropertyChangeListener listener){
    changeSupport.removePropertyChangeListener(propName, listener);
  }

  public String getUserId(){
    return userId;
  }
  public void setUserId(String userId){
    String oldUserId = this.userId;
    this.userId = userId;
    changeSupport.firePropertyChange("userId", oldUserId, userId);
  }

  public String getFullName() {
    return fullName;
  }
  public void setFullName(String fullName) {
    String oldFullName = this.fullName;
    this.fullName = fullName;
    changeSupport.firePropertyChange("fullName", oldFullName, fullName);
  }

  public String getEmail(){
    return email;
  }
  public void setEmail(String email){
    String oldEmail = this.email;
    this.email = email;
    changeSupport.firePropertyChange("email", oldEmail, email);
  }

  public Date getDob() {
    return dob;
  }
  public void setDob(Date dob) {
    Date oldDob = this.dob;
    this.dob = dob;
    changeSupport.firePropertyChange("dob", oldDob, dob);
  }

  public int getNumberOfWrongPassword() {
    return numberOfWrongPassword;
  }
  public void setNumberOfWrongPassword(int numberOfWrongPassword) {
    int oldNumberOfWrongPassword = this.numberOfWrongPassword;
    this.numberOfWrongPassword = numberOfWrongPassword;
    changeSupport.firePropertyChange("numberOfWrongPassword",
      oldNumberOfWrongPassword, numberOfWrongPassword);
  }

  public String getPassword() {
    return password;
  }
  public void setPassword(String password) {
    String oldPassword = this.password;
    this.password = password;
    changeSupport.firePropertyChange("password", oldPassword, password);
  }

  public Boolean getEnabled() {
    return enabled;
  }
  public void setEnabled(Boolean enabled) {
    Boolean oldEnabled = this.enabled;
    this.enabled = enabled;
    changeSupport.firePropertyChange("enabled", oldEnabled, enabled);
  }

}

package com.gdevelop.examples.demo.client;

import java.util.Date;

public class UserList extends SingleSelectionList{
  private static final long MILIS_PER_DAY = 24*60*60*1000;
  static UserList createExampleData(){
    UserList users = new UserList();
    // Admin user
    User user = new User("admin", "Administrator",
                      new Date(System.currentTimeMillis()-MILIS_PER_DAY*10000),
                      "admin@example.com", 0, true);
    user.setUserId("admin");
    users.add(user);
    // Generate some user
    for (int i=0; i<20; i++){
      user = new User("user_" + i, "User " + i,
       new Date(System.currentTimeMillis()-MILIS_PER_DAY*((int)(10000*Math.random()))),
       "user" + i + "@example.com", 0, true);
      users.add(user);
    }

    return users;
  }

  public UserList() {
  }

  public User getSelected() {
    return super.getSelected();
  }
}

In the demo screen, click on 'Source' table to see the gwtxp.xml file and Controller class.

View the demo in another tab/window

Download the demo source code from the Downloads page.

Code generation for Data Binding

gwtXP uses JFace Data Binding to bind bean’s property to GWT widget’s property. Below describes key concepts of JFace Data Binding from that we will see how gwtXP generate code for Data Binding.

In general, the JFace Data Binding architecture looks like:

The key concept of JFace Data Binding is Observable. The Binding is used to bind two Observable objects.

See JFace Data Binding and JFace Data Binding Introduction for full documentation.

You can also find a good presentation at EclipseCon 2008 – JFace Data Binding

Let start another example for demonstration purpose. Assume we have model class User as below

class User{
  private transient PropertyChangeSupport changeSupport =
    new PropertyChangeSupport(this);
  private String userName;
  ...

  public String getUserName(){
    return userName;
  }
  public void setUserName(String userName){
    String oldUserName = this.userName;
    this.userName = userName;
    changeSupport.firePropertyChange("userName", oldUserName, userName);
  }
}

The controller class

public class UserController{
  private User currentUser;
  ...

  public User getCurrentUser(){
    return currentUser;
  }
}

And the view is described by User.gwtxp.xml file

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp"
    controllerClassName="qualified_class_name">
  <verticalPanel>
    <textBox j_name="txtUserName" text="${currentUser.userName}"/>
    ...
  </verticalPanel>
</g:gwtxp>

We declare a TextBox in a VerticalPanel. The TextBox’s text is bound to currentUser’s name.

gwtXP will then generate following code for you

...
  __dbc__.bindValue(
    new TextBoxObservableValue(txtUserName)
    , new UserObservableValue(null, __this__.getCurrentUser(), "name")
    , new GWTUpdateValueStrategy()
    , new GWTUpdateValueStrategy()
  );
...

You see in the above snippet, gwtXP generates code for two Observables and code for binding them. The firs Observable is responsible for handling TextBox’s text change event, while the second is for change event in property name of current user object.
The result is depicted by below diagram

Note: ObservableValue is a subclass of Observable. Beside ObservableValue, gwtXP can also generate ObservableLists and bind them.

Widget’s properties

We define UI widgets and its hierarchy in XML Definition File (.gwtxp.xml file). Each element in XML file is mapped to a GWT widget object. And element’s attributes is used to setup widget properties (optionally, converter is used to convert attribute String value to appropriated type).

Except when noted, all attributes are optional.

By default, any writable property can be set by a specifying its correspondent attribute. Table below shows examples for mapping XML element’s attribute to GWT widget’s property.

Below sections describe special attributes used during the code generation process.

Attribute j_name has a special meaning in gwtXP. gwtXP uses it for widget name in the generated code. If you don’t specify the j_name attribute, gwtXP uses a sequence name for the generated widget.
Recall the gwtXP interface

public UIObject getUI(String name);

The method getUI is for getting widget by its name specified by j_name attribute.

Example: if you set the j_name attribute for a text box:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  ...
  <g:textBox j_name="email"/>
  ...
</g:gwtxp>

gwtXP will generate code as below:

private TextBox email = new TextBox();

And the controller can access to it by calling:

TextBox txtEmail = (TextBox)getUI("email");

You can add style names by specifying these names (separated by comma) in addStyleNames and addStyleDependentNames. addStyleNames is for additional style names and addStyleDependentNames is for additional style dependent names.

Recall that gwtXP generate converter code to convert bean’s property type to widget’s property type and vice versa.

For Label and TextBox, you can specify pattern to tell converter how to format and parse values.

Note: Currently, gwtXP supports patterned conversion between Number and String; and Date and String.

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  ...
  <g:textBox j_name="dateOfBirth" pattern="dd-MM-yyyy"/>
  ...
</g:gwtxp>

For TextBox, you can use validator attribute to specify a Validator to validate user input. The Validator must implement org.eclipse.core.databinding.validation.IValidator

Example:
The controller class have a method:

public class MyController {
...
  public IValidator getEmailValidator(){
    return ...;
  }
...
}

You can set the validator for email TextBox:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  ...
  <g:textBox j_name="email" validator="${emailValidator}"/>
  ...
</g:gwtxp>

For Grid, you must explicitly specify the number of rows and columns. Attributes rows and columns is used for this purpose.

Note: Attributes rows and columns are required for Grid widget.

Example:

<?xml version="1.0" encoding="UTF-8" ?>
<g:gwtxp xmlns:g="http://www.gdevelop.com/gwtxp" controllerClassName="...">
  ...
  <g:grid rows="5" columns="4">
    ...
  </grid>
  ...
</g:gwtxp>

See References for a complete document of widget’s properties.

Understanding gwtXP

GwtXP Interface is used for code generation.

package com.gdevelop.gwtxp.client;
public interface GwtXP {
 /**
 * Get the DataBindingContext for this gwtXP, create a new one if needed.
 * @see org.eclipse.core.databinding.DataBindingContext
 * @return the DataBindingContext
 */
 public DataBindingContext getDataBindingContext();

 /**
 * Get the root UI object, create a new one if needed.
 * @return The root UI object declared in gwtXP file.
 */
 public UIObject getGUI();

 /**
 * Get the UI object by its name, <code>null</code> if not found.
 * @param name UI object name.
 * @return The UI object which is declared in gwtXP file.
 */
 public UIObject getUI(String name);
}

This module defines GwtXPGenerator class for GwtXP interface.

<module>
  ...
  <generate-with class="com.gdevelop.gwtxp.rebind.GwtXPGenerator">
    <when-type-assignable class="com.gdevelop.gwtxp.client.GwtXP" />
  </generate-with>
  ...
</module>

As you may know, when you call GWT.create(GwtXP.class), GWT will create a new GwtXPGenerator instance and invoke its generate method.

GwtXPGenerator will scan for XML definition files in the project source path and generate Java code for these files, e.g transform elements in XML definition files to GWT widgets.

This transformation process is as below:

• Parse and validate the XML definition file.
• Iterate through every elements in this file, lookup a appropriated <code>Tag</code> class for that element.
• Call Tag’s methods to generate code for the element.
• The Tag in turn generate code for: widget declaration, widget instantiation, widget’s properties setup, data binding and handler registration.

Because gwtXP is open source, advanced readers can look at its source code for further details.

As described in above, GwtXPGenerator scans for XML definition files. You have to write these files to build up your UI.

XML definition file is parsed and validated against gwtXP schema. The schema gwtXP.xsd file is included in the distribution. Snippets below outlines the important parts of gwtXP.xsd schema

Root element:

<xsd:complexType name="gwtxpType">
  <xsd:sequence>
  <xsd:element ref="widget" maxOccurs="1"/>
  </xsd:sequence>
  <xsd:attribute name="controllerClassName" type="xsd:string"/>
  </xsd:complexType>
<xsd:element name="gwtxp" type="gwtxpType"/>

UIObjectType and WidgetType define type UIObject and Widget

<xsd:complexType name="UIObjectType" abstract="true">
  <xsd:attribute name="height" type="xsd:string"/>
  <xsd:attribute name="styleName" type="xsd:string"/>
  <xsd:attribute name="stylePrimaryName" type="xsd:string"/>
  <xsd:attribute name="title" type="xsd:string"/>
  <xsd:attribute name="visible" type="xsd:string"/>
  <xsd:attribute name="width" type="xsd:string"/>
  <xsd:attribute name="j_name" type="xsd:string"/>
  <xsd:attribute name="addStyleNames" type="xsd:string"/>
  <xsd:attribute name="addStyleDependentNames" type="xsd:string"/>
</xsd:complexType>

<xsd:complexType name="WidgetType">
  <xsd:complexContent>
    <xsd:extension base="UIObjectType">
    </xsd:extension>
  </xsd:complexContent>
</xsd:complexType>

LablelType for Label:

<xsd:complexType name="LabelType">
  <xsd:complexContent>
    <xsd:extension base="WidgetType">
      <xsd:attribute name="direction" type="xsd:string"/>
      <xsd:attribute name="horizontalAlignment" type="xsd:string"/>
      <xsd:attribute name="text" type="xsd:string"/>
      <xsd:attribute name="wordWrap" type="xsd:string"/>
      <xsd:attribute name="onClick" type="xsd:string"/>
      <xsd:attribute name="onMouseDown" type="xsd:string"/>
      <xsd:attribute name="onMouseMove" type="xsd:string"/>
      <xsd:attribute name="onMouseOut" type="xsd:string"/>
      <xsd:attribute name="onMouseOver" type="xsd:string"/>
      <xsd:attribute name="onMouseUp" type="xsd:string"/>
      <xsd:attribute name="onMouseWheel" type="xsd:string"/>
      <xsd:attribute name="pattern" type="xsd:string"/>
    </xsd:extension>
  </xsd:complexContent>
</xsd:complexType>

Basically, gwtXP file consist of

• A root element <g:gwtxp controllerClassName=”qualified class name”>
• A UI root element, normally it is sub-class of Panel.
• And UI hierarchy in the UI root element.

Let review the generated code for HelloWorld.gwtxp.xml file in the Getting Started section.

<?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>

As you can see in the XML file structure, the root element is a VerticalPanel with two children, a TextBox and a Button.

The generated code is as below:

public class Hello_GwtXP
  extends com.gdevelop.samples.hello.client.HelloController
  implements com.gdevelop.gwtxp.client.GwtXP{
...
public UIObject getGUI(){
  if (__guiObject__ == null ){
    __guiObject__ = __initGUI__();
  }
  return __guiObject__;
  }

private UIObject __initGUI__(){
  // g_verticalPanel_0
  __guiObject__ = g_verticalPanel_0;
  g_verticalPanel_0.setWidth("100%");
  g_verticalPanel_0.add(g_textBox_0);

  // g_textBox_0
  __uiNameMap__.put("g_textBox_0", g_textBox_0);
  g_textBox_0.setEnabled((Boolean)
    Converters.getConverter(String.class, Boolean.class).convert("true"));
  g_verticalPanel_0.add(g_button_0);

  // g_button_0
  __uiNameMap__.put("g_button_0", g_button_0);
  g_button_0.setText(__this__.getConstants().greeting());
  g_button_0.addClickHandler(new ClickHandler(){
    public void onClick(ClickEvent event){
      __this__.sayHello();
    }
  });

  return __guiObject__;
}
...
}

Note: The generated class extends the Controller class specified in controllerClassName attribute in gwtxp file.

You can set the widget’s property by setting element’s attribute in definition file. The widget’s property value can be

• A literal: for example  “100%”, true, etc
• GWT’s constant: for example ${constants.greeting}
• Dynamically bound to a bean’s property by a Expression: for example ${user.name}

GwtXPGenerator will generate code to set value to widget’s property. In case widget’s property type is not String, GwtXPGenerator will generate Converter code to convert attribute String value to appropriate type before setting to widget’s property.

In HelloWorld example, the generated code look like

g_verticalPanel_0.setWidth("100%");  // No conversion required.
  ...
// Converter is used to convert String to Boolean
g_textBox_0.setEnabled((Boolean)
  Converters.getConverter(String.class, Boolean.class).convert("true"));

For constants, the Controller class must have a get method which return type of com.google.gwt.i18n.client.Constants.

In HelloWorld example, the generated code is as below

g_button_0.setText(__this__.getConstants().greeting());

We can also use an Expression to set widget’s property.
See Data Binding

gwtXP generate code to register handlers to the widgets. The handler in turn will call appropriate Controller method for handling user’s actions.

In our HelloWorld example, the generated code for onClick=”#{sayHello}” is as below

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

Note: gwtXP uses ${...} notation for data bindings and #{...} notation for event handlers.

Next: see following sections for details about setting up widget’s properties, data binding and event handler methods.

GWT bootstrap script

This post shows how we can use OOPHM to develop XUL applications in GWT. In this post, we will develop a Firefox extension and you can try yourself on Thunderbird and XulRunner.

In previous versions, GWT uses Hosted Browser and it is the only the supported browser during development cycles.

With new version, GWT 2.0 milestone 2, developers are free to choose their favorite browser, and they can develop applications from multiple browsers with OOPHM – Out Of Process Hosted Mode.

GWT has several linkers which generate the bootstrap scripts for your application.

The default IFrameLinker’s script uses document.write to inject other required scripts. However, because document.write is not available in XUL, the normal GWT bootstrap process does not work for XUL.

In addition, this bootstraps script creates a iframe element to load other scripts. Because for security reasons, content in this iframe can not access its parent chrome. See https://developer.mozilla.org/en/XUL/iframe.

Thus, we created another specific linker XulLinker for XUL applications. XulLinker uses Mozilla’s specific function document.loadOverlay to securely load the other scripts. XulLinker is test to run on Windows and Linux. Its source code is included in the download file.

For the purpose of this demonstration, we write a Hello application. The screenshots is as below:

Normal xul application e.g unprivileged mode

Chrome mode e.g privileged mode

GWT-Development-Mode

The example is simple, and you can discover its source code yourself. However, some key points you need to know:

1. In TestXulLink.gwt.xml we added a new linker: <add-linker name=”xul” />
2. The .xul file and .nocache.js must be in same directory
3. You have to create a Firefox extension stub and install it before writing GWT code. For this example, copy file xullinker@gdevelop.com to your Firefox extension directory and edit it to point to the war directory of this example.

Run the example in Development Mode and then type chrome://xullinker/content/XulLinker.xul?gwt.hosted=localhost:9997 in Firefox’s address bar

After compiling the example, you can run in Web mode using chrome://xullinker/content/XulLinker.xul instead.

We use XulLinker to load required scripts for GWT application. XulLinker help us to develop Firefox, Thunderbird extensions and XUL applications using Java and GWT.

Source Code: XulLinker.tgz
See the LICENSE.txt in the download file for license details.

Download and give it a try.

See gwtXP Overview for how it works.

gwtXP is a markup language for GWT allowing developers to develop Web applications in XML.

• Declarative UI elements: <g:label text=”User Name:”/>
• Declarative data binding: <g:textBox text=”${user.name}”/>
• Declarative handler: <g:button text=”Search” onClick=”#{searchByUserName}”/>

Diagram shows basic concepts of gwtXP

See the examples and demo.

gwtXP is a open source product. It is released under Apache License version 2.0.

Read gwtXP document

GWT SyncProxy allows you to access/invoke GWT RPC service methods from pure Java (non JSNI) code.

See this post for how to use GWT SyncProxy to test RPC services without using GWTTestcase.

beanped is an extension allows you edit your bean properties.

See this post for how to install and use beanped.

Actions and Handlers

gwtXP generate code to register handlers to the widgets. The handler in turn will call appropriate Controller method for handling user’s actions. We name this method  event handler or event handling method. Requirements for event handling method:

• Must be a public method
• Must have zero parameter or one parameter of type com.google.gwt.event.shared.GwtEvent

Examples for valid event handling method:

public void save(){
  ...
}
public void fetchRoles(){
  ...
}

Event name in gwtXP follows the GWT one. Table below list common event names.

Please note: this table is adopted from GWT EventHandler API document.

In gwtxp.xml file, we can define event handler as below:

<button onClick="#{fetchRoles}" />

See References for complete document of widget properties and event names.

Demo

gwtXP Demo demonstrates gwtXP features

• Data binding: property binding, list binding and table binding
• Data Conversion
• Data Validation
• Editable Table
• Scrollable Table

View gwtXP demo

Archive Page

This page contains archive files. For latest one, check our Home page

You may be interested in our gwtXP – an open source project to develop GWT applications.

gwtXP is a markup language for GWT allowing developers to develop Web applications in XML.

• Declarative UI elements: <g:label text=”User Name:”/>
• Declarative data binding: <g:textBox text=”${user.name}”/>
• Declarative handler: <g:button text=”Search” onClick=”#{searchByUserName}”/>

Diagram shows basic concepts of gwtXP

See the examples and demo.

gwtXP is a open source product. It is released under Apache License version 2.0.

Read gwtXP document

GWT SyncProxy allows you to access/invoke GWT RPC service methods from pure Java (non JSNI) code.

Thus GWT SyncProxy can be used in Java client to access to GWT RemoteServiceServlet.

See this post for how to use GWT SyncProxy to test RPC services without using GWTTestcase.

beanped is an extension allows you edit your bean properties.

See this post for how to install and use beanped.

gwtDeveloper is a GWT visual editor/designer for JDeveloper 10g.

gwtDeveloper provides visual editing environment to help with developing with the Google Web Toolkit (GWT) in JDeveloper.

Download gwtDeveloper from our downloads page.

Please note: It works on JDeveloper 10g only.

gwt4xul helps you to build XUL applications in GWT. It is here for archive purpose only.

With OOPHM in GWT version 2.0, you can develop XUL more elegant. See Using OOPHM to develop XUL applications

Polls Archive

[page_polls]

Downloads

Getting Started

Using GWT webAppCreator command line to create HelloWorld example

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

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

Add below line to Hello.gwt.xml file

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

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

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>

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.

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.

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

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

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.

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()
    );
...

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();
  }
});
...

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.

gwtXP

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 widgets to its container.

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

Diagram shows basic concepts of gwtXP

In below sections, you will find out how gwtXP can help developers to build more productive web application.

gwtXP Release Notes

• 0.1.2
• 0.1.1
• 0.1

Minor change release.

• ListBox: selectedIndex, selectedValue, valuePropName and displayPropName.
• WidgetPropertyObservableValue, HasTextObservableValue, HasValueObservableValue, HasWordWrapObservableValue and HasCaptionObservableValue: Check the widget before setting value to its property.

• Event Handler expression can be in #{#historyToken} format.

Minor change release.

• Pack all required class into one jar for convenient purpose.
• Include samples

• Add attribute onCommand to menuItem
• Add SimplePanel

Initial release

• Transform XML file to GWT code
• Generate code for data binding using JFace Data Binding
• Value Binding, including Computed Value (for example: ${item.price * orderLine.quantity}
• List Binding: Bind to ListBox and bind to Table (using ScrollTable – a scrollable table)
• Generate code for event handler regsitration
• Almost common widgets like TextBox, Label, ListBox, etc are done
• ScrollTable: a modified version of FlexTable with scrolling feature

Home

Bean Properties Editor for JDeveloper 11g^New!.