Visualforce 開発者ガイド
jVisualforce と HTML の組み合わせ
作成するモバイル対応ページのビジュアルデザインを Salesforce アプリケーションに近づける場合は、フォーム要素や出力テキストに Visualforce タグ、ページ構造に静的 HTML を使用します。モバイル限定ページの場合は、既存の Visualforce ページをこの方法で簡単に変換できますが、Salesforce アプリケーションと Salesforce フルサイトの両方で使用するページにはこの方法はあまり適していません。
この方法で設計された Visualforce ページも、標準の要求-応答サイクル、標準のコントローラ機能、フォーム項目用の <apex:inputField>、POSTBACK およびビューステートなどを使用することから、「標準」の Visualforce に該当します。Salesforce フルサイトのページ作成との主な相違点は、静的 HTML が優先されるため、構造をページに追加するための Visualforce タグの使用が減少または排除されることです。つまり、<apex:pageBlock>、<apex:pageBlockSection> などが、<div>、<p>、<span> などに置換されます。
このアプローチではまた、ページ要素のデザインを管理するために CSS スタイルシートを作成する必要があります。この点は、Visualforce コンポーネントの使用時に、自動適用される組み込みのスタイルが提供される点とは異なります。スタイルシートは、作成に時間のかかることもありますが、Salesforce アプリケーションのビジュアルデザインにかなり近づけることができます。同時に、この方法で設計されたページのビジュアルデザインは Salesforce フルサイトと同じになりません。
このアプローチの Visualforce ページへの適用
Salesforce アプリケーションで使用するページの作成にこのアプローチを採用する場合は、次の一般的なルールに従います。
- 次の Visualforce タグは使用しません。
- <apex:pageBlock>
- <apex:pageBlockButtons>
- <apex:pageBlockSection>
- <apex:pageBlockSectionItem>
- <apex:pageBlockTable>
- フォームには <apex:form>、<apex:inputField> または <apex:input>、<apex:outputLabel> を使用します。
- 編集不能のテキストには <apex:outputText> または Visualforce を使用します。
- ページの構造の構築には、<div>、<span>、<h1>、<p> など、任意の HTML を使用します。
- CSS スタイル設定を使用して、希望するビジュアルデザインを適用します。
利点と制限事項
このアプローチには次の利点があります。
- 通常の Visualforce 開発ツールおよびプロセスを使用して、かなり短時間で開発できます。
- 既存のページをかなり簡単に再設定できます。
- Salesforce アプリケーションのデザインに近づけることができます。
留意すべき制限事項
- このアプローチでは、通常の Visualforce 要求が往復処理されるため、JavaScript Remoting を使用して���バイル用に完全に最適化するアプローチに比べてデータペイロードが大きくなります。
- <apex:pageBlock> と関連コンポーネントによって自動的に追加されたスタイルを置換する CSS スタイルを追加する余分な作業があります。
Visualforce と HTML を組み合わせたページの例
次のサンプルコードは、ユーザが倉庫レコードを編集できるようにする、HTML と Visualforce ページの組み合わせを示します。編集機能は、オブジェクトの標準コントローラによって提供されます。
1<apex:page standardController="Warehouse__c">
2
3<style>
4 html, body, p { font-family: sans-serif; }
5</style>
6
7<apex:form >
8
9 <h1>{!Warehouse__c.Name}</h1>
10
11 <h2>Warehouse Details</h2>
12
13 <div id="theForm">
14 <div>
15 <apex:outputLabel for="address" value="Street Address"/>
16 <apex:inputField id="address"
17 value="{! warehouse__c.Street_Address__c}"/>
18 </div>
19 <div>
20 <apex:outputLabel for="city" value="City"/>
21 <apex:inputField id="city"
22 value="{! warehouse__c.City__c}"/>
23 </div>
24 <div>
25 <apex:outputLabel for="phone" value="Phone"/>
26 <apex:inputField id="phone"
27 value="{! warehouse__c.Phone__c}"/>
28 </div>
29 </div>
30
31 <div id="formControls">
32 <apex:commandButton action="{!quickSave}" value="Save"/>
33 </div>
34
35</apex:form>
36
37</apex:page>