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

Visualforce ページでの商品データ��表示

前提条件:

このレッスンでは、最初の Visualforce ページを拡張して、販売する商品のリストを表示します。このページはかなり単純に見えますが、たくさんの作業が必要なため Apex を使用するレッスンまで手早く進めましょう。Visualforce の詳細は、『Visualforce ワークブック』を参照してください。

ブラウザで、https://<your-instance>.salesforce.com/apex/Catalog にある商品カタログページを開き、ページエディタがまだ開いていない場合は開きます。
<apex:page> タグを編集して Merchandise__c 標準コントローラを有効にするようにコードを変更します。
1<apex:page standardController="Merchandise__c">
これにより、ページが組み込みのコントローラを使用してプラットフォーム上の Merchandise__c カスタムオブジェクトに接続されます。このコントローラは、Merchandise__c オブジェクトの参照、更新、新規作成など、多くの基本機能を提供します。
次に、標準リストコントローラ定義を追加します。
1<apex:page standardController="Merchandise__c" recordSetVar="products">
これにより、コントローラが Merchandise__c レコードのリストを一度に処理できるように設定されます。たとえば、カタログの商品のリストを表示できます。これが必要な作業です。
[保存] をクリックします。または、キーボードを使用する場合は Ctrl + S キーを押します。
ページが再読み込みされ、[Merchandise] タブが表示されていれば、そのタブが選択されます。それ以外の場合、ページに外観上の変化はありません。ただし、コントローラを使用するようにページを設定し、変数 products を定義したので、変数がページの本文で使用できるようになり、Merchandise__c レコードのリストを表します。
2 つの <apex:page> タグで囲まれたコードを、商品リストを保持する次のページブロックで置き換えます。
1swfobject.registerObject("clippy.codeblock-2", "9"); 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17<apex:pageBlock title="Our Products"> 18 19 20 21 <apex:pageBlockSection> 22 23 24 25 (Products Go Here) 26 27 28 29 </apex:pageBlockSection> 30 31 32 33</apex:pageBlock> 34 35
pageBlock タグと pageBlockSection タグは、ページ上に、プラットフォームの標準ビジュアルスタイルと同じユーザインターフェース要素を作成します。
これ以降、最新のコードを反映したページを確認する場合は適宜変更内容を保存してください。
メモ
それでは実際の商品リストを追加します。(Products Go Here) プレースホルダを選択し、それを削除します。「<apex:pageB」と入力を開始し、マウスまたは矢印キーを使用してドロップダウンリストから apex:pageBlockTable を選択し、Enter キーを押します。
エディタが開始タグと終了タグの両方を挿入し、カーソルはその間の挿入箇所に残ります。
次に、属性を pageBlockTable タグに追加する必要があります。value 属性は、pageBlockTable コンポーネントによる反復処理の対象となる品目のリストを示します。var 属性は、1 回の反復ごとにそのリストの各品目を pitem 変数に割り当てます。次の属性をタグに追加します。
1<apex:pageBlockTable value="{!products}" var="pitem">

次に、各列を定義し、pitem 変数の適切な項目を検索して列のデータを取得するようにします。次のコードを pageBlockTable の開始タグと終了タグの間に追加します。

1swfobject.registerObject("clippy.codeblock-4", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:pageBlockTable value="{!products}" var="pitem">
18
19    <apex:column headerValue="Product">
20
21        <apex:outputText value="{!pitem.Name}"/>
22
23    </apex:column>
24
25</apex:pageBlockTable>
26
27

[保存] をクリックすると、商品リストが表示されます。
headerValue 属性によって列のヘッダータイトルが設定され、その��に各商品レコードに対して 1 行ずつ、リストが表示されます。式 {!pitem.Name} は、現在の行の Name 項目を表示することを示します。

最初の列の終了タグの後に、さらに次の 2 つの列を追加します。

1<apex:column headerValue="Description">
2
3    <apex:outputField value="{!pitem.Description__c}"/>
4
5</apex:column>
6
7<apex:column headerValue="Price">
8
9    <apex:outputField value="{!pitem.Price__c}"/>
10
11</apex:column>

列が 3 つになると、テーブルの幅が狭いため、リストは圧縮されます。<apex:pageBlockSection> タグを変更して幅を広くします。
1<apex:pageBlockSection columns="1">
この変更により、セクションが 2 列から 1 列に変更され、1 つの列の幅が広くなります。

コードは次のようになります。

1swfobject.registerObject("clippy.codeblock-7", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardController="Merchandise__c" recordSetVar="products">
18
19
20
21    <apex:pageBlock title="Our Products">
22
23
24
25        <apex:pageBlockSection columns="1">
26
27
28
29            <apex:pageBlockTable value="{!products}" var="pitem">
30
31                <apex:column headerValue="Product">
32
33                    <apex:outputText value="{!pitem.Name}"/>
34
35                </apex:column>
36
37                <apex:column headerValue="Description">
38
39                    <apex:outputField value="{!pitem.Description__c}"/>
40
41                </apex:column>
42
43                <apex:column headerValue="Price">
44
45                    <apex:outputField value="{!pitem.Price__c}"/>
46
47                </apex:column>
48
49            </apex:pageBlockTable>
50
51
52
53        </apex:pageBlockSection>
54
55
56
57    </apex:pageBlock>
58
59
60
61</apex:page>

これで商品カタログが完成しました。

もうひとこと...

pageBlockTable コンポーネントは、行を含むテーブルを作成し、各行はリストを反復処理して出力されます。このページに使用した標準コントローラは Merchandise__c に設定され、recordSetVar は products に設定されました。その結果、コントローラはデータベースから取得された商品レコードを使用して商品リスト変数に自動的にデータを入力します。このリストを pageBlockTable コンポーネントが使用します。
リストを反復処理するときに、現在のレコードを参照する方法が必要です。var="pitem" ステートメントは、現在の行のレコードを保持する pitem という変数を割り当てます。

Apex ワークブック

Visualforce ページでの商品データ��表示