ツリーウィジェット関連の変更点

このページは、Gecko 1.8 (Firefox/Thunderbird 1.5) における XUL のツリー関連 API の変更点について説明します。

XUL のツリー関連で、タグの構文については変更ありませんが、 ツリーが処理を行う際に treecol 要素を取得できるように treecol 要素に id を設定しておく必要はなくなりました。

列 (column) の識別は、id から今バージョンで追加されたカラムオブジェクトを使用するように変更されています。 このオブジェクトは、nsITreeColumn インターフェイスを実装し、ツリーの列 1 つ分の情報を保持しています。 したがって、ツリーでは、このオブジェクトを各列 (各 treecol 要素) ごとに 1 つ持つことになります。 また、複数の列を nsITreeColumns インターフェイスを実装したリストにグループ化することも可能です。 nsITreeColumn と nsITreeColumns インターフェイスの定義 (IDL) は、両方ともこちらから参照できます。

この column オブジェクトは自動的に生成されるため、なにか追加のコードを書く必要があるわけではありません。 nsITreeColumns インターフェイスを実装している columns オブジェクトは、tree の columns プロパティを使用して取得することが可能です。 そして、そこから特定の列や、現在の列のソート順、そして列の位置や大きさの情報を取得することが可能です。 これらのオブジェクトのほとんどの部分は、参照のみ可能になっていますが、 列の設定を変更する場合には、単に直接 treecol 要素の属性を変更することで可能です。

tree と view のメソッドについて、引数で列を指定する必要がある場合、id で指定するのではなく、nsITreeColumns を使用するようになりました。 例えば、getCellValue では、row のインデックスと、nsITreeColumn を引数に取ることになります。なお、以前のものでは、ここには行のインデックスと、列の id を渡していました。

JavaScript で列 (column) を取得する場合は、以下のようにします。

 tree.columns.getColumnFor(treeColElement);
 tree.columns.getNamedColumn(treeColID);
 tree.columns.getColumnAt(index);

または、単純に配列用の構文を利用して、以下のようにしても取得可能です。

 tree.columns["lastName"];
 tree.columns[5];

列を取得した後は、そこから以下のように、いくつかのプロパティを取得できます。

• column.index - その列の表示順を示す index
• column.id - その列の id 属性の値
• column.element - 対応する treecol 要素
• column.x - 列の左辺の X 座標のツリーの中での相対位置
• column.width - 列の幅

また、C++ のコードでは、nsITreeColumn から atom 属性が取得できて、 それによって戻される nsIAtom は、列を手早く比較するために利用できます。

 nsCOMPtr<nsIAtom> atom;
 aCol->GetAtom(getter_AddRefs(atom));
 if (atom = kMyCol) ...

今回加えられた機能の 1 つに、restoreNaturalOrder があり、これは列を利用者が移動させる前の、元の並び順に復元するために使用できます。

tree.columns.restoreNaturalOrder()

また、列見出しの右端にあるピッカーによる操作も、利用者が列を元の順番に復元するために利用可能です。 これは、enableColumnDrag="false" によって、列の順番変更が無効になっている場合は、隠されることになります。

仕様が変更された箇所

これからは、ツリーの選択 (selection) オブジェクトは、ボックスではなくビューから取得する必要があります。 具体的には、tree.treeBoxObject.selection の代わりに、 tree.view.selection を使用するようにしてください。

列 (column) の id を取得するためには、(列 1 の id を取得する場合) tree.treeBoxObject.getColumnID(1) の代わりに 、tree.columns[1].id を使用するようにしてください。

tree.treeBoxObject.getKeyColumnIndex() の代わりに、 tree.columns.getKeyColumn().index を使用するようにしてください。

getPageCount 関数は、名前から用途が明確に分かるようにするために、名称が変更されました。 この関数は、そのツリーでは何行表示できるかを返します。 このため、ツリーに rows 属性が設定されている場合は、その設定値が関係することになります。

tree.treeBoxObject.getPageCount() は、 tree.treeBoxObject.getPageLength() に変更されました。

