VF Pages

Visualforce Programming:
========================
Object --> Table:
Tab: (GUI)
Business Logic: (Class)
Limitations of Declarative Customizations:

------------------------------------------
1. We can arrange the fields in max. of 2 columns in a section. We can't
arrange the fields in more than 2 columns.
2. We can't Change the Font, Color, Size and Style of the Standard User
Interface Controls.
3. We can't Customize the Tab Home Page.
4. Salesforce won't provides the Customized User Interfaces.
To overcome the above limitations, we can use "Visualforce Programming".
Visualforce is a Web Development Framework, which allows us to design attractive

and dynamic user interfaces.
By using Visualforce Programming, we can design the Customized User Interface based
on the application requirement with rich look and feel.
Visualforce supports all the Standard Web Technologies like "HTML, DHTML, CSS, Java
Script, JQuery, JScript, Angular JS, Knockout JS, Extension JS, Backbone JS,
MeanStack, Flash Scripting,..etc".
Visualforce is a Tab Based Programming like HTML. It provides a collection of

readymade tags to be used to design the user interfaces based on the application
requirement.
Visualforce supports the XML Style of syntax. Where each Starting Tag should have
the corresponding ending tag.
Visualforce is Not a Case-Sensitive Programming.
Visualforce purely supports the Code-Behind Technique. Where Designing Part(User

Interface) code will get stored in a separate file. And Business Logic Part
Code(Apex) will store inside a separate file.
Designing Part Code (VF Code) --> .vfp

Business Logic Code (Apex Code) --> .apxc
Visualforce provides the Real-Time Development style, where we can Write the Code,
Compile, Save, Execute and View the results in a single window.
Each Visualforce Page code will be get Compiled by using a Compiler called as "Page
Compiler" and will get executed by using a Runtime Engine "Page Renderer".
Note: All the Visualforce Pages code will get resides inside the "ApexPage" object.
We can query the Page code as below.
Ex:
Select id, name, markup from ApexPage
Visualforce Components:
=======================
Each Visualforce Page Contains 2 Components.
1. Visualforce Markup:
It is a Tag based programming, which is used to design the Customized
user interfaces with attractive look and feel.
Visualforce provides a set of readymade tags by default.
Note: Each Visualforce Page Tag name should be pre-fix with the word
"apex".
Ex:
<apex:Page>
....
....
</apex:Page>
<apex:form>
...
...
</apex:form>
<apex:SectionHeader>
...
...
</apex:SectionHeader>
2. Visualforce Controller
Each Visualforce Page contains a Controller Class, which contains the
Business Logic to be get referenced inside the Page. It can be implemented by using
"Apex programming".
Visualforce provides 3 Types of Controllers.
1. Standard Controller
2. Custom Controller
3. Extension Controller
Tag Hierarchy:
--------------
Page Tag (<apex:Page>)
|
|
| ---> SectionHeader Tag (<apex:SectionHeader>)
|
|
---> Form Tag (<apex:Form>)
|
|
---> PageBlock Tag (<apex:PageBlock>)
|
|
| ---> PageBlockButtons Tag
(<apex:PageBlockButtons>)
| |
| |
| | ---> CommandButton
(<apex:CommandButton>)
| |
| |
| ---> CommandLink
(<apex:CommandLink>)
|
|
---> PageBlockSection Tag
(<apex:PageBlockSection>)
|
|
| ---> PageBlockSectionItem
Tag (<apex:PageBlockSectionItem>)
| |
| |
| | ---> Input
Controls (<apex:InputText>)
| |
| |
| --->
Output Controls (<apex:OutputText>)
|
|
| ---> Input Controls (<apex:InputText>)
|
|
---> Output Controls (<apex:OutputText>)
Ways to Create VF Pages:

------------------------
3 Ways to Create the Visualforce Page.
1. By using Standard Navigation.
Setup --> Build --> Develop --> Visualforce Pages.

1. Click on "New" button.
2. Enter the VF Page Name and Label.
3. Write the Code inside the Editor.
Ex:
<apex:page >
Welcome to Visualforce Programming. This is
my First Visualforce Page.
</apex:page>
4. Click on "Save / Quick Save" button.

5. Click on "Preview" button, to Run the Page.
2. By using Developer Console.

Click on your Name and Expand it. (Ex: Training Batch)
1. Click on "Developer Console" link.
2. Goto the Developer Console Editor.
3. Click on "File --> New --> Visualforce Page".
4. Enter the "Visualforce Page Name in the TextBox".
5. Click on "OK" button.
Ex:
<apex:page >
Welcome to Visualforce Programming. 
This is my Second Viualforce Page. This Page has been desgined
by using Developer Console.
</apex:page>
6. Write the Code inside the Editor.

7. Save the code by using "CTRL+S".
8. Run the Page Code by click on "Preview" button.
3. By using URL Format.
Syntax:
https://<ServerNumber>.salesforce.com/apex/<PageName>
Ex:
https://ap16.salesforce.com/apex/SampleThirdPage
Note:
To Create the Visualforce Page from the URL format, we have
to enable "Development Mode" CheckBox as below.
Click on your Name and expand it.

1. Click on "My Settings" link.
2. Goto the "Personal" and expand it.
3. Click on "Advanced User Details" link.
4. Click on "Edit" button.
5. Select the CheckBox "Development Mode".
6. Click on "Save" button.
Example:
<apex:page controller="SampeThirdController" >
Welcome to Visualforce Programming. This is
my Third Visualforce Page.
 This Page has been designed by using URL
Format. 
</apex:page>
Tag Properties:
===============
Page Tag (<apex:Page>):
-----------------------
Properties:
1. Setup = "Boolean"
2. SideBar = "Boolean"
3. ShowHeader = "Boolean"
4. TabStyle = "SObjectName"
Ex:
<apex:page setup="false" sidebar="false" showheader="true"
tabStyle="Recruiter__c" >
</apex:page>
5. RenderAs = "pdf"
6. Rendered = "Boolean"
7. ContentType ="Application/MSWord#<FileName.doc>"
Ex:
<apex:page
contentType="Application/msword#Batch330File.doc" setup="false" sidebar="false"
showheader="true" tabStyle="Recruiter__c" >
Welcome to Visualforce Programming. This is
my Third Visualforce Page designed by using URL Format.
 This Page is used to represent the Tag
properties.
</apex:page>
8. ReadOnly = "Boolean"
9. Action = "{! <MethodName> }"
10. StandardController = "StandardSObjectClassName"
11. Controller = "Custom Class Name"
12. Extensions = "Extension Class Names"
SectionHeader Tag (<apex:SectionHeader>):

-----------------------------------------
Properties:
1. Title = "Page Title"
2. SubTitle = "SubTitle of the Page"
Ex:
<apex:sectionHeader title="Position Edit" subtitle="New
Position"/>
</apex:page>
Form Tag (<apex:Form>):

-----------------------
Properties:
1. Id = "referenceName"
Ex:
<apex:sectionHeader title="Position Edit" subtitle="New
Position"/>
<apex:form >
</apex:form>
</apex:page>
PageBlock Tag (<apex:PageBlock>):

---------------------------------
This tag is used to divide the Visualforce page space into the various
smaller pieces, So that we can design a separate user interface on each Page Block.
Note:
A Visualforce page can have one or more PageBlocks. In Each PageBlock,
we can represent the different content with different format.
Properties:
2. Title = "PageBlock Title"
Ex:
<apex:sectionHeader title="Position Edit" subtitle="New Position"/>
<apex:form >
<apex:PageBlock title="Account Details" id="accBlock">

</apex:PageBlock>
<apex:PageBlock title="Contact Records" id="conBlock">

</apex:PageBlock>
<apex:PageBlock title="Opportunity Records" id="opptyBlock">

</apex:PageBlock>
<apex:PageBlock title="Case Records" id="caseBlock">

</apex:PageBlock>
</apex:form>
</apex:page>
PageBlockSection Tag (<apex:PageBlockSection>):

-----------------------------------------------
This tag is used to divide the PageBlock into the various smaller pieces called as
"PageBlockSection".
In each section, we can represent a set of fields in the required number of

columns.
Note:
This should be always a Child Component to "PageBlock".
Properties:
1. Title = "Title for the Section"
2. Columns="Integer (1 / 2 / 3/ 4/ 5/ 6/....)"
3. Collapsible="Boolean"
Ex:
<apex:form >

<apex:PageblockSection title="Account Information"
columns="2" collapsible="true">
</apex:PageblockSection>
<apex:PageBlockSection title="Address Information"

</apex:PageBlockSection>
<apex:PageblockSection title="Additional Information"

<apex:PageBlockSection title="Contact Details" columns="2"

collapsible="true">
<apex:pageBlockSection title="Description Information"

</apex:pageBlockSection>
</apex:PageBlock>
</apex:form>
</apex:page>
PageBlockButtons Tag (<apex:PageBlockButtons>):

-----------------------------------------------
This tag is used is used to reserve the space to be used to accommodate all the
button controls at one place on the page, to be used to invoke the actions.
This should be a Child Component to the PageBlock.
Properties:
1. Title = "Title for the Buttons Section"
2. Location = "Top / Bottom / Both (Default)"
CommandButton Tag (<apex:CommandButton>):

-----------------------------------------
This tag is used to represent a Button control on the page, to be get used to
invoke the actions on the page, based on the input values.
Properties:
2. Value = "Caption for the Button"
5. ReRender = "ComponentReferenceNames"
Ex:
<apex:form >
<apex:pageblockButtons location="both">
<apex:commandButton value="Save"/>
<apex:commandButton value="Save & New"/>
<apex:commandButton value="Delete"/>
<apex:commandButton value="Search"/>
<apex:commandButton value="Cancel"/>
</apex:pageblockButtons>



