データバインドをサポートするDHTMLイベントモデル

  • [アーティクル]
DHTML Event Model Support for Data Binding DHTML Event Model Support for Data Binding *
*前のトピック: データバインドをサポートするDHTMLオブジェクトモデル
*次のトピック: ドキュメントオブジェクトモデル

データバインドをサポートするDHTMLイベントモデル

ドキュメントオブジェクトモデルでは、WebオーサーがHTMLページのオブジェクトの動作をカスタマイズするために使用できるスクリプト可能なイベントを公開している。データバインド アーキテクチャでは、オーサーがデータドリブンなページを作成できるよう、追加のイベントのセットを公開することで、このモデルを拡大する。これらのイベントは3つのカテゴリに分けられる。

Webオーサーはこれらのイベントを処理することで、特に更新を行う場合も含め、ページを細かな単位で制御できる。イベントは、データソースオブジェクトによりロードされ処理されるとき、データへのユーザーの対処があったとき、ページがアンロードされたときに発生する。イベントによりWebオーサーはデータソースオブジェクトの状態の変化を監視でき、フィールド レベルやレコード レベルで内容を確認でき、ページをアンロードするときクリーンアップ処理を実行できる。

次のテーブルでは、データバインドに関するクイックリファレンスを提供する。詳しくは以下で説明する。ドキュメントオブジェクトモデルのイベント処理については、イベントモデルの理解を参照すること。

データバインディング関連の全イベント バブルするデータバインディング イベント キャンセル可能なデータバインディング イベント データソースオブジェクトに適用するデータバインディング イベント バインドされたエレメントに適用するデータバインディング イベント

イベントバブルアップキャンセル適用

“バブルアップ”は、イベントバブルが階層を上るかどうかを示している。大部分のデータに関連するイベントはバブルアップする。onbeforeunloadイベントは階層の最上位ののwindowオブジェクトで生成されるので、バブルアップしない。

“キャンセル可能”は、イベントに関連するデフォルト アクションがキャンセルできるかどうかを示している。例えば、onbeforeupdateイベントがキャンセルされると、オーサーは更新される前にコンシューマがバインドされるフィールドを解除できる。onafterupdateイベントは、イベントが発生するまで更新が終わっているので、キャンセルされることはない。オーサーがonbeforeupdateイベントをキャンセルすれば発生しない。

“適用”は、イベントが発生するエレメントの型を示している。バインドされるエレメントはデータソースオブジェクトからデータを消費するページ上のエレメントである。データソースオブジェクトは、データソースオブジェクトの仕様に従うオブジェクトやアプリケーションである。

データソースオブジェクトに適用するイベント

データセットの変更があったり、データが使用可能になったり、すべてのデータが揃ったり、データソースオブジェクトが与えるレコードがキャッシュに入る前後に、データソースオブジェクトから通知が送られる。

ondatasetchanged

ondatasetchangedイベントは次の2つの状況で発生する。

  • 新しいデータセットが要求された後。
  • カレント データセットが変更されるとき（例えば、フィルタやソート）。

イベントが生じたとき、データは利用できなくない可能性があるが、recordsetはデータセットのメタデータを取得するために使用できる。メタデータにはフィールドの一覧でそれぞれの型が入っている。Webオーサーは、メタデータを使うことで真に動的なページを作成できる。

データソースオブジェクトから与えられたフィールドのリストをドロップダウン リスト(cboSort)に追加するコードの例を次に示す。ユーザーがドロップダウン リストの項目を選択すると、データは選択されたフィールドに格納される。

このコードでは、データソースオブジェクト(dsoComposers)のためにondatasetchangedイベントを処理する。 

<SCRIPT FOR=dsoComposers EVENT=ondatasetchanged>
FillSortDropDownWithFields(cboSort, this.recordset);
</SCRIPT>

