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

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

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

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

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

コンポーネントでは、豊富な属性セットが提供され、ブラウザイベントがサポートされます。属性は型付けされた項目で、コンポーネントの特定のインスタンスに設定されており、式の構文を使用して参照できます。すべての 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 ルールセットを入力します。

THIS は、CSS に名前空間を追加して別のコンポーネントとのスタイルの競合を回避するためのキーワードです。.uiInputDefaultError セレクタは、「ステップ 5: 新しい経費の入力を有効化する」で項目検証を追加するときのデフォルトのエラーコンポーネントのスタイルを設定します。
メモ
アプリケーションにコンポーネントを追加します。expenseTracker.app で、マークアップに新しいコンポーネントを追加します。

次の手順は、<c:form /> をマークアップに追加します。名前空間を使用している場合は、<myNamespace:form /> を代わりに使用できます。組織に名前空間プレフィックスを設定していない場合は、作成したコンポーネントを参照するときにデフォルトの名前空間 c を使用します。
変更を保存し、サイドバーの [Update Preview (プレビューを更新)] をクリックしてアプリケーションをプレビューします。または、ブラウザを再読み込みします。

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

成功です。入力フォームを提供し、経費を表示するコンポーネントが作成されました。次に、経費を表示するロジックを作成します。

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

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

関連項目: