外部オブジェクトを使用して JavaScript コードから GeneXus のイベントを実行する方法

この例では、外部オブジェクトを使用して JavaScript コードから GeneXus のイベントを実行する方法を示します。
特にこの例では、ブラウザーと通信し、JavaScript イベント (スクロールイベント) への応答として GeneXus イベントをトリガーする方法を学ぶことができます。スクロールイベントは、ドキュメント表示がスクロールされるとトリガーされます。GeneXus では、ウィンドウのスクロールに対してイベントハンドラーを定義できます。
この記事の目的は、JavaScript 用の外部オブジェクト、外部の JavaScript リソースから GeneXus イベントをトリガーする方法、GeneXus コードから JavaScript イベントを処理する方法について学ぶことです。
たとえば、Web ページに固定ヘッダー (絶対位置) がある場合、現在のドキュメントで縦方向にスクロールされたピクセル数が特定の値に達したときにヘッダーを縮小できます。また、ユーザーがウィンドウをスクロールしたときに、ピクセル数がその値に達しなかった場合は、ヘッダーを再び拡張できます。

最初に、JavaScript (changeonscroll.js) を次のように定義します:

注:

[ shrinkOnHeight ] プロパティで、ウィンドウのスクロール時にイベントがトリガーされるピクセル数が決まります。
ドキュメントの準備ができると関数がトリガーされ、JQuery の "on" メソッドを使用してイベントリスナーが追加されます。メインの処理は、スクロールイベントにイベントハンドラーを関連付けることです。
この関数 (イベントハンドラー) 内で、gx.fx.obs.notify エクスプレッションを使用して GeneXus イベントに通知します。JavaScript から GeneXus イベントに通知する唯一の方法が gx.fx.obs.notify メソッドです (標準の GeneXus JavaScript ライブラリ gxgral.js で定義)。

外部オブジェクトの定義

外部オブジェクトは、 [ Javascript External Name ] プロパティを Changeonscroll に設定します。

オブジェクトで、ChangeOnScroll 外部オブジェクトに基づく変数を定義する場合は、JavaScript コードで Changeonscroll のコンストラクターを定義する必要があります。
GeneXus のイベントは常に静的なので、 [ Is Static ] プロパティを True に設定する必要があります。

イベントは常に静的であるため、 [ shrinkOnHeight ] プロパティも静的として定義されています。 [ Javascript External Name ] プロパティを shrinkOnHeight に設定するのは、これが JavaScript ソースでのプロパティ名だからです。

イベントの [ Javascript External Name ] プロパティは、JavaScript の定義で GeneXus イベントへのマップに使用されている名前です。

認識していなかったイベントを誤って切り離さないように、イベントに名前空間を設定すると便利な場合があります。

GX コードからの外部オブジェクトの使用

最初に、ページの HTTP ヘッダーに JavaScript への参照を追加します。 [ Javascript Referenced file ] プロパティを使用します。
そうでない場合は、次の手順に従います:

Event Start
    Form.HeaderRawHTML += '<script type="text/javascript" src="Changeonscroll.js"></script>'
Endevent

注: 別の方法として、次のようにすることもできます。

Event Start
       Form.JScriptSrc.Add("Changeonscroll.js")
Endevent

shrinkOnHeight は静的プロパティであるため、外部オブジェクトに基づく変数を定義する必要はなく、割り当ては静的に行います:

Start イベントは次のようになります:

Event Start
    Form.HeaderRawHTML += '<script type="text/javascript" src="Changeonscroll.js"></script>'
    changeonscroll.shrinkOnHeight = 20
Endevent

GeneXus のイベントは次のようになります:

Event changeonscroll.scrolltoShrink
//ここでイベントのハンドラーのコードを作成
    content.Class = StyleClass:TableContainer
Endevent

Event changeonscroll.scrolltoExpand
//ここでイベントのハンドラーのコードを作成
   content.Class = StyleClass:TableContainer1
Endevent

このサンプルは「File:Change on scroll sample」からダウンロードできます。

参考情報

JavaScript とサーバー側のコードを使用して Dictionary データタイプを実装する方法