Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Displaying Places information using views

ビューは、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 note
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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 中のいかなるアンパサンドも単純な & ではなく、実体参照の &amp; で記述されなければならないということを注意してください。

<tree type="places" place="place:terms=mozilla&amp;onlyBookmarked=1&amp;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 note
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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" に設定すると、列中のどの行も nsINavHistoryResultNodetitle プロパティを表示します。

下記の表は、列の id と値が、nsINavHistoryResultNode のプロパティのどれに関連付けられているかを示しています。

treecol id または anonid 対応する nsINavHistoryResultNode プロパティ
title title
url uri
date time
visitCount accessCount
keyword *
説明 *
dateAdded dateAdded
lastModified lastModified
tags tags
** icon

*keyword と description は、nsINavHistoryResultNodeitemId プロパティを用いて Places データベースから検索されます。

**title列は自動的に nsINavHistoryResultNodeicon プロパティによって参照されている favicon を受け取ります(ただし title 列に限ります)。

あなたのツリーが充分な数の列を持っているならば、複数の列に上記の特殊な値を設定することも可能です。 treecolid 属性を設定する代わりに、anonid 属性を設定することも可能です。anonid 属性の設定は、id 属性を別の目的に使用するとき、または treecolXBL などによる匿名コンテンツを含む場合に役立ちます。仮に id 属性と anonid 属性の両方を指定した場合、anonid 属性が使用されます。

ビルトインツリービューは一般的な使用の範囲においては便利な機能を提供しています。追加のデータを表示したい、またはビュー上において別の操作方法を必要とする場合は、あなた自身で実装を行う必要があります。下記の『カスタムビューの作成』を参照してください。

ツリービューの使い方

ビルトインツリービューの使用の準備ができました。どうやって表示されるデータを扱うのでしょうか?

はじめに nsIPlacesView を参照してください。全ての Places ビューと同様に、ビルトインツリービューもこのインタフェースを実装しており、ビューの nsINavHistoryResult インスタンスを取得し、ビューの選択部を調べるための幅広い手段を提供しています。

次に、ツリーについて話す場合において、 "view" とは多くの意味を持つ言葉であるということを知っておいてください。この文書では Places ビューについて述べています。Places ビューはまさしく XUL 要素であり、上で述べたように、ビルトイン Places ツリービューは、type 属性に "places" が設定された tree 要素なのです。ですが、 Places ビューであるかどうかに関わらず、全てのツリーは nsITreeView を使用して、それぞれのデータを表示しているということを思い出してください。そのためビルトイン Places ツリービューは、 view の値に自分自身を持ちます。このビューは、最も一般的かつ最も具体的なものから順に、 nsINavHistoryResultTreeViewernsINavHistoryResultObserver 、そして nsITreeView といった 3 つのインタフェースを実装したオブジェクトです。nsINavHistoryResultTreeViewer は、それぞれの行の索引と、それぞれの列中に含まれている nsINavHistoryResultNode を配置します。nsINavHistoryResultObserver は、基底データの変更があった際、その更新について観察しているクライアントに通知します。ですが、ここでの私たちの目的としてはあまり便利ではありません。通常、ツリーにおいての高レベルのインタフェースは nsITreeView が提供しています

最後に、ビルトインツリービューは便利なメソッドプロパティを実装しています。

そのため、ビルトイン Places ビューでは相互に作用する 4 通りの手段が存在します。

  1. ビューそのものに直接実装された便利なメソッドプロパティ
  2. ビューそのものの nsIPlacesView インタフェース
  3. ビューが view に持つ nsINavHistoryResultTreeViewerインタフェース
  4. ビューが view に持つ nsITreeViewインタフェース

nsITreeView によって提供されているインタフェースは非常に一般的なものであるのですが、ビューに直接実装されたメソッドとプロパティは非常に特殊なものです。時々、相互作用する 4 つの手段のうち、主に使用している手段とは別の手段の使用が必要となることがあります。

JavaScript では以下のように、あなたの Places ツリービューを参照するために treeView という名前の変数を宣言してください。

var treeView = document.getElementById("myPlacesTreeView");

手段 1 と手段 2 が、この変数に対して適用できます。

ツリービューの view は、treeView.view が持っているオブジェクトです。手段 3 と手段 4 をこのオブジェクトに適用できます。

