この文章は 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");<apex:pageBlock title="Our Products"> 2 3 <apex:pageBlockSection> 4 5 (Products Go Here) 6 7 </apex:pageBlockSection> 8 9</apex:pageBlock> 10
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");<apex:pageBlockTable value="{!products}" var="pitem">
2    <apex:column headerValue="Product">
3        <apex:outputText value="{!pitem.Name}"/>
4    </apex:column>
5</apex:pageBlockTable>
6

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

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

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

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

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

1swfobject.registerObject("clippy.codeblock-7", "9");<apex:page standardController="Merchandise__c" recordSetVar="products">
2
3    <apex:pageBlock title="Our Products">
4
5        <apex:pageBlockSection columns="1">
6
7            <apex:pageBlockTable value="{!products}" var="pitem">
8                <apex:column headerValue="Product">
9                    <apex:outputText value="{!pitem.Name}"/>
10                </apex:column>
11                <apex:column headerValue="Description">
12                    <apex:outputField value="{!pitem.Description__c}"/>
13                </apex:column>
14                <apex:column headerValue="Price">
15                    <apex:outputField value="{!pitem.Price__c}"/>
16                </apex:column>
17            </apex:pageBlockTable>
18
19        </apex:pageBlockSection>
20
21    </apex:pageBlock>
22
23</apex:page>

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

もうひとこと...

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

Apex ワークブック

No Results

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