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

第6回 スクリプトの記述形式

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

今回はスクリプトの書き方というより,スクリプトを書くための基礎となる知識について解説します。LZXでのスクリプトの記述形式は,<script>,<method>,<handler>といったスクリプト記述用タグを使ったり,属性として記述(たとえばonclick="~")するなど主に4種類あります。

<script>

<script>内に書かれたスクリプトは,アプリ起動時に最初に実行されます。どのような条件でも必ず実行されるので,アプリ全体で使うような変数や関数を定義する場合に使います。<script>はどこにでも書けるわけではなく,<canvas>直下にのみ書けます。

グローバル変数の定義

<script>内にグローバル変数を定義することができます。ここでいうグローバルとは,ソースコードのどこからでも使えるという意味です。

リスト1ではtxt変数に格納された文字列を参照するためにコンストレイント式を使っています。グローバル変数であるtxt変数の内容はいつでもどこでも参照できます。

ちなみにリスト1にあるような<text text="…">という書き方は<text>…</text>と同じ意味です。

リスト1 グローバル変数の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <script>
    var txt = "こんにちは";
  </script>
  <simplelayout/>
  <text text="${txt}"/>
  <button text="${txt}"/>
  <checkbox text="${txt}"/>
</canvas>

リスト1サンプル

グローバル関数の定義

<script>内にグローバル関数を定義することができます。

リスト2ではボタンをクリックした時に,<script>内に定義したmoveWin()という自作関数を実行するように記述しています。moveWin()内の「win.x」というのは「winという名前の付いたタグ(id="win")のx属性の値」の意味です。moveWin()はウインドウを現在位置から20ピクセル右に移動するようにした関数です。

リスト2 グローバル関数の例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <script>
    var txt = "移動";
    function moveWin(){
      var increment = 20;
      win.setAttribute('x', win.x + increment);
    }
  </script>
  <button text="${txt}" onclick="moveWin();"/>
  <window x="50" y="30" width="150" height="100" title="ウインドウ" id="win">
  </window>
</canvas>

リスト2サンプル

<method>

<method>を使うと,スクリプトを特定のタグに関連付けて定義することができます。<script>と違って,呼び出されない限り実行されません。

<method>にはname属性で名前を付ける必要がありますが,タグに定義されている既存メソッド名と重ならないように注意します。重なると既存メソッドの機能を上書き(オーバーライド)することになります。タグがどのようなメソッドを持っているかはLZXリファレンスを参照してください。

メソッド名の設定はたとえば<method name="sample">のように記述し,そのメソッドを実行する場合はsample()とカッコ付きで記述します。

リスト3の例では全く同じ内容のmoveWin()メソッドを<canvas>直下とウインドウタグ内に定義しています。ボタン1を押すと(1)のmoveWin()メソッド,ボタン2は(2)のmoveWin()メソッドをそれぞれ実行します。どちらのボタンも動作結果は同じです。

リスト3 メソッドの例

<canvas proxied="false" bgcolor="0xffffcc"> 
  <!--(1)canvas直下の自作メソッド-->
  <method name="moveWin">
    var increment = 20;
    win.setAttribute('x', win.x + increment);
  </method>
  <button text="ボタン1" onclick="canvas.moveWin();"/>
  <button y="25" text="ボタン2" onclick="win.moveWin();"/>
  <window x="50" y="50" width="150" height="100" title="ウインドウ" id="win">
    <!--(2)windowタグの自作メソッド-->
    <method name="moveWin">
      var increment = 20;
      win.setAttribute('x', win.x + increment);
    </method>
  </window>
</canvas>

リスト3サンプル

メソッドはargs属性を使って引数を受け取ることができます。リスト4では「moveWin(20)」実行時に20という値がmoveWin()メソッドに渡され,メソッド側でincrementという変数で値を受け取っています。

リスト4 メソッドの引数


<canvas proxied="false" bgcolor="0xffffcc"> 
  <button text="ボタン" onclick="win.moveWin(20);"/>
  <window x="50" y="30" width="150" height="100" title="ウインドウ" id="win">
    <method name="moveWin" args="increment">
      win.setAttribute('x', win.x + increment);
    </method>
  </window>
</canvas>

リスト4サンプル

メソッドはreturnを使って値を戻すことができます。リスト5では,2つの数値の足し算結果を戻すadd()メソッドを作った例です。ボタンを押すとadd()メソッドが実行され,戻された2+3の結果が<text>に表示されます。

リスト5 メソッドの戻り値

<canvas proxied="false" bgcolor="0xffffcc"> 
  <!--足し算メソッド-->
  <method name="add" args="n1,n2">
    return n1+n2;
  </method>
  <simplelayout/>
  <button text="ボタン" >
    <handler name="onclick">
      var ans = canvas.add(2,3);
      res.setAttribute('text', ans);
    </handler>
  </button>
  <text id="res"/>
</canvas>

リスト5サンプル

著者プロフィール

ason(あそん)

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

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

コメント

コメントの記入