Tree Widget Changes/Treeウィジェットの変更

Googleの糞HTMLは勝手に直してある/直す豫定。今現在ではHTMLもどきだ。内容の正確さは保証しない。

From:Neil Deakin (ndeakin@sympatico.ca)
Subject:Tree Widget Changes

View: Complete Thread (14 件)Original Format

Newsgroups:netscape.public.mozilla.xpfe,netscape.public.mozilla.documentation

Date:2004-04-26 08:26:09 PST

Based on information from Jan Varga, who implemented the changes, here is some information about the changes made recently to the XUL tree widget code as part of bug 221619, which fixes a number of issues with trees. This code was checked in on April 16 and is it builds after that, but not 1.7

変更を実装したJan Vargaからの情報に基づき、bug-org 221619の一部としてXULのtree要素のコードに最近なされた、treeに関するたくさんの問題を修正した変更に関する情報を載せてあります。こ のコードは4月16日にチェックされ、その後(？？？？)、しかし1.7では反映されていません？

There are no changes to XUL tree tags, however the id attribute is no longer required on treecol elements just to get them to work. That means that the ids can be left out, although it's probably a good idea to use them anyway.

XULのTreeタグには変更はありませんが、ただ動かすためならばtreecol要素にidアトリビュートは必須では無くなりました。これはid は不用になったということですが、使う分にはidを入れるのも悪くは無いでしょう。（意訳？）

Instead of identifying columns by id, a new column object is used. This object implements the nsITreeColumn interface and holds information about a single column in the tree. A tree will have one of these objects for each column (each treecol element) in the tree. The columns are grouped into a list which implements the nsITreeColumns interface. Both the nsITreeColumn and nsITreeColumns interfaces can be found at http://lxr.mozilla.org/seamonkey/source/layout/xul/base/src/tree/public/nsITreeColumns.idl

column(列)をidで特定するかわりに、新しいcolumnオブジェクトが使われます。このオブジェクトはnsITreeColumnイン ターフェースを実装しており、tree内の一つの列の情報を保持しています。treeは各列(各treecol要素)に付き一つのこれらのオブジェクトを 持ちます。列はnsITreeColumnsインターフェースを実装するリストの中にまとめられます。nsITreeColumn と nsITreeColumnsインターフェースのidlはhttp://lxr.mozilla.org/seamonkey/source/layout/xul/base/src/tree/public/nsITreeColumns.idlで 見ることができます。

The column objects are created automatically, so you don't have to write any extra code. You can get the columns object which implements the nsITreeColumns interface for a tree using the tree's columns property. From there you can get specific columns, the current sort column, and position and size info about the columns. For the most part these objects are readonly; you can modify the columns by just adjusting the treecol attributes directly.

列オブジェクトは自動的に生成されますので、餘計なコードを書く必要はありません。あなたはtreeのcolumnsプロパティを使うことにより、 tree の、nsITreeColumnsインターフェースを実装しているcolumnsオブジェクトを得ることができます。このオブジェクトからあなたは特定の 列や、現在のソート列や列の位置とサイズの情報を得ることができます。ほとんどの部分においてこれらのオブジェクトは読取専用です。treecolのアト リビュートを直接変更することによってのみあなたは列を変更することができます。（自信無し）

The tree and view methods no longer take ids as arguments when columns are used. Instead, they use nsITreeColumns. For example, getCellValue takes a row index and a nsITreeColumn as arguments, whereas before it took a row index and a column id.

treeとviewのメソッドはcolumnsが使われるときに引数としてidを使わなくなりました。かわりに、nsITreeColumnsを使 います。例えば、getCellValueは行(row)のindexとnsITreeColumnを引数に持ちます。（昔は、行のindexと列のid を必要としていました。）

以下はJavaScriptでcolumnを得るサンプルです。

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

You can also just use array syntax to get a column:

配列を使うこともできます。

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

Once you have a column, you can get various properties of it:

列を取得したら、あなたはいろんなプロパティを得ることができます。

In C++ code, you can also get the atom attribute of nsITreeColumn which returns an nsIAtom for the column, making it fast to do comparisons.

C++のコードでは、（略）

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

One feature that has been added is restoreNaturalOrder which may be used to restore the original order of the columns before the user moved them around.

追加された機能の一つは、restoreNaturalOrderです。これはユーザーがあちこちに列を動かす前にオリジナルの並び順を復元するた めに使われるかもしれません。

tree.columns.restoreNaturalOrder()

There is also a command on the end of the tree's column picker which the user may use to restore the original column order. This will be hidden if the column redordering is disabled using enableColumnDrag="false".

SOME SPECIFIC CHANGES/いくつかの仕様変更

You should now get the tree selection object from the view, not the box object, meaning use tree.view.selection instead of tree.treeBoxObject.selection

あなたはtree selectionオブジェクトをボックスオブジェクトではなくviewから取得するべきです。要するに、tree.treeBoxObject.selection の代わりにtree.view.selectionを使おう、ということです。

