Custom visualforce components are very useful. In our projects, many times we develop codes which are required again and again. So instead of repeating same code again and again, we can create visualforce component. Then we can use visualforce component in every place where we need that particular piece of code. In other words, custom visualforce component allows us to create reusable component. All custom visualforce component definitions must be wrapped inside a single <apex:component > tag. We can also use <apex:attribute> tag to use customize the component so that custom component can be used in different manners depending on value of different attributes. It helps us in creating reusable generic component and also saves time and number of lines we write in apex and visualforce page.
Example:
Component:
<apex:component > <apex:attribute name="textValue" description="This is the value for the component" type="String" required="true"/> <apex:attribute name="textColor" description="This is color for the border." type="String" required="true"/> <apex:outputText value="{!textValue}" style="color:{!textColor};"/> </apex:component>
Visualforce code: <apex:page tabStyle="Account"> <apex:pageBlock > <apex:pageBlockSection title="myComponent Test" collapsible="false"> <c:myComponent textValue="This Text is blue" textColor="blue" /> <c:myComponent textValue="But this is red" textColor="red" /> </apex:pageBlockSection> </apex:pageBlock> </apex:page>
All custom visualforce component definitions must be wrapped inside a single <apex:component > tag.
We can also use <apex:attribute> tag to use customize the component so that custom component can be used in different manners depending on value of different attributes. It helps us in creating reusable generic component and also saves time and number of lines we write in apex and visualforce page.
Example:
Component:
<apex:component >
<apex:attribute name="textValue" description="This is the value for the component" type="String" required="true"/>
<apex:attribute name="textColor" description="This is color for the border." type="String" required="true"/>
<apex:outputText value="{!textValue}" style="color:{!textColor};"/>
</apex:component>
Visualforce code:
<apex:page tabStyle="Account">
<apex:pageBlock >
<apex:pageBlockSection title="myComponent Test" collapsible="false">
<c:myComponent textValue="This Text is blue" textColor="blue" />
<c:myComponent textValue="But this is red" textColor="red" />
</apex:pageBlockSection>
</apex:pageBlock>
</apex:page>