vf with examples

<apex:sectionHeader> :  This  component is used to create a  header on the page

Attributes :

Id            : This is a string value  given to recognise or refer to this component in the rest of the program

Title       : This is a string value which will be used as title for the section Header

subTitle: This  is a string value which will be used as subTitle for the title in the SectionHeader

Help       : This is a url value ,When we click on the help corresponding  page  of url given will be opened

Description : This will take a string value which will be used as description below  the  sectionHeader

Rendered   : This is a Boolean value if we give true sectionHeader component will be displayed on the

                                 Page  ,if we give it as false it will hide component on the page

Ex:

<apex:page >

<apex:sectionHeader title="New Account" subTitle="Visualforce page"  description="This is a new  page"

                                                                                                                              help="/apex/page1"  rendered="true"/>

</apex:page>

<apex:pageBlock> :

                This is used to create a block on the Visualforce page

                Id: This is a string value, this is unique name given to the component to refer to this component any where

                                In rest of the program

                Title: This is a string value which will be displayed as title on the pageblock header

                TabStyle : This will take sobject  as value .Look and feel of the pageBlock will be based on the tab style what

                                We have selected for the give sobject in  the TabStyle

                Dir          : This will specify the direction in which the content of the page should be displayed

                                Value  are “LTR” left to right or “RTL” right to left

                helpTitle: This will the string value  ,help link  will be created on the pageBlock with this given name

                helpURL: This will take the url of the page ,when we click on the  helpTitle this page will be opened.

                Rendered : This is a Boolean value when we give it as true this pageBlock will be displayed on the

                                Page other wise it is hidden from the page .

                Mode: This will specify in which mode the pageBlock has to be opened

                                Possible value : Edit :  data is displayed without field lines

                                                Maindetails : Data is displayed to the user with colored lines and white background

                                              Inline Edit : data is displayed as in detail mode, but child components that support it

                                                               are enabled for inline editing

                                         Detail : data is displayed to the user with colored lines

Ex: <apex:page >

    <apex:pageBlock title="Block1">

                This is pageblock one

    </apex:pageBlock>

    <apex:pageBlock  title="Block 2" tabStyle="Transaction__c">

                This is pageblock two

    </apex:pageBlock>

    <apex:pageBlock  title="Block 3" tabStyle="Customer__c" dir="RTL">

                This is pageblock three

    </apex:pageBlock>

    <apex:pageBlock title="Block 4" rendered="false" >

                This is pageblock four

    </apex:pageBlock>

    <apex:pageBlock title="Block 5" helpTitle="needHelp??" helpUrl="/apex/page1" >

                This is pageblock five

    </apex:pageBlock>

    <apex:pageBlock title="Block 6"  mode="maindetail" tabStyle="Customer__c">

                This is pageblock six

    </apex:pageBlock>

    <apex:pageBlock title="Block 7" mode="edit">

                This is page block seven

    </apex:pageBlock>

</apex:page>

Ex: 2 Create a vf page to print the data from the Apex class in the page block

<apex:page controller="EmployeeData">

    <apex:pageBlock title="Employee :{!name}" >

     Employee Name :{!name }

     Salary &nbsp;&nbsp; :{!salary}

    </apex:pageBlock>

</apex:page>

<apex:pageBlockSection> :

This is a child component of pageBlock .This wil divide the rows into no of columns

Id            : This is a string value, this is unique name given to the component to refer to this component any where

                                In rest of the program

Collapsible : This will take Boolean value  if we give it as true it will show collapsible section other wise hide the  

                    collapsible section

Columns              : This will take  Integer value .This will specify how many columns we have for a row.

Title  :This will take the string value which will be displayed on the header of the section

Note :If we don’t specify  no of columns then this will take default value as two columns

Note : In every column one component will be displayed .When we open the component till it is closed it is called one

                    component .

Ex :

<apex:page >

    <apex:pageBlock title="PageBlock">

                <apex:pageBlockSection title="Section1" columns="4" collapsible="false">

           <apex:pageBlock title="one">

                Block one 

           </apex:pageBlock>

            <apex:pageBlock title="Two">

                   Block one 

            </apex:pageBlock>

           <apex:pageBlock title="Three">

                Block one 

           </apex:pageBlock>

             <apex:pageBlock title="Four">

                Block one 

           </apex:pageBlock>

        </apex:pageBlockSection>

    </apex:pageBlock>

</apex:page>

<apex:outputLabel> :

                This component  is used to display the label on the VF page

Title: This is a string value which will be displayed when we keep the mouse pointer on the label

Value : This is a string value which will be printed as label on the VF page

Ex:

<apex:page >

    <apex:pageBlock title="outputLabel">

                <apex:pageBlockSection >

            <apex:outputLabel value="Enter Name" title="Labelone" />

            <apex:outputLabel escape="true" >Enter Name </apex:outputLabel>

            <apex:outputLabel value="{!$User.LastName}" />

        </apex:pageBlockSection>

    </apex:pageBlock>

</apex:page>

<apex:outputField> :

This will  display of a label and field value  of a record of given sobject in the read only format .

This will respect the properties of the given sobject field  and display in the same format

 For example, if the specified < apex:outputField > component is a currency field, the appropriate currency symbol is displayed. Likewise, if the < apex:outputField > component is a lookup field or URL, the value of the field is displayed as a link.

Ex:”