次のコードでは、ADOのrecordsetから与えられたフィールドのコレクションを通して繰り返し、各フィールド名をoptionsコレクションに追加している。

    <SCRIPT>
    // Add specified value/text to the dropdown list
    function AddItemToDropDown(oDropDown, cValue, cText)
    {
        oOption = document.createElement('OPTION');
        oOption.value = cValue;
        oOption.text = cText;	
        oDropDown.add(oOption);
    }

    // Fill dropdown with field names from the ADO RecordSet
    function FillSortDropDownWithFields(oDropDown, oRecordSet)
    {
    // only fill once or let the caller clear list first
        if (oDropDown.options.length > 0)
            return;

        AddItemToDropDown(oDropDown, "None", "None"); // default
        // add each of the columns in the data set to the drop-down
        for (i = 0; i < oRecordSet.fields.count; i++)
        {
            oField = oRecordSet.fields(i);
            AddItemToDropDown(oDropDown, oField.name, oField.name);
        }
        cboSort.selectedIndex = 0;
    }
    </SCRIPT>

ユーザーがドロップダウン リストから項目を選択すると、次のコードはデータソースオブジェクトのsortプロパティに該当するフィルタを、"None"が選択された場合は空の文字列を設定する。前のコード サンプルがどんなデータソースオブジェクトでも働くが、次のコードはTabular Data Control (TDC)に特有である。

<SCRIPT FOR=cboSort EVENT=onchange>
    cValue = this.options[this.selectedIndex].value;
    tdcComposers.object.Sort = (cValue == 'None' ? '' : cValue);
    tdcComposers.Reset();
</SCRIPT>

ondataavailable

データソースオブジェクトがデータを非同期に提供する場合、レコードがアクセス可能となったことを知らせるために、ondataavailableイベントを発生する。Webオーサーは発生するこのイベントに頼れないが、代わりに、ユーザーに進捗を表示するためにこのイベントを使える。このイベントは0回以上発生する。

ondatasetcomplete

データソースオブジェクトが全データをクライアント側にキャッシュしたときに、ondatasetcompleteイベントが発生する。このeventオブジェクトのreasonプロパティは、ダウンロードの成功(0)、異常終了(1)、失敗(2)を示す。異常終了は、エラーや明確なユーザー アクション([Stop]ボタンをクリックするような)から生じる場合がある。reasonプロパティが成功だったときは、ADOのRecordset オブジェクトからデータを使用できる。

onreadystatechange

onreadystatechangeイベントはデータソースオブジェクトに特有でないが、オブジェクトの状態を知ることで役立つ場合がある。このイベントが発生すると、イベント ハンドラのコードでreadyStateプロパティの現在の値を読みとれる。完全に準備状態に達したあと、オブジェクトのプロパティにアクセスするのが安全である。

<SCRIPT FOR=tdcComposer EVENT=onreadystatechange>
if (this.readyState == 'complete')
{
    // perform some action
}
</SCRIPT>

onrowenter

たとえば、ADO Recordset navigationを使ったりしてカレントレコードのポインタが変更されると、onrowenterイベントが発生する。Webオーサーは、カレントレコードのデータに前処理を行うためにこのイベントを使える。

onrowexit

カレントレコードのポインタを変更する前に、onrowexitイベントが発生する。これは、次の場合に生じる。

  • データソースオブジェクトでメソッドを呼び出す。
  • カレント レコードを削除する。
  • ページを残す。

Webオーサーは、次のレコードに移動する前にレコード レベルの評価を実行できる。このイベント ハンドラがFALSEを返す場合、Webオーサーは、ユーザーが次のレコードに移動できない。

次のコードでは、作曲家の誕生日が死亡日の前であることを確認している。

<SCRIPT FOR=dsoComposers EVENT=onrowexit>
if (txtBorn.value > txtDied.value)
{
    alert("Birth date must be less than or equal to deceased dates");
    return false;
}
</SCRIPT>

データコンシューマに適用するイベント

バインドされたエレメントは、更新時にページ オーサーがフィールド内容の確認を行い、エラーに対処できるようにイベントを発生する。

onbeforeupdate、onafterupdate