collapsible="true">

</apex:PageBlock>
</apex:form>
</apex:page>
CommandLink Tag (<apex:CommandLink>):

-------------------------------------
This tag is used to place the CommandLinks on the page, to used to invoke the
actions. It contains the similar features like CommandButton, it it having the
"Hyperlink" appearance.
Properties:
2. Value = "Caption for the Button"
5. ReRender = "ComponentReferenceNames"
Ex:
<apex:form >


<apex:commandLink value="First"/>

<apex:commandlink value="Previous"/>

<apex:CommandLink value="Next"/>
<apex:commandLink value="Last"/>




collapsible="true">

</apex:PageBlock>
</apex:form>
</apex:page>
Visualforce Controllers:
------------------------
Visualforce Page ---> Controller Class. (Business Logic)
3 Types of Controllers
1. Standard Controller
2. Custom Controller
3. Extension Controller
Standard Controller:
====================
ORM:
Each Object / Table will be represented in the form of a "Class".
Account Object --> Account Class

Contact Object --> Contact Class
Opportunity Object --> Opportunity Class
...
...
Position__C Object ---> Position__C Class
Customer__c ----> Customer__c
...
...
Each Field inside the object will be represented in the form of a

"Variable inside the Class".
Ex:
Account Object:
Public Class Account

{
Public Id Id;
Public string name, rating, industry, type,

ownership, phone,
fax, site, website, billingCity,
billingStreet, billingCountry, billingPostalCode, billingState,
customerpriority__C, active__C, shippingaddress,.....etc.
Public Decimal annualrevenue;
Public DateTime CreatedBy, LastModifiedBy;
Methods:
--------
Public void Save()
{
// This method will save the record
inside the object and will re-direct the user to the detailed page of the record.
}
Public void Cancel()

{
// This method will Cancels the Current
Request.
}
Public void Delete()

{
// This method will remove the Current
record based on the record id.
}
Public void QuickSave()

{
// This method will Save the record /
Business logic inside the Organization.
}
Pagination Methods:
--------------------
Public void First()
{
// It will load the First Page Records in
the Pagination.
}
Public void Next()

{
// It will load the Next Page Records in
the Pagination.
}
Public void Previous()

{
// It will load the Previous Page Records
in the Pagination.
}
Public void Last()

{
// It will load the Last Page Records in
the Pagination.
}
Public Boolean HasNext()

{
// Returns TRUE, if we have the Next Page
Records to be get visible. Else it returns FALSE.
}
Public Boolean HasPrevious()

{
// Returns TRUE, if we have the Previous
Page Records to be get visible. Else it returns FALSE.
}
}
Note:
By using StandardController, We can reference all the Standard
Functionalities inside the VF Page.
i.e. Instead of Writing the Business Logic by our own, we can use the
existing Business Logic given by Salesforce, so that we can avoid the number of
lines of Code.
Upon referencing the Standard Class inside the Visualforce page, we

have to specify the Standard Class name inside the "Page Tag" with
"StandardController" property as below.
Syntax:
<apex:Page StandardController = "<ClassName>" .....>
...
...
</apex:Page>
Ex:
<apex:Page StandardController = "Account" ....>
...
...
</apex:Page>
<apex:Page StandardController = "Position__C" ....>

...
...
</apex:Page>
Custom Controller:
==================
Upon implementing the application features, if the Standard Functionalities are not
suitable for the requirement. Then we can build our own Custom Business Logic based
on the application requirement, and can be referenced inside the VF page by using
"Custom Controller".
We have the specify the Class name inside the Page Tag by using "Controller"
property as below.
Syntax:
<apex:Page Controller = "<Custom Class Name>" .....>
...
...
</apex:Page>
Ex:
Public Class AccountsSearchHelper
{
Public void SearchAccounts()
{
// Write the Business Logic to Search Account Records.
}
}
<apex:Page Controller="AccountsSearchHelper" >
<apex:CommandButton Value ="Search" Action="{!SearchAccounts}"/>
</apex:Page>
Extension Controller:
=====================
By using this feature, we can reference both Standard Functionalities and Custom
Functionalities inside the VF Page.
Note:
We can use Only One StandardController inside the Page and we can reference
One / More Extension Controller Classes inside the Page.
Syntax:
<apex:Page StandardController="<ClassName>" Extensions="<Class1>,<Class2>,.."
>
..
..
<apex:Page>
Ex:
Public Class AccountsHelper
{
Public void CheckDuplicateAccounts()
{
// Write the Business Logic to Eliminate the Duplicate Accounts.
}
}
<apex:Page StandardController="Account" Extensions="AccountsHelper">
<apex:CommandButton value="Search" Action="{!CheckDuplicateAccounts}"/>

<apex:CommandButton Value="Cancel" Action="{!Cancel}"/>
</apex:Page>
InputField Tag (<apex:InputField>):

===================================
This tag is used to represent the object fields onto the user interface. We need to
supply the field name to the tag.
Properties:
1. ID = "referenceName"
2. Value = "{!<StandardClassName>.<FieldName>}"
4. Required = "Boolean"
Note:
While binding a Field Name to the tag, it will verify the field DataType and
Properties. Based on the field properties, it will provide the respective visual
appearance on the user interface.
Note:
Upon representing the field tags on the Visualforce page, we have to add the
corresponding Controller Class inside the Page Tag by using "StandardController"
property.
Ex:
<apex:Page StandardController="Account">
<apex:inputfield Value="{!Account.Name}"/>
<apex:inputfield Value="{!Account.Rating}"/>
<apex:inputfield value="{!Account.Pan_Number__C}"/>
</apex:Page>
UseCase:
========
Design a Visualforce page to Create New Account Records inside the Account
object.
VF Page Code:
-------------
<apex:page StandardController="Account" setup="false" sidebar="false"
showheader="true" tabStyle="Customer__c">
<apex:sectionHeader title="Account Edit" subtitle="New Account"/>
<apex:form >
<apex:pageblock title="Account Edit">
<apex:pageblockButtons location="Both">
<apex:commandButton value="Save" action="{!Save}"/>
<apex:commandButton value="Save & New" action="{!Save}"/>
<apex:CommandButton value="Cancel" action="{!Cancel}"/>
<apex:pageblocksection title="Account Information" columns="2"

collapsible="true">
<Apex:inputfield value="{!Account.Name}"/>
<apex:inputfield value="{!Account.Rating}" required="true"/>
<apex:inputfield value="{!Account.Industry}"/>
<apex:inputfield value="{!Account.Annualrevenue}"/>
<apex:inputfield value="{!Account.Type}"/>
<apex:inputfield value="{!Account.ownership}"/>
<apex:inputfield value="{!Account.Site}"/>
<apex:inputfield value="{!Account.website}"/>
<apex:inputfield value="{!Account.PAN_Number__c}" required="true"/>
<apex:inputfield value="{!Account.Share_Record_To_User__c}"/>
</apex:pageblocksection>
<apex:pageblockSection title="Contact Details" columns="2"

collapsible="true">
<apex:inputfield value="{!Account.Phone}" required="true"/>
<apex:inputfield value="{!Account.Fax}"/>
</apex:pageblockSection>
<apex:pageblocksection title="Address Information" columns="2"

collapsible="true">
<apex:inputfield value="{!Account.BillingStreet}"/>
<apex:inputfield value="{!Account.ShippingStreet}"/>
<apex:inputfield value="{!Account.BillingCity}"/>
<apex:inputfield value="{!Account.ShippingCity}"/>
<apex:inputfield value="{!Account.BillingState}"/>
<apex:inputfield value="{!Account.ShippingState}"/>
<apex:inputfield value="{!Account.BillingPostalCode}"/>
<apex:inputfield value="{!Account.ShippingPostalCode}"/>
<apex:inputfield value="{!Account.BillingCountry}"/>
<apex:inputfield value="{!Account.ShippingCountry}"/>
<apex:pageblockSection title="Additional Information" columns="2"

collapsible="true">
<apex:inputfield value="{!Account.CustomerPriority__c}"/>
<apex:inputfield value="{!Account.Active__c}"/>
</apex:pageblock>
</apex:form>
</apex:page>
Overriding the Standard Buttons:

================================
Once the page has been designed by using the required fields, we can override the
standard page with our own custom page, to be used to perform the operations on the
object records.
i.e. We can override the Standard Buttons controls to re-direct the user to our own
custom Visualforce pages as below.
Click on the "Setup" menu.

1. Goto Build Menu
2. Click on "Customize".
3. Click on "Required Objects Name and Expand it" (Ex: Accounts)
4. Click on "Buttons, Links and Actions" section.
5. Click on the "Edit" link for the "New Button".
6. Select the CheckBox "Visualforce Page".
7. Select the "Visualforce Page Name" from the Picklist, to be get
override.
Assignments:
============
1. Design a Visualforce page to Create the Lead Records inside the Object,
and
add the respective Action Methods. And Override the Standard New Button
Control for the Lead Object.
2. Design a Visualforce Page to Create the "Position Records" inside the

