TableViewのデータ構造
ここではTableViewを表示するために、かなりたくさんのタグが複雑に組み合わせられています。全体を整理すると、大体こういう形で記述されています。
<ScrollPane>
<view>
<TableView>……略……</TableView>
</view>
</ScrollPane>
TableViewは、<TableView>というタグとして記述しますが、テーブルの表示というのは、データの量が多くなると表示し切れなくなるため、ただ表示するだけでなく、データの量に応じてスクロール表示できるようにしておくのが基本です。このスクロール表示を行うためのペインが、<ScrollPane>というものです。まず、このScrollViewを用意し、そのviewプロパティにTableViewを組み込む……という形で記述をします。
では、<TableView>の内部はどのようになっているでしょうか。これも少々複雑です。ざっと整理すると次のようになるでしょう。
<TableView>
<columns>
<TableView.Column />
<TableView.Column />
……必要なだけ用意……
</columns>
</TableView>
<TableView>
<TableView>タグには、「tableData」という属性が用意されています。これが、テーブルに表示するデータを指定するものです。ここでは、"@jsondata.json"という値が設定されています。このように、"@ファイル名"と指定することで、そのデータが読み込まれるようになります。
<columns>
<TableView>には、<columns>というタグが用意されています。これは、列データをまとめて管理するプロパティで、ここに列のデータを整理していきます。列データは、<TableView.Column>というタグとして用意されます。
テーブルは、列の集合として管理されています。ですから、<columns>への列データの登録を忘れると、たとえJSONデータにデータそのものは用意されていたとしても、画面には表示されないので注意してください。
<columnHeader>
また、テーブルの一番上にはヘッダーが表示されていましたが、これは自動で表示されるわけではなく、<columnHeader>タグを使って用意しておきます。これは、その中に<TableViewHeader>タグを挟み込んだ形をしています。
<columnHeader>
<TableViewHeader />
</columnHeader>
このような形です。注意すべきは、これが<TableView>の内部ではなく、外側におかれている、という点でしょう。また、内部の<TableViewHeader>タグには、tableView="$table1"というようにして、tableView属性に、<TableView>のIDを指定します。こうすることで、このテーブルのヘッダーが表示されるようになります。
TableViewSortListenersによるソート・イベント処理
この他、ここでは<tableViewSortListeners>というタグも用意されています。これは、TableViewでヘッダーをクリックしソート順を変更したときに発生するイベントを処理する「TableViewSortListener」を設定するものです。これは、その中に<wtkx:script>タグを使い、JavaScriptのスクリプトを記述します。
TableViewSortListenerインターフェイスには、「sortChanged」というメソッドが用意されています。これは引数にイベントが発生したTableViewインスタンスが渡されます。<wtkx:script>タグでは、このメソッドをそのままJavaScriptの関数に置き換えたものを記述します。
function sortChanged(view) {
var tableData = view.getTableData();
tableData.setComparator(new org.apache.pivot.wtk.content.TableViewRowComparator(view));
}
ここでは、引数に渡されたTableViewの「getTableData」というメソッドを呼び出しています。これはtableDataプロパティの値を得るもので、これによりテーブルに表示されているデータのオブジェクトが取得できます。データはListになっており、これにsetComparatorでコンパレーターを設定することで、並べ替えに対応するようになっています。
コンパレーターは、org.apache.pivot.wtk.contentパッケージの「TableViewRowComparator」というものを使います。これは、PivotのTableView専用のコンパレーターです。引数にTableViewを渡してインスタンスを作成し、これをそのままsetComparatorすればいいわけです。
設定してしまうと、テーブルのヘッダーをクリックして並べかえの変更イベントが発生すると、TableViewRowComparatorによって自動的に並べかえの方式が変更され、データの並び順が変わります。
