XUL と XBL メモ

　

XULとXBL

Mozilla Developer Center にあるチュートリアルを教科書にしてます、
分かり難い部分を整理中。

XULのポイント

  • 終了タグのあるなしで二通りの書き方をすることがある。
    （短い文字列を扱う場合と、長い内容を扱う場合）
    <tag attrib="hogehoge"/>
    <tag>　hogehogehogehogehogehogehogehoge　</tag>
    <tag />空タグとして用いることもある。

    変種として、短い文字列の場合属性で指定して、長い文字列の場合は別名の専用タグを使うというケースもあります。
  • XBLの、onset属性に対応する setterタグ
  • XBLの、onget属性に対応する getterタグ

  • 控えのタグを外観設定の用途に使うという独特な使い方があります。
    （rowに対するcolumn、listcolなど）

  • 数合わせだけのためにタグを置くことがある。(gridなど)
  • gridタグはtableタグのように使えない。rowspanの制限


  • リストボックスは汎用性が高い。表組したい場合は、複数リストボックスを利用するとよいでしょう。
  • ツリーメニューは使いこなすのに難易度高い(要スクリプト)うえに紛らわしい(単純なツリーメニューはリストボックスに似た外観)。

    外観を決めるレイアウト手段

    stack要素

    deck要素

    tabbox要素

    要素の上に重ねて配置できる。例えばプログレスバーに文字等をオーバーラップ表示させたりするときに使える。
    最初の子要素が一番下。 left, topで位置を連続的に指定すると要素を動かすることができる。座標はウインドウ内の左上を起点。

    複数重なったパネルを紙芝居などのよう切り替えられる。単体ではなにできないので切替えにはボタン等で制御する必要がある。下に重なるパネルは透けない。

    deck にタブボタンがついたもの
    （タブボタンのデザインはOSごとに依存するので同じUIを再現するのは難しい。
    例えばMacOSXのタブは他のOSと違い強制中央寄せでなので使い難い ;_;）

    style属性

    box要素

    grid要素

    CSS(スタイルシート)を使う。
    left, top,width ,height, z-index

    基本
    ボックス単位で、水平垂直に中のものを配置します。
    box要素は汎用で、配置方向をorient属性(holizontal, vertical)がある。それを専用のタグにしたのがそれぞれhbox vbox要素
    変種にgroupboxがある。

    grid tableタグとは似ているようで違う。
    行と列を別々に定義。

    grid タグ内の子要素で、
    行はrows 内　row 要素内、
    列は columns 内　column要素内。

    通常は（行）row内にコンテンツを記述し、
    （列）column で、サイズやスタイル
    (flex, widthなど)を指定することが多い。
    行と列どちらをメインにしたいかだけの違いです。

    全行/列spanしたい場合はrows,cols内にコンテンツを置く。 tableタグとは違い、任意の数のspanは不可

    splitter要素

    iframe要素

    browser要素
    tabbrowser要素
    フレームを閉じたりする仕切りのこと 。
    grippyを挟んでどちら向きに折り畳むか指定できる。     		　他のURLにある文書を読込むことができる。　 iframeと似ているが、ページ履歴や操作メソッドを持つ。
    それぞれの要素を組み合わせる事も可能。

    内容となる要素 (一部)

  • 特になにも考えず普通にボタンを付けるならhbox要素の中にボタン要素を入れると、ちょうどよい大きさで表示される。
    <hbox><button label="nofrex"　 /></hbox>
  • hboxで囲わずそのまま置いた場合、ブラウザのウインドウの横幅一杯にボタンが表示される。 <button label="width"　 />
  • XBLを使いバインディングすることができる。XULファイルへ書かず、XBLに内容を記述することもできる。
    項目 重要メモ 共通 備考 寄り道
    テキスト
  • label 要素:
  • description 要素:
      		•  それぞれ value 属性に書かれたものがテキストとして表示
    • control属性をつけれるのはラベルだけ。
    • control 属性は id 名と関連づけできる。 クリックすると関連づけた id にフォーカスが移ったりする 
      • 通常は

<label value="〜〜〜" />

だけど

