gihyo.jpサイトのロゴ

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

第3回OpenLaslzoのプログラミング言語「LZX」の基本

2010-11-26

LZXの基本文法

LZXとはOpenLaslzoの独自のプログラミング言語の名称です。LZXで書くプログラムソースファイルはXMLです。LZXの基本的な文法はXMLに準拠します。

まず、XMLとしてのLZXの記述ルールについて解説します。LZXに限っていえばXMLの文法について本格的に勉強する必要はありません(筆者もしていません)。本記事の内容をおさえておけば十分です。

終了タグが必須

開いたタグは必ず終了タグで閉じます。閉じなくても動くHTMLと違って厳格です。

リスト1 タグは必ず閉じる

<view></view>

<view>
</view>

タグが1行で完結する場合はリスト2のように書きます。囲むべき要素がないので空要素タグといいます。空要素タグはたとえばXHTMLでよく使われる<br />です。

リスト2 空要素タグ

<view />

入れ子は正しく

タグは入れ子にできますが、親子関係は正しくする必要があります。

リスト3 タグの入れ子

正しい例：
<view><button>ボタン</button></view>

間違った例：
<view><button>ボタン</view></button>

コメントの書き方

LZXはXMLとスクリプトの2本立てで構成されており、それぞれにコメントの書き方があります。

リスト4 XMLのコメント

<!-- XMLのコメント(1行) -->

<!-- 
XMLのコメント(複数行) 
XMLのコメント(複数行) 
XMLのコメント(複数行) 
-->

XMLのコメント文では、<!-- ・・・ --> で囲んだ範囲の中に -- を含めることができません。本文としての -- なのか、コメント終了なのか区別がつかないからです。コメント文を含む広い範囲をコメントアウトしたくても、リスト5のような書き方ではコメントアウトできません。でもこういう場合はリスト6のように <?ignore ・・・ ?> を使えば、コメント文も含めてコメントアウトできます。

リスト5 間違ったコメントアウト

<!--
  <!-- コメント -->
  <text>Hello</text>
  <!-- コメント -->
  <text>World</text>
-->
リスト6 正しいコメントアウト

  <?ignore
     <!-- コメント -->
     <text>Hello</text>
     <!-- コメント -->
     <text>World</text>
  ?>

スクリプトのコメントはリスト7のとおり。スクリプトは<script>、<handle>、<method>といったスクリプト用のタグの中に既述します。

リスト7 スクリプトのコメント

<script>
 // スクリプトのコメント(1行)

 /* スクリプトのコメント(1行) */

 /* スクリプトのコメント(複数行)
 スクリプトのコメント(複数行)
 スクリプトのコメント(複数行) */
</script>

大文字小文字の区別あり

タグ名は大文字小文字の区別があります。たとえば<view>、<view>、<view>は別物です。

属性名も同じく大文字小文字の区別があります。たとえば<view width="100">、<view WIDTH="100">、<view Width="100">は別物です。

タグの中に < や > を使いたい場合

LZXはXMLなので、タグの中に < や > といった記号は使えません。タグの一部なのか文字なのか区別がつかないからです。そうはいってもスクリプトを記述する場合、たとえばforループ等を使うときには < を使わざるを得ません。< は &lt; のように実体参照を使えば問題ないのですが、手間がかかるし読みにくいですね。通常はCDATAセクションと呼ばれる<![CDATA[ ～ ]]> で囲みます。

リスト8とリスト9は同じ処理をするスクリプトです。<![CDATA[ ～ ]]> の有無と、forループ内の < の表記が異なります。

リスト8 実体参照で記述（<を&lt;で記述）

    <handler name="onclick">
      for (var i=0; i &lt; 3; i++) {
        v.animate('rotation',360,1000,true,{'motion':'linear'});
      }
    </handler>
リスト9 CDATAセクションで記述(こちらを推奨)

    <handler name="onclick"><![CDATA[
      for (var i=0; i < 3; i++) {
        v.animate('rotation',360,1000,true,{'motion':'linear'});
      }
    ]]></handler>

LZXの基礎

LZXでは独自のタグを使用します。OpenLaszloのリファレンスを見ながら1つずつ習得する必要があります。いくつか基本的なものを簡単に紹介します。

