Using Extensions to Add Functionality - Visualforce

You have already used standard controllers, which provide a set of functionality such as automatic record retrieval, saving, and updating. Sometimes you will want more—perhaps you want to perform additional processing or record retrieval. You can do this by adding a controller extension, which is a custom Apex class that contains functionality that can be accessed from your Visualforce page.

Controller extensions are Apex classes that extend the functionality of a controller. They allow you to add methods that can be called from your Visualforce pages. A Visualforcepage can have more than one extension, and the same extension can be used in multiple Visualforce pages—providing another use case for extensions: as containers for additional functionality for sharing across a number of controllers.

Learning More

• The Apex Language Reference Guide documents the methods available in the StandardController class. This lesson uses getRecord(). Also available arecancel(), delete(), edit(), getId(), save(), and view().
• For an introduction to the Apex programming language, read the Apex Workbook.

Add Dynamic Re-Rendering - Visualforce

Now you need to add elements to the page that set the page parameter and dynamically render the region you’ve named detail:

1. Modify your page by adding a new page block beneath your current one:

   <apex:pageBlock title="Contacts">
       <apex:form>
           <apex:dataList value="{! account.Contacts}" var="contact">
               {! contact.Name}
           </apex:dataList>
       </apex:form>
   </apex:pageBlock>

   This iterates over the list of contacts associated with the account, creating a list that has the name of each contact.
2. Click Save.
   If you access your page, you’ll see the list of contacts. Now you need to make each contact name clickable.
3. Modify the {! contact.Name} expression by wrapping it in an <apex:commandLink> component:

   <apex:commandLink rerender="contactDetails"> {! contact.Name} <apex:param name="cid" value="{! contact.id}"/> </apex:commandLink>

There are two important things about this component. First, it uses a rerender="contactDetails" attribute to reference the output panel you created earlier. This tellsVisualforce to do a partial page update of that region when the name of the contact is clicked. Second, it uses the <apex:param> component to pass a parameter, in this case the id of the contact.

If you click any of the contacts, the page dynamically updates that contact, displaying its details, without refreshing the entire page.

Visualforce provides native support for Ajax partial page updates. The key is to identify a region, and then use the rerender attribute to ensure that the region is dynamically updated.

Learning More

There’s a lot more to the Ajax and JavaScript support:

• <apex:actionStatus> lets you display the status of an Ajax request—displaying different values depending on whether it’s in-progress or completed.
• <apex:actionSupport> lets you specify the user behavior that triggers an Ajax action for a component. Instead of waiting for an <apex:commandLink> component to be clicked, for example, the Ajax action can be triggered by a simple mouse rollover of a label.
• <apex:actionPoller> specifies a timer that sends an Ajax update request to Force.com according to a time interval that you specify.
• <apex:actionFunction> provides support for invoking controller action methods directly from JavaScript code using an Ajax request.
• <apex:actionRegion> demarcates the components processed by Force.com when generating an Ajax request.

Identify a Region for Dynamic Updates - Visualforce

A common technique when using Ajax in Visualforce is to group and identify the region to be dynamically updated. The <apex:outputPanel> component is often used for this, together with an id attribute for identifying the region.

1. Create a Visualforce page called Dynamic, using the following body:

   <apex:page standardController="Account">
       <apex:pageBlock title="{!account.name}">
           <apex:outputPanel id="contactDetails">
               <apex:detail subject="{!$CurrentPage.parameters.cid}"
                   relatedList="false" title="false"/>
           </apex:outputPanel> </apex:pageBlock>
   </apex:page>

2. Ensure that your Visualforce page is called with an identifier for a valid account.

Your Visualforce page won’t show much at all except for the account name. Note that the <apex:outputPanel> has been given an identifier named contactDetails. Also note that the <apex:detail> component has a subject attribute specified. This attribute is expected to be the identifier of the record whose details you want to display. The expression {! $CurrentPage.parameters.cid} returns the cid parameter passed to the page. Since you’re not yet passing in such a parameter, nothing is rendered.

Updating Visualforce Pages with Ajax - Visualforce

Visualforce lets you use Ajax effects, such as partial page updates, without requiring you to implement any complex JavaScript logic. The key element is identifying what needs to be dynamically updated, and then using the rerender attribute to dynamically update that region of the pag

Add a Custom Component to a Visualforce Page - Visualforce

You can now use and reference the component you created in the previous lesson much like any standard Visualforce component. The only difference is that instead of usingapex: in the name of the component, you use c:

1. Create a new Visualforce page called custom.
2. Use the following as the body of the page:

   <apex:page>
       <c:boxedText borderWidth="1" text="Example 1"/>
       <c:boxedText borderWidth="20" text="Example 2"/>
   </apex:page>

The page simply references the component you created in the previous lesson, twice, each time with different values in the attributes:

Your custom components are automatically added to the help. Click Component Reference and scroll down to <c:boxedText>.

Create a Simple Custom Component - Visualforce

All custom components in Visualforce are wrapped in an <apex:component> component. They typically have named attributes, the values of which you can use in the body of your component. In this lesson, you create a component that uses attributes to determine the contents and width of a red box:

1. Click Setup | Develop | Components.
2. Click New.
3. In the Label and Name text boxes, enter boxedText.
4. In the Visualforce Markup tab, enter the following:

   <apex:component>
       <apex:attribute name="text" 
              description="The contents of the box."
              type="String" required="true"/> 
       <apex:attribute name="borderWidth" 
              description="The width of the border."
              type="Integer" required="true"/>
    <div style="border-color:red; border-style:solid; border-width:{! borderWidth}px">
    <apex:outputText value="{! text}"/>
    </div>
   </apex:component>

5. Click Quick Save.

Note how the two attributes are defined to have different types. Visualforce supports a suite of different attribute types and enforces them when someone creates a page that uses the component.

The body of the component can contain other components or simple HTML, as used here—it can also reference the incoming attributes. For example, {! text} is substituted with the value of the text attribute when using the component.

Creating and Using Custom Components - Visualforce

Up until this point you’ve been using standard Visualforce components, such as <apex:dataTable>. Visualforce has dozens of these components, but sometimes you’ll want to create your own. For example, you might want to encapsulate your own custom markup and behavior, which you can reuse on many different Visualforce pages.

Unlike the templates in Tutorial #9: Reusing Pages with Templates, custom components can have their own attributes that can change their appearance on the page in which they’re embedded. They can also have complex controller-based logic that executes for that instance of the component. Custom components also automatically become part of the Component Reference help. In short, custom components let you extend Visualforce in whichever direction you see fit.