「Places/ツリーの作成」の編集履歴（バックアップ）一覧はこちら

「Places/ツリーの作成」(2014/11/03 (月) 18:40:48) の最新版変更点

追加された行は緑色になります。

削除された行は赤色になります。

#contents()

*Places ツリーを作る
tree タグでツリーを作ったときに type="places" とし、スタイルシート content/places/places.css を読み込むと、XBLバインディングで Places ツリー本体の content/places/tree.xml が読み込まれる。Places ツリーには content/places/controller.js と content/places/treeView.js も必要で、それらは content/places/placesOverlay.xul でまとめて読み込める。よって基本は
#highlight(xml){{
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://browser/content/places/places.css"?>
<?xml-stylesheet href="chrome://browser/skin/places/places.css"?>
<?xul-overlay href="chrome://browser/content/places/placesOverlay.xul"?>
<window>
  <tree id="sample-view"
        type="places">
    <treecols>
      <treecol primary="true"/>
    </treecols>
    <treechildren view="sample-view"/>
  </tree>
</window>}}
skin の places.css は必ずしも必要では無いが、Firefox 本体と統一感を出すなら読み込むべき。
placesOverlay.xul には標準の右クリックメニューやツールチップも定義されている。

これだけだとまだ Places データと接続されていない。tree の place 属性に [[Places URI>https://developer.mozilla.org/ja/docs/Places_query_URIs]] を指定する。URI が完全に固定化されてるなら XUL に直接書いてもいいが、普通は JavaScript を使用する。
#highlight(javascript){
var view = document.getElementById("sample-view");
view.place = "place:queryType=1&folder=" + PlacesUIUtils.allBookmarksFolderId;}

*ツリークリック時の動作を設定
tree 要素に onclick 属性を設定する。
#highlight(xml){{
<tree id="sample-view"
      type="places"
      onclick="handleTreeClick(this, event);">
</tree>}}
#highlight(javascript){{
function handleTreeClick(aTree, aEvent) {
  if (aEvent.button === 2) {
    return;
  }

  // クリックした行、列、オブジェクトを取得
  var tbo = aTree.treeBoxObject;
  var row = { }, col = { }, obj = { };
  tbo.getCellAt(aEvent.clientX, aEvent.clientY, row, col, obj);

  // twistyはフォルダ開閉の＋画像の事。そこやツリー外をクリックした場合は何もしない。
  if (row.value == -1 || obj.value == "twisty") {
    return;
  }

  // クリックしたセル内のアイコンの座標を取得し、
  // アイコンより左（文字方向によっては右）をクリックしていた場合は何もしない。
  var x = { }, y = { }, w = { }, h = { };
  tbo.getCoordsForCellItem(row.value, col.value, "image", x, y, w, h);
  var isRTL = window.getComputedStyle(this.tree, null).direction == "rtl";
  if (isRTL) {
    if (aEvent.clientX > x.value) return;
  } else {
    if (aEvent.clientX < x.value) return;
  }

  // あとはお好きなように
  var node = aTree.selectedNode;
} }}

#contents()

*Places ツリーを作る
tree タグでツリーを作ったときに type="places" とし、スタイルシート content/places/places.css を読み込むと、XBLバインディングで Places ツリー本体の content/places/tree.xml が読み込まれる。Places ツリーには content/places/controller.js と content/places/treeView.js も必要で、それらは content/places/placesOverlay.xul でまとめて読み込める。よって基本は
#highlight(xml){{
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<?xml-stylesheet href="chrome://browser/content/places/places.css"?>
<?xml-stylesheet href="chrome://browser/skin/places/places.css"?>
<?xul-overlay href="chrome://browser/content/places/placesOverlay.xul"?>
<window>
  <tree id="sample-view"
        type="places">
    <treecols>
      <treecol primary="true"/>
    </treecols>
    <treechildren view="sample-view"/>
  </tree>
</window>}}
skin の places.css は必ずしも必要では無いが、Firefox 本体と統一感を出すなら読み込むべき。
placesOverlay.xul には標準の右クリックメニューやツールチップも定義されている。

これだけだとまだ Places データと接続されていない。tree の place 属性に [[Places URI>https://developer.mozilla.org/ja/docs/Places_query_URIs]] を指定する。URI が完全に固定化されてるなら XUL に直接書いてもいいが、普通は JavaScript を使用する。
#highlight(javascript){
var aTree = document.getElementById("sample-view");
aTree.place = "place:queryType=1&folder=" + PlacesUIUtils.allBookmarksFolderId;}

*ツリークリック時の動作を設定
tree 要素に onclick 属性を設定する。
#highlight(xml){{
<tree id="sample-view"
      type="places"
      onclick="handleTreeClick(this, event);">
</tree>}}
#highlight(javascript){{
function handleTreeClick(aTree, aEvent) {
  if (aEvent.button === 2) {
    return;
  }

  // クリックした行、列、オブジェクトを取得
  var tbo = aTree.treeBoxObject;
  var row = { }, col = { }, obj = { };
  tbo.getCellAt(aEvent.clientX, aEvent.clientY, row, col, obj);

  // twistyはフォルダ開閉の＋画像の事。そこやツリー外をクリックした場合は何もしない。
  if (row.value == -1 || obj.value == "twisty") {
    return;
  }

  // クリックしたセル内のアイコンの座標を取得し、
  // アイコンより左（文字方向によっては右）をクリックしていた場合は何もしない。
  var x = { }, y = { }, w = { }, h = { };
  tbo.getCoordsForCellItem(row.value, col.value, "image", x, y, w, h);
  var isRTL = window.getComputedStyle(this.tree, null).direction == "rtl";
  if (isRTL) {
    if (aEvent.clientX > x.value) return;
  } else {
    if (aEvent.clientX < x.value) return;
  }

  // あとはお好きなように
  var node = aTree.selectedNode;
} }}