object. And Override the Standard "New" button, to Create the New
Position records in the object.
Detailed Page:
==============
To design the detailed page of the record through VF programming, we have to use
"<apex:Detail> tag".
By using this tag we can design the detailed page of the record and we can
represent the record information along with the required related lists also.
Properties:
1. Title = "Boolean"
This property is used to indicate whether the record title to be get
visible on the detailed page of the record or not.
2. InlineEdit = "Boolean"
This property is used to indicate the detailed page can have the Inline
Editing feature or not.
3. ShowChatter = "Boolean"
This property is used to indicate the page can have the Chatter Feed or
not.
4. RelatedList = "Boolean"
This property is used to indicate the page can show the RelatedList
records or not.
Note: The Detail tag should be always placed outside of the "Form Tag".
UseCase:
========
Design a Visualforce Page to represent the detailed page of the Account
Records.
VF Page Code:
-------------
<chatter:feedWithFollowers entityId="{!Account.ID}"/>
<apex:detail inlineEdit="true" showChatter="false" title="false"

relatedList="true"/>
</apex:page>
Testing the Detailed Page:

--------------------------
To test the Custom Detailed Page, we have to pass any of the Account Record
id to the VF Page with the help of "QueryString" as below.
Syntax:
https://<ServerNumber>.Salesforce.com/apex/<PageName>?
Id=<accountRecordID>
Ex:
https://c.ap15.visual.force.com/apex/AccountRecordDetailPage?id=0012v00002pynYX
RelatedList Tag (<apex:RelatedList>):

=====================================
This tag is used to represent the required RelatedList on the detailed page.
Each RelatedList tag is used to represent only one RelatedList on the Page.
To represent the multiple relatedLists on the detailed page, we have to use
multiple RelatedList tags.
Properties:
1. List = "RelatedListName"
This property is used to specify the RelatedList name, to be get
visible on the detail page.
Salesforce provides the below RelatedList names based on the objects as

below.
Child Object Name RelatedList Name
------------------------------------------------
Contact --> Contacts
Opportunity --> Opportunities
Case --> Cases
Open Activities --> OpenActivities
Activity History --> ActivityHistories
Notes and Attachments --> CombinedAttachments
Approval History --> ProcessSteps
...
...
Customer__c --> Customers__r
Position__C --> Positions__r
2. PageSize = "Integer"
This property is used to indicate the number of records to be get
visible in the relatedList at a time.
UseCase:
========
Design a VF Page to represent the Detailed Page of the Account Record, by
adding the required RelatedLists on the Page.
And make the Custom Detailed Page should be the default page to represent the
Account Records. (i.e. Override the "Standard View Button")
VF Page Code:
-------------
<chatter:feedWithFollowers entityId="{!Account.ID}"/>
<apex:detail inlineEdit="true" showChatter="false" title="true"

relatedList="false"/>
<apex:RelatedList list="Contacts" pagesize="5" rendered="true"/>

<apex:RelatedList list="Opportunities" pagesize="5" rendered="true"/>
<apex:relatedList list="Cases" pageSize="5" rendered="true"/>
<apex:relatedList list="openactivities" pageSize="5" rendered="true"/>
<apex:relatedList list="ActivityHistories" pageSize="5" rendered="true"/>
<apex:relatedList list="CombinedAttachments" pageSize="5" rendered="true"/>
<apex:relatedList list="ProcessSteps" pageSize="5" rendered="true"/>
<apex:relatedList list="recruiters__r" pageSize="5" rendered="true"/>
</apex:page>
Tab Controls:
=============
By using this feature, we can represent the data in the form of TabControls. VF
provides the below 2 Tags to be used to prepare the Tab Controls on the page.
TabPanel Tag (<apex:TabPanel>):

-------------------------------
This tag is used to combine the multiple user interfaces into a single entity
called as TabPanel.
It is a PlaceHolder / Container, which contains one or more user interfaces

to be used to perform the operations.
Inside the TabPanel, we can add one or more Tabs.
Properties:
1. SelectedTab = "TabName / Tab ReferenceName"
By using this property we can indicate, which tab should be
"Active / Selected" by default while loading the TabControl / Panel.
2. SwitchType = "ajax"
This property is used to refresh the currently selected tab upon
click on the Tab. So that we can improve the application performance.
Ex:
<apex:TabPanel SelectedTab="TabName" SwitchType="ajax">
...
...
</apex:TabPanel>
Tab Tag (<apex:Tab>):

---------------------
This tag is used to design the required user interface to perform the
operations in the application. Which can be included inside the TabPanel.
Note:
This tag should be always a Child Component to the "TabPanel".
We can prepare one or more Tabs inside the TabPanel.
Properties:
1. Label = "Caption for the Tab"
This property is used to specify the Caption for the Tab.
2. Name = "ReferenceName"
This property is used to specify the unique reference name to
identify the tab inside the TabPanel.
UseCase:
========
Design a VF Page to represent the Detailed Page of the Account Record, by
representing the related lists in the tab format.
And make the Custom Detailed Page should be the default page to represent the
Account Records. (i.e. Override the "Standard View Button")
VF Page Code:
-------------
<apex:page standardController="Account" setup="false" sidebar="false"
showHeader="true" tabStyle="Customer__c" >
<apex:TabPanel switchtype="ajax" >
<apex:tab label="Account Details" name="accDetails">

<apex:detail inlineEdit="true" showChatter="false" title="true"
relatedList="false"/>
</apex:tab>
<apex:tab label="Contacts" name="accContacts">

<apex:relatedList list="Contacts" pageSize="5" rendered="true"/>
</apex:tab>
<apex:tab label="Opportunities" name="accOppty">

<apex:relatedList list="Opportunities" rendered="true" pageSize="10"/>
</apex:tab>
<apex:tab label="Cases" name="accCases">

<apex:relatedList list="Cases" rendered="true" pageSize="10"/>
</apex:tab>
<apex:tab label="Notes & Attachments" name="accAttachments">

<apex:relatedList list="CombinedAttachments" rendered="true"
pageSize="5"/>
</apex:tab>
<apex:tab label="Open Activities" name="accActivities">

<apex:relatedList list="OpenActivities" rendered="true" pageSize="5"/>
</apex:tab>
<apex:tab label="Approval History" name="accApproval">

<apex:relatedList list="ProcessSteps" rendered="true" pageSize="5"/>
</apex:tab>
<apex:tab label="Recruiters" name="accRecruiters">

<apex:relatedList list="recruiters__r" rendered="true" pageSize="5"/>
</apex:tab>
</apex:TabPanel>
</apex:page>
Overriding the View Button:

---------------------------
Click on the "Setup" menu.
1. Goto Build Menu
2. Click on "Customize".
3. Click on "Required Objects Name and Expand it" (Ex: Accounts)
4. Click on "Buttons, Links and Actions" section.
5. Click on the "Edit" link for the "View Button".
6. Select the CheckBox "Visualforce Page".
7. Select the "Visualforce Page Name" from the Picklist, to be get
override.
Custom Controller:
==================
Upon performing the operations by using Visualforce Programming, if the Standard
Functionalities are not suitable, then we can Prepare our own business logic and
can be referenced inside the VF Page by using "Custom Controller".
i.e. We can Prepare our own Custom Class by implementing the required business
logic and can be invoked by using Button Controls on the VF Page.
Upon using the Custom Controller, we have to follow the below steps..
Step 1: Design a Visualforce Page with the required visual appearance controls.
Step 2: Implement the Custom Business Logic by creating the Apex Class and define
the required variables inside the Class and implement the required
methods with th business logic.
Note:
Define the required variables, Collections and Objects can be
referenced inside the VF Page with "GET and SET" accessors.
GET --> Used to Access the value from the Visualforce page.
SET --> Used to Set / Assign the Value from the Visualforce Page.
Ex:
Public Class CalculatorController
{
// Define the Variables, Objects, Collections,...etc.
Public integer customerCode{get;set;}
Public string customerName{get;set;}
Public List<Account> lstAccounts{get;set;}
// Define the Business Logic Methods..

Public void GetAllAccounts()
{
// Write the Business Logic..
}
}
Step 3: Reference the Custom Class inside the VF Page by using "Controller"
attribute.
Syntax:
<apex:Page Controller="CalculatorController" >
..
..
</apex:Page>
Step 4: Invoke the Methods by using the Button Controllers.

