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

ステップ 2: ユーザ入力用のコンポーネントを作成する

コンポーネントは、アプリケーションのビルディングブロックです。コンポーネントを Apex コントローラクラスに接続して、データを読み込むことができます。このステップで作成するコンポーネントにより、経費の金額や日付など、経費に関するユーザ入力を受け入れるフォームが提供されます。

[File (ファイル)] | [New (新規)] | [Lightning コンポーネント] をクリックします。
[New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「form」 (フォーム) と入力します。これにより、form.cmp という新しいコンポーネントが作成されます。

ソースコードエディタで、次のコードを入力します。

次のコードは、経費を作成するためにユーザ入力を受け入れる入力フォームを作成します。これは、スタンドアロンアプリケーションと Salesforce1 の両方で動作します。Salesforce1 に固有の Lightning アプリケーションでは、force:createRecord を使用してレコードの作成ページを開くことができます。

メモ

1<aura:component>
2  <ltng:require styles="/resource/bootstrap"/>
3  <aura:attribute name="expenses" type="Expense__c[]"/>
4  <aura:attribute name="newExpense" type="Expense__c"
5         default="{ 'sobjectType': 'Expense__c',
6                         'Name': '',
7                         'Amount__c': 0,
8                         'Client__c': '', 
9                         'Date__c': '',
10                         'Reimbursed__c': false
11                       }"/>
12  <!-- If you registered a namespace, replace line 3-11 with the following -->
13  <!-- <aura:attribute name="expenses" type="myNamespace.Expense__c[]"/> 
14  <aura:attribute name="newExpense" type="myNamespace__Expense__c"
15               default="{ 'sobjectType': 'myNamespace__Expense__c',
16                          'Name': '',
17                          'myNamespace__Amount__c': 0,
18                          'myNamespace__Client__c': '',
19                          'myNamespace__Date__c': '',
20                          'myNamespace__Reimbursed__c': false
21                         }"/> -->
22  <!-- Attributes for Expense Counters -->
23  <aura:attribute name="total" type="Double" default="0.00" />
24  <aura:attribute name="exp" type="Double" default="0" />
25
26  <!-- Input Form using components -->
27  <div class="bootstrap-sf1">	
28        <div class="container">
29            <form>
30                <fieldset>
31                    <ui:inputText aura:id="expname" 
32                                  label="Expense Name"
33                                  class="form-control" 
34                                  value="{!v.newExpense.Name}"
35                                  placeholder="My Expense" required="true"/>
36
37                    <!-- If you registered a namespace,
38                         the attributes include your namespace.
39                         For example, value="{!v.newExpense.myNamespace__Amount__c}" -->
40                    <ui:inputNumber aura:id="amount" 
41                                    label="Amount" 
42                                    class="form-control"
43                                    value="{!v.newExpense.Amount__c}"
44                                    placeholder="20.80" required="true"/>
45                    <ui:inputText aura:id="client" 
46                                  label="Client" 
47                                  class="form-control"
48                                  value="{!v.newExpense.Client__c}"
49                                  placeholder="ABC Co."/>
50                    <ui:inputDateTime aura:id="expdate" 
51                                      label="Expense Date" 
52                                      class="form-control"
53                                      value="{!v.newExpense.Date__c}"
54                                      displayDatePicker="true"/>
55                    <ui:inputCheckbox aura:id="reimbursed" 
56                                      label="Reimbursed?"
57                                      class="checkbox"
58                                      value="{!v.newExpense.Reimbursed__c}"/>
59                    <ui:button label="Submit" 
60                               labelClass="label" 
61                               press="{!c.createExpense}"/>
62                </fieldset>
63            </form>
64   </div><!-- ./container-->
65
66  <!-- Expense Counters -->
67  <div class="container">
68          <div class="row">
69              <div class="col-sm-6">
70                <!-- Make the counter red if total amount 
71                     is more than 100 -->
72                <div class="{!v.total >= 100 ? 
73                                      'alert alert-danger' : 
74                                      'alert alert-info'}">
75                  <h3>Total Expenses</h3>
76                  $<ui:outputNumber value="{!v.total}" format=".00"/>
77                </div>
78              </div>
79              <div class="col-sm-6">
80                  <div class="alert alert-info">
81                      <h3>No. of Expenses</h3>
82                      <ui:outputNumber value="{!v.exp}"/>
83                  </div>
84               </div>
85          </div>
86  </div>
87          <!-- Display expense records -->
88          <div class="container">
89              <div id="list" class="row">
90                 <aura:iteration items="{!v.expenses}" var="expense">
91                     <!-- If you’re using a namespace, 
92                          use the format {!expense.myNamespace__myField__c} instead. -->
93	              <p>{!expense.Name}, {!expense.Client__c}, 
94                        {!expense.Amount__c}, {!expense.Date__c}, 
95                        {!expense.Reimbursed__c}</p>                     
96                </aura:iteration>
97              </div>
98          </div> 
99    </div>
100</aura:component>

