Visualforce pages All About

Visualforce pages are webpages that belong to Salesforce. These webpages are created using a unique tag-based Mark-up language. It is similar to HTML but it's primary use is to access, display and update the organization's data. The page is accessed by using a URL similar to that of a traditional webserver page.

1) VisualForce Page with standardController:-

<apex:page standardController="Account">
   <apex:form>
       <apex:pageBlock title="Edit Account for {!$User.FirstName}">
           <apex:pageMessages/>
           <apex:pageBlockButtons>
               <apex:commandButton value="Save" action="{!save}"/>
           </apex:pageBlockButtons>
           <apex:pageBlockSection>
               <apex:inputField value="{!account.name}"/>
           </apex:pageBlockSection>
       </apex:pageBlock>
   </apex:form>
</apex:page>


2) Use standard controller to connect to an SObject

<apex:page standardController="Merchandise__c ">
    <style>
        h1 {
            font-size: 20px
        }
    </style>
    <h1>
        {!Merchandise__c.Name}
    </h1>
    <apex:pageBlock>
        <apex:pageBlockSection title="Merchandise display">
            <apex:outputField value="{!Merchandise__c.Name}"/>
            <apex:outputField value="{!Merchandise__c.Original_Price__c}"/>
            <apex:outputField value="{!Merchandise__c.Discount_Type__c}"/>
            <apex:outputField value="{!Merchandise__c.Discounted_Price__c}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>

for testing ,use the below url and pass object record id

     /apex/MerchandiseDisplay?Id=[Your record Id]


3) Use standard actions from standard controller

<apex:page standardController="Merchandise__c" >
    <apex:sectionHeader title="Merchandise" subtitle="Choose List"/>
    <apex:form >
    <apex:pageBlock title="Merchandise">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!Save}" value="Save"/>
            <apex:commandButton action="{!cancel}" value="Cancel" immediate="true"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Merchandise Info" columns="1">
            <apex:inputField value="{!Merchandise__c.Original_Price__c}"/>
            <apex:inputField value="{!Merchandise__c.Discount_Type__c}"/>
            <apex:outputField value="{!Merchandise__c.Discounted_Price__c}"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
</apex:page>

4) When standardcontroller is not sufficient

public class AddTransactionController
{
    public Merchandise__c curMer {get; set;}
    public Transaction__c curTrans {get; set;}
    public AddTransactionController(ApexPages.StandardController con)
    {
        String curMerId = con.getId();
        curMer = [Select Id, Name,
                     Original_Price__c,
                     Discount_Type__c,
                     Discounted_Price__c
                  From   Merchandise__c
                  Where  Id = :curMerId];
        curTrans = new Transaction__c();
    }
   
    public pageReference AddTransaction()
    {
        curTrans.Merchandise__c = curMer.Id;
        insert curTrans;
       
        PageReference pr = new PageReference('/' + curTrans.Id);
        return pr;
    }
}

And a Visualforce page called AddTransaction with the following code:

<apex:page standardController="Merchandise__c" extensions="AddTransactionController">
    <apex:sectionHeader title="Merchandise" subtitle="Choose List"/>
    <apex:form >
    <apex:pageBlock title="Merchandise">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!AddTransaction}" value="Add Transaction"/>
            <apex:commandButton action="{!cancel}" value="Cancel" immediate="true"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Merchandise Info">
            <apex:outputField value="{!curMer.Name}"/>
            <apex:outputField value="{!curMer.Original_Price__c}"/>
            <apex:outputField value="{!curMer.Discount_Type__c}"/>
            <apex:outputField value="{!curMer.Discounted_Price__c}"/>
        </apex:pageBlockSection>
        <apex:pageBlockSection title="New Transaction">
            <apex:inputField value="{!curTrans.Amount__c }"/>
            <apex:inputField value="{!curTrans.Customer__c }"/>
        </apex:pageBlockSection>
    </apex:pageBlock>
    </apex:form>
</apex:page>

user Below Url for testing : https:// user Instance Url /apex/AddTransaction?id=a002800000qUwnH


5)Paggination with in VisualForce page:-

