Visualforce Componets

Code reuse is one of the best practice in coding.  We reuse code while writing code in Apex by creating functions and calling it wherever required, but how to reuse code when it comes to Visualforce? Well the answer is  Visualforce Component. We can create Visualforce Component, pass parameters to it and use it wherever required. Visualforce Component may or may not have a controller.

Component Syntax:

<apex:component >

<apex:attribute name="ComponentAttributeName" type="String" required="true"/>

<apex:outputText value="{!ComponentAttributeName}"/>

<apex:component >

Attribute type can be String, Integer, Boolean, sObject, List or Class
               

Syntax to use Component :

<c:componentName ComponentAttributeName="Value"/>

Visualforce Component can be used in Visualforce page or other Visualforce Component.

Let’s implement an application and use Visualforce Components in it. This application will display List of Cases and we will have button on each record to quickly edit the Case.

Visualforce Page:

 <apex:page controller="QuickEditWithComponentController">  
 <apex:form >  
   <!-- Display Cases -->  
  <c:TableComponent caseListAttribute="{!caseList}"/>   
  <!-- actionFunction to rerender Page component from custom component's button click event-->  
  <apex:actionFunction name="editButtonPress" action="{!editAction}" reRender="popup">  
     <apex:param name="fieldName" assignTo="{!stringCase}" value=""/>  
     </apex:actionFunction>  
     <!-- Quick Case edit panel-->  
         <apex:outputPanel id="popup" >  
         <apex:outputPanel styleClass="quickEditPanel " layout="block"  
          rendered="{!displayPopUp}">  
           <apex:pageBlock >  
              <apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup"/>  
              <c:QuickEditComponent record="{!caseObj}"/>  
           </apex:pageBlock>  
           <apex:commandButton title="Save Case" value="Save" action="{!Save}" styleClass="saveButton" rerender="pageBockTableId, popup"/>  
         </apex:outputPanel>  
         </apex:outputPanel>  
 </apex:form>  
   <style type="text/css">  
 .quickEditPanel {  
   background-color: white;  
    border-style: solid;  
   border-width: 2px;  
   padding: 10px;  
   position: absolute;  
   z-index: 9999;  
   width: 33%;  
   top: 20%;  
   left: 33%;  
 }  

Controller:

 public with sharing class QuickEditWithComponentController {  
   public boolean displayPopUp {get; set;}  
   public Case caseObj {get; set;}  
   public String stringCase {get; set;}  
   private List <Case> caseList;  
   public PageReference Save() {  
     displayPopUp = false;  
     update caseObj;  
     return null;  
   }  
   public QuickEditWithComponentController() {  
   }  
   public List<Case> getCaseList()  
   {  
     caseList = [Select Id, CaseNumber, Status, Priority, Type, Reason, Origin from Case LIMIT 10];  
     return caseList;  
   }  
   public void closePopup()  
   {  
     displayPopUp = false;  
   }  
   public void editAction()  
   {  
     caseObj = new Map<Id, Case>(caseList).get(stringCase);  
     displayPopUp = true;  
   }  
 }  

Visualforce Components:

1)      Case_List_Title:

 <apex:component >  
 <h1>Cases Quck Edit List :</h1>  
 </apex:component>  

2)      TableComponent:

 <apex:component >  
 <c:Case_List_Title/>   

 <apex:attribute name="caseListAttribute" description="The type of record we are viewing."  
           type="Case[]" required="true"/>  
 <apex:pageBlock >  
 <apex:pageBlockTable value="{!caseListAttribute}" var="c" id="pageBockTableId">  
      <apex:column headerValue="Case Number">  
       <apex:outputLink value="/{!c.Id}">{!c.CaseNumber}</apex:outputLink>  
      </apex:column>  
      <apex:column headerValue="Status" value="{!c.Status}"/>  
      <apex:column headerValue="Priority" value="{!c.Priority}"/>  
      <apex:column headerValue="Type" value="{!c.Type}"/>  
      <apex:column headerValue="Reason" value="{!c.Reason}"/>  
      <apex:column headerValue="Origin" value="{!c.Origin}"/>  
      <apex:column headerValue="Quick Edit">  
      <apex:commandButton value="Edit" Title="Edit Case" onclick="editButtonPress('{!c.Id}'); return false;">  
      </apex:commandbutton>  
      </apex:column>  
    </apex:pageBlockTable>  
  </apex:pageBlock>  
  </apex:component>  

 3) QuickEditComponent:

 <apex:component >  
 <apex:attribute name="record" description="The type of record we are viewing."  
           type="Case" required="true"/>  
      <apex:panelgrid columns="2" id="panelGridId">  
        Case Number :  
        <apex:outputfield value="{!record.caseNumber}" Id="caseNumber"/>   
        Status :   
        <apex:inputfield value="{!record.Status}" Id="statusfield"/>   
        Priority :   
        <apex:inputfield value="{!record.Priority}" Id="priorityField"/>   
        Type :   
        <apex:inputfield value="{!record.Type}" Id="typeField"/>   
        Case Reason :   
        <apex:inputfield value="{!record.Reason}" Id="reasonField"/>   
        Case Origin :  
        <apex:inputfield value="{!record.Origin}" Id="oroginField"/>   
      </apex:panelgrid>   
 </apex:component>  

Let's see how it looks