Tree

A container which can be used to hold a tabular or hierarchical set of rows of elements. The tree may contain any number of rows and any number of columns. Each row of the tree may contain child rows which are displayed indented from the parent. Unlike other elements, the data to display inside the tree is not specified using tags, but is determined from a view object. The view object implements the nsITreeView interface. The view is queried for the data to appear in the tree. There are several ways in which trees are used, as listed below. The second column lists the interfaces available via the tree's view property. The third column indicates whether treeitem element are used.

Tree Type View Interfaces Has DOM Nodes Description
Content Tree nsITreeView, nsITreeContentView Yes This tree has treeitem elements placed within the treechildren element. In this situation, a content view (which implements the interface nsITreeContentView) which is a more specialized type of view, uses the treeitem elements and their descendants to determine the data to display in the tree. However, the treeitems are not displayed directly; they are used only as data to the content view. However, the content view will automatically update the tree if treeitems are changed.
RDF Tree nsITreeView, nsIXULTreeBuilder No This tree is generated from an RDF datasource. It is used when a tree has a datasources attribute, and has 'dont-build-content' in its flags attribute. For this tree, the data comes directly from the RDF datasource. DOM treeitems are not created. Even though the template uses treeitem elements to define the content, DOM nodes for these elements are not created. This is the type that should be used for RDF generated trees with lots of rows.
RDF Content Tree nsITreeView, nsIXULTreeBuilder nsITreeContentView Yes This tree is generated from an RDF datasource. It is similar to the previous type but is used when the tree does not have 'dont-build-content' in its flags attribute. DOM treeitems are created, so you can access the data using RDF functions or DOM functions. This type is suitable for RDF generated trees with a fairly small number of rows.
Custom View Tree nsITreeView No For this tree you implement the nsITreeView interface yourself. The tree's data is retrieved from this custom view. The custom view should be attached to the tree by setting its view property.

More information about tree

テーブル状あるいは階層状の要素の並びを保持するためのコンテナ。 ツリーは行と列をいくつでも持てる。ツリーの各行は子の行をもつことができ、親からインデントされた形で表示される。他の要素とは異なり、ツリー内の表示データはタグでは与えられず、ビューオブジェクト (view object) により定められる。ビューオブジェクトは nsITreeView インターフェイスを実装する。ツリーが表示される際にはビューに対しデータが問い合わせられる。ツリーには以下に挙げられるような種々の用いられ方がある。2 列目は tree 要素の view プロパティを通して利用できるインターフェイスを示す。3 列目は treeitem 要素が利用されるか否かを示す。

ツリータイプ View インターフェイス DOM ノードの保持 説明
内容ツリー (Content Tree) nsITreeView, nsITreeContentView はい このツリーは、 treechildren 要素内に treeitem 要素を持つ。この状況では、特化したタイプのビューである内容ツリー (これは nsITreeContentView インターフェイスを実装している) は、 treeitem 要素とその子孫要素を用いてツリーの表示データを決める。しかし、treeitem 要素は直接には表示されず、内容ビューのデータとして用いられるだけである。ただし、treeitem が変更されると内容ビューは自動的に更新される。
RDF ツリー nsITreeView, nsIXULTreeBuilder いいえ このツリーは RDF データソースから生成される。ツリーが datasources 属性を持ち、 flags 属性に 'dont-build-content' を設定している場合に使用される。このツリーでは、データは RDF データソースから取得する。 DOM の treeitem は作られない。テンプレートは treeitem 要素を使用して内容を定義するが、これらの要素の DOM ノードは作られない。このツリータイプは、行数の多い RDF 生成ツリーに用いるべきものである。
RDF 内容ツリー (RDF Content Tree) nsITreeView, nsIXULTreeBuilder nsITreeContentView はい このツリーは RDF データソースから生成される。上のタイプに似てはいるが、このツリーは flags 属性が 'dont-build-content' ではない場合に使用される。 DOM の treeitem は作られるため、 RDF 関数や DOM 関数を使ってデータにアクセスすることができる。このツリータイプは、行数がかなり少ない RDF から生成したツリーに適している。
カスタムビューツリー (Custom View Tree) nsITreeView いいえ このツリーでは、自分で nsITreeView インターフェイスを実装する。ツリーのデータは、このカスタムビューから取得する。 view プロパティを設定することで、ツリーにカスタムビューを取り付ける必要がある。

