2.4.2 ユーザロジックの定義(イベント)

Ajaxフレームワークユーザーズガイド

目次索引

第2章クライアントフレームワーク

> 2.4 ユーザデータ/ユーザロジックの定義部

2.4.2 ユーザロジックの定義(イベント)

画面部品にイベントリスナを定義すると、ユーザの操作実行時に発生したイベントを監視し、制御を行います。
このイベントリスナの定義をユーザロジックの定義と呼びます。

画面上での操作に対して発生するイベントには、以下の2種類があります。

画面部品に対してユーザが何らかの操作を行った結果、発生するイベント
画面部品に関係なく画面そのものに対して行われた操作の結果、発生するイベント

ここでは、a.のイベントについて説明します。b.のイベントについては、“グローバルイベント制御”を参照してください。

■イベント情 報

ある画面部品で発生したイベントに対して、何らかの動作を定義するイベントリスナを対応付けるには、以下の方法があります。

画面部品ごとに複数のイベントを一括して定義する方法
画面部品とイベントの組ごとに定義する方法
画面部品に直接定義する方法

以下に、それぞれの方法について説明します。

一括してイベントを定義する場合
任意のオブジェクトに対して、画面部品のid属性名(以降、画面部品IDと呼びます)とイベント情報の連想配列を定義します。イベント情報は、イベント名とイベントリスナ関数名の連想配列です。また、複数の画面部品IDを一括して定義することが可能です。

以下に、記述形式を示します。

オブジェクト={画面部品ID: {イベント名:関数名},{画面部品ID: {イベント名:関数名}},...}

以下に、記述例を示します。

<script type="text/javascript">
//<![CDATA[
  eventmap = {                      ←任意のオブジェクト名
    engineStr : {                   ←画面部品IDがengineStrのイベントを定義
      mouseover: func_emphasize,    ←マウスオーバー時にfunc_emphasize関数を実行 
      mouseout: func_deemphasize,   ←マウスアウト時にfunc_deemphasize関数を実行 
      click: func_eventListener     ←クリック時にfunc_eventListener関数を実行
    },
    audioStr : {
      mouseover: func_emphasize,
      mouseout: func_deemphasize,
      click: func_eventListener
    },
      transmission : {
      click: function() {               ←無名関数としても定義可能
        RCF.debug("transmission clicked");
      }
    }
  };
//]]>
</script>

画面部品とイベントの組ごとに定義する場合
任意のオブジェクトに対して、画面部品IDとイベント名を“_”(アンダーバー)でつないだものと、そのイベントリスナ関数名を連想配列で定義します。このとき、複数の画面部品IDを一括して定義することができます。

以下に、記述形式を示します。

オブジェクト={画面部品ID_イベント名:関数名, 画面部品ID_イベント名:関数名,...}

以下に、記述例を示します。

<script type="text/javascript">
//<![CDATA[
  myevent = {                            ←任意のオブジェクト名
    engineStr_click: func_eventListener, ←IDがengineStrという画面部品がクリックされた場合 
    autoStr_click: func_eventListener,
    transmission_click: function(event){
      RCF.debug("transmission clicked");
    }
  };
//]]>
</script>

画面部品に直接定義する場合
画面部品に対して、直接、イベントリスナを定義します。
以下に、記述例を示します。
<div rcf:type="TextInput" rcf:onValueChange="myValueChange">

イベント情報は、通常、同一HTML/JSPファイルに記述します。ただし、複数画面で共通に利用する場合は、外部ファイルに記述することを推奨します。
外部ファイルの記述については、“外部ファイルの定義”を参照してください。イベント情報を記述した外部ファイルは、FragmentContainer部品で使用します。FragmentContainer部品の使用方法については、“UI部品リファレンス”を参照してください。

■イベント名

イベント名は、各画面部品で利用可能なイベントリスナ名の先頭の“on”を削除し、残りをすべて小文字で表現したものです。

例えば、onValueChangeというイベントリスナが画面部品に定義されている場合は、valuechangeをイベント名として使用します。

■イベントリスナの登録

オブジェクトに定義されたイベントリスナは、APIを利用してフレームワークに登録することで、利用可能となります。

イベントリスナの登録には、rcf.event.EventRegistrar.registerEvents関数を使用します。イベントリスナの登録解除には、rcf.event.EventRegistrar.unregisterEvents関数を使用します。

以下に、それぞれの使用例を示します。

イベントリスナの登録

rcf.event.EventRegistrar.registerEvents(eventmap, 'myeventmap1');   ← “myeventmap1”という名前を付けて登録 
rcf.event.EventRegistrar.registerEvents(eventmap);                  ← 名前を付けずに登録

イベントリスナの登録解除

rcf.event.EventRegistrar.unregisterEvents('myeventmap1');           ← 登録時に付けた名前を指定して登録解除

イベントリスナ登録時に名前を付けずに登録した場合は、イベントリスナの登録解除はできません。

イベントリスナの登録は、同一HTML/JSPファイルに記述します。

■イベント情報で記述した関数の定義

イベント情報の定義とイベントリスナ(イベント情報で記述した関数)の定義は別に行います。つまり、別の定義ブロックに記述します。
なお、定義済みのイベントリスナをイベント情報に定義する場合があります。

以下に、記述例を示します。

<script type="text/javascript">
//<![CDATA[
  function func_emphasize() {
    RCF.debug("mouse over");
  }
  function func_deemphasize() {
    RCF.debug("mouse out");
  }
  function func_eventListener() {
    RCF.debug("mouse over");
  }
//]]>
</script>

イベントリスナの定義は、通常、同一HTML/JSPファイルに記述します。ただし、複数画面で共通に利用する場合は、外部ファイルに記述することを推奨します。
外部ファイルの記述については、“外部ファイルの定義”を参照してください。イベントリスナ定義を記述した外部ファイルは、FragmentContainer部品で使用します。FragmentContainer部品の使用方法については、“UI部品リファレンス”を参照してください。

目次索引