path: root/files/ja/archive/mozilla/xul/tree_widget_changes/index.html

---
title: ツリーウィジェット関連の変更点
slug: Archive/Mozilla/XUL/Tree_Widget_Changes
tags:
  - XUL
translation_of: Archive/Mozilla/XUL/Tree_Widget_Changes
---
<p>このページは、Gecko 1.8 (Firefox/Thunderbird 1.5) における XUL のツリー関連 API の変更点について説明します。</p>
<p><a href="ja/XUL">XUL</a> のツリー関連で、タグの構文については変更ありませんが、 ツリーが処理を行う際に <code>treecol</code> 要素を取得できるように <code>treecol</code> 要素に <code>id</code> を設定しておく必要はなくなりました。</p>
<p>列 (<span style="color: green;">column</span>) の識別は、id から今バージョンで追加されたカラムオブジェクトを使用するように変更されています。 このオブジェクトは、<code><a href="ja/NsITreeColumn">nsITreeColumn</a></code> インターフェイスを実装し、ツリーの列 1 つ分の情報を保持しています。 したがって、ツリーでは、このオブジェクトを各列 (各 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素) ごとに 1 つ持つことになります。 また、複数の列を <code><a href="ja/NsITreeColumns">nsITreeColumns</a></code> インターフェイスを実装したリストにグループ化することも可能です。 <code><a href="ja/NsITreeColumn">nsITreeColumn</a></code> と <code><a href="ja/NsITreeColumns">nsITreeColumns</a></code> インターフェイスの定義 (IDL) は、両方とも<a class="external" href="http://lxr.mozilla.org/seamonkey/source/layout/xul/base/src/tree/public/nsITreeColumns.idl">こちら</a>から参照できます。</p>
<p>この <code><code><a href="/ja/docs/Mozilla/Tech/XUL/column" title="column">column</a></code></code> オブジェクトは自動的に生成されるため、なにか追加のコードを書く必要があるわけではありません。 <code><a href="ja/NsITreeColumns">nsITreeColumns</a></code> インターフェイスを実装している <code><code><a href="/ja/docs/Mozilla/Tech/XUL/columns" title="columns">columns</a></code></code> オブジェクトは、<code><code><a href="/ja/docs/Mozilla/Tech/XUL/tree" title="tree">tree</a></code></code> の <code><code><span><a href="https://developer.mozilla.org/ja/docs/XUL/Property/columns">columns</a></span></code></code> プロパティを使用して取得することが可能です。 そして、そこから特定の列や、現在の列のソート順、そして列の位置や大きさの情報を取得することが可能です。 これらのオブジェクトのほとんどの部分は、<span style="border-bottom: 1px dashed green;" title="readonly">参照のみ可能</span>になっていますが、 列の設定を変更する場合には、単に直接 <code><code><a href="/ja/docs/Mozilla/Tech/XUL/treecol" title="treecol">treecol</a></code></code> 要素の属性を変更することで可能です。</p>
<p><code>tree</code> と <code>view</code> のメソッドについて、引数で列を指定する必要がある場合、id で指定するのではなく、<code><a href="ja/NsITreeColumns">nsITreeColumns</a></code> を使用するようになりました。 例えば、<code><a class="external" href="http://www.xulplanet.com/references/objref/XULTreeBuilder.html#method_getCellValue">getCellValue</a></code> では、<code>row</code> のインデックスと、<code><a href="ja/NsITreeColumn">nsITreeColumn</a></code> を引数に取ることになります。なお、以前のものでは、ここには行のインデックスと、列の id を渡していました。</p>
<p><a href="ja/JavaScript">JavaScript</a> で列 (<span style="color: green;">column</span>) を取得する場合は、以下のようにします。</p>
<pre class="eval"> tree.columns.getColumnFor(treeColElement);
 tree.columns.getNamedColumn(treeColID);
 tree.columns.getColumnAt(index);
</pre>
<p>または、単純に配列用の構文を利用して、以下のようにしても取得可能です。</p>
<pre class="eval"> tree.columns["lastName"];
 tree.columns[5];
</pre>
<p>列を取得した後は、そこから以下のように、いくつかのプロパティを取得できます。</p>
<ul>
  <li><code>column.index</code> - その列の表示順を示す <code>index</code></li>
  <li><code>column.id</code> - その列の <code>id</code> 属性の値</li>
  <li><code>column.element</code> - 対応する <code>treecol</code> 要素</li>
  <li><code>column.x</code> - 列の左辺の X 座標のツリーの中での相対位置</li>
  <li><code>column.width</code> - 列の幅</li>
