The <apex: composition> is another important component used to define an area of the page that includes content from a second template page. The template page includes one or more <apex: insert> components. The <apex: composition> component names the associated template and provides a body for the template's <apex: insert> components with matching <apex: define> components. Any content outside of an <apex: composition> component is not rendered.
We use this component to get user input from the controller method that doesn't correspond to a field on a sObject field.
The <apex: composition> component has the following attributes:
1. rendered
The rendered is a string-type attribute used for rendering the component. However, the rendered attribute does not affect the display of this component.
Syntax:
<apex: composition rendered="condition"></apex: composition>
2. template
The template is an "ApexPages.PageReference" type used for specifying the template page used for this component. The name of the apex page or PageReference is used as a value for this attribute.
Syntax:
<apex: composition template="pageName"></apex: composition>
Let's take an example to understand how we can use this component on the Visualforce page:
ApexCompositionExample.vfp
<!-- create apex page to understand the <apex: composition> component -->
<apex: page >
<!-- use <apex: composition> for specifying the template-->
<apex:composition template="ApexInsertExample">
<!-- use <apex: define> for adding header and body-->
<apex:define name="header">(page)Header of ApexCompositionExample Start.</apex:define>
<apex:define name="body">(page)Body of ApexCompositionExample Start.</apex:define>
</apex: composition>
</apex: page>
ApexInsertExample.vfp
<!-- create an apex page that acts as the template-->
<apex: page >
<!-- use outputText and insert component -->
<apex:outputText value="(template) This is before the header"/><br/>
<apex:insert name="header"/><br/>
<apex:outputText value="(template) This is between the header and body"/><br/>
<apex:insert name="body"/>
</apex: page>
