OpenLaszloでマルチデバイス対応RIAを作ろう

第5回 LZXによるレイアウト[その2]

この記事を読むのに必要な時間:およそ 7 分

オフセット配置

xoffset,yoffset属性を使うとx軸やy軸の表示位置をずらすことができます。x属性とy属性は元のままで,表示位置だけがずれていることになります。

サンプルでいうと,ボタン3は本来の位置から左に15ピクセル(xoffset="15"),上に10ピクセル(yoffset="10")ずれた場所に表示されています。ボタンの本来の位置と表示位置が異なる,というのをサンプルで確認してみましょう。リスト12のサンプル上で1回クリックしてからTABキーを押すとフォーカス移動と同時にフォーカス枠が出現します。フォーカス枠は本来の位置に来ますのでそれで確認できます。試してみてください。

リスト12 オフセット配置

<canvas proxied="false" bgcolor="0xffffcc">
  <vbox spacing="2" x="20">
    <button>1</button>
    <button>2</button>
    <button xoffset="15" yoffset="10" >3</button>
    <button>4</button>
    <button>5</button>
  </vbox>

リスト12サンプル

コンストレイント

コンストレイントはLZXの強力な機能の1つで,自分や他のビューの属性値を自身の属性値に連動させることができます。これを使いこなせるようになるとレイアウトの構築やメンテナンスがだいぶ楽になります。といってもわかりにくいので早速サンプルで試してみましょう。

使用例1

コンストレイントの書式は${・}で,中に式を書きます。height="${this.width}" のように属性値として指定できます。

サンプル13の例では,1つ目の赤いビューは幅を数値で指定していますが,高さは${this.width}になっています。これは高さを幅と同じにするという意味で,つまり正方形を作ることができます。

2つ目の${this.width*2}は幅の2倍,3つ目の${this.width/2}は幅の半分の数値をそれぞれ表します。

リスト13 幅と高さの連動

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="5" axis="x"/>
  <view width="50" height="${this.width}" bgcolor="red"/>
  <view width="50" height="${this.width*2}" bgcolor="red"/>
  <view width="50" height="${this.width/2}" bgcolor="red"/>

リスト13サンプル

使用例2

スライダーの値をビューの幅に連動させた例です。<slider>を動かすとその値がvalueという属性にセットされます。その値を赤いビューの幅の値(width="${sl.value*2}")として取り込んでいます。

リスト14 スライダーの値と幅の連動

<canvas proxied="false" bgcolor="0xffffcc">
  <simplelayout spacing="20"/>
  <view width="${sl.value*2}" height="50" bgcolor="red"/>
  <slider id="sl" minvalue="10" maxvalue="100" />
</canvas>

リスト14サンプル

使用例3

スライダーの値をビューのx属性に連動させた例です。x="${parent.width-sl.value}"は,1つ上の階層のビューの幅(parent.width)から,スライダーの値(sl.value)を引いた値をx属性の値として連動させています。ようするにスライダーと逆方向に動きます。

リスト15 スライダーの値とxの連動

<canvas proxied="false" bgcolor="0xffffcc">
  <vbox width="100" spacing="20">
    <view x="${parent.width-sl.value}" width="10" height="10" bgcolor="red"/>
    <slider id="sl" minvalue="10" maxvalue="100" />
  </vbox>
</canvas>

リスト15サンプル

使用例4

ウインドウを動かしたりサイズを変更すると,赤い四角の大きさや縦方向の位置が変わります。

リスト16 幅,高さ,y属性の連動

<canvas proxied="false" bgcolor="0xffffcc">
  <vbox y="${win.y}" width="${win.width}" height="${this.width}" bgcolor="red"/>
  <window id="win" x="50" width="100" height="100" resizable="true"/>
</canvas>

リスト16サンプル

著者プロフィール

ason(あそん)

京都の在宅ITエンジニア。サーバやネットワーク系が得意。初めて触った言語はOpenLaszlo。現在WebプログラマとしてHTML,CSS,PHP,CMSに詳しくなってきたところ。デスメタルドラマー。

URL:http://xtter.openlaszlo-ason.com/