※OpenLaszloリファレンスはダウンロードした中に入っており、ローカルの http://localhost:8080/openlaszlo-4.9.0/docs/reference/index.html で閲覧可能です。OpenLaszlo本家サイトにも同じものがあります。

<canvas>

<canvas>はLZXの最上位に位置するルート要素のタグです。1つのアプリに1つだけ必要です。HTMLでいう<html>みたいなものですが、1つのアプリが複数のLZXファイルで構成される場合でも<canvas>は全ファイル中で1つだけ、というのがHTMLと違う点です。

※<canvas>のあるメインファイル以外のインクルード用のファイルのルート要素はすべて<library>になります。

<canvas>で指定できる属性のうち、よく使うものはproxied、bgcolor、width、heightです。これらはアプリ全体の設定になります。ただし幅と高さについては最終的に&ltembed&gtなどHTMLで記述した範囲内になります。

表1　<canvas>の属性

proxiedプロキシモードにするかどうか。true:プロキシモード、false:SOLOモード。
bgcolorアプリの背景色。色は(0x)で始まる16進数表記。たとえば青だと0x0000ff。
widthアプリの幅。ピクセル数値あるいは%指定。
heightアプリの高さ。ピクセル数値あるいは%指定。
fontsizeアプリのデフォルトのフォントサイズ。
リスト10 <canvas>の例

<canvas proxied="false" bgcolor="0x0000ff" width="100%" height="50" fontsize="12"> 
	・・・
</canvas>

<text>

文字列を表示するタグです。

リスト11 <text>の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <text>こんにちは</text>
</canvas>

<button>

ボタンを表示するタグです。サンプルはボタンの表示だけですが、通常はonclickというイベントハンドラを設定してクリック時の動作を記述します。

リスト12 <button>の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <button>こんにちは</button>
</canvas>

<checkbox>

チェックボックスを表示するタグです。

リスト13 <checkbox>の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <checkbox>こんにちは</checkbox>
</canvas>

<radiobutton>

ラジオボタンを表示するタグです。ラジオボタンは複数の選択肢のうちどれか1つを選択するためのものなので1つだと機能しません。ラジオボタンを使うときは複数の<radiobutton>を&ltradiogroup&gtで囲みます。

リスト14 <radiobutton>の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <radiogroup>
    <radiobutton>こんにちは</radiobutton>
    <radiobutton>こんばんは</radiobutton>
  </radiogroup>
</canvas>

<view>

<view>はLZXの中でも基本中の基本のタグで、画面に表示されるすべてのタグのもとになっています。LZXはオブジェクト指向の設計になっており、あるタグの性質を継承して別のタグを作ることができます。既述の<canvas>、<text>、<button>、<checkbox>、<radiobutton>、などもすべて<view>を継承した作られたタグになります。つまりそれらは<view>の持つ性質（属性やメソッドなど）をすでに持っていることになります。

<view>には表示物に必要な色、幅、高さ、透明度、位置指定などの属性があります。<view>自体は四角の領域を表します。四角の領域を画面に表示させるにはリスト15のとおり幅（width⁠）⁠、高さ（height⁠）⁠、背景色（bgcolor）の指定が最低限必要です。

リスト15 <view>の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <view width="200" height="100" bgcolor="0xccccff">
	<button>ボタン</button>
  </view>
</canvas>

<window>

ドラッグアンドドロップで移動することが可能なウインドウです。リスト15の<view>を<window>に置き換えただけで単なる四角がウインドウに変わります。

リスト16 <window>の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <window width="200" height="100" bgcolor="0xccccff">
	<button>ボタン</button>
  </window>
</canvas>

もちろん<window>にはサイズ変更（resizable⁠）⁠、クローズ（closeable⁠）⁠、タイトル（title）などのウインドウらしい機能をつけるための属性が用意されています。

リスト17 <window>の属性

<canvas proxied="false" bgcolor="0xffffcc"> 
  <window width="200" height="100" bgcolor="0xccccff"
	resizable="true" closeable="true" title="ウインドウデモ">
	<button>ボタン</button>
  </window>
</canvas>

おすすめ記事

記事・ニュース一覧