Mobilizing a Visualforce page using jQuery Mobile requires that the jQuery Mobile stylesheets are used rather than the standard Salesforce stylesheets. This means that standard Visualforce components controlling layout, such as <apex:pageBlock />
and <apex:pageBlock />
, cannot be used. Instead, the jQuery Mobile specific styles must be used to layout and organize data.
In this recipe we will create a mobile Visualforce page that displays the top 10 opportunities by value. This page will use a jQuery Mobile grid to lay out the information in two columns.
This recipe requires a custom controller, so this must be created before the Visualforce page.
Navigate to the Apex Classes setup page by clicking on Your Name | Setup | Develop | Apex Classes.
Click on the New button.
Paste the contents of the
MobileOppsController.cls
Apex class from the code download into the Apex Class area.Click on the Save button.
Next, create the Visualforce...