ツリーウィジェット

[目次] [前へ: ラベルつきボタン] [次へ: タブウィジェット] 機能担当: David Hyatt 変更履歴: 11/16/99 - ドラッグアンドドロップのセクションを追記 8/22/99 - 新たに選んだAPIに関する情報を追記, treealloweeventsの情報を更新,onchangesをonselectに変更 ツリーウィジェットは多数の要素をテーブル形式に表示する機能を提供する. 各行はさらに複数のセルから構成されている. ツリーウィジェットはHTMLのテーブルと同じコンポーネントで構成されているので, このウィジェットのユーザは HTML テーブルの機能がすぐに使いこなせるようになるはずだ. ツリーには他にも HTMLテーブルと同じように, CSS2 テーブル仕様 に記述されているCSSプロパティにも対応している. 以下に挙げたタグはHTMLテーブルの似た機能との大まかな対応である. Table Tree table tree caption treecaption colgroup treecolgroup col treecol thead treehead tbody treechildren, treeitem tfoot treefoot tr treerow td treecell ツリーウィジェットをドキュメントに入れるには, tree タグを利用する. このタグはHTMLの tableタグと機能上良く似ている. ツリーウィジェットではキャプションを含めることが可能で,これは treecaption タグを使って指定する. ツリーのカラム情報はtreecolgroupタグと treecol タグを使って指定する; これらのタグは HTMLのcolタグが持つのと同じプロパティすべてに対応する このHTMLのカラムタグではカラムの幅やツリービュー中の個々のカラムに適用するスタイルを 指定する.ツリーカラムタグではそれに加えてCSSプロパティ,column-layout に対応し,これはそのカラムのサイズがツリーのカラムリサイズ機能を使っていて変更可能であるかどうか示す このプロパティの値には 固定/可変 の値が設定できる.デフォルト値は"可変"である. [この機能はまだ実装されていない.] ツリーにはテーブルと同様に,ヘッダ,ボディ,フッタがある. [まだ未実装ではあるが間もなくリリースされるので注意されたし.] ツリーウィジェットのボディは,テーブルの高さに制限がある場合にテーブル自身が制限されるのとは異なる. treeitemタグはツリー内部で単一の要素(その要素の列と子を含める) を宣言するのに利用するツリー要素には複数の列を含めることができ,それは treerowタグを使って指定される. 各列は1つ以上のセルから構成され,そのセルはtreecellタグを使って 指定する. <tree> <treehead> <treerow> <treecell>Name</treecell> <treecell>URL</treecell> </treerow> </treehead> <treechildren> <treeitem> <treerow> <treecell>Netscape Home Page</treecell> <treecell>http://www.netscape.com</treecell> </treerow> </treeitem> </treechildren> </tree> ツリー要素は開くか閉じるかの状態を持ち,その状態はopen 属性を使って指定する.この属性の値が真である場合にそのツリー要素の子要素がツリー上に 表示される.この属性の値が偽である場合,あるいはこの属性になにも値が設定されていない場合 そのツリー要素の子要素は表示されない. ツリー要素の子要素はtreechildrenタグを使って指定され 親のtreeitemタグの配下に置かれる. treechildren タグにはその親ノードの子ノードとして表される ツリー要素が含まれる. <tree> <treehead> <treerow> <treecell>Name</treecell> <treecell>URL</treecell> </treeitem> </treerow> <treechildren> <treeitem> <treerow> <treecell>Netscape Bookmarks Folder</treecell> <treecell/> </treerow> <treechildren> <treeitem> <treerow> <treecell>Netscape Home Page</treecell> <treecell>http://www.netscape.com</treecell> </treerow> </treeitem> </treechildren> </treeitem> </treechildren> </tree> ツリーは自動的に選択イベントをハンドリングが可能であり, 単一選択も複数選択も両方サポートする(CTRL/コマンドキー、もしくはSIFTキーを併用する) あるツリーを選択するとコンテンツモデルにすぐさま反映される.ツリー要素には selectedという属性があり,要素が選択されるとこの値が真になる. ツリーのある行が選択されるとその行にはselectedcellという 属性が設定される.選択されたツリーセルにはselectedcellという 属性が真に設定される.CSSでは属性選択ルールというものを利用することができ, これはツリーデザイナが選択されたツリーの見栄えを制御できるというものである. ツリーにセレクト ハンドラを関連づけることができる. このハンドラはツリーの選択範囲が変わったときはいつでも起動することができる. これをツリーに関連づけるにはtree タグの属性 (すなわちonselect)として関連づけるか,DOMの addEventListenerメソッドを利用するかの方法がある. ツリーウィジェットは要素やセルへのhoverフィードバックもサポートしている. このhoverフィードバックはコンテンツモデルにも反映される.マウスで掴んでいるツリー要素には hoverという属性に真の値が設定される. マウスで掴んだツリーセルにもhover属性に真の値が設定される. ツリー行にも hover属性を使う. CSSでは属性選択ルールattribute selector rulesを使い,ツリーへのhover状態のフィードバック結果を 制御することができる.[これは :hover機構を使うようにいくつか変更されるだろう. バブルソートが導入されるものと思われる.] 選択イベントをハンドリングするために,セル内部のコンテンツに対するイベントは通常, セルで弾かれてしまう.これはセルにあるtreealloweventsという 属性を設定することによって効かなくすることができる. この属性が真の値のときはそのセルは選択できなくなり,内部のコンテンツにイベント (マウスクリックやキー入力など)が届くようになる,ということである). セルの中のコンテンツ(例えばセル内部に含まれているボタン,とか)に任意にイベントが届けるために, treeallowevents属性をそのセルの子孫ノードに設定することができる. ツリーウィジェットでは選択ノードを変更するためのAPIもサポートしている.このAPIの概要は 下記のようなものである. interface XULTreeElement : XULElement { readonly attribute NodeList selectedItems; readonly attribute NodeList selectedCells; void selectItem(in XULElement treeItem); void selectCell(in XULElement treeCell); void clearItemSelection(); void clearCellSelection(); void addItemToSelection(in XULElement treeItem); void removeItemFromSelection(in XULElement treeItem); void addCellToSelection(in XULElement treeCell); void removeCellFromSelection(in XULElement treeCell); void toggleItemSelection(in XULElement treeItem); void toggleCellSelection(in XULElement treeCell); void selectItemRange(in XULElement startItem, in XULElement endItem); void selectCellRange(in XULElement startItem, in XULElement endItem); void selectAll(); void invertSelection(); }; ツリーセル内部のコンテンツはtreeindentation タグを使えば,自動的にノードの階層に応じてインデントされる.このインデントタグには widthプロパティを設定でき,これはCSSから設定が可能である. このプロパティは,要素を挿入するのに必要なインデント幅を決定するために ノードの階層に応じたインデント幅を伸縮することができる. このプロパティが設定されていない場合のデフォルト値は1階層あたり16ピクセルである. [スタイルシートによるサポートはまだ未実装である.] よくある質問に対する回答 見栄えの異なるカラムのヘッダはどう書けばいいですか? 下記に示したように,見栄えを修正したいセルがあるテーブルのヘッダの中にCSSルールを記述すればいいです. treehead > treerow > treecell { ... } カラムの幅はパーセンテージで指定できますか? もちろん. 詳細は ここ をクリック. ツリーセルの中のテキスト表示をなくしたいのです.どうすればいいですか? CSSの中でツリーセルのwhitespace プロパティの値をnowrapにします. そして,ツリーの幅を詰めてください.(例えばツリーの幅を100%にしてください) これを設定すると,セルに含まれるコンテンツの表示が省略されます. ツリーセルの中の文字列を省略したいのですが、可能な範囲で表示したいのです. どうしたらいいですか? [まだ実装されていません.] CSSを使えばそのように指定することができます. nowrapプロパティを設定し,さらに cropstyle プロパティを設定(このプロパティには left,middle,rightのどれかが値として入る)するとそのように表示することができます. この機能を利用するための一時的な代替手段としてはラベルつきボタンでテキストを表示するのに 使っている方法が利用できる.(詳細はラベルつきボタンを参照されたし) ラベルつきボタンではボタンの幅が足りないとき、デフォルトで文字列の右から切り落とすようになっている. ツリーの全アイテムで同じイベントハンドラを使いたいのです.でも,各ノードごとに 同じことを何度も定義したくないのです.どうしたらいいですか? DOMのイベントハンドリング機能を利用してください. あるツリーノードまでイベントを浮上させ,そのノード上で イベントをハンドリングすることができます.イベントをどこまで浮上させるかのターゲットは evt.targetを使って検索します. ツリービュー上でイベントの浮上を使う場合,イベントは子ノードから親ノードへ浮上する ということを意識することが重要です.いつもイベントがセルから行へ、さらに全体へ伝わる テーブルのように思ってはいけません.あるノードが11階層の深さだとすると, イベントはツリーボディに伝わる前にノードの親へ伝わります.イベントハンドリングのコードを 書く際にはこの違いに注意してください. ツリーのヘッダやフッタと独立してボディだけをスクロールさせたいのですが? ツリーの高さが制限してください,表示エリアに要素が入りきらないときは,これが自動的に行われます. このツリーの柔軟な表示はボックスのおかげで可能になっています.(さらにツリーをウィンドウの 幅と高さのサイズに合わせることも). メッセンジャのようにクリッカブルな画像セル(旗とかチェックなど)を使いたいのですが? ラベルつきボタンを使いましょう. ボタンのクリックハンドラだと,ボタンのある属性がいろんな状態に巡回してしまいます. 可能性のある各属性値に属性選択ルールを使ってボタンの各状態に別の画像を割り当ててください. もし必要であれば,ボタンの枠線をCSSを使って表示しないようにすればいいでしょう. カラムを表示しないようにできますか? これについてはこれを読むといいでしょう. 私はこれこれの私の自前の機能をツリーに 盛り込みたいのですが,どこから手をつけたらいいのかわかりません. ツリーはテーブルを拡張したものであることを思い出して下さい.つまり, ツリーの多くの機能はテーブルから継承されたものなのです.テーブルに関する CSS2やHTMLの仕様を(リンクはこのページのトップにあります)読めば,あなたの疑問が解消されるかもしれません. ツリーのドラッグアンドドロップ ツリーのドラッグに関して注意すべき重要なことは, イベントターゲットはツリーセルであって, ドラッグに関する情報はすべてツリー要素レベルに関することである、ということである. これはつまり,ターゲットから２階層イベントを浮上させる必要がある、ということです. ドラッグ中の追跡 ツリー要素はDOMイベント受信器を使ってアイテムのコンテンツノードに ドラッグがどこへ向かっているのかを伝え,正しくドロップ結果を表示に反映できるようにする. ツリーはドロップ結果をフィードバックするトリガとして ondragoverイベントハンドラの助けも少し借りる. 受信器は常にツリー要素にいろんな属性を伝えるが,ドラッグされたコンテンツを頼りに ドロップすると整合性が取れないことがある.ドラッグが正しいことをイベントハンドラが 判断するのにツリー要素にあるdd-triggerrepaint 属性への アクセスが必要であり,それがトリガとなって正しいドロップ結果の再描画が行われる. この属性へアクセスしないと再描画が行われず,フィードバックするのを止めてしまう. ドロップ結果のフィードバックを望まない場合はこれを利用するのがいいだろう. function DragOverTree ( event ) { var validFlavor = false; var dragSession = null; var dragService = Components.classes["component://netscape/widget/dragservice"].getService(Components.interfaces.nsIDragService); if ( dragService ) { dragSession = dragService.getCurrentSession(); if ( dragSession ) { if ( dragSession.isDataFlavorSupported("moz/toolbaritem") ) validFlavor = true; else if ( dragSession.isDataFlavorSupported("text/plain") ) validFlavor = true; //XXX other flavors here... // touch the attribute on the rowgroup to trigger the repaint with the drop feedback. if ( validFlavor ) { var treeItem = event.target.parentNode.parentNode; treeItem.setAttribute ( "dd-triggerrepaint", 0 ); dragSession.canDrop = true; event.preventBubble(); } } } } // DragOverTree ドロップ先の決定 各ツリー要素それぞれにondragdropイベントハンドラを 設定する代わりに,最上位のtree タグに1個ハンドラを置いて 実際のドロップ位置を探すのにイベントのtargetを利用するのが もっとも簡単である.実際のターゲットはツリーセルであり,正しいツリー要素を得るためには 2階層上に上る必要があることは覚えておいて欲しい. イベント受信器はドラッグの追跡中,2つの属性をターゲットのツリー要素に設定する. この属性はユーザが最終的にマウスをツリーの上で放したときに役にたつ. 1つめは,dd-droplocationで, これは,値が真であれば,ドロップされた場所がその要素よりも前であり, 偽であればその要素よりも後ろであることを示すブール値である. 2つめの属性は,dd-droponといい, ドロップがそのコンテナに対して行われたことを示す. この値が真のときは,dd-droplocationは未定義である. ツリー要素はあるオブジェクトがコンテナであるかどうかはコンテンツノードの container属性を参照して判断する. また,そのノードが展開されているかどうかはopen属性を 見て判断する. とても大事なこと ドロップ先のターゲットがコンテナであり,dd-droplocationの 値が偽(つまり、そこよりも後ろの意)であると,コンテナが展開されているのか,違うのかを判断 しなければならない.もしコンテナが展開されている場合はドロップされる要素はコンテナの第1 子ノードとして配置されるべきである.もしコンテナが閉じられていると,要素はコンテナの兄弟ノードとして そのコンテナの後に配置されるべきである. ツリーに関する実装状況を隠しだてすることはあまりいいことではありません. 現時点では実際にはイベントターゲットの変更ができないからです. その結果,全てのJS実装者はこれを考慮にいれておく必要があります. 平均的なJSユーザに対してはこれらの詳細をラッパで隠蔽することができました. 下記はツリー全体に対して設定されているハンドラがイベントが発生したノードを取得する というデモの簡単なサンプルです. <tree id="bookmarksTree" ref="NC:BookmarksRoot" context="contextual" datasources="rdf:bookmarks rdf:files rdf:ftp rdf:localsearch rdf:internetsearch" ondragdrop="return DropOnTree(event);"> function DropOnTree ( event ) { // id (url) is on the <treeitem> which is two levels above the <treecell> which is // the target of the event. var treeItem = event.target.parentNode.parentNode; var id = treeItem.getAttribute("id"); var dropBefore = treeItem.getAttribute("dd-droplocation"); var dropOn = treeItem.getAttribute("dd-dropon"); dump("**** before is " + dropBefore + " on is " + dropOn + "\n"); var beforeString = "before"; if ( dropBefore == "false" ) beforeString = "after"; dump ( "*** tree drop " + beforeString + " target [" + id + "]\n" ); event.preventBubble(); } ドロップ結果のフィードバックのカスタマイズ ドロップ結果のフィードバックマーカーバーは通常は黒であるが, CSS経由で特定のツールバーをカスタマイズすることができる. これを行うには,:-moz-drop-marker疑似エレメントを 利用する.他にもドロップされようとしている,あるコンテナに含まれているセルを表す色を :-moz-drop-container-bg.でカスタマイズできる.   :-moz-drop-marker { color: blue; } :-moz-drop-container-bg { color: blue; } [目次] [前へ: ラベルつきボタン] [次へ: タブウィジェット] 我々にコンタクトを取りたい場合は xptoolkitstaff@netscape.comへお願いします. もし,新しいドキュメントに対して苦情を言いたい方はDave Hyatt までメールを下さい.