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

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

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

<handler>

<handler>はonclickのようなイベント発生時に実行するスクリプトを記述するためのタグです。名前はname属性で設定します。名前の付け方は自由ではなくonで始まるイベントハンドラ名を付けます。イベントハンドラ名にはonclickやonmouseoverといった「on+イベント名」や,onxやonwidthなどの「on+属性名」があります。

イベントハンドラのスクリプトの記述方法は2種類あります。⁠onclick="・"」のようにタグの属性として記述する方法と,<handler>タグ内に記述する方法です。タグの属性として記述する場合,スクリプトを直接記述する方法(リスト6)や,実行したいスクリプトのあるメソッドを記述する方法(リスト7)があります。リスト7の書き方はメンテナンスしやすいです。

リスト6 タグの属性としてイベントハンドラを記述(1)

<view onclick="クリック時に処理するスクリプトをここに記述" />

リスト7 タグの属性としてイベントハンドラを記述(2)

<view onclick="doSomething()">・・・クリック時にdoSomething()メソッドを実行
  <method name="doSomething">
    スクリプトをここに記述
  </method>
</view>

リスト8 <handler>でイベントハンドラを記述

<view>
  <handler name="onclick">
    クリック時に処理するスクリプトをここに記述
  </name>
</view>

これまでのサンプルで出てきた<button>でのonclick="win.moveWin(20);"もイベントハンドラですが,処理が多くなって行数が増えるとこのような簡単な記述はできにくくなります。<handler>を使うとイベントハンドラのスクリプト部分を独立させて別途記述することができます。リスト5で既に出ていますね。

リスト9のボタン1とボタン2のイベントハンドラonclickの記述形式は異なっていますが,全く同じ意味です。onclick時にwin.moveWin(20)が実行されます。

リスト9

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

リスト9サンプル

複数のイベントハンドラ

メソッドと違いイベントハンドラの場合は同じ名前で複数の定義ができます。複数の同名イベントハンドラは上書きにはならずすべてが実行されます。

リスト10の例では,onclickというイベントハンドラの記述が4ヶ所にありますが,ボタンクリック時にすべて実行されます。つまりxとyがそれぞれ50に,widthとheightもそれぞれ100に同時に設定変更されます。

リスト10 複数の同名イベントハンドラ

<canvas proxied="false" bgcolor="0xffffcc"> 
  <simplelayout/>
  <button text="ボタン" onclick="v.setAttribute('x',50)">
    <handler name="onclick">
      v.setAttribute('y',50);
    </handler>
    <handler name="onclick">
      v.setAttribute('width',100);
    </handler>
    <handler name="onclick">
      v.setAttribute('height',100);
    </handler>
  </button>
  <view id="v" x="20" y="20" width="20" height="20" bgcolor="red"/>
</canvas>

リスト10サンプル

著者プロフィール

ason(あそん)

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

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