この文章は 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

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

コンポーネントは、アプリケーションのビルディングブロックです。コンポーネントを Apex コントローラクラスに接続して、データを読み込むことができます。このステップで作成するコンポーネントにより、経費の金額や日付など、経費に関するユーザ入力を受け入れるフォームが提供されます。
  1. [ファイル] | [新規] | [Lightning コンポーネント] をクリックします。
  2. [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「form」 (フォーム) と入力します。これにより、form.cmp という新しいコンポーネントが作成されます。
  3. ソースコードエディタで、次のコードを入力します。namespace を、登録済みの名前空間と置き換えます。

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

    メモ

    1swfobject.registerObject("clippy.codeblock-0", "9");<aura:component>
2  <aura:attribute name="expenses" type="namespace.Expense__c[]"/>
3  <aura:attribute name="newExpense" type="namespace.Expense__c"
4             default="{ 'sobjectType': 'namespace__Expense__c',
5                         'Name': '',
6                         'namespace__Amount__c': 0,
7                         'namespace__Client__c': '', 
8                         'namespace__Date__c': '',
9                         'namespace__Reimbursed__c': false
10                       }"/>
11  <!-- Attributes for Expense Counters -->
12  <aura:attribute name="total" type="Double" default="0.00" />
13  <aura:attribute name="exp" type="Double" default="0" />
14
15  <!-- Input Form using components -->
16  <form>
17    <fieldset>
18      <ui:inputText aura:id="expname" label="Expense Name"
19                    class="form-control" 
20                    value="{!v.newExpense.Name}"
21                    placeholder="My Expense" required="true"/>
22      <ui:inputNumber aura:id="amount" label="Amount" 
23                    class="form-control"
24                    value="{!v.newExpense.namespace__Amount__c}"
25                    placeholder="20.80" required="true"/>
26      <ui:inputText aura:id="client" label="Client" 
27                    class="form-control"
28                    value="{!v.newExpense.namespace__Client__c}"
29                    placeholder="ABC Co."/>
30      <ui:inputDateTime aura:id="expdate" label="Expense Date" 
31                    class="form-control"
32                    value="{!v.newExpense.namespace__Date__c}"
33                    displayDatePicker="true"/>
34      <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
35                    value="{!v.newExpense.namespace__Reimbursed__c}"/>
36      <ui:button label="Submit" press="{!c.createExpense}"/>
37    </fieldset>
38  </form>
39
40  <!-- Expense Counters -->
41  <div class="row">
42    <!-- Change the counter color to red if total amount is more than 100 -->
43    <div class="{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-success'}">
44      <h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00"/>
45    </div>
46    <div class="alert alert-success">
47      <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/>
48    </div>
49  </div>
50
51  <!-- Display expense records -->
52  <div class="row">
53    <aura:iteration items="{!v.expenses}" var="expense">
54        <p>{!expense.Name}, {!expense.namespace__Client__c}, {!expense.namespace__Amount__c}, {!expense.namespace__Date__c}, {!expense.namespace__Reimbursed__c}</p>
55    </aura:iteration>
56    </div>
57</aura:component>

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

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

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

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

    メモ

  4. サイドバーで [STYLE] をクリックして、form.css という名前の新しいリソースを作成します。次の CSS ルールセットを入力します。
    1swfobject.registerObject("clippy.codeblock-1", "9");.THIS .uiInputCheckbox {
2    margin-left: 20px;
3}
4
5.THIS .uiButton {
6    margin-bottom: 20px;
7}
8
9.THIS .row {
10    width: 100%;
11    margin-bottom: 20px;
12}
13
14.THIS .blue {
15    background: #d9edf2;
16}
17
18.THIS .white {
19    background: #ffffff;
20}
21
22.THIS .uiInput.uiInputDateTime {
23    position: relative;
24}
25
26.THIS .uiInputDateTime+.datePicker-openIcon {
27    position: absolute;
28    display: inline-block;
29    left: 90%;
30    top: 25px;
31    background-position: center;
32    padding: 2% 5%;
33}
34
35.THIS .uiInputDefaultError li {
36  list-style: none;
37}

    .uiInputDefaultError セレクタは、ステップ 5: 新しい経費の入力を有効化するで項目検証を追加するときのデフォルトのエラーコンポーネントのスタイルを設定します。

    メモ

  5. アプリケーションにコンポーネントを追加します。expenseTracker.app で、マークアップに新しいコンポーネントを追加します。
    namespace を、登録済みの名前空間と置き換えます。
    1swfobject.registerObject("clippy.codeblock-2", "9");<aura:application>
2     <link href='/resource/bootstrap/' rel="stylesheet"/>
3    <div class="container">
4        <h1>Add Expense</h1>
5
6        <!-- Add the component here -->
7        <namespace:form />
8    </div>
9</aura:application>
  6. 変更を保存し、サイドバーの [プレビューを更新] をクリックしてアプリケーションをプレビューします。または、ブラウザを再読み込みします。

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

    メモ

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

中級編

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