Syntax:
<apex:CommandButton Value="Get Records" Action="{!GetAllAccounts}"/>
UseCase:
========
Design a Visualforce Page to represent the Product Details on the Visualforce
Page.
VF Page Code:
-------------
<apex:page controller="ShowProductDetailsController" >
Product Code is...: {!productCode} 
Product Name is...: {!productName} 
Manufacturer Name is...: {!manufacturerName} 
Unit Price is....: {! unitPrice} 
Manufacturing Date is...: {!manufacturingDate} 
Expiry Date is....: {!expiryDate} 
Product is Available? ....: {!isInStock}
</apex:page>
Controller Class:
-----------------
public class ShowProductDetailsController
{
Public integer productCode{get;set;}
Public string productName{get;set;}
Public string manufacturerName{get;set;}
Public Decimal unitPrice{get;set;}
Public Date manufacturingDate{get;set;}
Public Date expiryDate{get;set;}
Public Boolean isInStock{get;set;}
}
Assignments:
============
1. Design a Visualforce Page to represent the Customer Details on the Page.
2. Design a Visualforce Page to represent the Project Details on the Page.
3. Design a Visualforce Page to represent the Employee Details on the Page.
UseCase:
========
Design a Visualforce Page to represent the Product Details on the Visualforce
Page. Assign the Values for the variables by using "Constructor".
VF Page Code:
-------------
<apex:page controller="ShowProductDetailsController" >
Product Code is...: {!productCode} 
Product Name is...: {!productName} 
Manufacturer Name is...: {!manufacturerName} 
Unit Price is....: {! unitPrice} 
Manufacturing Date is...: {!manufacturingDate} 
Expiry Date is....: {!expiryDate} 
Product is Available? ....: {!isInStock}
</apex:page>
Controller Class:
-----------------
public class ShowProductDetailsController
{
Public integer productCode{get;set;}
Public string productName{get;set;}
Public string manufacturerName{get;set;}
Public Decimal unitPrice{get;set;}
Public Date manufacturingDate{get;set;}
Public Date expiryDate{get;set;}
Public Boolean isInStock{get;set;}
/* Prepare a Default Constructor..

Constructor is a Special method, which is used to assign the pre-defined
values for the class
variables. Constructor will get executes automatically upon creating the
object of the class.
1. Constructor Name should be exactly same like as the Class Name.

2. Constructor doesn't return any value.
3. Constructor doesn't have any returntype even "void".
4. Constructors will executes automatically upon creating the object of
class.
5. We can define multiple constructors inside a Class.
6. We can supply one or more parameters to the Constructor.
7. Constructor should be always defined with "Public" access specifier.
*/
Public ShowProductDetailsController()
{
productCode = 3450023;
productName = 'Laptop Device';
manufacturerName = 'DELL Inc.';
unitPrice = 32000;
manufacturingDate = System.Today();
expiryDate = system.today().AddYears(4);
isInStock = true;
}
}
UseCase:
========
Design a Visualforce Page to Create an Account Record inside the object while
loading the Page.
VF Page Code:
-------------
<apex:page action="{!CreateAccountRecord}"
controller="CreateNewAccountRecordController" >
{!recordResult}
</apex:page>
Controller Class:
-----------------
public class CreateNewAccountRecordController
{
Public string recordResult{get;set;}
Public void CreateAccountRecord()

{
// Write the Code to Insert an Account Record..
Account acc = new Account();
acc.Name = 'VF Page Test Account';

acc.Rating = 'Hot';
acc.Industry = 'Banking';
acc.Type = 'Prospect';
acc.Ownership = 'Public';
acc.Annualrevenue = 5700000;
acc.Phone = '9900998877';
acc.fax = '9900667788';
acc.website = 'www.salesforce.com';
acc.BillingCity = 'Hyderabad';
acc.BillingState = 'Telangana';
acc.BillingCountry = 'India';
acc.customerpriority__C = 'High';
acc.active__C = 'Yes';
insert acc;
if(acc.id != null)
recordResult = 'Account Record Inserted Successfully with id...: '+
acc.id;
else
recordResult = 'Something went wrong while inserting record.';
}
}
Note:
While Loading the Page, We can't write the DML Statements inside the
Constructor.
i.e. Constructor doesn't supports the DML Statements. But it will supports
SOQL Queries.
InputText Tag (<apex:InputText>):

=================================
This tag is used to represent a TextBox control on the Visualforce page, so that we
can supply the input values to the application at runtime.
We can represent one or more TextBox Controls on the VF Page.
Properties:
2. Label = "Label for the TextBox"
3. html-placeholder = "Watermark Text inside the TextBox"
5. Value = "{! <VariableName> }"
UseCase:
========
Design a Visualforce Page to implement the Basic Calculator. And perform the
Operations by using the Button Controls.
VF Page Code:
-------------
<apex:page controller="BasicCalculatorController" setup="false" sidebar="false"
showHeader="true" tabStyle="Hiring_Manager__c" >
<apex:sectionHeader title="Calculator" subtitle="Basic Calculator"/>
<apex:form >
<apex:pageblock title="Basic Calculator Block">
<apex:pageblockButtons location="bottom">
<apex:commandButton value="Addition" action="{!Addition}"
rerender="res"/>
<apex:commandButton value="Subtraction" action="{!Subtraction}"
rerender="res"/>
<apex:commandButton value="Multiplication" action="{!Multiply}"
rerender="res"/>
<apex:commandButton value="Division" action="{!Division}"
rerender="res"/>
<apex:commandButton value="Modulus" action="{!Modulus}"
rerender="res"/>
<apex:PageBlockSection title="Calculator Section" columns="1"

collapsible="true" >
<apex:inputtext label="Enter First Number : " html-placeholder="Enter
First Number" value="{!firstNumber}" />
<apex:inputtext label="Enter Second Number : " html-placeholder="Enter
Second Number" value="{!secondNumber}"/>
<apex:outputLabel id="res"> Operation Result is ........: {!result}
</apex:outputLabel>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class BasicCalculatorController
{
Public integer firstNumber{get;set;}
Public integer secondNumber{get;set;}
Public integer result{get;set;}
Public void Addition()

{
result = firstNumber + secondNumber;
}
Public void Subtraction()

{
result = firstNumber - secondNumber;
}
Public void Multiply()

{
result = firstNumber * secondNumber;
}
Public void Division()

{
result = firstNumber / secondNumber;
}
Public void Modulus()

{
result = Math.Mod(firstNumber, secondNumber);
}
}
PageMessages Tag (<apex:PageMessages>):

=======================================
By using this tag, we can give the ability to the Visualforce page to show the
error messages on the page upon passing the wrong input values.
We need to add the tag inside the "Form Tag".
Ex:
<apex:form>
<apex:PageMessages id="errors"/>
</apex:form>
Upon representing the error messages on the VF Page, each Error message contains
the below 2 parts.
1. Error Icon:
Visualforce provides the below Error Icons
ApexPages.Severity.CONFIRM
ApexPages.Severity.INFO
ApexPages.Severity.WARNING
ApexPages.Severity.ERROR
ApexPages.Severity.FATAL
2. Error Message / Description

The Developer can prepare the Custom Error Message to be get visible on
the page.
We can represent the error message on the VF Page through Apex Programming as
below.
Syntax:
ApexPages.AddMessage(new ApexPages.Message(<Error Icon>,<Error
Description>));
Ex:
ApexPages.AddMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM,
'Operation
Completed Successfully.'));
UseCase:
========
Design a Visualforce Page to implement the Basic Calculator. And perform the
Operations by using the Button Controls. Represent the Error Messages on the Page,
if some thing went wrong.
VF Page Code:
-------------
<apex:page controller="BasicCalculatorController" setup="false" sidebar="false"
showHeader="true" tabStyle="Hiring_Manager__c" >
<apex:sectionHeader title="Calculator" subtitle="Basic Calculator"/>
<apex:form >
<apex:PageMessages id="errors"></apex:PageMessages>
<apex:pageblock title="Basic Calculator Block">

<apex:pageblockButtons location="bottom">
<apex:commandButton value="Addition" action="{!Addition}"
rerender="res,errors"/>
<apex:commandButton value="Subtraction" action="{!Subtraction}"
<apex:commandButton value="Multiplication" action="{!Multiply}"
<apex:commandButton value="Division" action="{!Division}"
<apex:commandButton value="Modulus" action="{!Modulus}"
<apex:PageBlockSection title="Calculator Section" columns="1"

collapsible="true" >
<apex:inputtext label="Enter First Number : " html-placeholder="Enter
First Number" value="{!firstNumber}" />
<apex:inputtext label="Enter Second Number : " html-placeholder="Enter
Second Number" value="{!secondNumber}"/>
<apex:outputLabel id="res"> Operation Result is ........: {!result}
</apex:outputLabel>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class BasicCalculatorController
{
Public integer firstNumber{get;set;}
Public integer secondNumber{get;set;}
Public integer result{get;set;}
Public void Addition()

{
result = firstNumber + secondNumber;
}
Public void Subtraction()

{
result = firstNumber - secondNumber;
}
Public void Multiply()

{
result = firstNumber * secondNumber;
}
Public void Division()

{
if(secondnumber > 0)
{
result = firstNumber / secondNumber;
ApexPages.AddMessage(new ApexPages.Message(ApexPages.Severity.CONFIRM,
'Division Operation has been completed successfully.'));
}
else
{
ApexPages.AddMessage(new ApexPages.Message(ApexPages.Severity.WARNING,
'Division Operation Cannot be performed.Please Enter the Valid Input.'));
}
}
Public void Modulus()

{
result = Math.Mod(firstNumber, secondNumber);
}
}
Database Interaction:
=====================
By using VF Programming, we can interact with the Salesforce Objects, we can
perform all the DML operations on the object records and we can fetch the records
from the object by using SOQL Queries.
To represent the result records on the VF Page in Tabular format, we have to use
"PageBlockTable"Tag.
PageBlockTable Tag (<apex:PageBlockTable>):

-------------------------------------------
This tag is used to represent a Table on the VF Page, to be get used to display the
records in the Tabular format.
It contains the in-built table structure by default. We have to supply the Data
Source to the PageBlockTable. So that it will iterate the data source collection
from starting to ending and will represent each record in a separate row.
Note:
This should be a Child Component to the "PageBlock".
Properties:
3. Value = "{! <ListCollection / DataSource> }"
4. Var = "reference for each record"
Column Tag (<apex:Column>):

---------------------------
This tag is used to add the required columns to the PageBlockTable. We can add one
or more columns to be used to represent the record values inside the Table.
Note: This should be a Child Component to the PageBlockTable.
Properties:
3. HeaderValue = "Caption for the Column"
4. Value = "{! <refName>.<FieldName> }"
UseCase:
========
Design a Visualforce Page to represent all the Account Records in the Tabular
format while loading the page.
VF Page Code:
-------------
<apex:page controller="ShowAllAccountRecordsController" setup="false"
sidebar="false" showHeader="true" tabStyle="Position__c" >
<apex:sectionHeader title="Accounts" subtitle="All Accounts"/>
<apex:form >
<apex:pageblock title="All Accounts : ( {!lstAccounts.size} ) ">
<apex:PageblockTable value="{!lstAccounts}" var="acc">

