カスタム・ウィジェットの JavaScript モジュールおよびライフサイクル・メソッド

このトピックでは、カスタム・ウィジェットの JavaScript コードを作成する際の推奨事項を示します。

JavaScript コードは、以下に示すようなモジュラー形式で作成する必要があります。この例は、「サンプル」タブの skeleton サンプルです。

(function(){
  return {
    init: function(props) {
    },

    destroy: function() {
    },

    onUpdate: function(props) {
    },

    onSearch: function(props) {
    },

    onitemClick: function(props) {
    },

    onSelect: function(props) {
    },

    onDeselect: function(props) {
    },

    onResize: function(props) {
    },

    onMaximized: function(props) {
    },

    onClick: function(props) {
    },

    onRenderHtml: function(props) {
    },

    onRendered: function(props) {
    },

    myClickHandler: function(ev, props) {
    }
  }
})();

ヒント: 「サンプル」ペインで「スケルトン」サンプルを選択すると、カスタム・ウィジェット・モジュール形式のスケルトン・コードが表示されるので、そのコードを開始点として使用することができます。

モジュールは、ウィジェット・ライフサイクルの特定のステージで呼び出される複数のコールバック・メソッドで構成されます。各メソッドは、複数の API と関連する情報が含まれる props パラメーターを、引数として受け取ります。

init(props): ウィジェットがマウントされるたびに呼び出されます。例えば、このウィジェットが含まれるタブ・ページにユーザーがナビゲートしたときです。つまり、ウィジェットは、そのコンテナー・タブ・ペインを開くことでウィジェットが表示されるたびに再初期化されます。
destroy(props): ウィジェットがアンマウントされるたびに呼び出されます。例えば、ユーザーが別のタブ・ペインに移動したときです。
onUpdate(props): 現行ページで何かが変更されるたびに呼び出されます。このメソッドは非常に頻繁に呼び出されるため、使用する際は注意してください。
onSearch(props): ウィジェットがデータ・ソースの状態変更を listen しているときに、検索結果が更新されると呼び出されます。
重要: データ・ソースの状態変更を listen するには、「検索結果の listen」チェック・ボックスが選択されている必要があります。
onItemClick(props): ウィジェットがデータ・ソースの状態変更を listen しているときに検索結果項目がクリックされると呼び出されます。onSelect とは異なり、このメソッドは、既に選択されていた項目がクリックされた場合でも呼び出されます。
重要: データ・ソースの状態変更を listen するには、「検索結果の listen」チェック・ボックスが選択されている必要があります。
onSelect(props): ウィジェットがデータ・ソースの状態変更を listen しているときに、検索結果項目が選択されると呼び出されます。
重要: データ・ソースの状態変更を listen するには、「検索結果の listen」チェック・ボックスが選択されている必要があります。
onDeselect(props): 新規検索の結果として、検索結果項目が選択解除されると呼び出されます。この場合、props.selectedItem が未定義になります。
重要: データ・ソースの状態変更を listen するには、「検索結果の listen」チェック・ボックスが選択されている必要があります。
onResize(props): ブラウザー・ウィンドウがサイズ変更されたとき、またはウィジェット・フレームが最大化されたときに呼び出されます。
onMaximized(props): ウィジェット・フレームが最大化されたときに呼び出されます。
onClick(props): ウィジェットがクリックされたときに呼び出されます。このメソッドが false を返すと、項目選択アクションはスキップされます。
onRenderHtml(props): テンプレート・エンジンがレンダリングを開始する前に呼び出されます。戻り値はテンプレート・エンジンに渡され、ウィジェットのテンプレート HTML からアクセスできるようになります。
onRendered(props): ウィジェットのレンダリングが終了した後に呼び出されます。
myClickHandler(ev, props): カスタム・イベント・ハンドラー。HTML テンプレートでは、イベント・ハンドラーは、例えば、<button onclick="myClickHandler()"> として指定できます。ただし、これは、ノードがどの DOM イベントで何を listen する必要があるかをカスタム・ウィジェットが認識できるようにするための単なるマーカーとなります。実際の DOM イベントはすべて、ウィジェットのルート・ノードによって処理され、各カスタム・ハンドラーにディスパッチされます。