<apex:page controller="CustomPaginationController" sidebar="false">
    <apex:form >
        <apex:pageBlock >
            <apex:pageMessages ></apex:pageMessages>
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Search}" value="Search" />
            </apex:pageBlockButtons>
           
            <apex:pageblockSection >
                <apex:inputText value="{!acc.Name}" label="Name"/>
                <apex:inputText value="{!acc.Phone}" label="Phone" />
            </apex:pageblockSection>
        </apex:pageBlock>
        <apex:pageBlock id="resultId" rendered="{!if(lstAccount != null && lstAccount.size > 0, true,false )}">
            <apex:pageBlockButtons >
                <div style="text-align:right">
                  Total Records Found: {!Con.resultSize} 
      <apex:image url="/img/search_prevarrow_disabled.gif" styleClass="prevArrow" rendered="{!NOT(Con.HasPrevious)}"/> 
      <apex:image url="/img/search_prevarrow.gif" title="Previous Page" styleClass="prevArrow" rendered="{!Con.HasPrevious}"/> 
      <apex:commandLink action="{!Previous}" title="Previous Page" value="Previous Page" rendered="{!Con.HasPrevious}"/> 
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasPrevious)}">Previous Page</apex:outputPanel>         
      <apex:outputPanel styleClass="pShowLess noLink" style="color:grey" rendered="{!NOT(Con.HasNext)}">Next Page</apex:outputPanel>         
      <apex:commandLink title="Next Page" value="Next Page" rendered="{!Con.HasNext}" action="{!Next}"/>&nbsp; 
      <apex:image url="/img/search_nextarrow.gif" title="Next Page" styleClass="nextArrow" rendered="{!Con.HasNext}"/> 
      <apex:image url="/img/search_nextarrow_disabled.gif" rendered="{!NOT(Con.HasNext)}"/>
      <img src="/s.gif" title="Last Page" alt="Last Page" class="last"/>       
                </div>
            </apex:pageBlockButtons>               
            <apex:pageBlockSection columns="1">
                <apex:pageBlockTable value="{!lstAccount}" var="acc" >
                    <apex:column value="{!acc.Name}"/>
                    <apex:column value="{!acc.Phone}"/>
                </apex:PageblockTable>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

public with sharing class CustomPaginationController
{
    public Account acc {get;set;} 
    public ApexPages.StandardSetController con{get; set;}
    public CustomPaginationController ()
    {
       acc = new Account();
       lstAccount = new List<Account>();
    }
    public List<Account> lstAccount
    { 
        get 
        { 
            if(con != null) 
                return (List<Account>)con.getRecords(); 
            else 
                return null ; 
        } 
        set;
    } 
    public PageReference Search()
    {
        String query= '';
        String strFilter = '';
        if(acc.Name != null && (acc.Name ).trim() !='')
        {
           strFilter  = strFilter  +  ' where Name Like \''+acc.Name+'%\'' ;
        }
        if(acc.Phone != null && (acc.Phone).trim() !='' )
        {
           if(strFilter == '')
           {
               strFilter  = strFilter  +  ' where Phone like \''+acc.Phone+'%\'' ;
           }
           else
           {
               strFilter  = strFilter  +  ' And Phone like \''+acc.Phone+'%\'' ;
           }
        }
        if(strFilter != '')
        {
            query = 'Select name ,id, phone from Account '+strFilter+ ' limit 1000';
            System.debug('Query ---->'+ query );
            con = new ApexPages.StandardSetController(Database.getQueryLocator(query));
            con.setPageSize(2);
        }
        else
        {
        }
       return null;
    }
    public Boolean hasNext 
    { 
        get 
        { 
            return con.getHasNext(); 
        } 
        set; 
    } 
    public Boolean hasPrevious 
    { 
        get 
        { 
            return con.getHasPrevious(); 
        } 
        set; 
    } 
    public Integer pageNumber 
    { 
        get 
        { 
            return con.getPageNumber(); 
        } 
        set; 
    } 
    public void previous() 
    { 
        con.previous(); 
    } 
    public void next() 
    { 
        con.next(); 
    } 
 
}

I have given  more example and use of visualforce Page