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

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

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

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>

著者プロフィール

ason(あそん)

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

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

コメント

  • 大文字小文字のサンプル間違い?

    大文字小文字の区別の例で「たとえば<view>,<view>,<view>は別物です」と、同じものが3つ並んでいます。

    Commented : #1  paz (2010/12/29, 14:51)

コメントの記入