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.

Common widgets

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.

Label

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

HTML

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

TextBox

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

TextArea

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

PasswordTextBox

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

Button

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

CheckBox

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

RadioButton

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

Hyperlink

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

Panels

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>

DisclosurePanel

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>

TabPanel and DecoratedTabPanel

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>

MenuBar and MenuItem

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>

Table: FlexTable and Grid

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>

ListBox

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>

Data Table

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>