ビューは、Places model-view-controller デザインにおけるコンポーネントのひとつです。ユーザに向けてnsINavHistoryResult
オブジェクトを表示するために使用します。Places のクエリでは、nsINavHistoryResult
オブジェクトについての情報を保持し、使用しています。nsINavHistoryResult
オブジェクトの保持および扱い方については、Querying Places を参照してください。このページでは、既にこれらについて知っているものとして話を進めます。
nsINavHistoryResult
のインスタンスはビューのデータを提供します。ビューは、このインスタンスのルートである nsINavHistoryContainerResultNode
を展開し、その時点で含んでいるnsINavHistoryResultNode
オブジェクトを表示する機能を持ちます。
ビルトインビュー
あなたの拡張機能やアプリケーションでブックマークまたは履歴の内容を表示する必要がある場合、あなたは本体にビルトインされている Places ビューを使用することができます。それらを使用することで基礎的な箇所を記述する作業時間を抑え、あなたの拡張機能またはアプリケーションの構築に注力できるでしょう。
Placesでは以下のビルトインビューが提供されています。
インスタンスの作成
3 つのビルトインビューは、単純かつ標準的な XUL 要素に特殊なtype
属性の値として"places"を設定します。
どの XUL ドキュメントにおいても、ビルトインビューを含む場合、スタイルシートbrowser/components/places/content/places.css
を読み込み、ファイル browser/components/places/content/placesOverlay.xul
をオーバーレイさせる必要があります。
<?xml-stylesheet href="chrome://browser/content/places/places.css" ?> <?xul-overlay href="chrome://browser/content/places/placesOverlay.xul" ?>
このスタイルシートは、特殊なtype
属性を持った要素にビューの 1 つをバインディングします。オーバーレイはビューに必要な JavaScript を含んでいます。また、コンテクストメニュー及びコマンドもビルトインビューには含まれているため、ビューを利用する際に有利な点が得られるかもしれません。
ビューとデータの接続
ビルトインビューとデータを接続するためには、ビューの特殊な place
属性を使用します。
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 以降では、メニュービューにおいて places 属性を使用することができません。 詳しくはメニュービューを参照してください。
あなたは直接 XUL 中の属性に値を指定するか、JavaScript を使用して対応するプロパティに値を設定しなければなりません。その値は、ビューに表示するデータがクエリの結果となるようなクエリ形式の URI にしてください。ビューが終了するまで変更されないような単純なクエリの場合は、XUL 中のplace
属性に直接指定したほうが良いかもしれません。より複雑なクエリの場合、またはクエリの URI が変わる予定のある場合は、JavaScript を用いてビューの place
プロパティに動的に値を設定したほうが良いでしょう。後者の場合では、要素の属性に setAttribute
を用いて値を設定する手法では充分ではないということを記しておきます。代わりに要素の place
プロパティを使用してください。クエリ URI の情報については、Querying Places および Places query URIs を参照してください。
下記の例では、タイトルまたは URL に "mozilla" を含むブックマークを表示するために、 ビルトインされているツリービューを使用しています。XUL は XMLであり、クエリ URI 中のいかなるアンパサンドも単純な &
ではなく、実体参照の &
で記述されなければならないということを注意してください。
<tree type="places" place="place:terms=mozilla&onlyBookmarked=1&queryType=1"> <treecols> <treecol id="title" label="My Bookmarks" flex="1" primary="true" /> </treecols> <treechildren /> </tree>
次の例では、最終的な表示は同じですが、JavaScript を用いてツリーの place
属性の値を設定しています。
var histServ = Cc["@mozilla.org/browser/nav-history-service;1"]. getService(Ci.nsINavHistoryService); var query = histServ.getNewQuery(); query.searchTerms = "mozilla"; query.onlyBookmarked = true; var opts = histServ.getNewQueryOptions(); opts.queryType = opts.QUERY_TYPE_BOOKMARKS; var uri = histServ.queriesToQueryString([query], 1, opts); var tree = document.getElementById("mytree"); tree.place = uri;
これら 2 つの例ではビルトインされているツリービューを使用していますが、重要なのは place
属性と place
プロパティの使用についてのデモであるという点です。ビルトインされているメニューやツールバーにおいても違いはないと考えてください。
根本的なデータが変更される際、ビューは自動で更新され新たなデータを表示します。この更新は、ビューと結果の間のロジックによって処理されます。すべての Places ビューの実装および nsINavHistoryResultViewer
インタフェースのインスタンスにおいて、ビューと結果の間には相互作用する点が存在します。検索結果は Places の変更の通知を受け取り、もし Places 上でのデータに明確な変更が起きたと確定された検索結果は nsINavHistoryResultViewer
の適切なメソッドによってビューに通知されます。通知を受けると、ビューは自身を更新します。
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)以降では、nsINavHistoryResultViewer
はさらに強力な nsINavHistoryResultObserver
によって置き換えられています。
ツリービュー
ツリー要素の type
属性に "places" が設定されることによってビルトインツリービューは生成されます。treechildren
は空要素にしてください。
<tree type="places"> <treecols> <treecol id="title" flex="1" primary="true" /> <treecol id="url" flex="1" /> </treecols> <treechildren /> </tree>
ツリービューは browser/components/places/content/tree.xml
で実装されています。ツリーについての一般的な情報は、tree リファレンスと、Trees チュートリアルを参照してください。
もし、あなたのツリービューに Firefox において通常使われているスタイルを適用したい場合は以下のスタイルシートを読み込ませてください。注意すべきこととしては、このスタイルシートは上述の、ビルトイン Places ビューを使用する際に読み込まなければならないものとは違います。下記のスタイルシートはオプションであり、スタイルとアイコンはビルトインツリービューにしか適用されません。
<?xml-stylesheet href="chrome://browser/skin/places/places.css" ?>
XUL というよりも、JavaScript によるツリービューのインスタンス化の例は、Programmatic generation of the built-in tree viewを参照してください。
列のバインディング
ビルトインツリービュー
は、あなたのツリーの特定の列と結果の特定のプロパティの接続を簡単に行えます。それは、あなたの treecol
要素のid
属性に与えられた魔法の値によって認識されています。検索結果のプロパティは、列の id
属性によって列と結び付けられています。例えば、列の id
を "title" に設定すると、列中のどの行も nsINavHistoryResultNode
の title
プロパティを表示します。
下記の表は、列の id
と値が、nsINavHistoryResultNode
のプロパティのどれに関連付けられているかを示しています。
treecol id または anonid |
対応する nsINavHistoryResultNode プロパティ |
title | title |
url | uri |
date | time |
visitCount | accessCount |
keyword | * |
説明 | * |
dateAdded | dateAdded |
lastModified | lastModified |
tags | tags |
** | icon |
*keyword と description は、nsINavHistoryResultNode
の itemId
プロパティを用いて Places データベースから検索されます。
**title列は自動的に nsINavHistoryResultNode
の icon
プロパティによって参照されている favicon を受け取ります(ただし title 列に限ります)。
あなたのツリーが充分な数の列を持っているならば、複数の列に上記の特殊な値を設定することも可能です。 treecol
に id
属性を設定する代わりに、anonid
属性を設定することも可能です。anonid
属性の設定は、id
属性を別の目的に使用するとき、または treecol
が XBL などによる匿名コンテンツを含む場合に役立ちます。仮に id
属性と anonid
属性の両方を指定した場合、anonid
属性が使用されます。
ビルトインツリービューは一般的な使用の範囲においては便利な機能を提供しています。追加のデータを表示したい、またはビュー上において別の操作方法を必要とする場合は、あなた自身で実装を行う必要があります。下記の『カスタムビューの作成』を参照してください。
ツリービューの使い方
ビルトインツリービューの使用の準備ができました。どうやって表示されるデータを扱うのでしょうか?
はじめに nsIPlacesView
を参照してください。全ての Places ビューと同様に、ビルトインツリービューもこのインタフェースを実装しており、ビューの nsINavHistoryResult
インスタンスを取得し、ビューの選択部を調べるための幅広い手段を提供しています。
次に、ツリーについて話す場合において、 "view" とは多くの意味を持つ言葉であるということを知っておいてください。この文書では Places ビューについて述べています。Places ビューはまさしく XUL 要素であり、上で述べたように、ビルトイン Places ツリービューは、type
属性に "places" が設定された tree 要素なのです。ですが、 Places ビューであるかどうかに関わらず、全てのツリーは nsITreeView
を使用して、それぞれのデータを表示しているということを思い出してください。そのためビルトイン Places ツリービューは、 view の値に自分自身を持ちます。このビューは、最も一般的かつ最も具体的なものから順に、 nsINavHistoryResultTreeViewer
、 nsINavHistoryResultObserver
、そして nsITreeView
といった 3 つのインタフェースを実装したオブジェクトです。nsINavHistoryResultTreeViewer
は、それぞれの行の索引と、それぞれの列中に含まれている nsINavHistoryResultNode
を配置します。nsINavHistoryResultObserver
は、基底データの変更があった際、その更新について観察しているクライアントに通知します。ですが、ここでの私たちの目的としてはあまり便利ではありません。通常、ツリーにおいての高レベルのインタフェースは nsITreeView
が提供しています
最後に、ビルトインツリービューは便利なメソッドとプロパティを実装しています。
そのため、ビルトイン Places ビューでは相互に作用する 4 通りの手段が存在します。
- ビューそのものに直接実装された便利なメソッドとプロパティ。
- ビューそのものの
nsIPlacesView
インタフェース - ビューが view に持つ
nsINavHistoryResultTreeViewer
インタフェース - ビューが view に持つ
nsITreeView
インタフェース
nsITreeView
によって提供されているインタフェースは非常に一般的なものであるのですが、ビューに直接実装されたメソッドとプロパティは非常に特殊なものです。時々、相互作用する 4 つの手段のうち、主に使用している手段とは別の手段の使用が必要となることがあります。
JavaScript では以下のように、あなたの Places ツリービューを参照するために treeView
という名前の変数を宣言してください。
var treeView = document.getElementById("myPlacesTreeView");
手段 1 と手段 2 が、この変数に対して適用できます。
ツリービューの view は、treeView.view
が持っているオブジェクトです。手段 3 と手段 4 をこのオブジェクトに適用できます。
var treeViewView = treeView.view;
便利なメソッド
ビルトインツリービューは幅広く使用されるものの複雑であるので、よく使われる処理を簡単に記述するために、いくつかの便利なメソッドがツリービューに直接実装されています。
applyFilter()
特定の検索条件とフォルダに合致した新規クエリを読み込みます。
void applyFilter( string filterString, array folderRestrict );
パラメータ
filterString
- 新規クエリの
searchTerms
プロパティに設定される文字列 folderRestrict
- フォルダ ID の配列に基づき、新規クエリの
setFolders
関数が呼び出されます。省略可。
load()
ビューの表示のクエリを設定します。このメソッドは上で述べられているツリーの place
プロパティを設定するための代わりの手段としても使われます。
void load( array queries, nsINavHistoryQueryOptions options );
パラメータ
queries
nsINavHistoryQuery
オブジェクトの配列options
nsINavHistoryQueryOptions
オブジェクト
selectItems()
与えられたアイテムIDのそれぞれに合致した、ツリー中の最初のノードを選択します。選択されたアイテムを表示する必要があるため、選択されたアイテムの親ノードを展開します。
void selectItems( array aIDs, array aOpenContainers );
パラメータ
aIDs
- アイテム ID の配列
aOpenContainers
- 真または未定義の場合、閉じられたフォルダも同様に検索されます。そうでない場合、閉じられたフォルダは検索されません。省略可。
selectNode()
ツリー中で選択された特定のノードの祖先である全てのコンテナが展開され、選択されたノードが見えるようになります。
void selectNode( nsINavHistoryNode node );
パラメータ
node
- 選択された
nsINavHistoryResultNode
selectPlaceURI()
ツリー中で、特定の placeURI に一致するノードが選択され、そのノードの祖先である全てのコンテナが展開されることにより、選択されたノードが見えるようになります。
void selectPlaceURI( string placeURI );
パラメータ
placeURI
- 選択する
nsINavHistoryResultNode
の URI (文字列型)
便利なプロパティ
上述のメソッドのように、いくつかの便利なプロパティがビルトインツリービューに直接実装されています。
プロパティ | 型 | 詳細 |
flatList |
boolean |
true であれば、コンテナの内部を表示しません。 onOpenFlatContainer プロパティによってコンテナの開閉が設定されている際に機能します。 少なくとも flatList 及び showRoot の一方は false である必要があります。 |
onOpenFlatContainer |
string |
コンテナが開閉された際に呼び出されます。 flatList プロパティがtrueである場合のみ適用されます。 aContainer という名前の引数として nsINavHistoryResultNode を渡します。 aContainer に nsINavHistoryContainerResultNode を QueryInterface します。 |
showRoot |
boolean |
true であれば、ルートの nsINavHistoryContainerResultNode をツリー最初の列に表示します。 少なくとも showRoot 及び flatList の一方は false である必要があります。 |
使用例
特定の行の nsINavHistoryResultNode
を取得する。
var treeView = document.getElementById("myPlacesTreeView"); var rowIndex = 0; var historyResultNode = treeView.view.nodeForTreeIndex(rowIndex);
特定の nsINavHistoryResultNode
の行の index を取得する。
var treeView = document.getElementById("myPlacesTreeView"); var rowIndex = treeView.view.treeIndexForNode(historyResultNode);
ツリー中で特定の URI を持つ行を選択する。
var treeView = document.getElementById("myPlacesTreeView"); treeView.selectPlaceURI("some place URI");
ツリー中で特定の nsINavHistoryResultNode
を含む列を選択する。
var treeView = document.getElementById("myPlacesTreeView"); treeView.selectNode(someHistoryResultNode);
PlacesTreeView
ビルトインツリービューの実態は PlacesTreeView
のインスタンスであり、プロトタイプは browser/components/places/content/treeView.js
で定義されています。 PlacesTreeView
の挙動はビルトインツリービューにおいて、 nsITreeView
、及び Places ビューに必要な機能の多くを実装するという 2 つの機能をなします。後者においては具体的には nsINavHistoryResultViewer
を継承した nsINavHistoryResultObserver
が実装されています。
以下のように PlacesTreeView が 2 つの機能をなすために、検索結果とツリー要素の表示のブリッジを可能としています
var result = historyService.executeQuery(query, opts); // あなたの Places 検索クエリ var tree = document.getElementById("mytree"); // あなたのツリー要素 var showRootNodeInTree = true; var view = new PlacesTreeView(showRootNodeInTree); // ブリッジを行う result.addObserver(view.QueryInterface(Components.interfaces.nsINavHistoryResultObserver)); tree.view = view.QueryInterface(Components.interfaces.nsITreeView);
実際にビルトインツリービューはこのように機能しています。上で述べたように、place
プロパティを設定したり、load
メソッドを呼び出した際も同様に機能しています。
ツリービューをあなた自身によって実装する場合は自由であるのですが、ビルトインツリービューを使用する場合において、place
属性の使用はあまり推奨されません。place
属性はビューの更新を回避してしまい、ビューの検索結果との同期に失敗する原因となってします。そのかわりにビューの load
メソッドもしくは place
プロパティを使用するようにしてください。もし、カスタムツリービューをあなた自身の手で実装した場合、いくつかの点で似たようなコードを記述する必要があります。
メニュービュー
ポップアップメニューにおける Places ビューについての情報が記述されています。
Firefox 3.6 以前
(いくつかの menu
要素の子孫である)空の menupopup
要素の type
属性に "places" という値を設定することで、ビルトインメニュービューは生成されます。
<menu> <menupopup type="places" /> </menu>
place
属性または place
プロパティは、menupopup
要素に設定してください。
Firefox 4
以下のようにすることで、ポップアップのように Places の情報を追加することができます。
<menu id="bookmarksMenu"> <menupopup placespopup="true"> onpopupshowing="if (!document.getElementById('bookmarksMenu')._placesView) new PlacesMenu(event, 'place:folder=BOOKMARKS_MENU');" </menupopup> </menu>
メニュービューは browser/components/places/content/menu.xml
で実装されています。メニューについての一般的な情報は menupopup
と menu
のリファレンス及び Popup Menus
チュートリアルを参照してください。
ツールバービュー
( toolbar
要素の子孫であるいくつかの toolbaritem
要素の子孫である)空の hbox
要素の type
属性に "places" という値を設定することで、ビルトインツールバービューは生成されます。
<toolbar> <toolbaritem> <hbox type="places" /> </toolbaritem> </toolbar>
place
属性または place
プロパティは、 hbox
要素に設定してください。
ツールバービューは browser/components/places/content/toolbar.xml
で実装されています。ツールバーについての一般的な情報は toolbaritem
と toolbar
のリファレンス及び Toolbars
チュートリアルを参照してください。
ビューの使い方
Places ビューの使用の準備ができました。どうやって使用するのでしょうか?
複雑であるため、ビルトインツリービューは簡単に捜査できるように特別なインタフェースを提供しています。もし、あなた自身の手で複雑なビューを実装した場合、似たようなインタフェースも実装しているかもしれません。
ですが、矛盾無く一般的な操作を行えるように全ての Places ビューが最低限のインタフェースを提供すべきです。この理由から、nsIPlacesView
インタフェースは実装されています。ビューを表示し、選択したノードを実行する nsINavHistoryResult
インスタンスを取得すると言ったことが可能です。事実、上で述べらていた特殊な place
プロパティ は、このインタフェースのプロパティです。
カスタムビューの作成
提供されているビルトインビュー以上の柔軟性を必要をする場合は、カスタムビューの作成が可能です。カスタムビューを必要とする場合は以下のようなものです。(もちろん、これだけに限定されるわけではありません)
- ビルトインビューによって提供されるカラムのとなりに独自のカラムを表示したい
- ビルトインビューによる日付や他のデータのデータの表示方法を変更したい
- 基底部データに定義されていない情報の表示をしたい
- ビルトインビューで提供されていない要素によって Places の情報を表示したい
潜在的に悪い理由があるとして、カスタムビューが推奨されないのは以下の場合です。(これもまた、これだけに限定されるわけではありませんが)
- 新たなコンテンツを表示するというよりも、ビルトインビューの表面的な外見を変更したい場合。CSS を適用してください。
- ビルトインツリービューの列を隠したい場合。
treecol
要素を除外してください。 - クリックやコマンド操作、他のユーザの操作を受け取ったビューの挙動の管理をしたい場合。この不満を別の問題として捉えないでください。表示されているデータにとってのビューであり、ロジックにとっての操作方法です。あなたは標準的なPlacesのコマンドやコンテクストメニューをビルトインビューに接続したり、独自のコマンドを操作するためのコントローラーの作成が可能です。詳しくは、 View Controller を参照してください。
あなたが書いたビューの種類に関わらず、 nsIPlacesView
インタフェースを実装してください。(現在、 nsIPlacesView
は実際にはインタフェースではありません。組み込みビューは単純に、メソッド及び属性を直接実装しています) 『ビューの使い方』の章での前述のとおり、このインタフェースは、ビューを扱う一般的な方法に矛盾しないコントローラや呼び出しを提供します。
あなたのビューにおいては、同様の実装を行うか、ビューを nsINavHistoryResultObserver
のインスタンスとして保持してください。あなたの view と nsINavHistoryResult
オブジェクトを接続するため、結果の addObserver()
メソッドを呼び出し、 nsINavHistoryResultObserver
のインスタンスである viewer
オブジェクトを渡してください。もし、あなたの view が nsINavHistoryResultObserver
を実装しているのであれば、 viewer
オブジェクトを渡す事ができます。もし、あなたの view が nsINavHistoryResultObserver
のインスタンスを内部に含んでいるならば、代わりにそれを渡すことができます。(3種類の組み込みビューもこのアプローチを採用しています) result オブジェクトはこのインスタンスを通じてあなたの view と連絡を取り、基底データの変更の通知を受けた場合に表示を更新するのです。
var bmServ = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]. getService(Components.interfaces.nsINavBookmarksService); var histServ = Components.classes["@mozilla.org/browser/nav-history-service;1"]. getService(Components.interfaces.nsINavHistoryService); var opts = histServ.getNewQueryOptions(); var query = histServ.getNewQuery(); query.setFolders([bmServ.placesRoot], 1); var result = histServ.executeQuery(query, opts); // この myView とはあなたの view です。そして myView.viewer は nsINavHistoryResultObserver を実装したオブジェクトです。 result.addObserver(myView.viewer);
より本質的な意味において、上記コードは、あなたの view のメソッドへと送信されます。呼び出し元は検索結果または検索クエリを渡し、あなたは検索クエリを実行し、 addObserver()
を使用して観察対象のクライアントとしてあなたの view を追加します。(ビルトインツリービューの load
メソッド での処理手法です)
あなたの view が結果を観察した時、 result は与えられた nsINavHistoryResultObserver
の result
プロパティに設定されます。あなたは result
プロパティを明確に設定するべきではありません。 result とビューの接続を解除するには、 あなたの結果から removeObserver(view)
を呼び出してください。
循環参照に注意してください。ビューと result は、両方とも互いへの参照を持ちます。 JavaScript のガベージコレクションによってこれらのオブジェクトが解放されるためには、 result.removeObserver(view)
を呼び出すことによって、この循環を消去する必要があります。(例えば、ビルトインツリービューでは自動的にこの作業を行っています。ツリーが破棄された、または別の nsITreeView
とツリーが関連付けられた場合、ツリーは古い方の nsITreeView
の tree
プロパティを null
に設定します。 nsITreeView
を実装したオブジェクトは nsINavHistoryResultObserver
も実装しているため、ビューは removeObserver()
を呼び出し、 result から自分自身への接続を解除します。)
nsINavHistoryResultObserver
が使用されている場合でも正確な内容でしょうか?カスタムツリービューの作成
カスタム Places ツリービューは多くのことができます。要求するアイディアを得るには、前述した『ツリービューの使い方』の章を参照してください。一般的に、カスタム nsITreeView
は多くの作業を要します。カスタム nsITreeView
に慣れ親しんでいない場合は、 XUL チュートリアルの Custom Tree Views と Tree View Details のページを参照してください。ここには関連情報について述べます。
幸運にも、あなたの目的に合致したビルトインツリービューの一部を拝借することが可能です。ビルトインビューである PlacesTreeView
の実態である JavaScript プロトタイプは、特に役立つ nsINavHistoryResultTreeViewer
、 nsINavHistoryResultObserver
、 nsITreeView
の 3 種を実装しています。そのため、非カスタム機能と退屈な作業を肩代わりさせるために、PlacesTreeView
上にあなたのカスタム機能を実装することができます。ひとつの方策としては、カスタム機能を提供するオブジェクトにこれらのインタフェースを全て実装して、これらカスタムされた振る舞いを全てサポートすることで、カスタムオブジェクトを PlacesTreeView
のインスタンスに偽装するというものがあります。ですが、おそらくより簡単な方策としては、下記のサンプルのように、既に存在する PlacesTreeView
インスタンスを修正するものがあります。
下記の JavaScript では、新たに PlacesTreeView
インスタンスを作成していますが、ビルトインツリービューに表示されていない列を表示するために、nsITreeView
のメソッドを 2 つ上書きしています。
var view = new PlacesTreeView(); view._getCellText = view.getCellText; view.getCellText = function (aRowIndex, aCol) { // 特殊な列を操作する。 PlacesTreeView として、列の id または anonid を認識する。 switch (aCol.id || aCol.element.getAttribute("anonid")) { // (ブックマークのような)URI ノードではなく、(フォルダのような)すべてのノードのURI case "fullURI": return this.nodeForTreeIndex(aRowIndex).uri; break; // 親コンテナ内でのノードの index case "indexInParent": return this.nodeForTreeIndex(aRowIndex).bookmarkIndex; break; // 偶数列か奇数列か case "parity": return (aRowIndex % 2 === 0 ? "even" : "odd"); break; } // そうでない場合、オリジナルの getCellText メソッドに偽装する return this._getCellText(aRowIndex, aCol); }; view._cycleHeader = view.cycleHeader; view.cycleHeader = function (aCol) { switch (aCol.id || aCol.element.getAttribute("anonid")) { case "fullURI": case "indexInParent": case "parity": // ここで列の再ソートが可能 break; default: this._cycleHeader(aCol); break; } }; // クエリの実行と検索結果の取得 var bmServ = Components.classes["@mozilla.org/browser/nav-bookmarks-service;1"]. getService(Components.interfaces.nsINavBookmarksService); var histServ = Components.classes["@mozilla.org/browser/nav-history-service;1"]. getService(Components.interfaces.nsINavHistoryService); var opts = histServ.getNewQueryOptions(); var query = histServ.getNewQuery(); query.setFolders([bmServ.placesRoot], 1); var result = histServ.executeQuery(query, opts); // result's viewer とカスタムビューのツリーの nsITreeView の接続 var treeView = document.getElementById("myTreeView"); result.addObserver(view); treeView.view = view;
下記の XUL では、JavaScript 中から参照される myTreeView
要素を定義しています。
<tree id="myTreeView" flex="1"> <treecols> <treecol id="title" label="title" flex="1" primary="true" /> <splitter class="tree-splitter" /> <treecol anonid="fullURI" label="fullURI" flex="1" /> <splitter class="tree-splitter" /> <treecol id="indexInParent" label="indexInParent" /> <splitter class="tree-splitter" /> <treecol id="parity" label="parity" /> </treecols> <treechildren /> </tree>
このページ下部のファイルの項目に、コードの全文が挙げられています。
上記のツリー要素は、ビルトインビューの際の特殊な type
属性を持たないことを注記しておきます。上記のツリーはあなたが Places クエリと接続した通常のツリーであって、ビルトインツリービューのような便利なプロパティやメソッドは存在しません。もし、カスタムビューがあなたのアプリケーションにおいてのみ使用されるのであれば、コードは上述したようなもので充分でしょう。上記のコードでは、PlacesTreeView
オブジェクトを 1 つ作成し、修正を加え、通常のツリーに組み込むのに充分です。しかしながらもし、あなたのビューが幅広く使われるのであればビルトインビューのように PlacesTreeView
に似通った JavaScript プロトタイプと XBL ツリーバインディングを作成し、ビューと表示と接続作成に多くの作業を費やすべきでしょう。
nsINavHistoryResultNode.viewIndex
属性は、ビューを使用することによって明示的に提供されます。この値はそれぞれのノードが生成されたときは -1
に初期化されています。あなたは、可視ノードの追跡を保存するためにこの値を使用します。 PlacesTreeView
は、列中で有効になっているノードの index を保存するためにこの値を使用します。