Visualforce Developer’s Guide
jNewer Version Available
Best Practices for Using Component Facets
A facet consists of content in an area
of a Visualforce component that provides contextual information about the data
that is presented in the component. For example, <apex:dataTable> supports facets
for the header, footer, and caption of a table, while <apex:column> only supports facets
for the header and footer of the column. The <apex:facet> component allows
you to override the default facet on a Visualforce component with your own content. Facets only allow a single child
within the start and close tags.
When defining an <apex:facet>, it is always used as the child of another Visualforce component. The name attribute on the facet determines which area of the parent component is overridden.
Example: Using Facets with <apex:dataTable>
The following markup shows how the <apex:dataTable> component can
be modified with <apex:facet>:
1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page standardController="Account">
18 <apex:pageBlock>
19 <apex:dataTable value="{!account}" var="a">
20 <apex:facet name="caption"><h1>This is
21 {!account.name}</h1></apex:facet>
22 <apex:facet name="footer"><p>Information
23 Accurate as of {!NOW()}</p></apex:facet>
24 <apex:column>
25 <apex:facet name="header">Name</apex:facet>
26 <apex:outputText value="{!a.name}"/>
27 </apex:column>
28
29 <apex:column>
30 <apex:facet
31 name="header">Owner</apex:facet>
32 <apex:outputText value="{!a.owner.name}"/>
33 </apex:column>
34 </apex:dataTable>
35 </apex:pageBlock>
36</apex:page>
37The page displays as follows:
Extending <apex:dataTable> with a Facet
Using Facets with <apex:actionStatus>
Another component that can use a facet is <apex:actionStatus>. The <apex:actionStatus> component
can be extended to display an indicator whenever a page is being refreshed.
For example, you can define a progress wheel with the following markup:
1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<apex:page controller="exampleCon">
18 <apex:form >
19 <apex:outputText value="Watch this counter: {!count}" id="counter"/>
20 <apex:actionStatus id="counterStatus">
21 <apex:facet name="start">
22 <img src="{!$Resource.spin}"/> <!-- A previously defined image -->
23 </apex:facet>
24 </apex:actionStatus>
25 <apex:actionPoller action="{!incrementCounter}" rerender="counter"
26 status="counterStatus" interval="7"/>
27 </apex:form>
28</apex:page>The associated controller updates
the counter:
1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17public class exampleCon {
18 Integer count = 0;
19
20 public PageReference incrementCounter() {
21 count++;
22 return null;
23 }
24
25 public Integer getCount() {
26 return count;
27 }
28}The page displays as follows:
Extending <apex:actionStatus> with a Facet