<label>〜〜〜〜〜〜〜〜〜
〜〜〜〜〜〜〜</label>
      このようにすると、自動改行を伴った長文もOK
      テキスト入力
    • textbox要素:
      		•
    • multiline 属性を true にすると複数行もOK
    • value属性 に書かれたものがデフォルト表示
    • disabled 属性を true にすると無効に
      		• 複数行なら rows と cols が指定できる
      チェックボックス
      ラジオボタン
    • checkbox要素:
    • radio要素:
    • radiogroup要素:
      		•  label属性にかかれたもの。 
      <checkbox id="dou"
     checked="true" label="hokkaidou"/>
      
<radiogroup>
      
<radio id="town" selected="true"
    label="katsushika"/>
      
<radio id="prefecture" label="tokyo"/>
      
</radiogroup>
      もちろん単体でラジオボタンを置いて使うこともあります。       		radiogroupはラジオボタンを囲んだ中から
      一つだけ選択可能。グループ内の他のは選択できなくなる。
      画像
    • image要素:
      • HTMLの場合と違う。       		なし
    • <image src="blahblah.png"/>
    • <image id="foobar"/>
      スタイルシートを使っても画像を指定できるよ
      #foobar{　list-style-image: url(画像までのパス); }でOK
      • 　

      イベントハンドラ

      配置されたボタン等を入力やスクリプトと結びつけるもの。
      ウインドウ↓↑
      タブ 　　↓↑
      ボックス↓↑
      例えば「ウインドウ」要素の中にある「ボックス」要素の中にある「タブ」の中にある「ボタン」要素が押された。
      それで押されたというイベント(click)が発生しました。
      イベント発生順: 「ウインドウ」→「タブ」→「ボックス」→「ボタン」→「ボックス」→「タブ」→「ウインドウ」 タブ、ボックスに onclick属性と、アラートダイアログ を仕込んでおけば、ボタンをクリックした時に各要素がイベントを捕捉した時点でそれぞれダイアログが表示されるでしょう。

      　 イベントを定義するにはイベントリスナーを記述する必要があり、Script側かXUL側かで違ったアプローチの仕方があります。 イベントリスナーはイベントが起きるかどうか、聞き耳をたててます。command は何でもOKなイベントです。 どんなイベントでも捕捉されます

      イベントハンドラ

      内容

      備考

      addEventListener
      (Script側から リスナーとスクリプト(関数)を結ぶ)

      　

      button = getElementbyId(id);
      button.addEventListener( 'Event_name', function_name ,true);

      　

      		Event_name には次のようなイベントが指定される。

      command
      click
      dblclick
      mousedown
      mouseup
      mouseover

      < handler>要素
      (XBLで定義したcontentに対するイベント)

      　

      		XBL <handlers>< handler>
      <handler event="Eventname" action="code"/>

      　

      handlers要素内の handler 要素

      command
      click
      dblclick
      mousedown
      mouseup
      mouseover

      attribute of
      oncommand
      属性イベントリスナー
      ( XUL側から リスナーとスクリプト(関数)を結ぶ )

      　

      <element oncommand="code" />
      onclick="code"
      ondblclick="code"
      onmousedown="code"
      onmouseup="code"
      onmouseover="code"

      　

      イベント名の前に Onという接頭詞を付けた属性名


      from http://www.w3.org/TR/2000/CR-DOM-Level-2-20000307/events.html#Events-flow-basic
      イベント浮上（event bubbling）
      イベント捕獲（event capture）use addEventListener method
      イベントキャンセル（event cancel) use preventDefault method
      イベント降下（tunneling）なし

      EventName

      desc

      Bubble

      Cancel

      etc

      click

      mousedown
      mouseup
      click

      o

      o

      screenX, screenY, clientX, clientY, altKey, ctrlKey, shiftKey, metaKey, button

      mousedown

      o

      o

      mouseup

      o

      o

      mouseover

      relatedNode exsist

      o

      o

      mousemove

      o

      x

      mouseout

      relatedNode enter

      o

      o

      HTML event types

      load

      x

      x

      unload

      x

      x

      abort

      page loading is stopped

      o

      x

      error

      o

      x

      select

      text in a text field.

      o

      x

      change

      INPUT, SELECT change

      o

      x

      submit

      o

      o

      reset

      o

      x

      focus

      x

      x

      blur

      x

      x

      resize

      o

      x

      scroll

      o

      x

      リストとメニュー

      リストボックス
 menulist /listbox
 


