Greg has posted 18 posts at DZone. You can read more from them at their website. View Full User Profile

Pivot: A Practical Example, Part 1 - UI Markup Using WTKX

  • submit to reddit
This is the first in a series of five articles that walk through the implementation of a simple but practical Pivot application called Stock Tracker. This section focuses on building a user interface using WTKX, Pivot's XML markup language. The next article will cover event handling in Pivot. --Greg Brown

The user interface of a Pivot application is often defined using XML markup rather than Java code. This is because XML can be considerably easier to read and work with than straight Java. The hierarchical structure of an XML document more closely parallels the structure of the component hierarchy, which makes it easier to visualize the resulting output.

Pivot allows developers to split the definition of the user interface into multiple WTKX files. This allows each piece to vary independently and makes the overall structure easier to manage. The layout of the Stock Tracker application is divided into two WTKX documents: one that sets up the main structure of the application and another that defines the layout for the quote detail:

We'll take a look at the top-level markup in stocktracker.wtkx first, concentrating on the two main page elements, TablePane and TableView. Then we'll investigate the markup for the stock quote detail, which uses the Form container and lays the ground work for the data binding support we'll discuss in a later section.


The root node of stocktracker.wtkx is a TablePane element. A TablePane is a type of layout container that arranges its children in a manner similar to an HTML table.

Like HTML tables, TablePane contents are organized into rows and columns. Unlike HTML, however, which may attempt to infer a table structure from its contents, a TablePane's structure must be defined in advance, as shown below:

<TablePane styles="{padding:8, spacing:6}">
<Row height="-1"/>
<Row height="1*"/>
<Row height="-1"/>
<Row height="-1"/>
<Column width="244"/>
<Column width="1*"/>

TablePane row heights and column widths can be specified as either automatic, absolute, or relative:

  • A value of -1 specifies an automatic size; the table pane will determine the height of the row as the maximum preferred height of all components in that row; the same applies to automatic column widths.

  • An explicit, non-negative value defines an absolute width or height, specified in pixels.

  • A number followed by an asterisk specifies a relative size; the width or height is determined by applying a weighted percentage of the space left over after subtracting the width or height of all automatic and absolute columns and rows (which may be 0).

In the example above, the second row is given a relative height that will assign it all of the available space once the other rows are accounted for; all other rows are given an automatic height. The first column is given an explicit width of 244 pixels, and the second column is given 100% of the remaining width.

The following graphic shows the resulting layout (the blue lines represent the table cell boundaries):

Stock Tracker table pane cells


Note the styles attribute of the TabPane element. Styles are used to customize the appearance of a component, and are specified in WTKX as a JSON-formatted collection of name/value pairs. All WTKX elements support the styles attribute, but each element may support a different set of styles depending on the currently installed skin.

In this example, the TablePane is assigned a padding value of 8 and a spacing value of 6. Padding represents the amount of space that the table pane will leave around its components, and spacing is the size of the gap the table pane will leave between components.

Table Pane Cells

The actual content of a table pane is specified in the <cells> element. Each immediate child element of the <cells> element is considered a child component of the table pane. The row and column in which the child will be placed is specified by the row and column attributes attached to the sub-element, as shown below:

<Label row="0" column="0" text="%stockTracker"
styles="{font:'Verdana bold 14', verticalAlignment:'center'}"/>

Note the use of the percent symbol in the text attribute value. This tells the WTKX component loader that value of the text attribute should be provided by a resource string with the name specified in the attribute, minus the percent sign. This will be discussed in more detail in the Localization section.

table_view.png15.93 KB
table_pane.png34.15 KB
form.png13.28 KB
Published at DZone with permission of its author, Greg Brown.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)


Kevin Daly replied on Wed, 2008/07/02 - 2:43pm

Pivot absolutely looks great. I would love to use it in a project, except it does not seem to have a datepicker component. This is a must for any modern gui. I may have missed it, but I can't find it.

Greg Brown replied on Wed, 2008/07/02 - 2:54pm in response to: Kevin Daly

Nope, you're right - Pivot doesn't have a date picker yet. It is on our list for a future release, though. Perhaps if you are so inclined, you could help us write one!  :-)  We'd be happy to help you get started.


Kevin Daly replied on Wed, 2008/07/02 - 8:19pm in response to: Greg Brown

I'll see if I can find some time to build one, even If I don't use pivot in the future it might be a cool thing to do.

Greg Brown replied on Thu, 2008/07/03 - 9:34am in response to: Kevin Daly

That would be great. If you have any questions or need any help getting started, please feel free to ask in the Pivot discussion forum.

Serge Bureau replied on Wed, 2008/07/16 - 6:11am

Sorry but to me it is a ridiculous concept.


"XML easier to read than Java", where the hell is there anybody believing that ?

XML is the most unreadable thing in the world, verbose and inefficient.

Plus is does not allow compilation check, so it complicates thing. And it is infinitely less precise than Java.


And why is it under the Groovy Zone ??? 

dargun hai replied on Mon, 2008/11/10 - 10:30am

do it by myself

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.