tree の追加情報

属性:

alternatingbackground disableKeyNavigation enableColumnDrag flags hidecolumnpicker
onselect rows seltype statedatasource

プロパティとメソッド:

accessible builderView contentView currentIndex disableKeyNavigation
enableColumnDrag firstOrdinalColumn selstyle treeBoxObject view

属性:

XUL Element から継承:

align
allowevents
allownegativeassertions
class
coalesceduplicatearcs
collapsed
container
containment
context
contextmenu
datasources
debug
dir
empty
equalsize
flags
flex
height
hidden
id
insertafter
insertbefore
left
maxheight
maxwidth
menu
minheight
minwidth
mousethrough
observes
ordinal
orient
pack
persist
popup
position
ref
removeelement
sortDirection
sortResource
sortResource2
statustext
style
template
tooltip
tooltiptext
top
uri
wait-cursor
width

alternatingbackground    Moz1.7

Type: boolean

If true, the background of the tree's rows will alternate between two colors.

型 : boolean

true の場合、ツリーの行のバックグラウンドは 2 色交互になる。

disableKeyNavigation

Type: boolean

If this attribute is not used, the user can navigate to specific items in the tree by pressing the first the first letter of the item's label. This is done incrementally, so pressing additional keys will select more specific items. This feature may be disabled for a tree by setting this attribute to true.

型 : boolean

この属性を使用しない場合、ツリー項目のラベルの最初の文字をタイプすると、ツリー中の特定の項目に移動することができる。これはインクリメンタルに行われるため、さらにキーを押すことによりもっと特定化された項目を選択することができる。この属性を true に設定すると、そのツリーに対して上記機能を無効にすることができる。

enableColumnDrag

Type: boolean

When set to 'true', the user may drag the column headers around to change the order that they are displayed in.

型 : boolean

'true' に設定した場合、列ヘッダの表示順序を変更するために列ヘッダをドラッグすることができる。

flags

Type: string

Set this attribute to 'dont-build-content' for a template generated tree. For trees that have their content placed directly inside the tree or have a custom view object, this flag should not be used.

型 : string

テンプレートにより生成されたツリーに対しては、この属性は 'dont-build-content' に設定される。ツリー内に直接内容を置いたツリーやカスタムビューオブジェクト (custom view object) を持つツリーに対しては、このフラグは使用する必要はない。

hidecolumnpicker

Type: boolean

When set to false, a drop-down will appear in the upper right corner of the tree, which the user may use to show and hide columns. When set to true, the column picker will be hidden. The default value is false.

型 : boolean

false に設定した場合、ドロップダウン (列ピッカー) がツリーの右上端に現れる。これは列を表示したり隠したりするのに用いることができる。 true に設定した場合、列ピッカーは隠れる。既定値は false である。

onselect

Type: script code

This event is sent to an tree when a row is selected, or whenever the selection changes. The user can select multiple rows by holding down Shift or Control and click on a row. The onselect event will be sent for each item added or removed to the selection.

型 : script code

ある行が選択されたとき、あるいは選択が変更されたときに、このイベントが送信される。 Shift キーまたは Control キーを押したまま行をクリックすると、複数行を選択することができる。選択に追加したり削除したりした項目ごとに onselect イベントは送信される。

rows

Type: integer

The number of rows to display in the tree.

型 : integer

ツリーに表示される行数。

seltype

Type: one of the values below

Used to indicate whether multiple selection is allowed.

  • single: Only one row may be selected at a time.
  • multiple: Multiple rows may be selected at once.

