この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。
英語に切り替える

Lightning コンポーネント開発者ガイド

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

ステップ 6: アプリケーションとイベントをインタラクティブにする

イベントは、コンポーネント間でデータの共有を可能にすることによって、インタラクティブレイヤをアプリケーションに追加します。経費リストビューのチェックボックスをオン/オフにしたときに、関連するコンポーネントデータに基づいてビューとレコードの両方を更新するイベントを起動する必要がある場合があります。
次のフローチャートに、expenseList コンポーネントでチェックボックスをオン/オフにすることによってデータの変更が取得されるときの、アプリケーションでのデータフローを示します。[Reimbursed? (払い戻し済み?)] チェックボックスをオン/オフにすると、このブラウザのクリックイベントにより、ここで作成するアプリケーションイベントが起動されます。このイベントは、経費オブジェクトをハンドラコンポーネントに渡し、そのコントローラは Apex コントローラメソッドをコールして関連する経費レコードを更新します。ここでは、このサーバ応答を処理しないため、その後の応答はクライアント側で無視されます。経費でチェックボックスをオンにすると、レコードを更新するイベントがトリガされる。

イベントを起動して親コンポーネントのイベントを処理するには、まずイベントとそのハンドラを作成します。

  1. [ファイル] | [新規] | [Lightning イベント] をクリックします。
  2. [New Event (新規イベント)] ウィンドウで、「updateExpenseItem」と入力します。これにより、updateExpenseItem.evt という新しいイベントが作成されます。
  3. updateExpenseItem.evt で、次のコードを入力します。

    イベントで定義している属性が、起動元のコンポーネントからハンドラに渡されます。

    namespace を、登録済みの名前空間と置き換えます。

    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:event type="APPLICATION">
2    <aura:attribute name="expense" type="namespace.Expense__c"/>
3</aura:event>

    フレームワークには、コンポーネントイベントとアプリケーションイベントという 2 種類のイベントがあります。ここでは、アプリケーションイベントを使用します。アプリケーションイベントが起動されると、ハンドラに通知されます。この場合は、form.cmp に通知されて、イベントが処理されます。

    expenseList.cmp には、change="{!c.update}" で示されるクライアント側のコントローラアクションに接続されるチェックボックスが含まれていることを思い出してください。次に、update アクションを設定します。

  4. expenseList サイドバーで、[CONTROLLER] をクリックします。これにより、expenseListController.js という新しいリソースが作成されます。次のコードを入力します。
    namespace を、登録済みの名前空間と置き換えます。
    1swfobject.registerObject("clippy.codeblock-1", "9");({
2    update: function(component, evt, helper) {
3      var expense = component.get("v.expense");
4      var updateEvent = $A.get("e.namespace:updateExpenseItem");
5      updateEvent.setParams({ "expense": expense }).fire();
6    }
7})

    チェックボックスをオンまたはオフにすると、update アクションが実行され、reimbursed パラメータの値が true または false に設定されます。updateExpenseItem.evt イベントは、更新済みの expense オブジェクトを使用して起動されます。

  5. ハンドラコンポーネント form.cmp で、次のハンドラコードを <aura:attribute> タグの前に追加します。
    namespace を、登録済みの名前空間と置き換えます。
    1swfobject.registerObject("clippy.codeblock-2", "9");<aura:handler event="namespace:updateExpenseItem" action="{!c.updateEvent}" />

    このイベントハンドラは、作成したアプリケーションイベントが起動されると updateEvent アクションを実行します。

  6. イベントを処理するための updateEvent アクションを結び付けます。formController.js で、次のコードを createExpense コントローラアクションの後に入力します。 
    1swfobject.registerObject("clippy.codeblock-3", "9");updateEvent : function(component, event, helper) {
2    helper.upsertExpense(component, event.getParam("expense"));
3}

    このアクションは、ヘルパー関数をコールし、{ Name : "Lunch" , namespace__Client__c : "ABC Co." , namespace__Reimbursed__c : true , CreatedDate : "2014-08-12T20:53:09.000Z" , namespace__Amount__c : 20} 形式のパラメータと値が含まれた経費オブジェクトを含む event.getParam("expense") を渡します。

完成です! アプリケーションイベントを使用して、経費追跡アプリケーションでインタラクションのレイヤが正常に追加されました。ビューで払い戻し済み状況を変更すると、update イベントが起動され、親コンポーネントで処理されてから、サーバ側のコントローラアクション saveExpense が実行され、経費レコードが更新されます。

中級編

ライフサイク��の表示中には、このチュートリアルで使用した init イベントなどのいくつかのイベントがフレームワークによって起動されます。たとえば、サーバ応答をクライアントが待機しているときや、応答を受信したことを示すために doneWaiting イベントが起動されたときに、waiting イベント実行中のアプリケーションの動作をカスタマイズすることもできます。次の例に、waiting イベント実行中にアプリケーションでテキストを追加する方法と、doneWaiting イベントの起動時にテキストを削除する方法を示します。 

1<!-- form.cmp markup -->
2<aura:handler event="aura:waiting" action="{!c.waiting}"/>
3<aura:handler event="aura:doneWaiting" action="{!c.doneWaiting}"/>
4<aura:attribute name="wait" type="String"/>
5
6<div class="wait">
7    {!v.wait}
8</div>
1/** formController.js **/
2waiting : function(component, event, helper) {
3    component.set("v.wait", "updating...");
4},
5doneWaiting : function(component, event, helper) {
6    component.set("v.wait", "");
7}

新しいレコードを作成するために [送信] ボタンをクリックするか、経費項目のチェックボックスをオンにすると、このテキストがアプリケーションによって表示されます。詳細は、「表示ライフサイクル中に起動されたイベント」を参照してください。

https://<mySalesforceInstance>.lightning.force.com/<namespace>/expenseTracker.app (<mySalesforceInstance> は、na1 など、組織をホストしているインスタンスの名前です) にアクセスすると、スタンドアロンアプリケーションとして先ほど作成したアプリケーションに現時点でアクセスできます。Salesforce1 でアクセスできるようにするには、Salesforce1 への Lightning コンポーネントの追加を参照してください。アプリケーションをパッケージ化して AppExchange で配布するには、アプリケーションとコンポーネントの配布を参照してください。