var treeViewView = treeView.view;

便利なメソッド

ビルトインツリービューは幅広く使用されるものの複雑であるので、よく使われる処理を簡単に記述するために、いくつかの便利なメソッドがツリービューに直接実装されています。

警告: バグ 476952 が修正されるまでは、 place 属性や place プロパティと併用して、これらのメソッドを使用することによって問題が発生するかもしれません。
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 (文字列型)

便利なプロパティ

上述のメソッドのように、いくつかの便利なプロパティがビルトインツリービューに直接実装されています。

警告: バグ 476952 が修正されるまでは、 place 属性や place プロパティと併用して、これらのメソッドを使用することによって問題が発生するかもしれません。
プロパティ 詳細
flatList boolean true であれば、コンテナの内部を表示しません。 onOpenFlatContainer プロパティによってコンテナの開閉が設定されている際に機能します。 少なくとも flatList 及び showRoot の一方は false である必要があります。
onOpenFlatContainer string コンテナが開閉された際に呼び出されます。 flatList プロパティがtrueである場合のみ適用されます。 aContainerという名前の引数として nsINavHistoryResultNode を渡します。 aContainernsINavHistoryContainerResultNodeQueryInterfaceします。
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 の実装の方法について述べています。

ビルトインツリービューの実態は 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 ビューについての情報が記述されています。

Gecko 1.9.2 が必要(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

Firefox 3.6 以前

(いくつかの menu 要素の子孫である)空の menupopup 要素の type 属性に "places" という値を設定することで、ビルトインメニュービューは生成されます。

<menu>
  <menupopup type="places" />
</menu>

place 属性または place プロパティは、menupopup 要素に設定してください。

Gecko 2.0 が必要(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

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 で実装されています。メニューについての一般的な情報は menupopupmenu のリファレンス及び Popup Menus チュートリアルを参照してください。

ツールバービュー

toolbar 要素の子孫であるいくつかの toolbaritem 要素の子孫である)空の hbox 要素の type 属性に "places" という値を設定することで、ビルトインツールバービューは生成されます。

<toolbar>
  <toolbaritem>
    <hbox type="places" />
  </toolbaritem>
</toolbar>

place 属性または place プロパティは、 hbox 要素に設定してください。

ツールバービューは browser/components/places/content/toolbar.xml で実装されています。ツールバーについての一般的な情報は toolbaritemtoolbar のリファレンス及び 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 は与えられた nsINavHistoryResultObserverresult プロパティに設定されます。あなたは result プロパティを明確に設定するべきではありません。 result とビューの接続を解除するには、 あなたの結果から removeObserver(view) を呼び出してください。

循環参照に注意してください。ビューと result は、両方とも互いへの参照を持ちます。 JavaScript のガベージコレクションによってこれらのオブジェクトが解放されるためには、 result.removeObserver(view) を呼び出すことによって、この循環を消去する必要があります。(例えば、ビルトインツリービューでは自動的にこの作業を行っています。ツリーが破棄された、または別の nsITreeView とツリーが関連付けられた場合、ツリーは古い方の nsITreeViewtree プロパティを null に設定します。 nsITreeView を実装したオブジェクトは nsINavHistoryResultObserver も実装しているため、ビューは removeObserver() を呼び出し、 result から自分自身への接続を解除します。)

nsINavHistoryResultObserver が使用されている場合でも正確な内容でしょうか?

カスタムツリービューの作成

カスタム Places ツリービューは多くのことができます。要求するアイディアを得るには、前述した『ツリービューの使い方』の章を参照してください。一般的に、カスタム nsITreeView は多くの作業を要します。カスタム nsITreeView に慣れ親しんでいない場合は、 XUL チュートリアルの Custom Tree ViewsTree View Details のページを参照してください。ここには関連情報について述べます。

幸運にも、あなたの目的に合致したビルトインツリービューの一部を拝借することが可能です。ビルトインビューである PlacesTreeView の実態である JavaScript プロトタイプは、特に役立つ nsINavHistoryResultTreeViewernsINavHistoryResultObservernsITreeView の 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 を保存するためにこの値を使用します。

関連記事

ドキュメントのタグと貢献者

 このページの貢献者: ethertank, saneyuki_s, Gomita, saneyuki, Kohei, Potappo
 最終更新者: ethertank,