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

Stock Quote Detail

The stocktracker.wtkx file defines the overall structure of the application, and the layout of the quote detail content is defined separately in stocktracker.detail.wtkx. Yet, when the application is run, it appears as though the entire application was defined in a single WTKX file. How does this work? The key is the Component tag:

<Component namespace="detail" src="stocktracker.detail.wtkx"/>

The Component tag acts as a sort of "include" statement - it tells the component loader that a component should be placed here, but that the component's content is not defined in this file. The location of the actual content is specified by the src tag and is either an absolute (beginning with a slash character) or relative (no slash) path to another WTKX file. Relative paths are resolved in the context of the current WTKX file, and absolute paths are resolved in the context of the application's classpath. Fully-qualified URLs (those that begin with a protocol) are not supported.

In addition to the src attribute, the Component tag requires a value for the namespace attribute. This is used to partition the ID values defined in each WTKX file into separate namespaces, allowing developers to avoid naming collisions. Components are referenced by concatenating the namespace(s) with the component's ID; for example, the path "detail.changeLabel" refers to the Label with ID "changeLabel" defined in the stocktracker.detail.wtkx file.


Though the top-level element of the detail page is a FlowPane, most of the layout is handled by the Form container. Forms arrange their child components in a vertical stack, similar to a vertical FlowPane, prepending a text label to each field.

Stock Tracker detail view using Form container

A field's label is defined by a label attribute attached to the child element, as shown below:

<Form styles="{rightAlignLabels:true, fieldAlignment:'right'}">
<Label label="%value" textKey="value"/>
<Label id="changeLabel" label="%change" textKey="change"/>
<Label label="%openingValue" textKey="openingValue"/>
<Label label="%highValue" textKey="highValue"/>
<Label label="%lowValue" textKey="lowValue"/>
<Label label="%volume" textKey="volume"/>

Since the quote data is read-only, the "fields" in this example are actually themselves Label instances. Their form label values are specified as string resources so they can be easily translated.

Data Binding

Each Label in the form defines a textKey attribute. This attribute specifies the name of the property from which the label will obtain its text value during data binding. Specifically, it is the name of the value's key in the "bind context", an instance of Dictionary<String, Object> that is passed to the load() method of the Form instance, and then recursively to the Labels themselves. This will be discussed in more detail in the data binding section.

Though data binding is often used to populate a Form's contents, it can be used with any container class. For example, text input components in a FlowPane can also be data-bound, as can a list view in a card pane; there is nothing special about the Form class that supports data binding - it is supported by all container types and many component classes.

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.