ステップ 6: インライン編集サポートを追加する

これで、すべての商品レコードを表示し、実際の数量の入力項目で在庫数量を編集できるテーブルが含まれた Visualforce ページが完成しました。このステップでは、テーブルを変更して在庫出力項目のインライン編集サポートを追加します。また、インライン編集によって実際の数量の入力項目は不要になるため、この項目が含まれる最後の列を削除します。このステップの実行後、[Total Inventory (在庫数)] 列の項目をダブルクリックして在庫数量を編集できるようになります。

前のステップの最後の列で実際の数量を編集する inputField を使用する代わりに、inlineEditSupport コンポーネントを outputField コンポーネントの子コンポーネントとして追加することで、在庫列を編集可能にできます。これを行う手順を次に示します。

1. 実際の在庫列用の次のマークアップを削除します。
   1<apex:column headerValue="Physical Count">
   2   <apex:inputField value="{!pitem.Quantity__c}"/>
   3</apex:column>

2. 在庫列内で、outputField コンポーネントを分割して次のように終了タグを含めます。
   1<apex:outputField value="{!pitem.Quantity__c}">
   2
   3</apex:outputField>

3. outputField の開始タグと終了タグの間に inlineEditSupport コンポーネントを挿入します。
   1<apex:inlineEditSupport event="ondblclick" showOnEdit="update"/>

4. これで inlineEditSupport コンポーネントが追加されたため、更新ボタンを変更して ID とスタイルクラス名を付けます。ID は、編集中にボタンを表示するために inlineEditSupport コンポーネントによって参照されます。スタイルクラス名は、最初にページが表示されるときに更新ボタンを非表示にする styles.css で使用されます。commandButton を次のコードで置き換えます。
   1<apex:commandButton id="update" action="{!quicksave}" value="Update Counts" 
   2  styleclass="updateButton"/>

5. Visualforce マークアップは次のようになります。
   1<apex:page standardStylesheets="false" showHeader="false" sidebar="false" 
   2  standardController="Merchandise__c" recordsetVar="products">
   3   <apex:stylesheet value="{!URLFOR($Resource.styles, 'styles.css')}"/>
   4   <h1>Inventory Count Sheet</h1> 
   5   <apex:form>
   6      <apex:dataTable value="{!products}" var="pitem" rowClasses="odd,even"> 
   7         <apex:column headerValue="Product">
   8            <apex:outputText value="{!pitem.name}"/>
   9         </apex:column>
   10         <apex:column headerValue="Inventory">
   11            <apex:outputField value="{!pitem.Quantity__c}">
   12               <apex:inlineEditSupport event="ondblclick" showOnEdit="update"/>
   13            </apex:outputField>
   14         </apex:column>
   15      </apex:dataTable>
   16      <br/>
   17      <apex:commandButton id="update" action="{!quicksave}" value="Update Counts" 
   18        styleclass="updateButton"/>
   19   </apex:form>
   20</apex:page>

6. 保存します。ページに 2 列の在庫数量テーブルが表示されました。最初は [Update Counts (在庫数を更新)] ボタンは非表示になっています。
7. 在庫列の任意のセルをダブルクリックします。その項目が動的に入力項目になり、[Update Counts (在庫数を更新)] ボタンが表示されます。
   
8. 数量の値を変更し、[Update Counts (在庫数を更新)] をクリックしてこの更新を確定します。