Visualforce Page Design
The goal of this section is a Visualforce page resembling what’s shown in Figure 10.6. A user has entered start and end dates to compute utilization, selected the Share Anonymously check box to indicate that she would like the results sent out over the Web to the benchmarking service, and clicked the Calculate button. This populated the lower three rows with the utilization results. The results include the total hours worked in the time period (from the Timecard object), the total number of consulting resources in the system (from the Contact object), and the utilization as a percentage.
The page is styled to look like part of the native Force.com native user interface. The sectionHeader component is used to render the heading bar. This is followed by the pageMessages component to show errors and information to the user. The Calculate button is a commandButton, enclosed in a pageBlockButtons component. The Start and End date fields are both inputField components with their value attributes set to SObject Date fields in the controller, providing a calendar picker user interface when focus is received. The styling of each row is accomplished by pageBlockSectionItem components, each with two child components. For example, the pageBlockSectionItem to render the row for Start Date contains an outputLabel and an inputField.
Begin by prototyping this page, focusing on the appearance, layout, and user interaction. Create a custom controller class, adding a placeholder action method to calculate the utilization. Create member variables for the start and end dates, binding them to any Date field in a standard or custom object. This binding means you can use the inputField component to render the start and end date fields, making them calendar input controls rather than plain text fields. Add a Boolean member variable for the Share Anonymously option, bound to an inputCheckbox component.
You’re ready to move on to build out the controller to compute utilization and integrate the benchmarking SOAP Web service.