Pivot: A Practical Example, Part 1 - UI Markup Using WTKX
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"
<Column name="symbol" headerData="'%symbol'" width="80"/>
<Column name="value" headerData="'%value'" width="80"
<Column name="change" headerData="'%change'" width="80"
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.
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.
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:
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.
(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)