LZXでは画面に表示される部品，たとえば<view>（四角いエリア⁠）⁠，<text>（文字列⁠）⁠，<button>（ボタン）など，そういうモノを総称してビューと呼んでいます。今回はビューのレイアウト方法の基礎事項を解説し，最後にちょっと背伸びですが応用としてスライドショーを作ってみます。本記事中の動作サンプルはFlashのみですが，LZXでは同じソースでHTML5アプリも作れますので，Flash非対応デバイスでも動くスライドショーを作れることになります。

座標について

画面の座標

画面の横方向にX座標，縦方向にY座標があります。左上が原点で座標は(0,0)です。

X座標は原点から右方向に正の値，左方向に負の値をとります。Y座標は原点から下方向に正の値，上方向に負の値をとります。デフォルトではリスト1のサンプルのようにすべて左上に配置されます。HTMLだと書いた順番に表示されますが，LZXの場合は当然ながら左上に重なります。

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="50" bgcolor="#ff0000"/>
  <button>ボタン</button>
  <text>こんにちは</text>
</canvas>

座標指定

リスト1ではボタンと文字列が重なってしまっているので，文字列のほうを他の位置に配置してみましょう。<text>のx属性とy属性を直接指定して，好きな場所に配置することができます。座標の値の単位はピクセルになります。

リスト2は，文字列「こんにちは」を右方向に100ピクセル，下方向に20ピクセルの位置に配置した例です。

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="50" bgcolor="#ff0000"/>
  <button>ボタン</button>
  <text x="100" y="20">こんにちは</text>
</canvas>

前後関係

Z座標（という表現はOpenLaszloにはないですが⁠）⁠，すなわちビューが重なった場合に手前に表示するか奥に表示するかといった前後関係はソースに記述された順番で決まります。上のタグから順番に画面に配置されていくので下のタグほど前面に表示されます。

リスト3のサンプルでは赤黄青というソースの順番に奥から手前に向かって表示されています。

<canvas proxied="false" bgcolor="0xffffcc"> 
  <!--赤--><view width="100" height="50" bgcolor="#ff0000"/>
  <!--黄--><view x="20" y="20" width="100" height="50" bgcolor="#ffff00"/>
  <!--青--><view x="40" y="40"  width="100" height="50" bgcolor="#0000ff"/>
</canvas>

この前後関係は動的に変更することができます。たとえばビューをクリックしたときに前面に表示させるには，bringToFront()というメソッドをonclick時に実行すればOKです。

onclickは該当ビューをクリックした時のイベントハンドラです。bringToFront()についているthisというのは自分自身つまりスクリプトが書かれているビュー自身を指します。

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="100" height="50" bgcolor="#ff0000" onclick="this.bringToFront()"/>
  <view x="20" y="20" width="100" height="50" bgcolor="#ffff00" onclick="this.bringToFront()"/>
  <view x="40" y="40"  width="100" height="50" bgcolor="#0000ff" onclick="this.bringToFront()"/>
</canvas>

親子関係

タグの親子関係とレイアウトには密接な関係があります。子タグの座標系は親タグが基準となります。

親の違いによる座標系の違い

ビューのデフォルト配置位置は原点(x,y)=(0,0)ですね。厳密に言うと親タグの(0,0)になります。

たとえばリスト5ではボタン1の親は<canvas>なので画面全体の左上が原点になります。一方，ボタン2については黄色い四角の<view>が親タグなので，その中の左上が原点でありデフォルトの配置位置になります。もちろん黄色い四角を他の場所に移動すればボタン2もついてきます。タグごとにレイヤーを持っているイメージですね。

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button>1</button>
  <view x="50" y="20" width="100" height="50" bgcolor="#ffff00">
        <button>2</button>
  </view>
</canvas>

兄弟関係

兄弟関係とは同一階層にあるビュー同士のことです。リスト4でいうと赤黄青のビュー，リスト5でいうとボタン1と黄色い四角が兄弟です。bringToFront()は兄弟関係にあるビュー間で機能するメソッドです。

親子関係の場合は子が前面に，兄弟関係の場合は弟が前面に，それぞれ表示されます。階層構造とレイアウトの関係の深さからいって，ソースのインデントはきちんとしておくのが良いです。