Custom Component

Custom Components allows the custom visualforce functionality to be encapsulated as discrete modules, which actually provides two advantage:

1. Code re-use : custom component provides an functionality of code reuse, we can use the same code for number of pages.

2. Functional decomposition : if visualforce page is lengthy then we can broke down the page into custom components to make it easier to develop and easy to maintain.

like visualforce page custom component can also have controller but only custom component.

* Custom component do not have any associated security settings. A user with access to visualforce page have access to all custom component used in visualforce page.

example :

go to setup > develop >  custom componet  to create custom component and paste the below code.

<apex:component >

  <apex:attribute name="Contact" type="Contact" description="The contact to edit" required="true" />

  <apex:pageBlockSection columns="3" title="Name">

    <apex:inputField value="{!Contact.Salutation}"/>

    <apex:inputField value="{!Contact.FirstName}"/>

    <apex:inputField value="{!Contact.LastName}"/>

  </apex:pageBlockSection>

</apex:component>

go to :

https://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_attribute.htm  

to know about apex:attribute.

create visualforce page and paste below code

<apex:page standardController="Contact">

    <apex:sectionHeader title="Contact Edit" subtitle="{!contact.name}"/>

    <apex:form >

        <apex:pageBlock mode="maindetail">

            <apex:pageBlockButtons >

                <apex:commandButton value="Save" action="{!Save}"/>

                <apex:commandButton value="Cancel" action="{!Cancel}"/>

            </apex:pageBlockButtons>

            <c:ContactNameEdit contact="{!contact}"></c:ContactNameEdit>

            <apex:pageblockSection title="{!Contact}">

                <apex:inputField value="{!contact.phone}"/>

                <apex:inputField value="{!contact.doNotCall}"/>

                <apex:inputField value="{!contact.Fax}"/>

                <apex:inputField value="{!contact.hasOptedOutOfFax}"/>

                <apex:inputField value="{!contact.email}"/>

                <apex:inputField value="{!contact.hasOPtedOutOfEmail}"/>

            </apex:pageblockSection>

        </apex:pageBlock>

    </apex:form>

</apex:page>