Lightning コンポーネント開発者ガイド
jステップ 2: ユーザ入力用のコンポーネントを作成する
コンポーネントは、アプリケーションのビルディングブロックです。コンポーネントを Apex コントローラクラスに接続して、データを読み込むことができます。このステップで作成するコンポーネントにより、経費の金額や日付など、経費に関するユーザ入力を受け入れるフォームが提供されます。
- をクリックします。
- [New Lightning Bundle (新規 Lightning バンドル)] ポップアップウィンドウの [Name (名前)] 項目に、「form」 (フォーム) と入力します。これにより、form.cmp という新しいコンポーネントが作成されます。
-
ソースコードエディタで、次のコードを入力します。
1swfobject.registerObject("clippy.codeblock-0", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<aura:component> 18 <ltng:require styles="/resource/bootstrap"/> 19 <aura:attribute name="expenses" type="Expense__c[]"/> 20 <aura:attribute name="newExpense" type="Expense__c" 21 default="{ 'sobjectType': 'Expense__c', 22 'Name': '', 23 'Amount__c': 0, 24 'Client__c': '', 25 'Date__c': '', 26 'Reimbursed__c': false 27 }"/> 28 <!-- Attributes for Expense Counters --> 29 <aura:attribute name="total" type="Double" default="0.00" /> 30 <aura:attribute name="exp" type="Double" default="0" /> 31 32 <!-- Input Form using components --> 33 <div class="bootstrap-sf1"> 34 <div class="container"> 35 <form> 36 <fieldset> 37 <ui:inputText aura:id="expname" label="Expense Name" 38 class="form-control" 39 value="{!v.newExpense.Name}" 40 placeholder="My Expense" required="true"/> 41 <ui:inputNumber aura:id="amount" label="Amount" 42 class="form-control" 43 value="{!v.newExpense.Amount__c}" 44 placeholder="20.80" required="true"/> 45 <ui:inputText aura:id="client" label="Client" 46 class="form-control" 47 value="{!v.newExpense.Client__c}" 48 placeholder="ABC Co."/> 49 <ui:inputDateTime aura:id="expdate" label="Expense Date" 50 class="form-control" 51 value="{!v.newExpense.Date__c}" 52 displayDatePicker="true"/> 53 <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?" 54 class="checkbox" 55 value="{!v.newExpense.Reimbursed__c}"/> 56 <ui:button label="Submit" press="{!c.createExpense}"/> 57 </fieldset> 58 </form> 59 </div><!-- ./container--> 60 61 <!-- Expense Counters --> 62 <div class="container"> 63 <div class="row"> 64 <div class="col-sm-6"> 65 <!-- Make the counter red if total amount is more than 100 --> 66 <div class="{!v.total >= 100 ? 'alert alert-danger' : 'alert alert-info'}"> 67 <h3>Total Expenses</h3>$<ui:outputNumber value="{!v.total}" format=".00"/> 68 </div> 69 </div> 70 <div class="col-sm-6"> 71 <div class="alert alert-info"> 72 <h3>No. of Expenses</h3><ui:outputNumber value="{!v.exp}"/> 73 </div> 74 </div> 75 </div> 76 </div> 77 <!-- Display expense records --> 78 <div class="container"> 79 <div id="list" class="row"> 80 <aura:iteration items="{!v.expenses}" var="expense"> 81 <!-- If you’re using a namespace, use the format {!expense.myNamespace__myField__c} instead. --> 82 <p>{!expense.Name}, {!expense.Client__c}, {!expense.Amount__c}, {!expense.Date__c}, {!expense.Reimbursed__c}</p> 83 </aura:iteration> 84 </div> 85 </div> 86 </div><!--./bootstrap-sf1--> 87</aura:component>コンポーネント��は、豊富な属性セットが提供され、ブラウザイベントがサポートされます。属性は型付けされた項目で、コンポーネントの特定のインスタンスに設定されており、式の構文を使用して参照できます。すべての aura:attribute タグには、名前とデータ型の値があります。詳細は、「サポートされる aura:attribute の型」 を参照してください。
この属性と式は、アプリケーションを作成していく過程で明確になります。{!v.exp} は経費レコード数を評価し、{!v.total} は合計金額を評価します。{!c.createExpense} は、[実行] ボタンをクリックしたときに実行されるクライアント側のコントローラアクションを表します。このアクションにより、新しい経費が作成されます。ui:button の press イベントでは、ボタンをクリックしたときのアクションを結び付けられます。
式 {!v.expenses} は、コンポーネントを経費オブジェクトに接続します。var="expense" は、反復内の各項目に使用する変数の名前を示します。{!expense.Client__c} は、経費オブジェクトのクライアント項目にバインドするデータを表します。 -
サイドバーで [STYLE] をクリックして、form.css という名前の新しいリソースを���成します。次の CSS ルールセットを入力します。
1swfobject.registerObject("clippy.codeblock-1", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17.THIS .uiInputDateTime+.datePicker-openIcon { 18 position: absolute; 19 left: 90%; 20 top: 30px; 21} 22 23.THIS .uiInputDefaultError li { 24 list-style: none; 25} -
アプリケーションにコンポーネントを追加します。expenseTracker.app で、マークアップに新しいコンポーネントを追加します。
次の手順は、<c:form /> をマークアップに追加します。名前空間を使用している場合は、<myNamespace:form /> を代わりに使用できます。
1swfobject.registerObject("clippy.codeblock-2", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<aura:application> 18 <ltng:require styles="/resource/bootstrap"/> 19 <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 20 21 <div class="bootstrap-sf1"> 22 <div class="navbar navbar-inverse"> 23 <div class="navbar-header"> 24 <a href="#" class="navbar-brand">My Expenses</a> 25 </div> 26 </div> 27 <div class="container"> 28 <c:form /> 29 </div> 30 </div> 31</aura:application> -
変更を保存し、サイドバーの [プレビューを更新] をクリックしてアプリケーションをプレビューします。または、ブラウザを再読み込みします。
お疲れ様です。入力フォームを提供し、経費を表示するコンポーネントが作成されました。
中級編
Lightning コンポーネントフレームワークには、aura や ui などの異なる名前空間に整理され、すぐに使用できる一連のコンポーネントが含まれています。ui 名前空間には、UI フレームワークの一般的なコンポーネントがあります。たとえば、ui:inputText はテキスト項目に対応します。aura 名前空間には、このステップで使用する aura:iteration など、中核となるフレームワーク機能のための多くのコンポーネントが含まれています。