型 : 以下の値の一つ

複数選択が可能かどうかを指定するために使用する。

  • single: 一度に 1 行の選択のみが可能。
  • multiple: 一度に複数行の選択が可能。
statedatasource

Type: datasource URI

Chrome XUL may specify an RDF datasource to use to store tree state information. This is used to hold which tree items are open and which items are collapsed. This information will be remembered for the next time the XUL file is opened. If you do not specify this attribute, state information will be stored in the local store (rdf:local-store).

型 : datasource URI

Chrome XUL は、ツリーの状態に関する情報を保持するのに使用する RDF データソースを指定することができる。どのツリー項目が開いていて、どれがたたまれているかを持つのに用いられる。次に XUL ファイルが開かれるときのために、この情報は記録される。この属性を指定しない場合は、状態に関する情報はローカルストア (rdf:local-store) に保持される。


プロパティとメソッド:

XUL Element から継承:

align
allowEvents
blur
boxObject
boxObject.element
boxObject.getLookAndFeelMetric
boxObject.height
boxObject.screenX
boxObject.screenY
boxObject.width
boxObject.x
boxObject.y
builder
className
click
collapsed
contextMenu
controllers
database
datasources
dir
doCommand
flex
focus
getElementsByAttribute
height
hidden
id
left
maxHeight
maxWidth
menu
minHeight
minWidth
observes
ordinal
orient
pack
persist
ref
resource
statusText
style
tooltip
tooltipText
top
width

Element から継承:

addEventListener
appendChild
attributes
childNodes
cloneNode
dispatchEvent
firstChild
getAttribute
getAttributeNS
getAttributeNode
getAttributeNodeNS
getElementsByTagName
getElementsByTagNameNS
hasAttribute
hasAttributeNS
hasAttributes
hasChildNodes
insertBefore
isSupported
lastChild
localName
namespaceURI
nextSibling
nodeName
nodeType
nodeValue
normalize
ownerDocument
parentNode
prefix
previousSibling
removeAttribute
removeAttributeNS
removeAttributeNode
removeChild
removeEventListener
replaceChild
setAttribute
setAttributeNS
setAttributeNode
setAttributeNodeNS
tagName

accessible

Type: nsIAccessible

Returns the accessibility object for the tree.

型 : nsIAccessible

tree の accessibility オブジェクトを返す。

builderView

Type: nsIXULTreeBuilder

A reference to the tree builder which constructed the tree data. The builder provides access to the RDF resources for each row in the tree, and allows sorting the data by column. In newer versions of Mozilla, the builderView property is actually a synonym for the view property, since the two interfaces are flattened together into a single interface in JavaScript. This property is read only.

型 : nsIXULTreeBuilder

ツリーデータを構築するツリービルダーへの参照。このビルダーはツリーの各行に RDF リソースへのアクセスを提供し、列によるデータのソートを可能にする。 Mozilla の最近のバージョンでは、 builderView プロパティと view プロパティのインターフェイスは JavaScript の一つのインターフェイスにまとめられているため、この 2 つは実際上同義である。このプロパティは読み込み専用である。

contentView

Type: nsITreeContentView

For trees built with a content builder - that is, those that do not have flags="dont-build-content" set -- the contentView will be a reference to the nsITreeContentView for the tree. This interface lets you retrieve the DOM element corresponding to a given a row index and vice versa. For trees that are not built with a content builder, the functions of nsITreeContentView will not be available, since there are no DOM nodes to retrieve. In newer versions of Mozilla, the contentView property is actually a synonym for the view property, since the two interfaces are flattened together into a single interface in JavaScript. This property is read only.

型 : nsITreeContentView

