Step2 基本的要素

まずは簡単にlzxファイルの構成から。

ルート要素は必ず <canvas> になります。

<canvas width="300" height="200" bgcolor="#eeffff">
</canvas>

これがメインとなるキャンバスで、この中に各コンポーネントを配置していくという
形になります。
例えば、テキストを表示させたかったら以下のようにします。

<canvas>
  <text fgcolor="red" fontsize="20">sample</text>
</canvas>

このように、テキスト表示には <text> 要素を使います。

配置位置

では、今度はテキストを二つ表示させてみます。

<canvas>
  <text fgcolor="red" fontsize="20">sample</text>
  <text fgcolor="blue" fontsize="15">another</text>
</canvas>

確かに二つ表示されましたが、テキストが重なって表示されてしまいます。
配置位置を指定していない場合、
両方とも「キャンパスの左上」に表示されるのがlzxの仕様です。

配置位置を指定する簡単な方法は、直接座標を指定する方法です。

<canvas>
  <text fgcolor="red" fontsize="20">sample</text>
  <text x="100" y="50" fgcolor="blue" fontsize="15">another</text>
</canvas>

座標を省略すると、x="0" y="0" が適用されます。
ピクセル指定の他、"50%" のようなパーセンセージ指定も可能です。

レイアウト

ビューを連続して並べるような場合には、レイアウトを指定することができます。

<canvas>
  <simplelayout axis="x" />
  <text fgcolor="red" fontsize="20">sample</text>
  <text fgcolor="blue" fontsize="15">another</text>
</canvas>

<simplelayout> は、ビューを横(縦)方向に連続して並べます。
このように、レイアウト要素は「レイアウトを指定したいビューと兄弟関係の要素として」配置します。

ファイルのインクルード

lzxファイルは、内部に他のlzxファイルを取り込むことが出来ます。

<include href="library.lzx"/>

このように、<include> 要素を使います。

コメント

lzxはXML形式なので、XMLスタイルのコメントが使えます。

<canvas>
  <!-- comment -->
</canvas>

また、lzx独自のコメントスタイルも用意されています。

<?ignore
  <some tag ...>
  <!-- comment -->
?>

<?ignore ～ ?> で囲んだ中がコメントとして扱われます。
上の例のように、XML形式のコメントをまとめてコメントアウトするときなどに便利です。

デバッグ

OpenLaszlo には便利なデバッグ機能があります。
Eclipse の Display ビューのようなウィンドウが用意されていて、
ここにデバッグ用ログを出力したりすることができます。

デバッグを有効にするには、canvas タグに debug 属性を追加します。

<canvas debug="true">
  ...
</canvas>

デバッグウィンドウにログを出力するには、Debug.write メソッドを使います。

<script> 
  Debug.write("Well now how about that!");
</script> 

スクリプティング

lzxではJavaScriptに匹敵するスクリプトを記述することができます。
DOMを使ったことがある人ならば、おそらく何の抵抗もなく使いこなせるでしょう。

<canvas>
  <script>
  function func1() {
    button1.setAttribute("text", "ok.");
  }
  </script>
  <button id="button1" onclick="func1()">Push!</button>
</canvas>

HTMLと同じように、<script> ～ </script> 内にスクリプトを定義して
それを外部から呼び出すことができます。
上の例では、ボタンを押下したときの onclick イベント発生時に
func1() メソッドを呼び出しています。

id と name

直前の例では、ボタンをIDにより指定していました。

<button id="button1" />

DOMと同様、idは同一ファイル内でユニークでなければなりませんが
どこからでも参照可能です。つまり、ID指定にツリー構造は関係ありません。

それに引き換え、nameによる指定方法もあります。

<canvas>
  <view name="view1">
    <button name="button1" />
  </view>
  <script>
    Debug.write(view1.button1);
  </script>
<canvas>

このように、name指定時はツリー構造を意識する必要があります。
その代わり、同一要素内でなければ複数の要素で同じnameを使うことができます。

<view name="view1">
  <button name="button1" />
</view>
<view name="view2">
  <button name="button1" />
</view>
<script>
  Debug.write(view1.button1);
  Debug.write(view2.button1);
</script>

ちなみに、JavaScriptではIDを指定するときには
getElementById を使う必要がありましたが
OpenLaszlo では id も name も区別することなくそのまま使うことができます。

Attribute と Method

全てのクラスには、属性(Attribute)とメソッド(Method)が定義されています。
一つ注意することがあり、それは属性を設定する方法です。
例えばボタンのtext属性を変更したい場合、

button.text = "ok";

ついこう記述してしまいがちですが、実際にはこれではうまくいきません。
確かに属性は変更されるのですが、それをビューに「通知」しないと
画面上に反映されないのです。

button.setAttribute("text", "ok");

こうすれば、属性の変更と共にビューにその内容が通知され
画面上の表示も更新されます。

結論としては、属性を変更するときには必ず setAttribute メソッドを使いましょう。

式の記述

以下のようなlzxを考えます。

<canvas width="400" height="300">
  <button x="200">Push</button>
</canvas>

これは、画面の真ん中(付近)にボタンを表示します。
しかし、キャンバスの大きさを変えるとボタンの座標まで同時に変更しなければなりません。

<canvas width="500" height="300">
  <button x="250">Push</button>
</canvas>

キャンバスの大きさに関わらず、常にボタンを真ん中に表示するには
キャンバスサイズに応じてボタンのサイズを決定してやればいい事になります。

<canvas width="500" height="300">
  <button x="${parent.width / 2 - this.width / 2}">Push</button>
</canvas>

このように、${...} という記述法を使うと、定数値に式を埋め込むことが可能です。
JSP2.0 などではおなじみの方法ですね。

parent と immediateparent

以下のようなキャンバスを考えます。

<canvas>
  <window width="120" height="100">
    <button x="${parent.width / 2 - this.width / 2}">Push</button>
  </window>
</canvas>

<window> はその名の通りウィンドウを表す要素で、
ドラッグによる移動やサイズ変更などが可能なコンポーネントです。

一見、このサンプルはウィンドウの中央に表示されるように思えますが
実際には「若干右に」表示されてしまいます。
これは、ウィンドウのサイズは120ですが
ウィンドウの枠などがある関係上、実際に各コンポーネントが配置される
「コンテンツエリア」はそれよりも小さいからです。

これを解決するには、以下のようにします。

<canvas>
  <window width="120" height="100">
    <button x="${immediateparent.width / 2 - this.width / 2}">Push</button>
  </window>
</canvas>

immediateparent というキーワードが先程と異なるところです。
parent は純粋に window を返しますが
immediateparent はウィンドウ内のコンテンツエリアを返します。
試しにデバッグウィンドウ上で確認してみると…

parent.width => 120
immediateparent.width => 101

これだけの差があります。
この差のせいで、parent を指定した最初の例では若干右に表示されてしまったのです。

ここで一つ OpenLaszlo の優れたところを紹介しましょう。
上の例で、ウィンドウのサイズを画面上で変更させてみます(ウィンドウ右下のアイコンをドラッグ)。
すると、ボタンのそれに応じてウィンドウの中央に配置されるのです。
つまり、式による記述は「動的に更新される」という事です。
これはなかなか便利な機能なので、是非覚えておきましょう。