<apex:column value="{!acc.Name}"/>
<apex:column value="{!acc.Rating}"/>
<apex:column value="{!acc.Industry}"/>
<apex:column value="{!acc.AnnualRevenue}"/>
<apex:column value="{!acc.Type}"/>
<apex:column value="{!acc.Phone}"/>
<apex:column value="{!acc.Fax}"/>
<apex:column value="{!acc.Active__c}"/>
</apex:PageblockTable>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class ShowAllAccountRecordsController
{
// Prepare Default Constructor..
Public ShowAllAccountRecordsController()
{
lstAccounts = new List<Account>();
lstAccounts = [Select id, name, rating, industry, annualrevenue, phone,

fax, type, ownership, active__C
from Account
Order by name];
}
}
OutputLink Tag (<apex:OutputLink>):

===================================
This tag is used to represent the specified content on the Page in the form of a
"HyperLink". When the user click on the "HyperLink", then it will re-direct the
user to the specified target page.
Properties:
3. Value = "<PathOfTargetPageName>"
4. Target = "_blank / _New"
Ex:
<apex:OutputLink value="http://www.salesforce.com" target="_blank">
Click Here </apex:OutputLink>
UseCase:
========
Design a Visualforce Page to represent all the Account Records in the Tabular
format while loading the page.
1. Represent the Account Name in the form of a "HyperLink".

2. Upon Click on the "Name", re-direct the user to the Detailed Page of
the Selected Account Record.
VF Page Code:
-------------
<apex:page controller="ShowAllAccountRecordsController" setup="false"
sidebar="false" showHeader="true" tabStyle="Position__c" >
<apex:form >
<apex:pageblock title="All Accounts : ( {!lstAccounts.size} ) ">
<apex:PageblockTable value="{!lstAccounts}" var="acc">

<apex:column headerValue="Account Name">
<apex:outputlink value="/{!acc.id}" target="_blank"> {!acc.Name}
</apex:outputlink>
</apex:column>
<apex:column value="{!acc.AnnualRevenue}"/>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class ShowAllAccountRecordsController
{
// Prepare Default Constructor..

Public ShowAllAccountRecordsController()
{

fax,
type, ownership, active__C
from Account
Order by name];
}
}
UseCase:
========
Design a Visualforce Page to search for the Account Records based on the
specified characters at runtime. Match the input text with "Account Name".
1. Represent the Result records in the Tabular format.

2. Display each Account Record Name in the form of a HyperLink.
3. Re-direct the user to the Detailed Page of the Account, upon click
on
the HyperLink.
VF Page Code:
-------------
<apex:page controller="SearchAccountsController" setup="false" sidebar="false"
showheader="true" tabStyle="Customer__c" >
<apex:sectionHeader title="Accounts" subtitle="Search Accounts"/>
<apex:form >
<apex:Pagemessages id="errors"></apex:Pagemessages>
<apex:pageblock title="Search Accounts Block">

<apex:PageBlockSection title="Search Account Records" columns="2"
collapsible="false">
<apex:inputtext label="Enter Search Text : " html-placeholder="Enter
Search Text" value="{!searchText}"/>
<apex:commandButton value="Search Records" action="{!
SearchAccountRecords}" rerender="pgBlock, errors"/>
</apex:pageblock>
<apex:pageblock title="Search Results : ( {!lstAccounts.size} )" id="pgBlock">
<apex:PageblockTable Value="{!lstAccounts}" var="acc">