コンポーネントでは、豊富な属性セットが提供され、ブラウザイベントがサポートされます。属性は型付けされた項目で、コンポーネントの特定のインスタンスに設定されており、式の構文を使用して参照できます。すべての aura:attribute タグには、名前とデータ型の値があります。詳細は、「サポートされる aura:attribute の型」を参照してください。

この属性と式は、アプリケーションを作成していく過程で明確になります。{!v.exp} は経費レコード数を評価し、{!v.total} は合計金額を評価します。{!c.createExpense} は、[Submit (実行)] ボタン (1) をクリックしたときに実行されるクライアント側のコントローラアクションを表します。このアクションにより、新しい経費が作成されます。ui:button の press イベントでは、ボタンをクリックしたときのアクションを結び付けられます。

式 {!v.expenses} は、コンポーネントを経費オブジェクトに接続します。var="expense" は、反復内の各項目に使用する変数の名前を示します。{!expense.Client__c} は、経費オブジェクトのクライアント項目にバインドするデータを表します。

Expense__c 型の newExpense のデフォルト値は、sobjectType を含め正しい項目で初期化する必要があります。デフォルト値を初期化することで、経費が正しい形式で保存されます。

メモ

サイドバーで [STYLE] をクリックして、form.css という名前の新しいリソースを作成します。次の CSS ルールセットを入力します。
1.THIS .uiInputDateTime .datePicker-openIcon { 2 position: absolute; 3 left: 45%; 4 top: 45%; 5} 6 7.THIS .uiInputDateTime .timePicker-openIcon { 8 position: absolute; 9 left: 95%; 10 top: 70%; 11} 12 13.THIS .uiInputDefaultError li { 14 list-style: none; 15} 16 17.THIS .label { 18 color: #000; 19}
THIS は、CSS に名前空間を追加して別のコンポーネントとのスタイルの競合を回避するためのキーワードです。.uiInputDefaultError セレクタは、「ステップ 5: 新しい経費の入力を有効化する」で項目検証を追加するときのデフォルトのエラーコンポーネントのスタイルを設定します。
メモ

アプリケーションにコンポーネントを追加します。expenseTracker.app で、マークアップに新しいコンポーネントを追加します。

次の手順は、<c:form /> をマークアップに追加します。名前空間を使用している場合は、<myNamespace:form /> を代わりに使用できます。

1<aura:application>
2    <ltng:require styles="/resource/bootstrap"/>
3    
4    <div class="bootstrap-sf1">
5        <div class="navbar navbar-inverse">
6            <div class="navbar-header">
7              <a href="#" class="navbar-brand">My Expenses</a>
8            </div>
9         </div>
10        <div class="container">
11            <c:form />
12        </div>
13    </div>
14</aura:application>

変更を保存し、サイドバーの [Update Preview (プレビューを更新)] をクリックしてアプリケーションをプレビューします。または、ブラウザを再読み込みします。

このステップでは、Apex コントローラクラスをまだ作成していないため、作成したコンポーネントにデータは表示されませ��。
メモ

お疲れ様です。入力フォームを提供し、経費を表示するコンポーネントが作成されました。

中級編

Lightning コンポーネントフレームワークには、aura や ui などの異なる名前空間に整理され、すぐに使用できる一連のコンポーネントが含まれています。ui 名前空間には、UI フレームワークの一般的なコンポーネントがあります。たとえば、ui:inputText はテキスト項目に対応します。aura 名前空間には、このステップで使用する aura:iteration など、中核となるフレームワーク機能のための多くのコンポーネントが含まれています。

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

ステップ 2: ユーザ入力用のコンポーネントを作成する

中級編

関連項目: