対応付けおよびリストビューの作成

対応付けアプリケーション作成における次のステップは、マップとそれに対応する取引先のリストを表示する Visualforce ページの作成です。Visualforce ページは、Google マップオブジェクトのパネルを定義し、取引先のリストを表示するグループサブパネルを作成します。さらに、JavaScript を使用して取引先住所を取得し、顧客の優先度に基づいて色付けされたマーカーをマップに入力します。JavaScript は次のロジックを実行して、マップオブジェクトを設定します。

• {!AddrArStr} 文字列配列から対応付ける住所を取得する
• コントローラに定義された区切りを取得し、住所配列を解凍する
• すべての取引先住所と現在のユーザに対し doAddLocationToMap をコールする
• Account.CustomerPriority__c をキーとして使用し、緑、黄色、赤のうちどのマーカーを使用するかを決定��る
• $Resource.markers 静的リソースに保存されたカスタム画像マーカーを取得する

JavaScript コードは、複数の場所で参照する必要がある場合に備えて静的リソース内に配置しておくのが適切な方法です。MobileListView という静的リソースを作成します。

次のコードは、対応付けアプリケーションのリンク先ページを定義します。

ページのマークアップは、<apex:composition> コンポーネントを使用して、テンプレートを参照します。テンプレートは、iUI フレームワークを利用して、iPhone のようなスタイルをページに適用します。iUI フレームワークは、$Resource.IUI 静的リソースから組み込まれます。テンプレートを定義することによって、iPhone プラットフォーム用に作成するすべての Visualforce ページに簡単に同じスタイルを適用できます。

次のマークアップは、テンプレートとして使用される iuivf ページを定義します。

テンプレートについては、次の点に注意してください。

• マークアップは、iUI ライブラリの #home スタイルを上書きします。そうすることで、ページ上部に目立ったギャップを作ることなく Salesforce Mobile Classic にアプリケーションが表示されるようにしています。
• マークアップは、class="Toolbar" 要素の使用を回避します。Salesforce Mobile Classic に組み込まれたブラウザでは、ページの上部にナビゲーションツールバーが表示されるため、2 つ目のツールバーを表示するとユーザを混乱させる可能性があります。iUI フレームワークに提供されるボタンスタイルを使用する場合は、ボタンを表示するために Toolbar クラスを使用しないようにしてください。