invalidatePrimaryCell(row) は、削除されたため、 代わりに、invalidateCell(row, tree.columns.getPrimaryColumn()) を使用してください。 このメソッドは、セルまたは、セルのデータが変更された後に再描画を行わせるために利用できます。

cycleHeader(colID, element) は、単に cycleHeader(column) で呼び出すようになりました。

以下の定数は変更になっていて、対応する整数値も異なっています。

nsITreeView.inDropBefore          -> nsITreeView.DROP_BEFORE      (-1)
nsITreeView.inDropOn              -> nsITreeView.DROP_ON          (0)
nsITreeView.inDropAfter           -> nsITreeView.DROP_AFTER       (1)
nsITreeView.progressNormal        -> nsITreeView.PROGRESS_NORMAL  (1)
nsITreeView.progressUndetermined  -> nsITreeView.PROGRESS_UNDETERMINED  (2)
nsITreeView.progressNode          -> nsITreeView.PROGRESS_NONE    (3)

加えて、ドラッグ & ドロップのメソッドである canDropOn と canDropBeforeAfter は、両方を処理する単一のメソッド canDrop(idx,orientation) に置き換えられました。 このメソッドは、行にドロップすることが可能である場合は、true を返す必要があります。

チェックボックス列

ツリーの列に、checkbox 型が実装されました。 以前から、値だけは存在していましたが、実装はされていませんでした。 このバージョンからは、実際に利用可能になっています。 チェックボックス列を生成するためには、列の type 属性に、値として checkbox を設定します。

<treecol type="checkbox">

その列の特定のセルに対する、チェックボックスの設定と解除は、value 属性の値を true に設定するか、属性を取り除くことで可能です。 label 属性ではなく、value 属性を使用することに注意してください。

<treecell/>
<treecell value="true"/>

また、表示するためには、CSS によってチェックボックスの画像を指定する必要があります。

treechildren::-moz-tree-checkbox(checked)
{
    /* css for checked cells */
    list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
}

さらに、チェックマークの列は、利用者による編集をサポートします。

<tree editable="true">
  <treecols>
    <treecol type="checkbox" editable="true">
    ...
</tree>

その列が編集可能 (editable) である場合、利用者はセルをクリックすることで、チェックボックスの状態を変更することが可能です。 利用者がセルをクリックした場合、setCellValue メソッドが、値 true または false で呼び出されることになります。

加えて、この動作のためには、上記の例で行っているように、tree にも editable 属性を設定して、編集可能マークを付けておく必要がありますので注意してください。 また、特定の行やセルについては編集可能にはしたくない場合も、しばしばあると思います。 この場合は、以下で示すように、セルの editable を false に設定することで、編集操作を無効にできます。

<treecell value="true" editable="false"/>

また、カスタムビューの場合には、isEditable メソッドで false を戻すようにします。

このバージョンでは、編集操作をサポートするのはチェックボックスだけですが、 コンテントベースのツリーでは、それ以外の型のセルについても setCellValue と setCellText 関数によって、スクリプトからツリーの内容を変更可能です。 以下に例を示します。

var col = tree.columns.getPrimaryColumn();
treecell.setCellText(5,col,"Banana");

これによって、行 5 の primary 設定がされている列のセルのラベルは Banana に変更されます。 なお、この方法はツリーを編集するためのより一般的な機能として、今後も堅持されます。

スタイルの改良

このバージョンから、CSS の cursor プロパティを使用することで、セルにカーソルを使用することを指定できるようになりました。

treechildren::-moz-tree-cell-text {
cursor: pointer;
}

これにより、セル単位に独立したカーソルを作成することが可能です。

疑似スタイル ::-moz-tree-separator は、ボックス型に準拠したものに改良され、付加的なスタイルが設定可能になりました。 以下に例を示します。

treechildren::-moz-tree-separator {
margin-top: 1px;
border-top: 1px solid ThreeDShadow;
border-right: 1px solid ThreeDHighlight;
border-bottom: 1px solid ThreeDHighlight;
border-left: 1px solid ThreeDShadow;
height: 2px;
}