</ul>
<p>また、C++ のコードでは、<code><a href="ja/NsITreeColumn">nsITreeColumn</a></code> から <code>atom</code> 属性が取得できて、 それによって戻される <code><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsIAtom.html">nsIAtom</a></code> は、列を手早く比較するために利用できます。</p>
<pre class="eval"> nsCOMPtr&lt;nsIAtom&gt; atom;
 aCol-&gt;GetAtom(getter_AddRefs(atom));
 if (atom = kMyCol) ...
</pre>
<p>今回加えられた機能の 1 つに、<code>restoreNaturalOrder</code> があり、これは列を利用者が移動させる前の、元の並び順に<span style="border-bottom: 1px dashed green;" title="restore">復元</span>するために使用できます。</p>
<pre class="eval">tree.columns.restoreNaturalOrder()
</pre>
<p>また、列見出しの右端にある<span style="border-bottom: 1px dashed green;" title="picker">ピッカー</span>による操作も、利用者が列を元の順番に復元するために利用可能です。 これは、<code>enableColumnDrag="false"</code> によって、列の順番変更が無効になっている場合は、隠されることになります。</p>
<h3 id=".E4.BB.95.E6.A7.98.E3.81.8C.E5.A4.89.E6.9B.B4.E3.81.95.E3.82.8C.E3.81.9F.E7.AE.87.E6.89.80" name=".E4.BB.95.E6.A7.98.E3.81.8C.E5.A4.89.E6.9B.B4.E3.81.95.E3.82.8C.E3.81.9F.E7.AE.87.E6.89.80">仕様が変更された箇所</h3>
<p>これからは、ツリーの選択 (<span style="color: green;">selection</span>) オブジェクトは、ボックスではなくビューから取得する必要があります。 具体的には、<code>tree.treeBoxObject.selection</code> の代わりに、 <code>tree.view.selection</code> を使用するようにしてください。</p>
<p>列 (<span style="color: green;">column</span>) の <code>id</code> を取得するためには、(列 1 の id を取得する場合) <code>tree.treeBoxObject.getColumnID(1)</code> の代わりに 、<code>tree.columns[1].id</code> を使用するようにしてください。</p>
<p><code>tree.treeBoxObject.getKeyColumnIndex()</code> の代わりに、 <code>tree.columns.getKeyColumn().index</code> を使用するようにしてください。</p>
<p><code><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsITreeBoxObject.html#method_getPageCount">getPageCount</a></code> 関数は、名前から用途が明確に分かるようにするために、名称が変更されました。 この関数は、そのツリーでは何行表示できるかを返します。 このため、ツリーに <code>rows</code> 属性が設定されている場合は、その設定値が関係することになります。</p>
<p><code>tree.treeBoxObject.getPageCount()</code> は、 <code>tree.treeBoxObject.getPageLength()</code> に変更されました。</p>
<p><code>invalidatePrimaryCell(row)</code> は、削除されたため、 代わりに、<code><a class="external" href="http://www.xulplanet.com/references/xpcomref/ifaces/nsITreeBoxObject.html#method_invalidateCell">invalidateCell(row, tree.columns.getPrimaryColumn())</a></code> を使用してください。 このメソッドは、セルまたは、セルのデータが変更された後に<span style="border-bottom: 1px dashed green;" title="redraw">再描画</span>を行わせるために利用できます。</p>
<p><code>cycleHeader(colID, element)</code> は、単に <code><a class="external" href="http://www.xulplanet.com/references/objref/TreeContentView.html#method_cycleHeader">cycleHeader(column)</a></code> で呼び出すようになりました。</p>
<p>以下の定数は変更になっていて、対応する整数値も異なっています。</p>
<pre class="eval">nsITreeView.inDropBefore          -&gt; nsITreeView.DROP_BEFORE      (-1)
nsITreeView.inDropOn              -&gt; nsITreeView.DROP_ON          (0)
nsITreeView.inDropAfter           -&gt; nsITreeView.DROP_AFTER       (1)
nsITreeView.progressNormal        -&gt; nsITreeView.PROGRESS_NORMAL  (1)
nsITreeView.progressUndetermined  -&gt; nsITreeView.PROGRESS_UNDETERMINED  (2)
nsITreeView.progressNode          -&gt; nsITreeView.PROGRESS_NONE    (3)
</pre>
<p>加えて、ドラッグ &amp; ドロップのメソッドである <code>canDropOn</code> と <code>canDropBeforeAfter</code> は、両方を処理する単一のメソッド <code>canDrop(idx,orientation)</code> に置き換えられました。 このメソッドは、行にドロップすることが可能である場合は、<code>true</code> を返す必要があります。</p>
<h3 id=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.88.97" name=".E3.83.81.E3.82.A7.E3.83.83.E3.82.AF.E3.83.9C.E3.83.83.E3.82.AF.E3.82.B9.E5.88.97">チェックボックス列</h3>
<p>ツリーの列に、<code>checkbox</code> 型が実装されました。 以前から、値だけは存在していましたが、実装はされていませんでした。 このバージョンからは、実際に利用可能になっています。 チェックボックス列を生成するためには、列の <code>type</code> 属性に、値として <code>checkbox</code> を設定します。</p>
<pre class="eval">&lt;treecol type="checkbox"&gt;
</pre>
<p>その列の特定のセルに対する、チェックボックスの設定と解除は、<code>value</code> 属性の値を <code>true</code> に設定するか、属性を取り除くことで可能です。 <code>label</code> 属性ではなく、<code>value</code> 属性を使用することに注意してください。</p>
<pre class="eval">&lt;treecell/&gt;
&lt;treecell value="true"/&gt;
</pre>
<p>また、表示するためには、CSS によってチェックボックスの画像を指定する必要があります。</p>
<pre class="eval">treechildren::-moz-tree-checkbox(checked)
{
    /* css for checked cells */
    list-style-image: url("<a class="external">chrome://global/skin/checkbox/cbox-check.gif</a>");
}
</pre>
<p>さらに、チェックマークの列は、利用者による編集をサポートします。</p>
<pre class="eval">&lt;tree editable="true"&gt;
  &lt;treecols&gt;
    &lt;treecol type="checkbox" editable="true"&gt;
    ...
