Inline Editing in Visualforce page

VISUALFORCE CODE:

<apex:page standardController="Contact">

<apex:form >

<apex:pageBlock mode="inlineEdit">

<apex:pageBlockButtons >

    <apex:commandButton action="{!edit}" id="editButton" value="Edit"/>

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

    <apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>

</apex:pageBlockButtons>

<apex:pageBlockSection >

    <apex:outputField value="{!contact.lastname}">

        <apex:inlineEditSupport showOnEdit="saveButton, cancelButton"

            hideOnEdit="editButton" event="ondblclick"

            changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>

    </apex:outputField>

    <apex:outputField value="{!contact.accountId}"/>

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

</apex:pageBlockSection>

</apex:pageBlock>

</apex:form>

</apex:page>

NOTE:

• Inline editing in Visualforce was introduced with the Spring'11.
• Enabling inline editing is simple.
• above example is related with the Contact Standard object.
• this feature will work with custom objects also.