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

Apex コントローラへの action メソッドの追加

このレッスンでは、action メソッドをコントローラに追加して新しい [Add to Cart (カートに追加)] ボタンのクリックを処理できるようにし、またショッピングカートの内容を出力する新しいメソッドも追加します。Visualforce が透過的にデータをコントローラに戻して処理できるようにする方法を確認します。Visualforce 側で、ボタンと、買い物客が入力するフォーム項目をページに追加します。

[StoreFrontController] をクリックして、ページのコントローラコードを編集します。

次のショッピングカートコードを StoreFrontController の定義の products インスタンス変数の直後に追加し、[Quick Save (適用)] をクリックします。

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17List<DisplayMerchandise> shoppingCart = new List<DisplayMerchandise>();
18
19
20
21// Action method to handle purchasing process 
22
23public PageReference addToCart() {
24
25    for(DisplayMerchandise p : products) {
26
27        if(0 < p.qtyToBuy) {
28
29            shoppingCart.add(p);
30
31        }
32
33    }
34
35    return null; // stay on the same page 
36
37}
38
39
40
41public String getCartContents() {
42
43    if(0 == shoppingCart.size()) {
44
45        return '(empty)';
46
47    }
48
49    String msg = '<ul>\n';
50
51    for(DisplayMerchandise p : shoppingCart) {
52
53        msg += '<li>';
54
55        msg += p.name + ' (' + p.qtyToBuy + ')';
56
57        msg += '</li>\n';
58
59    }
60
61    msg += '</ul>';
62
63    return msg;
64
65}
66
67

これで、商品カタログに購入用ユーザインターフェースを追加できる状態になりました。

[Catalog (カタログ)] をクリックしてページの Visualforce コードを編集します。
商品カタログを form タグでラップします。ページ構造は次のコードのようになります。
1<apex:page controller="StoreFrontController"> 2 3 <apex:form> 4 5  6 7 </apex:form> 8 9</apex:page>
<apex:form> コンポーネントを使用すると、ユーザが送信したデータをページからコントローラに返送できます。
次のコードを使用して 4 つ目の列を商品リストテーブルに追加します。
1<apex:column headerValue="Qty to Buy"> 2 3 <apex:inputText value="{!pitem.qtyToBuy}" rendered="{! pitem.inStock}"/> 4 5 <apex:outputText value="Out of Stock" rendered="{! NOT(pitem.inStock)}"/> 6 7</apex:column>
この列は、購入数量入力用のフォーム項目、または各商品の DisplayMerchandise.inStock() メソッドの値に基づいた在庫切れ通知のためのフォーム項目になります。
[保存] をクリックしてページを再読み込みします。
購入客が各商品の購入数量を入力するための新しい列があります。
次のコードを </apex:pageBlock> タグの直前に入力して、ショッピングカートボタンを追加します。
1<apex:pageBlockSection> 2 3 <apex:commandButton action="{!addToCart}" value="Add to Cart"/> 4 5</apex:pageBlockSection>
この段階で [保存] をクリックしてフォームを試すと、すべてが機能しますが、ショッピングカートが表示されないため効果は確認できません。

次のコードをページの </apex:form> 終了タグのすぐ上に追加します。

1<apex:pageBlock title="Your Cart" id="shopping_cart">
2
3    <apex:outputText value="{!cartContents}" escape="false"/>
4
5</apex:pageBlock>

[保存] をクリックして、フォームを試します。ショッピングカートに品目を追加できるようになりました。この場合、単純なテキスト表示のみです。現実のシナリオでは、注文のメール送信、Web サービスの呼び出し、データベースの更新などが考えられます。
効果を追加するために、[Add to Cart (カートに追加)] commandButton のコードを変更します。
1<apex:commandButton action="{!addToCart}" value="Add to Cart" reRender="shopping_cart"/>
[保存] をクリックしてフォームを使用すると、ショッピングカートがページの再読み込みではなく Ajax 経由で更新されます。

もうひとこと...

このレッスンで確認したように、Visualforce は自動的にフォームでのデータ変更を元の商品変数に複製します。この機能はきわめて強力で、フォームやその他の複雑な入力ページをすぐに作成できます。
[Add to Cart (カートに追加)] ボタンをクリックすると、画面全体は更新されずに、ショッピングカートパネルが更新されます。これを行う Ajax 効果には、通常複雑な JavaScript 操作が必要ですが、単純な reRender 属性で実現することができました。
[Qty to Buy (購入数量)] 項目の値を変えて [Add to Cart (カートに追加)] を複数回クリックすると、ショッピングカートで商品が重複するというバグがあります。これまでの Apex の知識でバグを発見して修復できるでしょうか。1 つの方法として考えられるのは、特定の List を Map に変更し、重複した ID を記録してチェックできるようにすることです。このドキュメントや紹介した参考資料から、必要な Map メソッドを探してみてください。

Apex ワークブック

Apex コントローラへの action メソッドの追加