ステップ 5: Visualforce ページとして在庫数量シートを表示する

Visualforce ページの詳細部分を具体化するすべての機能は準備できました。ページにはすべての商品レコード、および各在庫数量を更新できる入力項目を含むテーブルが表示されます。

1. </h1> タグの下で、新しい行に「<apex:f 」と入力を開始し、ドロップダウンリストに表示される <apex:form> を強調表示します。このフォームによってページを更新できます。
2. Enter キーを押し、開始タグと終了タグがシステムによって生成されたことを確認します。
3. これらのタグ間にカーソルを置き、データテーブルを作成します。「<apex:d」と入力を開始し、ドロップダウンリストから dataTable を選択して Enter キーを押します。
4. 次に、属性を dataTable タグに追加する必要があります。タグ内の 1 行または複数行で、次のコードを入力します。
   1<apex:dataTable value="{!products}" var="pitem" rowClasses="odd,even">

   value 属性は、dataTable コンポーネントによる反復処理の対象となる品目のリストを示します。var 属性は、1 回の反復ごとにそのリストの各品目を pvitem 変数に割り当てます。rowClasses 属性は、CSS スタイル名を代替行に割り当てます。

5. 次に、各列を定義し、pitem 変数の適切な項目を検索して列のデータを取得するようにします。次のコードを dataTable の開始タグと終了タグの間に追加します。
   1<apex:dataTable value="{!products}" var="pitem" rowClasses="odd,even"> 
   2   <apex:column headerValue="Product">
   3      <apex:outputText value="{!pitem.name}"/>
   4   </apex:column>
   5</apex:dataTable>

6. [保存] をクリックするとテーブルが表示されます。
   
   headerValue 属性によって列のヘッダータイトルが設定され、その下に各商品レコードに対して 1 行ずつ、リストが表示されます。式 {!pitem.name} は、現在の行の名前項目を表示することを示します。
7. 最初の列の終了タグの後に、さらに次の 2 つの列を追加します。
   1<apex:column headerValue="Inventory">
   2   <apex:outputField value="{!pitem.Quantity__c}"/>
   3</apex:column>
   4<apex:column headerValue="Physical Count">
   5   <apex:inputField value="{!pitem.Quantity__c}"/>
   6   </apex:column>

   第 2 列は、outputField ではなく inputField です。inputField には値が表示されますが、その値を変更することもできます。

   メモ

8. [保存] をクリックして在庫数量シートを保存します。すべての商品レコードの一覧に、現在の在庫および実際の数量の入力項目が表示されます。
9. 最後の仕上げとして、任意の行で実際の数量を変更してページの値を更新するためのボタンを追加します。これを行うには、</apex:form> 行の上に直接次のコードを入力します。
   1<br/>
   2<apex:commandButton action="{!quicksave}"  value="Update Counts" />