Visualforce Development Cookbook
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

Passing attributes to components

Visualforce pages can pass parameters to components via attributes. A component declares the attributes that it is able to accept, including information about the type and whether the attribute is mandatory or optional. Attributes can be used directly in the component or assigned to properties in the component's controller.

In this recipe we will create a Visualforce page that provides contact edit capability. The page utilizes a custom component that allows the name fields of the contact, Salutation, First Name, and Last Name, to be edited in a three-column page block section. The contact record is passed from the page to the component as an attribute, allowing the component to be re-used in any page that allows editing of contacts.

How to do it…

This recipe does not require any Apex controllers, so we can start with the custom component.

  1. Navigate to the Visualforce Components setup page by clicking on Your Name | Setup | Develop | Components.
  2. Click on the New button.
  3. Enter ContactNameEdit in the Label field.
  4. Accept the default ContactNameEdit that is automatically generated for the Name field.
  5. Paste the contents of the ContactNameEdit.component file from the code download into the Visualforce Markup area and click on the Save button.
    Tip

    Once a custom component is saved, it is available in your organization's component library, which can be accessed from the development footer of any Visualforce page. For more information visit http://www.salesforce.com/us/developer/docs/pages/Content/pages_quick_start_component_library.htm.

  6. Next, create the Visualforce page by navigating to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
  7. Click on the New button.
  8. Enter ContactEdit in the Label field.
  9. Accept the default Contact Edit that is automatically generated for the Name field.
  10. Paste the contents of the ContactEdit.page file from the code download into the Visualforce Markup area and click on the Save button.
  11. Navigate to the Visualforce setup page by clicking on Your Name | Setup | Develop | Pages.
  12. Locate the entry for the Contact Edit page and click on the Security link.
  13. On the resulting page, select which profiles should have access and click on the Save button.

How it works…

Opening the following URL in your browser displays the ContactEdit page: https://<instance>/apex/ContactEdit.

Here, <instance> is the Salesforce instance specific to your organization, for example, na6.salesforce.com.

The custom component that renders the input fields in the Name section defines a single, required attribute of type Contact.

<apex:attribute name="Contact" type="Contact" 
    description="The contact to edit" required="true" />
Tip

The description of the attribute must always be provided, as this is included in the component reference. The type of the attribute must be a primitive, sObject, one-dimensional list, map, or custom Apex class.

The Contact attribute can then be used in merge syntax inside the component.

<apex:inputField value="{!Contact.Salutation}"/>
<apex:inputField value="{!Contact.FirstName}"/>
<apex:inputField value="{!Contact.LastName}"/>

The page passes the contact record being managed by the standard controller to the component via the Contact attribute.

<c:ContactNameEdit contact="{!Contact}"/>

See also

  • The Updating attributes in component controllers recipe in this chapter shows how a custom component can update an attribute that is a property of the enclosing page controller.
上一章目录下一章