<apex:page  standardController="Account">

    <apex:pageBlock title="Account Detail">

                <apex:pageBlockSection title="Account Information" collapsible="false">

            <apex:outputField value="{!Account.Name}" />

            <apex:outputField value="{!Account.Industry}" />

            <apex:outputField value="{!Account.Phone}" />

            <apex:outputField value="{!Account.ownerid}" />

        </apex:pageBlockSection>

    </apex:pageBlock>

</apex:page>

<apex:inlineEditSupport> :

This is child component of pageBlock or pageBlockSection ,The component which are referring to  sobjectfields on those this

Will provide inline edit support

<apex:page  standardController="Account">

    <apex:form>

    <apex:pageBlock title="Account Detail">

        <apex:inlineEditSupport>

                <apex:pageBlockSection title="Account Information" collapsible="false">

            <apex:outputField value="{!Account.Name}" />

            <apex:outputField value="{!Account.Industry}" />

            <apex:outputField value="{!Account.Phone}" />

            <apex:outputField value="{!Account.ownerid}" />

        </apex:pageBlockSection>

       </apex:inlineEditSupport>

    </apex:pageBlock>

  </apex:form>

</apex:page>

Note: When we want to refer to lookup field  or master detail field using outputField we should append FieldName with id

Ex: ownerId

AccountID

<apex:outputText >

This will refer to the any sobject field as Text  and any  variable from apex  class as text  irrespective of dataType of the

Value what it is referring to 

Ex:

<apex:page  standardController="Account">

    <apex:form>

    <apex:pageBlock title="Account Detail">

        <apex:inlineEditSupport>

                <apex:pageBlockSection title="Account Information" collapsible="false">

            <apex:outputField value="{!Account.Name}" />

            <apex:outputField value="{!Account.Industry}" />

            <apex:outputText value="{!Account.Name}" />

            <apex:outputText value="{!Account.Industry}" />

        </apex:pageBlockSection>

       </apex:inlineEditSupport>

    </apex:pageBlock>

  </apex:form>

</apex:page>

Note : <apex:outputText > will not support <apex:inlineEditSupport>

<apex:form>  : Any component that needs user to interact should be with in the <apex:form>

<apex:commandButton> : This component is used to create a button on the VF page

 This component is used to create a button on the VF page .

Value : This is a string that is displayed as a label on the button

Action : when a event occur on the button what is the action should be fired is given

                This can be  invoking a page or calling a apex method

 Disabled : This is a Boolean value when we give it as true button will be displayed on the page with Inactive mode

                   When we give it as false button will be displayed on the page as active mode

Title : This is a string value when we keep the cursor on the button title will be displayed as popup message

Image : If we want to display the image as  button then  we will pass the image source as value

Style : if we want to apply any css then we give it  the css properties in the Style

Note : When we are invoking the method from apex class then method should have return type as void or pageRefenrece

Note : When we call  the method from the Visualforce page entire  page will referesh   

<apex:page  controller="Example">

    <apex:form>

    Value:    <apex:commandButton value="Click" /> <br/>

    Call Page on button click:   

   <apex:commandButton value="CallPage" action="/apex/page1" /> <br/>

    Call a show method on button click  

 <apex:commandButton value="Apexmethod" action="{!show}" /> {! result} <br/>

    Call pageReference to another page    

<apex:commandButton value="PageReference" action="{!callme}" /> <br/>

        Call pageRefence with null   

<apex:commandButton value="NullReference" action="{!display}" /> {!displayresult}<br/>

    Image as Button 

<apex:commandButton  image="{!$Resource.satish}"  style="width:50;height:50;" /><br/>

    Button Disabled

 <apex:commandButton disabled="true" value="Button1"/>

    </apex:form>

</apex:page>

<apex:pageBlockButtons> :

This is a child components of the pageBlock  these  buttons are created only for the pageBlock

Location : This will specify where the buttons should be displayed

                 Values : Top ,Bottom ,All

<apex:page >

    <apex:form>

    <apex:pageBlock title="PageBlock">

                <apex:pageBlockButtons  location="top">

            <apex:commandButton value="Button1" />

            <apex:commandButton value="Button2" />

        </apex:pageBlockButtons>

        This is pageblock

    </apex:pageBlock>

    <apex:pageBlock title="PageBlock">

                <apex:pageBlockButtons location="bottom" >

            <apex:commandButton value="Button1" />

            <apex:commandButton value="Button2" />

        </apex:pageBlockButtons>

        This is pageblock

    </apex:pageBlock>

    <apex:pageBlock title="PageBlock">

                <apex:pageBlockButtons >

            <apex:commandButton value="Button1" />

            <apex:commandButton value="Button2" />

        </apex:pageBlockButtons>

        This is pageblock

    </apex:pageBlock>

    </apex:form>

</apex:page>

Scenario 1: Create a VF page to display detail page of the Account object using the pageBlock,PageBlockSection,

PageBlockButtons,outputField

<apex:page standardController="Account">

    <apex:sectionHeader title="Account" subTitle="New Account" help="/apex/page1" />

    <apex:form>

                <apex:pageBlock mode="Maindetails ">

            <apex:pageBlockButtons>

                <apex:commandButton value="Edit" />

                <apex:commandButton value="Del" />

            </apex:pageBlockButtons>

                <apex:pageBlockSection >

                <apex:outputField value="{!Account.Name}" />

                <apex:outputField value="{!Account.Industry}" />

                <apex:outputField value="{!Account.Phone}" />

            </apex:pageBlockSection>

        </apex:pageBlock>

    </apex:form>

</apex:page>