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ループ等を使うときには < を使わざるを得ません。< は < のように実体参照を使えば問題ないのですが、手間がかかるし読みにくいですね。通常はCDATAセクションと呼ばれる<![CDATA[ ~ ]]> で囲みます。
リスト8とリスト9は同じ処理をするスクリプトです。<![CDATA[ ~ ]]> の有無と、forループ内の < の表記が異なります。
リスト8 実体参照で記述(<を<で記述)
<handler name="onclick">
for (var i=0; i < 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です。これらはアプリ全体の設定になります。ただし幅と高さについては最終的に<embed>など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>