内容ビルダーでビルドされたツリー、つまり flags="dont-build-content" を持たないツリーに対しては、 contentView はそのツリーの nsITreeContentView への参照となる。このインターフェイスにより、指定した行インデックスに対応する DOM 要素を取得することができる。あるいはその逆に行インデックスを得ることができる。内容ビルダーでビルドされていないツリーに対しては、取得する DOM ノードがないため nsITreeContentView の関数は使用できない。 Mozilla の最近のバージョンでは、 contentView プロパティと view プロパティのインターフェイスは JavaScript の一つのインターフェイスにまとめられているため、この 2 つは実際上同義である。このプロパティは読み込み専用である。

currentIndex

Type: integer

Set to the index of the currently focused row in the tree. If no row is focused, the value will be -1. For multiple selection trees, the current index is the last row selected. Do not use this property to change the selection. Instead, use the methods of the TreeSelection object available via tree.view.selection.

型 : integer

ツリー中で現在フォーカスを持っている行のインデックスに設定される。どの行もフォーカスされていない場合は、 -1 となる。複数選択ツリーでは、現在のインデックスは最後に選択された行である。選択を変更するのに、このプロパティを使用しないこと。その代わりに、 tree.view.selection で使用できる TreeSelection オブジェクトのメソッドを用いる。

disableKeyNavigation

Type: boolean

If this attribute is not used, the user can navigate to specific items in the tree by pressing the first the first letter of the item's label. This is done incrementally, so pressing additional keys will select more specific items. This feature may be disabled for a tree by setting this attribute to true.

型 : boolean

この属性を使用しない場合、ツリー項目のラベルの最初の文字をタイプすると、ツリー中の特定の項目に移動することができる。これはインクリメンタルに行われるため、さらにキーを押すことによりもっと特定化された項目を選択することができる。この属性を true に設定すると、そのツリーに対して上記機能を無効にすることができる。

enableColumnDrag

Type: boolean

When set to 'true', the user may drag the column headers around to change the order that they are displayed in.

型 : boolean

'true' に設定した場合、列ヘッダの表示順序を変更するために列ヘッダをドラッグすることができる。

firstOrdinalColumn

Type: treecol element

A reference to the first treecol element, which or may not be the first column displayed in the tree.

型 : treecol element

最初の treecol 要素への参照。これがツリーに表示されている最初の列かどうかはわからない。

selstyle

Type: string

If set to the value 'primary', only the label of the primary column will be highlighted when an item in the tree is selected. Otherwise, the entire row will be highlighted. To see the difference, compare the selection style in the folder list and the message list in Mozilla mail.

型 : string

'primary' という値に設定した場合、ツリーの項目が選択されたときに最初の列のラベルだけが強調される。それ以外の場合は、全行が強調される。この差異を見るには、 Mozilla メールのフォルダリストとメッセージリストの選択スタイルを比較してみること。

treeBoxObject

Type: nsITreeBoxObject

The box object is responsible for rendering the tree on the window. This object implements the nsITreeBoxObject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree. This property is equivalent to the boxObject property.

型 : nsITreeBoxObject

box オブジェクトは、ウィンドウのツリーの描画をうけ負っている。このオブジェクトは nsITreeBoxObject インターフェイスを実装しており、ある座標のセルの取得、セルの描画、ツリーのスクロールを行う関数を持っている。このプロパティは boxObject プロパティと等価である。

view

Type: nsITreeView

The view for the tree, which is the object which generates the data to be displayed. You can assign an object which implements nsITreeView to this property. Trees built from RDF or those which use treeitems directly will already have a view. Functions available in the view allow one to retrieve the data within the cells, and determine which rows are nested within others. For a complete list of view functions, see the nsITreeView interface.

型 : nsITreeView

ツリーのビュー。これは表示データを生成するオブジェクトである。 nsITreeView を実装したオブジェクトを、このプロパティに割り当てることができる。 RDF から作られたツリーや直接 treeitem 要素を用いたツリーには、すでにビューがある。ビューで使用可能な関数を使うと、セル内のデータを取得したり、どの行が他の行にネストしているかを決めたりすることができる。ビュー関数の完全なリストを知るには、 nsITreeView インターフェイスを参照すること。


Copyright (C) 1999 - 2004 XulPlanet.com