Building the Detail Page

The last step in building our mapping application is creating a detail page for the accounts in the list view. First, we'll create a controller that retrieves the account information:

1swfobject.registerObject("clippy.codeblock-0", "9");public class customAccountController {
2      private final Account account;
3
4      public customAccountController() {
5            account = [Select Id, Name, Rating, CustomerPriority__c, Description, Phone,
6            BillingStreet, BillingCity, BillingState, BillingPostalCode from Account 
7            where id = :ApexPages.currentPage().getParameters().get('id')];
8      }
9
10      public Account getAccount() {
11            return account;
12      }
13
14      public PageReference save() {
15            update account;
16            return null;
17      }
18}

Next, we'll create a Visualforce page that displays the phone number and rating of the account the user selected from the list view. We'll use the <fieldset> and <row> classes from the iUI framework to apply iPhone-like styling to the page.

The following code defines the account detail page of our mapping application:

1swfobject.registerObject("clippy.codeblock-1", "9");<apex:page showHeader="false" controller="customAccountController" title="My Account" >
2    <apex:composition template="iuivf" />
3
4    <div class="panel" id="acctDetail" selected="true" style="padding: 10px; 
5      margin-top:-44px" title="Account Information" >
6
7       <h2>{!Account.Name}</h2>
8
9       <fieldset style="margin: 0 0 20px 0;">
10
11          <div class="row">
12             <label>Phone:</label>
13             <input type="text" value="{!Account.Phone}" />
14          </div>
15
16          <div class="row">
17             <label>Rating:</label>
18             <input type="text" value="{!Account.Rating}" />
19          </div>
20
21       </fieldset>
22
23    </div>
24
25</apex:page>

Visualforce Developer’s Guide

No Results

Building the Detail Page