Inline Editing in Visualforce page

Inline editing in Visualforce was introduced with the Spring'11. It has the ability to turn on inline editing within Visualforce, a handy bit of user friendliness which has been availability in the standard application interfaces for some time. Enabling inline editing is simple. My example is related with the Contact Standard object. But this feature will work with custom objects as well.

<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>

Just copy and paste this code in your visualforce editor. After run it obviously you will not see the values in output fields. Just append the URL with some contact object id as follows.

Ex:
https://yourOrganizationLink/apex/yourVFPageName?id=someCantactObjectId
https://c.ap1.visual.force.com/apex/InlineEditNew?id=00390000005ZFzB