&lt;/tree&gt;
</pre>
<p>その列が編集可能 (<span style="color: green;">editable</span>) である場合、利用者はセルをクリックすることで、チェックボックスの状態を変更することが可能です。 利用者がセルをクリックした場合、<code>setCellValue</code> メソッドが、値 <code>true</code> または <code>false</code> で呼び出されることになります。</p>
<p>加えて、この動作のためには、上記の例で行っているように、<code>tree</code> にも <code>editable</code> 属性を設定して、編集可能マークを付けておく必要がありますので注意してください。 また、特定の行やセルについては編集可能にはしたくない場合も、しばしばあると思います。 この場合は、以下で示すように、セルの <code>editable</code> を <code>false</code> に設定することで、編集操作を無効にできます。</p>
<pre class="eval">&lt;treecell value="true" editable="false"/&gt;
</pre>
<p>また、カスタムビューの場合には、<code>isEditable</code> メソッドで <code>false</code> を戻すようにします。</p>
<p>このバージョンでは、編集操作をサポートするのはチェックボックスだけですが、 コンテントベースのツリーでは、それ以外の型のセルについても <code><a class="external" href="http://www.xulplanet.com/references/objref/TreeContentView.html#method_setCellValue">setCellValue</a></code> と <code><a class="external" href="http://www.xulplanet.com/references/objref/TreeContentView.html#method_setCellText">setCellText</a></code> 関数によって、スクリプトからツリーの内容を変更可能です。 以下に例を示します。</p>
<pre class="eval">var col = tree.columns.getPrimaryColumn();
treecell.setCellText(5,col,"Banana");
</pre>
<p>これによって、行 5 の primary 設定がされている列のセルのラベルは <i>Banana</i> に変更されます。 なお、この方法はツリーを編集するためのより一般的な機能として、今後も<span style="border-bottom: 1px dashed green;" title="pave the way">堅持されます</span>。</p>
<h3 id=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.81.AE.E6.94.B9.E8.89.AF" name=".E3.82.B9.E3.82.BF.E3.82.A4.E3.83.AB.E3.81.AE.E6.94.B9.E8.89.AF">スタイルの改良</h3>
<p>このバージョンから、<a href="ja/CSS">CSS</a> の <code>cursor</code> プロパティを使用することで、セルにカーソルを使用することを指定できるようになりました。</p>
<pre class="eval">treechildren::-moz-tree-cell-text {
cursor: pointer;
}
</pre>
<p>これにより、セル単位に独立したカーソルを作成することが可能です。</p>
<p>疑似スタイル <code>::<a href="ja/-moz-tree-separator">-moz-tree-separator</a></code> は、ボックス型に<span style="border-bottom: 1px dashed green;" title="proper">準拠</span>したものに改良され、付加的なスタイルが設定可能になりました。 以下に例を示します。</p>
<pre class="eval">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;
}
</pre>
<div class="originaldocinfo">
  <h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
  <ul>
    <li>Author: Neil Deakin</li>
    <li>Source: <a class="external" href="http://mozdev.org/pipermail/project_owners/2004-April/002131.html">here</a></li>
  </ul>
</div>