The previous example showed a basic table view that was populated by string-based hash map data and did not support sorting on the Olympic medal count data. This example populates the same table view with JSON values, which represent the medal counts as numbers, rather than strings:
The BXML source is as follows:
<Window title="Table Views" maximized="true"
xmlns:bxml="http://pivot.apache.org/bxml"
xmlns="org.apache.pivot.wtk">
<Border>
<ScrollPane horizontalScrollBarPolicy="fill_to_capacity">
<TableView bxml:id="tableView" styles="{includeTrailingVerticalGridLine:true}">
<columns>
<TableView.Column name="nation" width="180" headerData="Nation"/>
<TableView.Column name="gold" width="60" headerData="Gold"/>
<TableView.Column name="silver" width="60" headerData="Silver"/>
<TableView.Column name="bronze" width="60" headerData="Bronze"/>
<TableView.Column name="total" width="60" headerData="Total"/>
</columns>
<tableViewSortListeners>
function sortChanged(tableView) {
var tableData = tableView.getTableData();
tableData.setComparator(new org.apache.pivot.wtk.content.TableViewRowComparator(tableView));
}
</tableViewSortListeners>
<tableData>
<bxml:include src="standings.json"/>
</tableData>
</TableView>
<columnHeader>
<TableViewHeader tableView="$tableView" sortMode="single_column"
styles="{includeTrailingVerticalGridLine:true}"/>
</columnHeader>
</ScrollPane>
</Border>
</Window>
It is very similar to the previous example, with the following exceptions:
-
The ScrollPane is given a horizontalScrollBarPolicy value of "fill_to_capacity". This tells the scroll pane to expand the width of its contents to fit the available horizontal space when necessary, but not constrain the content width to that space when the content wants to be larger. This is what allows the table view to display a "filler" column when its total column width is less than the current viewport width in the scroll pane.
-
It populates the table with data from the "standings.json" file. The contents of this file are shown below.
-
It defines a listener that responds to table view sorts. Table views do not implement sorting internally. This is the responsibility of the application, since the application may want to delegate sorting to another process, such as a JDBC query executed as a background task. When a user presses a column header, the TableViewHeader skin responds by modifying the table view's "sort dictionary", which maps column names to sort directions (ascending, descending, or neither). TableView fires a "sortChanged" event in response to a sort dictionary change, to which the listener responds by setting a comparator on the table data:
<tableViewSortListeners> function sortChanged(tableView) { var tableData = tableView.getTableData(); tableData.setComparator(new org.apache.pivot.wtk.content.TableViewRowComparator(tableView)); } </tableViewSortListeners>In this case, the listener assigns an instance of TableViewRowComparator to the table data. This class is capable of sorting many types of table data given the sort dictionary of the TableView passed to its constructor.
The contents of "standings.json" are as follows. Medal counts are represented as actual numeric data rather than strings, allowing TableViewRowComparator to sort them properly:
// Source: http://en.wikipedia.org/wiki/2008_Summer_Olympics_medal_table
[ {nation:"China", gold:51, silver:21, bronze:28, total:100},
{nation:"United States", gold:36, silver:38, bronze:36, total:110},
{nation:"Russia", gold:23, silver:21, bronze:28, total:72},
{nation:"Great Britain", gold:19, silver:13, bronze:15, total:47},
{nation:"Germany", gold:16, silver:10, bronze:15, total:41},
{nation:"Australia", gold:14, silver:15, bronze:17, total:46},
{nation:"South Korea", gold:13, silver:10, bronze:8, total:31},
{nation:"Japan", gold:9, silver:6, bronze:11, total:26},
{nation:"Italy", gold:8, silver:10, bronze:10, total:28},
{nation:"France", gold:7, silver:16, bronze:17, total:40}
]
There is no associated Java source code for this example.
Next: Custom TableView