Use tree.columns[1].id instead of tree.treeBoxObject.getColumnID(1) to get the id of a column, in this case column 1.

列のID得るためには、tree.columns[1].idをtree.treeBoxObject.getColumnID(1)の代わりに 使ってください。この例では一列目の場合ですね。

Use tree.columns.getKeyColumn().index instead of tree.treeBoxObject.getKeyColumnIndex().

tree.treeBoxObject.getKeyColumnIndex()の代わりにはtree.columns.getKeyColumn().indexを使ってください。

The getPageCount function has been renamed to make it clearer what it does. It returns the number of rows that can be displayed in the tree. This should correspond to the rows attribute on the tree if it was specified. tree.treeBoxObject.getPageCount() is now tree.treeBoxObject.getPageLength()

getPageCount関数はそれが何をする関数なのか明確にするために名前が変更されました。これはtreeの中に表示できる列の数を返しま す。もしこれが特定されたならば、これはtreeのrowsアトリビュートと一致すべきです。tree.treeBoxObject.getPageCount ()は現在ではtree.treeBoxObject.getPageLength()となっています。

The invalidatePrimaryCell(row) method has been removed, instead use invalidateCell(row, tree.columns.getPrimaryColumn()). This may be used to redraw a cell after it or its data has been changed.

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

（訳者：餘談だが、StedSidebarがまともに動作しなくなったのは↑この変更のせいである。）

cycleHeader(colID, element) is now just cycleHeader(column), since the code can get the element from the column object.

要素は列オブジェクトから取得できるようになりましたので、cycleHeader(colID, element)は現在ではただのcycleHeader (column)になりました。

The constants below have been changed, and their integer values are different:

下記の定数は変更され、値も変わっています。

As well, the drag and drop methods 'canDropOn' and 'canDropBeforeAfter' have been replaced with a single method 'canDrop(idx,orientation)' which handles both. It should return true if a drop is allowed on a row.

同様に、ドラッグアンドドロップメソッドの'canDropOn' と 'canDropBeforeAfter'も'canDrop(idx,orientation) 'という両方を扱う一つのメソッドに置きかえられました。これは行へのドラッグアンドドロップができるならtrueを返すべきです。

CHECKBOX COLUMNS/チェックボックス列

Tree columns now implement the 'checkbox' type. Previously the value existed but was not implemented. Now it is. You can create a checkbox column by setting the 'type' attribute of a column to 'checkbox'.

treeの列はcheckbox型を実装しました。以前は値は存在していたのですが、実装はされていませんでした。今は実装されています。あなたは チェックボックス列をtypeアトリビュートをセットすることにより作ることができます。

<treecol type="checkbox">

You can then set or clear the checkbox for a particular cell in that column by setting the value attribute to true, or leaving out the attribute. Note that it's the value attribute you use, not the label attribute.

そうしたら、あなたはvalueアトリビュートをtrueにしたり、省くことによって、チェックボックス列にある特定のセルのチェックボックスを チェックしたり、クリアしたりすることができます。使うのはlabelアトリビュートではなくvalueアトリビュートであることに留意してください。

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

For theme authors, the -moz-tree-checkbox pseudo can be used to specify the checkmark image.

テーマ作者はチェックマーク画像を指定するために-moz-tree-checkbox疑似クラス(要素?)を使うことができます。

In addition, checkmark columns support editing:

それから、チェックマーク列は編集をサポートしています。

If the column is editable, the user can click the cell to change the state of the checkbox. When the user clicks the cell, the view's setCellValue method will be called with either the value 'true' or 'false'.

もし列が編集可であったら、ユーザはチェックボックスの状態を変更するためにセルをクリックすることができます。ユーザがセルをクリックすると、viewのtrueかfalseの値と共にsetCellValueメソッドが呼び出されるでしょう。

Note that the tree must also be marked as editable using the editable attribute in order for this to work. This is shown in the example above. Sometimes, you might have a particular row or cell which you do not want to be editable. In this case, disable editing for that cell by setting editable to false for that cell, as in the following:

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

Or, for custom views, return false from the isEditable method.

または、CustomViewでは、isEditableメソッドからfalseを返すようにしてください（？）

STYLE IMPROVEMENTS/スタイルの改良

You can now specify the cursor to use for a cell using the CSS cursor property.

あなたはセルに使われるカーソルをCSSのcursorプロパティを使い指定することができます。

The allows you to create separate cursors for cells.

これはあなたが分割カーソルをセルに作ることを許可します。（←意味わからん）

The ::-moz-tree-separator pseudo has been improved to make it a proper box type and now has additional styling capabilities. Example:

::-moz-tree-separator疑似クラスは改良されました。（とにかく改良されたんだ！なにを言っているのかよくわからんけど！）そして追加のスタイル能力を持つようになりました。

例：