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

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

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

レイアウト例

これまでに解説したテクニックを使って,Webサイトでよくある画面のレイアウトを2つほど構築してみます。

ログイン画面

簡単なログイン画面を作ってみます。文字は<text>,入力欄は<edittext>,ボタンは<button>を使います。

リスト17 ログイン画面

<canvas proxied="false" bgcolor="0xffffcc">
  <!-- (1) -->
  <view width="200" height="150" bgcolor="teal">
    <!-- (2) -->
    <view width="${parent.width-4}" height="${parent.height-4}" align="center" valign="middle" bgcolor="silver">
      <!-- (3) -->
      <vbox y="10" align="center" >
        <text>ログイン</text>
        <edittext/>
        <text>パスワード</text>
        <edittext password="true"/>
        <view height="10"/><!-- (4) -->
        <button>ログイン</button>
      </vbox>
    </view>
  </view>
</canvas>

リスト17サンプル

リスト17を解説します。(1)はログインボックス全体のエリア用のビューです。

(2)は幅,高さとも親ビューより4ピクセル少ないビューで,alignとvalignで中央に配置しているので,まわりに2ピクセル幅の枠線が出ることになります。このように大きい四角の中に小さい四角を入れるとボーダー付きの四角ができあがります。

(3)は文字列や入力欄などの部品を入れるビューです。<vbox>なのでタグ内の部品は縦に自動配置します。

(4)の<view height="10"/>とは高さ10ピクセルの透明のエリアです。入力欄とボタンの間隔をあけるためだけに配置しました。 このようにすると自動レイアウトの機能をそのまま使いつつ,位置を調整することができます。

コンテンツ画面

業務アプリやホームページなどでよく見るような画面レイアウトを作ってみます。まず,上段,中段,下段のビューを縦に並べます。中段はさらに横方向に左サイド,コンテンツエリア,右サイド,というふうに並べます。属性の値はコンストレイントを使ってうまく連動させるようにします。

リスト18 画面レイアウト

<canvas proxied="false" bgcolor="0xffffcc">
  <stableborderlayout axis="y"/>
  <!-- (1)上段 -->
  <view width="${parent.width}" height="50" bgcolor="red">
    <text>ヘッダ</text>
  </view>
  <!-- (2)中段 -->
  <hbox width="${parent.width}">
    <stableborderlayout axis="x"/>
    <!-- (2-1)中段 左 -->
    <vbox width="100" height="${parent.height}" bgcolor="yellow">
      <text>左サイド</text>
    </vbox>
    <!-- (2-2)中段 中 -->
    <vbox height="${parent.height}">
      <text>コンテンツエリア</text>
    </vbox>
    <!-- (2-2)中段 右 -->
    <vbox width="70" height="${parent.height}" bgcolor="yellow">
      <text>右サイド</text>
    </vbox>
  </hbox>
  <!-- (3)下段 -->
  <view width="${parent.width}" height="30" bgcolor="green">
    <text>フッタ</text>
  </view>
</canvas>

リスト18サンプル

著者プロフィール

ason(あそん)

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

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