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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public class customAccountController {
18      private final Account account;
19
20      public customAccountController() {
21            account = [Select Id, Name, Rating, CustomerPriority__c, Description, Phone,
22            BillingStreet, BillingCity, BillingState, BillingPostalCode from Account 
23            where id = :ApexPages.currentPage().getParameters().get('id')];
24      }
25
26      public Account getAccount() {
27            return account;
28      }
29
30      public PageReference save() {
31            update account;
32            return null;
33      }
34}

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");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page showHeader="false" controller="customAccountController" title="My Account" >
18    <apex:composition template="iuivf" />
19
20    <div class="panel" id="acctDetail" selected="true" style="padding: 10px; 
21      margin-top:-44px" title="Account Information" >
22
23       <h2>{!Account.Name}</h2>
24
25       <fieldset style="margin: 0 0 20px 0;">
26
27          <div class="row">
28             <label>Phone:</label>
29             <input type="text" value="{!Account.Phone}" />
30          </div>
31
32          <div class="row">
33             <label>Rating:</label>
34             <input type="text" value="{!Account.Rating}" />
35          </div>
36
37       </fieldset>
38
39    </div>
40
41</apex:page>

Visualforce Developer’s Guide

Building the Detail Page