ファイヤープロジェクト
spacerとboxによるレイアウト
2005-02-19T00:30+09:00   matsu
XULにおけるレイアウトの基本はspacerとboxという要素によるレイアウトらしい.
XULでは各Widgetは左上に詰めて表示される.UI作成の際にはもっと柔軟にWidgetを配置したい.またユーザの実行環境によってディスプレイやウィンドウの大きさはまちまちである.そういった場合を想定してあらかじめWindow内にスペースを挿入して余裕を持たせたい場合もある.そんな時に要素spacerを使用する.要素spacerによってスペースを挿入して表示するサンプルを作成してみた.
例によって,ファイルに保存してMozillaで開くと,文字列が表示される.サンプル中のhboxについては次節に記述した.スペースを挿入するには要素spacerを使用する.属性flexは複数の要素spacerを使用した場合に意味を持つ.すなわち複数のspacerの相対的な大きさを意味する.実際のspacerの大きさは実行時のWindowの大きさなどに依存する.実は属性flexは全XUL要素が持っている.各要素間の相対的な大きさを指定するのに使用する.上記サンプルの二つ目の要素hbox内では三つのボタン間の相対的な大きさが1:2:3であることを示す.
XULでのレイアウトの基本は要素boxによるものである.以下にサンプルを示す.
例によって,ファイルに保存してMozillaで開くと,文字列がいろんな並びで表示される.ただしユニコードで保存しないと日本語は正しく表示されない. サンプルではいくつもの要素labelの並びを要素box,hbox,vboxで制御している.以下にその制御について解説する. まず要素windowのorientがverticalである.これで要素windowの子要素(一つ下の子)は縦にならぶ.要素windowの子要素にはbox,hbox,vboxがある.boxは文字通りwidgetをいれる箱であり,要素windowと同様に属性orientの値により子要素の並びを制御する.属性orientにhorizontal(あるいはvertical)を指定した要素boxは要素hbox(あるいは要素vbox)と等価である.で,要素windowの最初の子要素はhboxである.
<hbox>
<label value="1"/>
<label value="2"/>
<label value="3"/>
</hbox>
hboxの子要素は横に並ぶ.したがって上記三つの要素labelは横に並ぶ.要素windowの次の子要素はhboxである.
<vbox>
<label value="4"/>
<label value="5"/>
<label value="6"/>
</vbox>
vboxの子要素は縦に並ぶ.したがって上記三つの要素labelは縦に並ぶ.要素box,hbox,vboxは入れ子にすることができる.vboxの下にhboxがある場合は
<vbox>
<hbox>
...横の並び...
</hbox>
<hbox>
...横の並び...
</hbox>
</vbox>
横の並びが縦に並んでおり,hboxの下にvboxがある場合はその逆である.
matsu(C)
Since 2002
Mail to matsu