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

07.02.2008
| 16783 views |
  • submit to reddit

TableView

The TableView component is used to present tabular data in a grid of rows and columns. While it bears a superficial resemblance to TablePane, the purpose of the two components is quite different: TablePane is a container; its primary purpose is to lay out sub-components, and its structure is most often defined at design time. TableView is a component that acts as a view on a set of model data and is most often populated at run time.

Like TablePane, TableView's columns must be defined up front. However, since the contents of a table view are generally not known until run time, it is not necessary to define a table view's row structure - this is provided by the table view's model data when the table view is populated.

TableView is used by the Stock Tracker demo to display a selectable list of stock quote data. The following listing shows the markup used by the demo to create the table view:

<TableView id="stocksTableView" selectMode="multi"
styles="{showHorizontalGridLines:false}">
<columns>
<Column name="symbol" headerData="'%symbol'" width="80"/>
<Column name="value" headerData="'%value'" width="80"
cellRenderer="pivot.wtk.content.TableViewNumberCellRenderer"
cellRendererStyles="{horizontalAlignment:'right'}"
cellRendererProperties="{numberFormat:'$0.00'}"/>

<Column name="change" headerData="'%change'" width="80"
cellRenderer="pivot.tutorials.stocktracker.ChangeCellRenderer"
cellRendererStyles="{horizontalAlignment:'right'}"
cellRendererProperties="{numberFormat:'+0.00;-0.00'}"/>
</columns>
</TableView>

Note that the TableView is given an id attribute value of "stocksTableView". This is used to associate the table view with an instance of TableViewHeader, which is discussed in the next section. ID values are also used to gain access to WTKX components from Java code when wiring up event handlers. This will be discussed in more detail in the forthcoming section on event handling.

The selectMode="multi" attribute specifies that a user may select multiple rows in this table view. Other possible values for selectMode are "single" and "none". Setting the showHorizontalGridLines style to false tells the table view not to draw horizontal grid lines separating its cells. Vertical grid lines will still be drawn; however, these can be turned off as well by setting showVerticalGridLines to false.

TableView Columns

The application defines three columns for the table view: one for the stock ticker symbol, another for the stock's current value, and a third for the change percentage. The name attribute defines the name of the column. It is not visible to the user, but is used as a key to map values in each row to their appropriate place in the table view; the value of the headerData attribute is what is actually shown to the user in the table view header. Note that the header data for each column is specified as a resource name so the header text can be localized.

The width of each column in this example is set to an absolute value of 80 pixels. Table view columns can also be assigned a relative width, but they do not support the automatic widths supported by the TablePane component.

The "value" and "change" columns define several additional attributes related to cell renderers. By default, table cells are drawn using a renderer that presents the cell's contents as a text string. Custom cell renderers can be used to present cell data formatted as a number, date, or otherwise. The Stock Tracker demo uses the built-in number cell renderer to format the value column and a custom renderer to display the values in the change column using either red or green text depending on the change direction. A complete discussion of cell renderers is outside the scope of this tutorial, but the source code for the custom renderer can be viewed here.

TableViewHeader

Pivot's TableView component does not include built-in header support; rather, support for column headings and resizing is provided by the TableViewHeader component. This is because TableView (and other similar components including ListView and TreeView) do not include built-in support for scrolling. Scrolling is provided by the ScrollPane class, which is discussed in the next section.


Stock Tracker table view and table view header

The following markup is used to declare the table view header component for the Stock Tracker demo:

<TableViewHeader tableViewID="stocksTableView"/>

That's it! The header automatically associates itself with the table view identified by the tableViewID attribute - no additional markup or coding is necessary.

Though it is not shown in the Stock Tracker demo, TableViewHeader can also be used to provide support for column sorting. An example of this is shown in the "kitchen sink" demo application.

ScrollPane and Border

Pivot components do not manage scrolling internally - all scrolling in Pivot is handled by the ScrollPane class (more specifically, by an instance of the Viewport class, but the distinction is not relevant to this discussion). A scroll pane provides a windowed view onto another component and allows a user to select which part of the component is shown by dragging a horizontal or vertical scroll bar.

The component being scrolled is called the "view", and is specified as a child of the ScrollPane's <view> element. ScrollPane also provides support for fixed row and column headers that scroll with the view but always remain visible. These are defined using ScrollPane's <rowHeader> and <columnHeader> sub-elements. A TableViewHeader is often used as a column header for a TableView instance, but a row or column header can be an instance of any type of component - for example, an application developer might create a "ruler" component to use as a header in a drawing program to help a designer visualize the scale of a large scrollable image.

AttachmentSize
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.)

Comments

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.

https://pivot.dev.java.net/servlets/ProjectForumView

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.