LZXの基本文法
LZXとはOpenLaslzoの独自のプログラミング言語の名称です。LZXで書くプログラムソースファイルはXMLです。LZXの基本的な文法はXMLに準拠します。
まず、XMLとしてのLZXの記述ルールについて解説します。LZXに限っていえばXMLの文法について本格的に勉強する必要はありません(筆者もしていません)。本記事の内容をおさえておけば十分です。
終了タグが必須
開いたタグは必ず終了タグで閉じます。閉じなくても動くHTMLと違って厳格です。
タグが1行で完結する場合はリスト2のように書きます。囲むべき要素がないので空要素タグといいます。空要素タグはたとえばXHTMLでよく使われる<br />です。
入れ子は正しく
タグは入れ子にできますが、親子関係は正しくする必要があります。
コメントの書き方
LZXはXMLとスクリプトの2本立てで構成されており、それぞれにコメントの書き方があります。
XMLのコメント文では、<!-- ・・・ --> で囲んだ範囲の中に -- を含めることができません。本文としての -- なのか、コメント終了なのか区別がつかないからです。コメント文を含む広い範囲をコメントアウトしたくても、リスト5のような書き方ではコメントアウトできません。でもこういう場合はリスト6のように <?ignore ・・・ ?> を使えば、コメント文も含めてコメントアウトできます。
スクリプトのコメントはリスト7のとおり。スクリプトは<script>、<handle>、<method>といったスクリプト用のタグの中に既述します。
大文字小文字の区別あり
タグ名は大文字小文字の区別があります。たとえば<view>、<view>、<view>は別物です。
属性名も同じく大文字小文字の区別があります。たとえば<view width="100">、<view WIDTH="100">、<view Width="100">は別物です。
タグの中に < や > を使いたい場合
LZXはXMLなので、タグの中に < や > といった記号は使えません。タグの一部なのか文字なのか区別がつかないからです。そうはいってもスクリプトを記述する場合、たとえばforループ等を使うときには < を使わざるを得ません。< は < のように実体参照を使えば問題ないのですが、手間がかかるし読みにくいですね。通常はCDATAセクションと呼ばれる<![CDATA[ ~ ]]> で囲みます。
リスト8とリスト9は同じ処理をするスクリプトです。<![CDATA[ ~ ]]> の有無と、forループ内の < の表記が異なります。
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 | アプリのデフォルトのフォントサイズ。 |
<text>
文字列を表示するタグです。
<button>
ボタンを表示するタグです。サンプルはボタンの表示だけですが、通常はonclickというイベントハンドラを設定してクリック時の動作を記述します。
<checkbox>
チェックボックスを表示するタグです。
<radiobutton>
ラジオボタンを表示するタグです。ラジオボタンは複数の選択肢のうちどれか1つを選択するためのものなので1つだと機能しません。ラジオボタンを使うときは複数の<radiobutton>を<radiogroup>で囲みます。
<view>
<view>はLZXの中でも基本中の基本のタグで、画面に表示されるすべてのタグのもとになっています。LZXはオブジェクト指向の設計になっており、あるタグの性質を継承して別のタグを作ることができます。既述の<canvas>、<text>、<button>、<checkbox>、<radiobutton>、などもすべて<view>を継承した作られたタグになります。つまりそれらは<view>の持つ性質(属性やメソッドなど)をすでに持っていることになります。
<view>には表示物に必要な色、幅、高さ、透明度、位置指定などの属性があります。<view>自体は四角の領域を表します。四角の領域を画面に表示させるにはリスト15のとおり幅(width)、高さ(height)、背景色(bgcolor)の指定が最低限必要です。
<window>
ドラッグアンドドロップで移動することが可能なウインドウです。リスト15の<view>を<window>に置き換えただけで単なる四角がウインドウに変わります。
もちろん<window>にはサイズ変更(resizable)、クローズ(closeable)、タイトル(title)などのウインドウらしい機能をつけるための属性が用意されています。