Composition
Composition is a powerful way to create modular Visualforce pages. It allows a Visualforce page to be defined as a template. The template can contain static content and placeholders for content that can be overridden by an implementing page. This enforces a standard structure for the pages without requiring Visualforce developers to remember a sequence of include components. It also places more control over the appearance of many pages within the scope of a single page (the template) for easier maintenance.
In the template page, the insert component is used to define a named area that can be overridden by a page implementing the template. The implementing page uses the composition component to set the name of the page to serve as its template. It then provides content for the named areas of the template using the define component.
For example, a template might consist of a header, body, and footer, with horizontal rules between each. Listing 7.11 defines this template page, named MyPage7_11. Note that the header area includes its own default content. This optional content is rendered in the event that content is not provided by an implementing page.
Listing 7.11 Visualforce Page as Template
<apex:page>
<apex:insert name="header">
<h1>Header</h1>
</apex:insert>
<hr /><apex:insert name="body" />
<hr /><apex:insert name="footer">
Inheriting the footer content
</apex:insert>
</apex:page>
The template is not interesting to render by itself, but in Listing 7.12 it’s implemented using the composition component. The template attribute specifies the template defined in Listing 7.11, which should be named MyPage7_11 for this example to work properly. The three dynamic areas are merged into the template to result in the final rendered output. The header area is provided, so it overrides the content defined by the template. The footer is inherited from the template.
Listing 7.12 Visualforce Page Using Template
<apex:page>
<apex:composition template="MyPage7_11">
<apex:define name="header">
Overriding the header content
</apex:define>
<apex:define name="body">
This is the body content
</apex:define>
</apex:composition>
</apex:page>
Composition works with multiple controllers identically to the include component. They run independently of each other, but all content is rendered in the same page.