How to use Inline Edit in a custom Visualforce UI Page?

Inline Edit
 We all know that we can edit the value of a field by going to the Edit Page,edit it and Save it using the Save button. But Salesforce     besides that provides an efficient of editing a value of a field from the detail page of a record OR from List View of records which is       very efficient for users and less time consuming. Just by double clicking on the Field Value a popup will open where we can edit the       value and save it. But Salesforce provides that inBuilt only in their Standard Pages. To create that in our Custom Visualforce Pages we   have to write code for that. Here is a small example of using INLINE EDIT in Visualforce Pages..


Visualforce Page 
   <!-- VisualForce Page Responsible for Entry of Customer Records -->
  <apex:page controller="CustomerEntryPageController">
    <apex:form>
      <apex:pageBlock title="Customer Information" >
         <apex:pageMessages />
         <!-- Display Save and Cancel Button -->
         <apex:pageBlockButtons >
            <apex:commandButton value="Save" id="saveButton" action="{!savingCustomerRecord}"/>
         </apex:pageBlockButtons>
         <!-- A PageBlockSection for Entry and Display Customer Values -->
         <apex:pageBlockSection title="Information" columns="2">
            <apex:outputField value="{!customerObj.Name}"/>
            <apex:outputField value="{!customerObj.Address__c}">
               <apex:inlineEditSupport showOnEdit="saveButton" event="ondblclick"/>  
            </apex:outputField>
         </apex:pageBlockSection>
      </apex:pageBlock>
   </apex:form>


Apex Class
/**
*@purpose : Apex Controller responsible for Entry of Customer Records
*@author :  Souvik
**/
public with sharing  class CustomerEntryPageController {
    public Customer__c customerObj{get;set;}
    String customerId{get;set;}
    public String message{get;set;}

    /**
    *@purpose : Constructor to fetch current Customer Record and its Action
    **/
   public CustomerEntryPageController () {
      message = '';
      // Fetching the Current Customer Id
      customerId = System.currentPageReference().getParameters().get('Id');
       if(cutomerId != NULL){
         customerObj = [SELECT Id,Name,Address__c FROM Customer__c WHERE id=:customerId];
      }
   }

   /**
    *@purpose : Method for Saving the Customer Object Record
    *@param : None
    *@return : PageReference to Standard Salesforce Record Detail Page
    **/
   public PageReference savingCustomerRecord(){
      try{
         upsert customerObj;
         PageReference nextpage= new PageReference('/'+customerObj.id);
           return nextpage;
      }
      catch(Exception e){
            message='Data Base error during saving...';
            ApexPages.addMessage( new ApexPages.Message(ApexPages.Severity.ERROR, message));
            return null;
        }
   }
}


Explanation
The Visualforce Page here is a Detail Page of a Customer Record means here field values are displayed in a noneditable state. Now if one wants to edit some specific field values(here for e.g Address__c) then he instead of going to the Edit Page he can edit that field value here only just by double clicking on that.