1行の場合
　listbox　rows="3
　listitem label="　"　

複数行の場合（セル数は統一しておく）
listbox
　　　 listhead
 　　　　　　　　-　listheader label　見出し行
 　　　　　　　　-　listheader label　 crop 属性
 　　　　　　　　-　listheader label
　　　 listcols
 　　　　　　　　-　listcol 
　　　　　　　　-　listcol 　flex など属性設定用
　　　　　　　　-　listcol 

　　　listitem 　-　listcell /label　value
　　　　　　　　-　listcell /label　value
　　　　　　　　-　listcell /label　value

　　　listitem 　-　listcell /label
　　　　　　　　-　listcell /label
　　　　　　　　-　listcell /label

　　　listitem 　-　listcell /label
　　　　　　　　-　listcell /label
　　　　　　　　-　listcell /label


メニューリスト
menulist //  editable="true"
　　　menupopup
　　　　　menuitem 　-　label　 selected
      		メニュー 
      toolbox
　　　toolbar
　　　　　toolbarbutton　 label


toolbox
　　　menubar
　　　　　　menu 
　　　　　　　　menupopup
　　　　　　　　　　　　menuitem　 label

　　　　　　menu 
　　　　　　　　menupopup
　　　　　　　　　　　　　menu 
　　　　　　　　　　　　　　　menupopup
　　　　　　menu 
　　　　　　menuseparator 
　　　　　　menu 

radioは複数の選択肢からひとつを選ぶ。
そのためname属性が必要

 type="checkbox" checked="true"
type="radio" name="　"　　checked="true"
      ツリー
      リストボックスと似ているが、違うもの。特に2x2単一ツリーは紛らわしい。ツリーの入れ子は▼ [+]をクリックすると開閉する。 データを実装するのが面倒なので、データを配列に持った方がよいらしい（RDF等） その違いは、行の入れ子ができる、大量のデータがあっても最低限しか読まないので動作が早い。コンテンツはテキストと画像しか入れられない。 
      


tree
   treecols 列定義
      treecol  id label 見出し部分　 src 見出し画像
      treecol  id label 
   
    treechildren データ本体
          treeitem コンテナ（階層/ツリー入れ子用）
		        treerow データ行
				     treecell　セル
					 
					 

入れ子のあるもの。
tree　enableColumnDrag="true"　見出しドラッグ
   treecols　列定義
      treecol  id label   primary=true 見出し部分、　treecol にprimaryを指定
      treecol  id label 
  
　　  treechildren データ本体
          　　treeitem コンテナ
         		treeitem container="true"   階層ありのコンテナ
          　　            treeitem コンテナ
		                                        treerow データ行
				                                   treecell　セル
		  　　            treeitem コンテナ
		                                        treerow データ行
				                                   treecell　セル


persist属性で状態保存
tree に　onselectハンドラ
getRangeAt(index, start, end) 
isSelected() 


tree.view.selection.
      ツリーの作り方は二種類あって、ビューの扱いにそれぞれ呼び名があります。
      コンテントビューカスタムビュー
      treeitem、 treerow、 treecol タグが必要
      手入力でツリーデータを記述する場合はこれ       		treeitem、 treerow、 treecol タグは不要
      ツリーのデータは配列やRDFから取得する。スクリプトを使って大量のデータを扱うことが前提。
      スクリプトからアクセスするための関数やデータをまとめたビューオブジェクト(連想配列のようなもの)を作る必要がある。
      ツリーからデータを取得する関数があるので、それで範囲を決定したりする。
      これらを定義しなければ、ツリータグを書いても意味が無い。

    • イベントハンドラとして、ツリーを選択した時にonselect属性を使い、スクリプトを実行します。
    • nsITreeView に全プロパティ一覧があります。

      • XBL

      バインド対象のXUL要素に子要素がある場合、バインディングは無効となる、例外としてXBL側にchildren要素を置いてある場合はその位置に要素が来る。
      • Last modified 2007/04/19
      <arolf_infoseek_jp> Tsukubado