Lightning コンポーネント開発者ガイド
j高度なイベントの例
次の例は、比較的簡単なコンポーネントイベントおよびアプリケーションイベントの例に基づいています。コンポーネントイベントとアプリケーションイベントの両方で機能する、1 つのノーティファイアコンポーネントと 1 つのハンドラコンポーネントを使用します。イベントに結び付けられたコンポーネントについて説明する前に、関与する個々のリソースを見ていきます。
次の表は、この例で使用する各種リソースの役割をまとめたものです。これらのリソースのソースコードは、表の後に記載されています。
| リソース | リソース名 | 使用方法 |
|---|---|---|
| イベントファイル | コンポーネントイベント (compEvent.evt) およびアプリケーションイベント (appEvent.evt) | コンポーネントイベントとアプリケーションイベントを別々のリソースに定義します。eventsContainer.cmp に、コンポーネントイベントとアプリケーションイベントの両方の使用方法が示されます。 |
| ノーティファイア | コンポーネント (eventsNotifier.cmp) およびそのコントローラ (eventsNotifierController.js) | ノーティファイアには、イベントを開始する onclick ブラウザイベントが含まれます。このコントローラはイベントを起動します。 |
| ハンドラ | コンポーネント (eventsHandler.cmp) およびそのコントローラ (eventsHandlerController.js) | ハンドラコンポーネントには、ノーティファイアコンポーネント (またはアプリケーションイベントの <aura:handler> タグ) が含まれ、イベントの起動後に実行されるコントローラアクションをコールします。 |
| コンテナコンポーネント | eventsContainer.cmp | 完全デモの UI にイベントハンドラを表示します。 |
コンポーネントイベントおよびアプリケーションイベントの定義は別々の .evt リソースに保存されますが、ノーティファイアコンポーネントとハンドラコンポーネントの個別のバンドルに、どちらのイベントでも機能するコードを含めることができます。
コンポーネントとアプリケーションのどちらのイベントにも、イベントの形状を定義する context 属性が含まれます。このデータがイベントのハンドラに渡されます。
コンポーネントイベント
compEvent.evt のマークアップは次のようになります。
アプリケーションイベント
appEvent.evt のマークアップは次のようになります。
ノーティファイアコンポーネント
eventsNotifier.cmp ノーティファイアコンポーネントには、コンポーネントイベントまたはアプリケーションイベントを開始するボタンが含まれます。
ノーティファイアコンポーネントは aura:registerEvent タグを使用して、コンポーネントイベントおよびアプリケーションイベントを起動する可能性があることを宣言します。name 属性は必要ですが、値が関係するのはコンポーネントイベントのみであり、アプリケーションイベントの他の場所で値が使用されることはありません。
parentName 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。
CSS ソース
CSS は eventsNotifier.css にあります。
クライアント側コントローラのソース
eventsNotifierController.js コントローラはイベントを起動します。
ボタンをクリックしてコンポーネントイベントやアプリケーションイベントを起動することはできますが、まだハンドラコンポーネントをイベントに結び付けて応答するようにしていないため、出力に変化はありません。
コントローラがイベントを起動する前に、コンポーネントイベントまたはアプリケーションイベントの context 属性をノーティファイアコンポーネントの parentName に設定します。ハンドラコンポーネントを確認しながら、この設定が出力にどのように影響するかについて説明します。
ハンドラコンポーネント
eventsHandler.cmp ハンドラコンポーネントには、アプリケーションイベントおよびコンポーネントイベントの c:eventsNotifier ノーティファイアコンポーネントと <aura:handler> タグが含まれます。
CSS ソース
CSS は eventsHandler.css にあります。
クライアント側コントローラのソース
クライアント側コントローラは eventsHandlerController.js にあります。
name 属性はまだ設定されていません。以下に、この属性がどのように設定され、eventsContainer.cmp に表示されるのかを示します。
ボタンをクリックでき、UI がイベントタイプを示すものに変更されます。クリック数が 1 つ増え、コンポーネントイベントかアプリケーションイベントかを示します。これで終了ではありません。イベントの context 属性が設定されていないため、イベントの参照元が未定義です。
コンテナコンポーネント
eventsContainer.cmp のマークアップは次のようになります。
コンテナコンポーネントには、2 つのハンドラコンポーネントが含まれます。このコンテナコンポーネントは、両方のハンドラコンポーネントの name 属性を設定します。この属性がパススルーされ、ノーティファイアコンポーネントの parentName 属性が設定されます。この操作によって、ノーティファイアコンポーネントまたはハンドラコンポーネント自体の説明で確認した UI テキストのギャップが埋められます。
c:eventsContainer コンポーネントを c:eventsContainerApp アプリケーションに追加します。アプリケーションに移動します。
https://<myDomain>.lightning.force.com/c/eventsContainerApp.app (<myDomain> はカスタム Salesforce ドメインの名前)
いずれかのイベントハンドラの [Click here to fire a component event (コンポーネントイベントを起動する場合はここをクリック)] をクリックします。処理されたコンポーネントイベント数のカウンタには、起動元のコンポーネントのハンドラのみが通知されるため、このコンポーネントのみのイベント数が増加します。
いずれかのイベントハンドラの [Click here to fire an application event (アプリケーションイベントを起動する場合はここをクリック)] をクリックします。処理されたアプリケーションイベント数のカウンタには、処理しているすべてのコンポーネントが通知されるため、両方のコンポーネントのイベント数が増加します。