How to Lightning Components – Part 3
How to Lightning Components – Part 3です。今回は各コンポーネントを連携できるLightning Eventを使用したアプリ開発について紹介します。
Lightning Eventでコンポーネントの連携
Lightning Eventがどのようなものか確認しやすいようにサンプルアプリを用意しました。このサンプルアプリではLightning Eventを利用してリスト表示上限件数の切り替えを行います。
Gist – Lightning Account Search
https://gist.github.com/tyoshikawa1106/cd13a11dccd2951996e2
サンプルアプリの構成は次のとおりです。
Lightning Application
- LightningAccountSearch.app
- LightningAccountSearch.css
Lightning Component
- LightningAccountSearchSelectListSizeComponent.cmp
- LightningAccountSearchSelectListSizeComponentController.js
- LightningAccountSearchSelectListSizeComponentHelper.js
- LightningAccountSearchComponent.cmp
- LightningAccountSearchComponentController.js
- LightningAccountSearchComponentHelper.js
Apex Class
- LightningAccountSearchController.cls
Lightning Event
- LightningAccountSearchSelectListSizeEvent.evt
それではLightning Eventの実装方法を確認していきたいと思います。まずLightning Eventを新規作成したいときは、開発者コンソールの「File」→「New」→「Lightning Event」の手順で作成できます。
Lightning Eventの実装内容は次のようになります。
これにより各コンポーネント共通で使用できる変数を用意することができます。
続いてEvent処理を開始する側のコンポーネントについてです。開始側のコンポーネントでは『aura:registerEvent』タグを使って使用するLightningEventを宣言する必要があります。
開始側のコンポーネントのJavaScript処理はこのようになります。
『event.target.value』ではonchangeイベントが実行されたラジオボタンの値を取得できます。『$A.get()』の処理で対象のLightningEventの情報を変数にセットしています。そして『evt.setParams()』の処理でLightningEventで宣言した変数に値をセットしています。最後の『evt.fire();』によって別のコンポーネントに対してLightningEventにセットされた値の変更が反映されます。LightningEvent開始側の処理は以上になります。
LightningEventの変更結果を受け取る側のコンポーネントでは次のように『aura:handler event=””』と宣言することでEvent処理を実行することができます。
変更結果を受け取る側のコンポーネントのJavaScript処理です。
『event.getParam()』の処理でLightningEventの変数から値を取得できます。取得後は通常通りに処理を実装するだけです。
以上がLightningEventの実装例です。このように別々のコンポーネントをJavaScriptで簡単に連携することができるのですごく便利な機能だと思います。
YouTube: Lightning Account Search
『How to Lightning Components』ということで全3回に分けてLightning開発の基本的な部分について紹介させて頂きました。LightningはWinter’15ではまだベータ版のため使用できない機能もいくつかありましたが、今後のバージョンアップで新機能が追加されていくと思います。今のうちに基本的な使い方を確認しておくと正式リリースされた際にアプリ開発を始めやすいと思います。日本語版のLightning コンポーネント開発者ガイドも公開されていますのでぜひ実際に試してみてください。