エレメントのデータが変更されるとonbeforeupdateイベントが発生し、そのエレメントはフォーカスを失う。TABキーで前後のフィールドに移動したり、マウスで他のコントロールを選んだり、ページをアンロードしたりしたときに、エレメントはフォーカスを失う。バインドされているコントロールの値がプログラムで設定された場合は、イベントは発生しない。イベントに関連した評価コードは不当なデータを発見し、オーサーはユーザーがそのフィールドを残さないようにするためにFALSEを返すべきである。

次のコードでは、テキスト ボックスに入力された値にいくつかの基本的な評価を実行している。値が数値以外や指定の範囲以外の場合、ユーザーは警告を受け、フィールドを残すことができない。

    <SCRIPT FOR=txtBorn EVENT=onbeforeupdate>
        dToday = new Date();
        fRet = ValidateDate(parseInt(this.value), 0, dToday.getFullYear());
        event.cancelBubble = true;
        return fRet;
    </SCRIPT>

    <SCRIPT>
    // perform some basic validation on the date
    function ValidateDate(nValue, nMin, nMax)
    {
        if (isNaN(nValue))
        {
            alert("Year required");
            return false;
        }

        if (nValue < nMin || nValue > nMax)
        {
            alert("Invalid year");
            return false;
        }
        return true;
    }

onbeforeupdateイベントの処理中は元のデータと変更したデータを取得できるので、コントロールの値が更新される間、そのデータをデータソースオブジェクトはコミットしない。データソースオブジェクトから与えられたADOのrecordsetを使って、元の値を取得できる。コントロールのプロパティを使うと、ユーザーが入力した現在の値を取得できる。あらゆるテキスト ボックスに使える例を次に示す。

    <SCRIPT FOR=txtBorn EVENT=onbeforeupdate>
        curValue = this.value;
        origValue = dsoComposers.recordset.fields(this.dataFld).value;
    </SCRIPT>

onbeforeupdateイベントがキャンセルされない場合、データがコンシューマからデータ プロバイダに転送された後、onafterupdateイベントが発生する。

onerrorupdate

ユーザーの操作の結果、データコンシューマからデータソースオブジェクトにデータを転送している間にエラーが生じると、onerrorupdateイベントが発生する。このイベントを中止すると、システムが提供するすべてのエラー ダイアログボックスは表示されない。

ページに適用するイベント

上に述べたバインドされたエレメントとデータソース コントロールのために指定されるイベントの他に、onbeforeunloadイベントにより、データソースオブジェクトがデータを得た元のところに保存する前に、ページ上の変更があったデータを保存できる。 onbeforeunloadイベントが発生するユーザーのアクションを次に示す。

  • ハイパーリンク ナビゲーション
  • [進む]ボタンや[戻る]ボタンをクリックする
  • [お気に入り]からURLを選択する
  • [Submit]ボタンをクリックする
  • ページを最新の情報に更新する

これらのアクションの他に、ページをアンロードするスクリプトもこのイベントを引き起こす。 

window.location.href = "https://www.microsoft.com/ie/ie40";

onbeforeunloadイベントはキャンセルできないが、スクリプトはreturnValueプロパティに文字列を返せる。この文字列は、ユーザーにナビゲーションをキャンセルする機会を与えるメッセージとして表示される。たとえば、データ損失の警告をユーザーに表示するには、次のようにイベントを処理する。 

<SCRIPT FOR=window EVENT=onbeforeunload>
if (g_fFieldsChanged > 0)
event.returnValue = "Warning: Modified data has not been saved.";
</SCRIPT>

この例のg_fFieldsChangedフラグは、ページの変更を示す。ページ オーサーは、onafterupdateイベントを処理することでフィールドに対して変更を追跡できる。 

<SCRIPT FOR=document EVENT=onafterupdate>
g_fFieldsChanged = g_fFieldsChanged + 1
</SCRIPT>

Up トップに戻る
© 1997 Microsoft Corporation. All rights reserved. Terms of Use.