Ajaxフレームワーク ユーザーズガイド
目次 索引 前ページ次ページ
第2章 クライアントフレームワーク> 2.4 ユーザデータ/ユーザロジックの定義部

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

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

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

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

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

■イベント情報

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

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

画面部品ごとに複数のイベントを一括して定義する方法
任意のオブジェクトに対して、画面部品のid属性名(以降、画面部品IDと呼びます)と、イベント名とイベントリスナ関数名から成る1つ以上の連想配列を、連想配列で定義します。また、複数の画面部品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 = {                              ←任意のオブジェクト名
    TreeView1_datachange: func_datachange, ←IDがTreeView1という画面部品のデータが変更された場合 
    TreeView1_treenodeexpand: func_treenodeexpand,
    TreeView1_treenodecollapse: func_treenodecollapse,
    TreeView1_treenodeselect: func_treenodeselect
  };
//]]>
</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関数を使用します。

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


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


イベントリスナの登録は、画面(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>

以下に、イベント情報で記述した関数がイベントオブジェクトを受け取る場合の記述例を示します。
以下の例は、“イベント情報”の“画面部品とイベントの組ごとに定義する方法”の記述例に対応する関数定義です。

<script type="text/javascript">
//<![CDATA[
  var modelData = {
    treeData: {
      name: "root",
      children: [
        { // 一つ目のノード
          name: "fj",
          label: "Fujitsu Group",
          isExpanded: false,
          children: []
        }
      ]
    }
  };

  function treenodeexpand(eventObject) {
    // 追加する子ノード
    var newTreeNode = {
      name: "fja",
      label: "Fujitsu Australia",
      isExpanded: false
    };

    //イベントで通知されたノードパスの部分データを取得
    var provider = model1.getNodeDataProvider("treeData", eventObject.nodePath);
    //イベントで通知されたノードの子ノード配列を取得
    provider = provider.getDataProvider("children");
    //子ノード配列に1つのノードデータを追加
    provider.addItem(newTreeNode);
  }
//]]>
</script>


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

目次 索引 前ページ次ページ
Copyright 2009 FUJITSU LIMITED