<apex:outputlink value="/{!acc.id}" target="_blank"> {!acc.Name}
</apex:outputlink>
</apex:column>
<apex:column value="{!acc.Annualrevenue}"/>
<apex:column value="{!acc.Ownership}"/>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class SearchAccountsController
{
Public string searchText{get;set;}
Public void SearchAccountRecords()

{
if(searchText != null && searchText != '')

{
searchText += '%';

fax, type, ownership, customerpriority__C, active__C
from Account
Where name like : searchText];
}
else
{
ApexPages.AddMessage(new ApexPages.Message(ApexPages.Severity.Error,
'Please Enter the Search Text to Search Matching Records.'));
}
}
}
Page Redirection:
=================
By using this feature, we can re-direct the user from one Visualforce page to
another upon click on the button controls.
Ex:
SourcePage <-- To ---> TargetPage
Upon redirecting the user, we need to hold the address / details of the target page
to which the user is being re-directed.
To hold the address of the Target Page we have to use "PageReference" class.
PageReference Class:
--------------------
This class will holds the address of the specified Visualforce page.
Syntax:
PageReference <ObjectName> = new PageReference('/apex/<TargetPageName>');
Ex:
PageReference pgRef = new PageReference('/apex/TargetPage');
To re-direct the user to the specified page, we have to use "SetRedirect()" method.
Syntax:
<objectName>.SetRedirect(true);
Ex:
pgRef.SetRedirect(true);
UseCase:
========
Design Two Visualforce Pages and Re-direct the users from One Visualforce
page to another.
Source Page:
------------
VF Page Code:
<apex:page controller="SourcePageController" setup="false" sidebar="false"
showheader="true" tabStyle="Solution" >
<apex:sectionHeader title="Page Redirection" subtitle="Source Page"/>
<apex:form >
<apex:PageBlock title="Source Page Block">
<apex:pageblockButtons location="top">
<apex:commandButton value="Next Page" action="{!
GotoTargetPage}"/>
</apex:PageBlock>
</apex:form>
</apex:page>
Controller Class:
public class SourcePageController
{
Public PageReference GotoTargetPage()
{
PageReference pgRef = new PageReference('/apex/TargetPage');
return pgRef.SetRedirect(true);
}
}
Target Page:
------------
VF Page Code:
<apex:page controller="TargetPageController" setup="false" sidebar="false"
showheader="true" tabStyle="Order" >
<apex:sectionHeader title="Page Redirection" subtitle="Target Page"/>
<apex:form >
<apex:PageBlock title="Target Page Block">
<apex:commandButton value="Previous Page" action="{!
GotoPreviousPage}"/>
</apex:PageBlock>
</apex:form>
</apex:page>
Controller Class:
public class TargetPageController
{
Public PageReference GotoPreviousPage()
{
PageReference pgRef = new PageReference('/apex/SourcePage');
}
}
QueryString:
============
QueryString is used to pass the values from one Visualforce page to another upon
page re-direction.
By using QueryString, we can supply either One / More values from one page to
another.
Note:
QueryString will add the parameters / values to the URL. Each Parameter
should have a "Key" and a "Value".
Syntax:
PageReference <objectName> = new
PageReference('/apex/<PageName>?
<paramName>=<Value>');
Ex:
string searchText = 'test';
PageReference pgRef = new PageReference('/apex/TargetPage?
sText='+searchText);
string accName = 'Ram Kumar';

string accRating = 'Hot';
PageReference pgRef = new
PageReference('/apex/TargetPage?
aName='+accName+'&aRating='+accRating);
Note:
We can add the multiple parameters to the QueryString by using a separator
"&".
Upon passing the parameters to the Visualforce Page, it will append the
Values inside the URL.
We need to get the Values from the TargetPage URL as below.
Syntax:
<DataType> <value> =
ApexPages.CurrentPage().GetParameters().Get('paramName');
Ex:
String customerName =
ApexPages.CurrentPage().GetParameters().Get('aName');
string customerRating =
ApexPages.CurrentPage().GetParameters().Get('aRating');
UseCase:
========
Design a Visualforce Page to Search for the Lead Records based on the User Input by
compare with the Lead LastName.
1. Represent the Search Results in a Search Results Page.

2. Display the Record Name in "HyperLink" format.
3. Re-direct the user to Detailed Page of the Record upon click on the
record name.
VF Page Code:
-------------
<apex:page controller="LeadSearchResultsController" setup="false" sidebar="false"
<apex:sectionHeader title="Search Results" subtitle="Lead Search Results"/>
<apex:form >
<apex:PageBlock title="Search Results : ( {!lstLeads.Size} )">
<apex:PageblockButtons location="top">
<Apex:commandButton value="Search Again" action="{!GotoSearchPage}"/>
</apex:PageblockButtons>
<apex:PageblockTable value="{!lstLeads}" var="ld">

<apex:column headerValue="Lead Name">
<apex:outputLink value="/{!ld.id}" target="_blank"> {!ld.firstname}
{!ld.lastname}</apex:outputLink>
</apex:column>
<apex:column value="{!ld.Rating}"/>
<apex:column value="{!ld.Industry}"/>
<apex:column value="{!ld.Annualrevenue}"/>
<apex:column value="{!ld.Title}"/>
<apex:column value="{!ld.Phone}"/>
<apex:column value="{!ld.fax}"/>
<apex:column value="{!ld.status}"/>
</apex:PageBlock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class LeadSearchResultsController
{
Public List<Lead> lstLeads{get;set;}
// Default Constructor..
Public LeadSearchResultsController()
{
lstLeads = new List<Lead>();
string searchText = ApexPages.CurrentPage().GetParameters().Get('sText');
if(searchText != null && searchText != '')

{
lstLeads = [Select id, firstname, lastname, title, industry, rating,
annualrevenue,
phone, fax, email, status
from Lead
Where lastname like :
searchText+'%'];
}
}
Public PageReference GotoSearchPage()

{
PageReference pgRef = new PageReference('/apex/SearchLeadRecordsPage');
}
}
ViewState:
==========
Base64Encoding format.
Size: 135 KB
See the ViewState information, we have to enable a feature "Show ViewState in

Development Mode".
Your Name
|
--> My Settings
|
--> Personal
|
--> Advanced User Details
|
--> CheckBox:
ShowViewState in Development Mode
Graduation:
|
--> Looking for Job
|
--> Resume.
|
--> Job Portals.
|
--> Create an Account. (Sign Up)
WithSharing Vs Without Sharing:

===============================
With Sharing --> User Mode / User Context
Without Sharing --> System Mode / System Context
These keywords can be applicable at the Class level, Upon Creating an apex Class,
we can specify either "WithSharing / Without Sharing".
Syntax:
[Access Specifier] [With Sharing / Without Sharing] Class <ClassName>
{
// Write the Business Logic..
}
Ex:
Public Class AccountsHelper --> Without Sharing
{
// Written Business Logic..
}
Public With Sharing Class AccountsHelper --> With Sharing

{
// Written Business Logic..
}
Pagination:
===========
Upon representing the records on the VF Page, it can represent max. of 1,000
records on the Page.
To represent more number of records on the Page, we have the assign the property
"ReadOnly = true" inside the Page Tag. Then it will enhance the VF Page capability
to show max. of 10,000 records at a time.
Note: But, ReadOnly property will prevent the DML operations on the Page.
To avoid this problem, to show the more number of records on the page we can use
"Pagination / Paging".
We can divide all the records received from the object into the various smaller
pieces called as "Pages". And we can represent each Page on the VF Page at a time.
And the user can navigate all the records from First To Last and Vice-Versa by
using "Navigation Buttons".
We can implement the Pagination with the help of "StandardSetController" class.
Methods:
--------
Syntax:
StandardSetController sController = new
StandardSetController(Database.getQueryLocator([SOQL
Query]));
1. SetPageSize(Integer):
2. Integer ResultSize():
3. First():
4. Next():
5. Previous():
6. Last():
7. Boolean HasNext():
8. Boolean HasPrevious():
9. Integer PageNumber():
10. List<SObject> GetRecords():

UseCase:
========
Design a Visualforce Page to represent the Account Records in the Tabular
Format. Divide the records to the various pages by using "Pagination Feature" with
the help of "StandardSetController" Class. And provide the Navigation buttons to
navigate the records from First To Last and Vice-Versa.
VF Page Code:
-------------
<apex:page controller="AccountRecordsPaginationController" setup="false"
sidebar="false" showheader="true" tabStyle="Customer__c">
<apex:SectionHeader title="Pagination" subtitle="Accounts Pagination"/>
<apex:form >
<apex:pageblock title="Account Records" id="pgBlock">
<apex:PageBlockTable value="{!accounts}" var="acc">
<apex:outputLink value="/{!acc.id}" target="_blank"> {!acc.Name}
</apex:outputLink>
</apex:column>
<apex:Column value="{!acc.Rating}"/>
<apex:column value="{!acc.Annualrevenue}"/>
<apex:column value="{!acc.ownership}"/>
<apex:column value="{!acc.phone}"/>
<apex:column value="{!acc.fax}"/>
</apex:PageBlockTable>
 
<center> 
<apex:outputlabel > {! (setController.PageNumber -1)*
setController.PageSize + 1} to {!setController.PageNumber* setController.PageSize}
Of {!setController.ResultSize}</apex:outputlabel>
<apex:commandLink value="First" action="{!setController.First}"
rerender="pgBlock" rendered="{!setController.hasPrevious}"/>
<apex:commandLink value="Previous" action="{!setController.Previous}"
rerender="pgBlock" rendered="{!setController.hasPrevious}"/>
<apex:commandLink value="Next" action="{!setController.Next}"
rerender="pgBlock" rendered="{!setController.HasNext}" />
<apex:commandLink value="Last" action="{!setController.Last}"
rerender="pgBlock" rendered="{!setController.HasNext}"/>
</center>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class AccountRecordsPaginationController
{
Public ApexPages.StandardSetController setController
{
Get
{
if(setController == null)
{
setController = new
ApexPages.StandardSetController(Database.getQueryLocator([Select id, name, rating,
industry, annualrevenue,
type, ownership, phone, fax, active__C
from Account Order by name]));

}
return setController;
}
Set;
}
Public List<Account> getAccounts()

{
setController.SetPageSize(5);
return (List<Account>) setController.GetRecords();
}
}
Extension Controller:
=====================
StandardController --> Standard Functionalities
Standard + Custom = Extension Controller
UseCase:
========
Design a Visualforce Page to Insert the Hiring Manager Records inside the
object.
1. Upon Saving the Record, is should maintain the Uniqueness based on
the
Hiring Manager Name and Contact Number Combination.
2. If any Duplicate Records Found, then show the Error Message on the
Page. Else insert the Record as it is.
3. Upon Click on the Cancel Button, Cancel the Current Operation.
VF Page Code:
-------------
<apex:page StandardController="Hiring_Manager__c"
Extensions="NewHiringManagerRecordExtension" setup="false" sidebar="false"
<apex:sectionHeader title="Hiring Manager Edit" subtitle="New Hiring Manager"/>
<apex:form >
<apex:pagemessages id="errors"></apex:pagemessages>
<apex:PageBlock title="Hiring Manager Edit">

<apex:commandButton value="Save" action="{!ValidateDuplicateHRRecords}"
rerender="errors"/>
<apex:commandButton value="Cancel" action="{!Cancel}"/>
<apex:pageblockSection title="New Hiring Manager" columns="2"

collapsible="false">
<apex:inputfield value="{!Hiring_Manager__c.Name}" required="true"/>
<apex:inputfield value="{!Hiring_Manager__c.Location__c}"/>
<apex:inputfield value="{!Hiring_Manager__c.Contact_Number__c}"/>
<apex:inputField value="{!Hiring_Manager__c.Email_ID__c}"/>
</apex:PageBlock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class NewHiringManagerRecordExtension
{
Hiring_Manager__C hrRecord;
public NewHiringManagerRecordExtension(ApexPages.StandardController controller)
{
hrRecord = (Hiring_Manager__C) controller.GetRecord();
}
Public void ValidateDuplicateHRRecords()

{
integer recordsCount = [Select count() from Hiring_Manager__C
Where name =: hrRecord.Name and
contact_number__C =:
hrRecord.Contact_Number__C];
if(recordsCount > 0)
{
ApexPages.AddMessage(new ApexPages.Message(ApexPages.Severity.Error,
'Duplicate Records Found with Same Details. Record Cannot be acceptable.'));
}
else
{
insert hrRecord;
ApexPages.AddMessage(new ApexPages.Message(ApexPages.Severity.Confirm,
'Hiring Manager Record Inserted Successfully.'));
}
}
}
Assignment:
===========
Create a Visualforce Page to Search for the Account Records based on the
specified Name in the search TextBox.
1. Represent the Matching Related Records in the Tabular format.

2. Display each record name in the form of "HyperLink".
3. Re-direct the user to the detailed page upon click on the record
name.
4. Display the "Enhanced ListView" control in the bottom of the page.
(<apex:EnhancedList>)
Wrapper Classes:
================
UseCase:
========
Design a Visualforce Page to represent the Account Records and Contact
Records and Lead Records inside a Single Table.
1. Represent the Record Name in the form of a "HyperLink".
2. Re-direct the user to the detailed page of the record upon click on
the record name.
Wrapper Class:
--------------
public class CustomWrapper
{
Public ID recordID{get;set;}
Public string firstName{get;set;}
Public string lastName{get;set;}
Public string designation{get;set;}
Public string ratingValue{get;set;}
Public string industryName{get;set;}
public Decimal annualRevenueValue{get;set;}
Public string cityName{get;set;}
Public string stateName{get;set;}
Public string countryName{get;set;}
Public string phoneNumber{get;set;}
Public string faxNumber{get;set;}
Public Boolean isSelected{get;set;}
// Prepare a Constructor to Convert the Account Record into our Custom Type.
Public CustomWrapper(Account acc, Boolean selection)
{
recordID = acc.id;
lastName = acc.Name;
ratingValue = acc.Rating;
industryName = acc.Industry;
annualRevenueValue = acc.AnnualRevenue;
cityName = acc.BillingCity;
stateName = acc.BillingState;
countryName = acc.BillingCountry;
phoneNumber = acc.Phone;
faxNumber = acc.Fax;
isSelected = selection;
}
// Prepare a Constructor to Convert the Lead Record into our Custom Type.
Public CustomWrapper(Lead ld, Boolean selection)
{
recordID = ld.id;
firstName = ld.FirstName;
lastName = ld.LastName;
ratingValue = ld.Rating;
industryName = ld.Industry;
phoneNumber = ld.Phone;
faxNumber = ld.Fax;
cityName = ld.City;
stateName = ld.State;
countryName = ld.Country;
designation = ld.Title;
}
// Prepare a Constructor to Convert the Contact Record into our Custom Type.
Public CustomWrapper(Contact con, Boolean selection)
{
recordID = con.id;
firstName = con.FirstName;
lastName = con.LastName;
designation = con.Title;
phoneNumber = con.Phone;
faxNumber = con.Fax;
cityName = con.MailingCity;
stateName = con.MailingState;
countryName = con.MailingCountry;
}
}
VF Page Code:
-------------
<apex:page action="{!GetRecords}" controller="CustomWrapperDetailsController"
setup="false" sidebar="false" showheader="true" tabstyle="Customer__c" >
<apex:sectionHeader title="Custom Wrapper" subtitle="AccountLeads Wrapper"/>
<apex:form >
<apex:Pageblock title="Custom Wrapper Block" id="pgBlock">
<apex:commandButton value="Select All" action="{!SelectAllRecords}"
rerender="pgBlock"/>
<apex:commandButton value="Un Select All" action="{!
UnSelectAllRecords}" rerender="pgBlock"/>
<apex:Pageblocktable value="{!lstWrapper}" var="wr">

<apex:column headerValue="Action">
<apex:inputcheckbox value="{!wr.isSelected}"/>
</apex:column>
<apex:column headerValue="Record Name">
<apex:outputLink value="/{!wr.recordID}" target="_blank"> {!
wr.FirstName} {!wr.LastName}</apex:outputLink>
</apex:column>
<apex:column value="{!wr.designation}" headerValue="Designation"/>
<apex:column value="{!wr.PhoneNumber}" headerValue="Contact Number"/>
<apex:column value="{!wr.faxNumber}" headerValue="Fax Number"/>
<apex:column value="{!wr.RatingValue}" headerValue="Rating Value"/>
<apex:column value="{!wr.industryName}" headerValue="Industry"/>
<apex:column value="{!wr.AnnualrevenueValue}" headerValue="Annual
Revenue"/>
<apex:column value="{!wr.cityName}" headerValue="City"/>
<apex:column value="{!wr.stateName}" headerValue="State"/>
<apex:column value="{!wr.countryName}" headerValue="Country"/>
</apex:Pageblocktable>
</apex:Pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class CustomWrapperDetailsController
{
Public List<CustomWrapper> lstWrapper{get;set;}
Public void SelectAllRecords()

{
for(CustomWrapper cWrapper : lstWrapper)
{
cWrapper.isSelected = true;
}
}
Public void UnSelectAllRecords()

{
for(CustomWrapper cWrapper : lstWrapper)
{
cWrapper.isSelected = false;
}
}
Public void GetRecords()

{
lstWrapper = new List<CustomWrapper>();
// Get the Records from the objects and store them into the collection.
List<Account> lstAccounts = [Select id, name, rating, industry,

annualrevenue, phone, fax,
type, active__C, ownership,
billingcity,
billingstate,
billingcountry
from Account
Order
by name
Limit 20];
// Pass each Account record to Custom Wrapper Class, then it will prepare
the Custom Record.
for(Account acc : lstAccounts)
{
CustomWrapper cWrapper = new CustomWrapper(acc, false);
lstWrapper.Add(cWrapper);
}
List<Contact> lstContacts = [Select id, firstname, lastname, title, phone,

fax, mailingcity,
mailingstate,
mailingcountry
from Contact
Order by
lastname
Limit
20 ];
// Pass each Contact record to Custom Wrapper Class, then it will prepare
the Custom Record.
for(Contact con : lstContacts)
{
CustomWrapper cWrapper = new CustomWrapper(con, false);
}
List<Lead> lstLeads = [Select id, firstname, lastname, title, phone, fax,
industry, rating,
annualrevenue, city,
state, country
from Lead
Order
by lastname
Limit 20];
// Pass each Lead record to Custom Wrapper Class, then it will prepare the
Custom Record.
for(Lead ld : lstLeads)
{
CustomWrapper cWrapper = new CustomWrapper(ld, false);
}
}
}
AJAX Controls:
==============
AJAX --> Asynchronous Java Script & XML
1. Action Poller (<apex:ActionPoller>)

2. Action Support (<Apex:ActionSupport>)
3. Action Function (<apex:ActionFunction>)
4. Action Status (<apex:ActionStatus>)
5. Action Region (<apex:ActionRegion>)
Action Poller Tag (<apex:ActionPoller>):

========================================
This Tag is used to invoke the Controller Action Methods for each specified time
interval. It contains the "Partial Page Refreshment" feature.
Properties:
3. Interval = "Time in Seconds"
4. ReRender = "ComponentReferenceName"
Ex:
<apex:ActionPoller
Action="{! <MethodName> }"
Interval = "10"
ReRender="componentReferenceName"/>
UseCase:
========
Design a Visualforce Page to represent all the Case Records in the Tabular
format. And Refresh the Page for each 5 Seconds to load the latest Case Records.
VF Page Code:
-------------
<apex:page action="{!GetAllCaseRecords}" controller="ShowAllCaseRecordsController"
setup="false" sidebar="false" showheader="true" tabStyle="Solution">
<apex:sectionHeader title="Cases" subtitle="All Cases"/>
<apex:form >
<apex:actionPoller action="{!GetAllCaseRecords}" interval="5"
rerender="pgBlock"/>
<apex:PageBlock title="All Cases : ( {!lstCases.Size} )" id="pgBlock">

<Apex:Pageblocktable value="{!lstCases}" var="cs">
<apex:column headerValue="Case Number">
<apex:outputlink value="/{!cs.id}" target="_blank"> {!
cs.CaseNumber} </apex:outputlink>
</apex:column>
<apex:column value="{!cs.Status}"/>
<apex:column value="{!cs.Priority}"/>
<apex:column value="{!cs.Origin}"/>
<apex:column value="{!cs.Type}"/>
<apex:column value="{!cs.Reason}"/>
<apex:column value="{!cs.Subject}"/>
</Apex:Pageblocktable>
</apex:PageBlock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class ShowAllCaseRecordsController
{
Public List<Case> lstCases {get;set;}
Public void GetAllCaseRecords()

{
lstCases = new List<Case>();
lstCases = [Select id, caseNumber, status, priority, type, origin,

reason, CreatedDate, Subject
from Case
Order by CreatedDate desc];
}
}
Creating Case Record (Execute Anonymous Window):

---------------------
public class ShowAllCaseRecordsController
{
Public void GetAllCaseRecords()

{
lstCases = [Select id, caseNumber, status, priority, type, origin,

reason, CreatedDate, Subject
from Case
Order by CreatedDate desc];
}
}
Picklist Control:
=================
<apex:SelectList>
Properties:
1. Label = "Label information"
2. MultiSelect = "Boolean" (TRUE --> MultiSelect Picklist)
3. Size = "Integer"
6. Value = "{! <VariableName>}"
<apex:SelectOption> --> Add only one option to the Picklist Control.

This Tag is used to add only one element to the picklist control.
Note:
This tag should be a Child Component to the "SelectList" tag.
Properties:
1. ItemLabel = "Use to specify the Item / Element Label to be
visible in
the picklist control."
2. ItemValue = "Used to indicate the value to be returned to the

application upon selecting the element."
UseCase:
========
Design a Visualforce Page to represent the Picklist Control along with the
required options.
VF Page Code:
-------------
<apex:page setup="false" sidebar="false" showHeader="true" tabStyle="Order">
<apex:sectionHeader title="Picklist" subtitle="Input Controls"/>
<apex:form >
<apex:pageblock title="Picklist Controls Block">
<apex:pageblocksection title="Picklist Controls Section" columns="1"
collapsible="true">
<apex:selectList label="Select the Country" multiselect="false"

size="1">
<apex:selectoption itemlabel="----None----"
itemvalue=""></apex:selectoption>
<apex:selectoption itemlabel="India"
itemvalue="IND"></apex:selectoption>
<apex:selectoption itemlabel="United States"
itemvalue="USA"></apex:selectoption>
<apex:selectoption itemlabel="United Kingdom"
itemvalue="UK"></apex:selectoption>
<apex:selectoption itemlabel="Australia"
itemvalue="AUS"></apex:selectoption>
<apex:selectoption itemlabel="China"
itemvalue="CHN"></apex:selectoption>
<apex:selectoption itemlabel="Japan"
itemvalue="JPN"></apex:selectoption>
</apex:selectList>
<apex:pageblockSection title="MultiSelect Picklist Section" columns="1"

collapsible="true">
<apex:selectList label="Select the Hobbies" size="4"

multiselect="true">
<apex:selectoption itemlabel="Chess"
itemvalue="Chess"></apex:selectoption>
<apex:selectoption itemlabel="Cricket"
itemvalue="Cricket"></apex:selectoption>
<apex:selectoption itemlabel="Tennin"
itemvalue="Tennis"></apex:selectoption>
<apex:selectoption itemlabel="FootBall"
itemvalue="FootBall"></apex:selectoption>
<apex:selectoption itemlabel="Movies"
itemvalue="Movies"></apex:selectoption>
<apex:selectoption itemlabel="Music"
itemvalue="Music"></apex:selectoption>
<apex:selectoption itemlabel="ReadingBooks"
itemvalue="Books"></apex:selectoption>
</apex:selectList>
<apex:pageblockSection title="CheckBox Controls Section" columns="1"

collapsible="true">
<apex:selectCheckboxes label="Select the Hobbies" borderVisible="true">

<apex:selectoption itemlabel="Chess"
itemvalue="Chess"></apex:selectoption>
<apex:selectoption itemlabel="Cricket"
itemvalue="Cricket"></apex:selectoption>
<apex:selectoption itemlabel="Tennin"
itemvalue="Tennis"></apex:selectoption>
<apex:selectoption itemlabel="FootBall"
itemvalue="FootBall"></apex:selectoption>
<apex:selectoption itemlabel="Movies"
itemvalue="Movies"></apex:selectoption>
<apex:selectoption itemlabel="Music"
itemvalue="Music"></apex:selectoption>
<apex:selectoption itemlabel="ReadingBooks"
itemvalue="Books"></apex:selectoption>
</apex:selectCheckboxes>
<apex:pageblocksection title="RadioButton Controls" columns="1"

collapsible="true">
<apex:selectRadio label="Select the Country" borderVisible="true" >
<apex:selectoption itemlabel="India"
itemvalue="IND"></apex:selectoption>
<apex:selectoption itemlabel="United States"
itemvalue="USA"></apex:selectoption>
<apex:selectoption itemlabel="United Kingdom"
itemvalue="UK"></apex:selectoption>
<apex:selectoption itemlabel="Australia"
itemvalue="AUS"></apex:selectoption>
<apex:selectoption itemlabel="China"
itemvalue="CHN"></apex:selectoption>
<apex:selectoption itemlabel="Japan"
itemvalue="JPN"></apex:selectoption>
</apex:selectRadio>
</apex:pageblock>
</apex:form>
</apex:page>
<apex:SelectOptions> --> Add the Multiple Elements to the Control at a time.
SelectOption Class. --> To add only one element to the picklist control through
programming.
Syntax:
SelectOption <objectName> = new SelectOption(<ItemValue>,<ItemLabel>);
List<SelectOption> --> To add multiple elements to the control through programming.
Ex:
SelectOption option1 = new SelectOption('IND','India');
SelectOption option2 = new SelectOption('AUS','Australia');
SelectOption option3 = new SelectOption('JPN','Japan');
List<SelectOption> lstOptions = new List<SelectOption>();
lstOptions.Add(option1);
<apex:SelectList>
<apex:SelectOptions Value="{!lstOptions}"/>
</apex:SelectList>
UseCase:
========
Design a Visualforce Page to Populate All the Account Record Names into the
Picklist Control upon loading the Page.
VF Page Code:
-------------
<apex:page controller="ShowAccountNamesController" setup="false" sidebar="false"
showheader="true" tabStyle="Solution">
<apex:form >
<apex:pageblock title="Account Records">
<apex:pageblocksection title="Account Records" columns="1"
collapsible="true">
<apex:selectlist label="Account Record Names:" size="1"
multiselect="false">
<apex:selectOptions value="{!lstOptions}"></apex:selectOptions>
</apex:selectlist>
</apex:pageblock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class ShowAccountNamesController
{
Public List<SelectOption> lstOptions{get;set;}
Public ShowAccountNamesController()
{
lstOptions = new List<SelectOption>();
List<Account> lstAccounts = [Select id, name from Account Order by name ];
SelectOption option1 = new SelectOption('', '----- None -----');


{
SelectOption option = new SelectOption(acc.id, acc.name);
lstOptions.Add(option);
}
}
}
ActionSupport Tag (<apex:ActionSupport>):

=========================================
UseCase:
========
Design a Visualforce Page to represent the Related Contacts, Opportunities
and Case Record in the Tabular format based on the Selected Account Record from the
Picklist.
VF Page Code:
-------------
<apex:page controller="ShowRelatedRecordsController" setup="false" sidebar="false"
<apex:sectionHeader title="Picklist" subtitle="Related Records"/>
<apex:form >
<apex:pageblock title="Account Record Block">
<apex:pageblockSection title="Account Records Section" columns="1"
Collapsible="false">
<apex:selectlist label="Select the Account Name : " multiselect="false"
size="1" value="{!selectedAccountID}">
<apex:actionSupport event="onchange" action="{!GetRelatedRecords}"

rerender="conBlock,opBlock,csBlock"/>
<apex:selectOptions value="{!lstOptions}"></apex:selectOptions>
</apex:selectlist>
</apex:pageblock>
<apex:PageBlock title="Related Contacts : ( {!lstContacts.size} )"

id="conBlock">
<apex:pageblocktable value="{!lstContacts}" var="con">
<apex:column headerValue="Contact Name">
<apex:outputLink value="/{!con.id}" target="_blank"> {!
con.firstName} {!con.LastName}</apex:outputLink>
</apex:column>
<apex:column value="{!con.Title}"/>
<apex:column value="{!con.Phone}"/>
<apex:column value="{!con.Fax}"/>
<apex:column value="{!con.Email}"/>
<apex:column value="{!con.MailingCity}"/>
<apex:column value="{!con.MailingState}"/>
<apex:column value="{!con.MailingCountry}"/>
</apex:pageblocktable>
</apex:PageBlock>
<apex:PageBlock title="Related Opprotunities : ( {!lstOppty.size} )"

id="opBlock">
<apex:pageblocktable value="{!lstOppty}" var="op">
<apex:column headerValue="Opportunity Name">
<apex:outputlink value="/{!op.id}" target="_blank">
{!op.Name}</apex:outputlink>
</apex:column>
<apex:column value="{!op.StageName}"/>
<apex:column value="{!op.Amount}"/>
<apex:column value="{!op.closedate}"/>
</apex:pageblocktable>
</apex:PageBlock>
<apex:PageBlock title="Related Cases : ( {!lstCases.size} )" id="csBlock">

<apex:pageblockTable value="{!lstCases}" var="cs">
<apex:column headerValue="Case Number">
<apex:outputlink value="/{!cs.id}" target="_blank">{!
cs.CaseNumber}</apex:outputlink>
</apex:column>
<apex:column value="{!cs.Priority}"/>
<apex:column value="{!cs.status}"/>
<apex:column value="{!cs.Type}"/>
<apex:column value="{!cs.Reason}"/>
<apex:column value="{!cs.Origin}"/>
<apex:column value="{!cs.Subject}"/>
</apex:pageblockTable>
</apex:PageBlock>
</apex:form>
</apex:page>
Controller Class:
-----------------
public class ShowRelatedRecordsController
{
Public List<SelectOption> lstOptions {get;set;}
Public string selectedAccountID{get;set;}

Public List<Contact> lstContacts{get;set;}
Public List<Opportunity> lstOppty {get;set;}
Public ShowRelatedRecordsController()
{
lstoptions = new List<Selectoption>();
lstoptions.Add(new SelectOption('', '------ None -------'));

for(Account acc : [Select id, name from Account order by name])
{
lstoptions.Add(new SelectOption(acc.id, acc.name));
}
}
Public void GetRelatedRecords()

{
lstContacts = new List<Contact>();
lstOppty = new List<Opportunity>();
if(selectedAccountId != null && selectedAccountId != '')

{
List<Account> lstAccounts = [Select id, name,
(Select id, firstname, lastname, title,
email,phone, fax, mailingCity, mailingState, mailingCountry from Contacts),
(Select id, name, stagename, amount,
closeDate from Opportunities),
(Select id, casenumber, subject, type,
origin, reason, status, priority from Cases)
from Account
Where id =:
selectedAccountID];

{
lstContacts = acc.Contacts;
lstOppty = acc.Opportunities;
lstCases = acc.Cases;
}
}
}
}
Wrapper Class:
Extension Controller
AJAX Controller
SandBoxes
Deployments
Standard Controller --> Standard Class.
Account
Contact
Opportunity
Case
Solution
...
Position__C
Candidate__C
Loan__c
Customer__c
...
...

VF Pages

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

VF Pages

Uploaded by

Copyright:

Available Formats

Visualforce Programming:

Limitations of Declarative Customizations:

3. We can't Customize the Tab Home Page.

4. Salesforce won't provides the Customized User Interfaces.

To overcome the above limitations, we can use "Visualforce Programming".

Visualforce is a Web Development Framework, which allows us to design attractive

Visualforce is a Tab Based Programming like HTML. It provides a collection of

Visualforce is Not a Case-Sensitive Programming.

Visualforce purely supports the Code-Behind Technique. Where Designing Part(User

Designing Part Code (VF Code) --> .vfp

Visualforce provides a set of readymade tags by default.

Visualforce provides 3 Types of Controllers.

Ways to Create VF Pages:

1. By using Standard Navigation.

Setup --> Build --> Develop --> Visualforce Pages.

4. Click on "Save / Quick Save" button.

2. By using Developer Console.

6. Write the Code inside the Editor.

3. By using URL Format.

Click on your Name and expand it.

SectionHeader Tag (<apex:SectionHeader>):

Form Tag (<apex:Form>):

PageBlock Tag (<apex:PageBlock>):

<apex:PageBlock title="Account Details" id="accBlock">

<apex:PageBlock title="Contact Records" id="conBlock">

<apex:PageBlock title="Opportunity Records" id="opptyBlock">

<apex:PageBlock title="Case Records" id="caseBlock">

PageBlockSection Tag (<apex:PageBlockSection>):

In each section, we can represent a set of fields in the required number of

<apex:PageBlock title="Account Details" id="accBlock">

<apex:PageBlockSection title="Address Information"

<apex:PageblockSection title="Additional Information"

<apex:PageBlockSection title="Contact Details" columns="2"

<apex:pageBlockSection title="Description Information"

PageBlockButtons Tag (<apex:PageBlockButtons>):

This should be a Child Component to the PageBlock.

CommandButton Tag (<apex:CommandButton>):

<apex:PageBlock title="Account Details" id="accBlock">

<apex:PageblockSection title="Account Information"

<apex:PageBlockSection title="Address Information"

<apex:PageblockSection title="Additional Information"

<apex:pageBlockSection title="Description Information"

CommandLink Tag (<apex:CommandLink>):

<apex:PageBlock title="Account Details" id="accBlock">

<!-- <apex:commandButton value="Save"/>

<apex:PageblockSection title="Account Information"

<apex:PageBlockSection title="Address Information"

<apex:PageBlockSection title="Contact Details" columns="2"

<apex:pageBlockSection title="Description Information"

Each Object / Table will be represented in the form of a "Class".

Account Object --> Account Class

Each Field inside the object will be represented in the form of a

Public Class Account

Public string name, rating, industry, type,

Public DateTime CreatedBy, LastModifiedBy;

Public void Cancel()

Public void Delete()

Public void QuickSave()

Public void Next()

Public void Previous()

Public void Last()

Public Boolean HasNext()

Public Boolean HasPrevious()