Javascript in VF:

Javascript in VF:
Standard salesforce actions are available by using javascript and expression syntax with the !URLFOR and $Action keywords.

<apex:page >
<apex:outputLink value="{!URLFOR($Action.Account.New)}">Create New Account</apex:outputLink>
</apex:page>
A function is a set of javascript code which can be called from any point in a page after it has been declared.
Ex: onclick="changeFont();"
Functions can be included on a page basis ,by putting them in <script> tags in the header or Globally by declaring them in an external javascript(.JS) file.
Example

<apex:page >

<script>
function changeFont(input, textid) {
if(input.checked) document.getElementById(textid).style.fontWeight = "bold";
else document.getElementById(textid).style.fontWeight = "normal";
}
</script>


<apex:outputPanel layout="block">
<label for="checkbox">Click this box to change text font: </label>
<input id="checkbox" type="checkbox"
onclick="changeFont(this,'{!$Component.thePanel}');"/>
</apex:outputPanel>

<apex:outputPanel id="thePanel" layout="block">Change me!
</apex:outputPanel>
</apex:page>

Ajax is known as a tool to perform partial page refreshes.Has been used on force.com platform to access the Web services API within javascript.Due to the data binding capabilities of visualforce the need for AJAX for api access disappears.

<apex:page standardController="Account">

    <apex:pageBlock title="Hello {!$User.FirstName}!">

        You are displaying contacts from the {!account.name} account. 

        Click a contact's name to view his or her details.

 </apex:pageBlock>

    <apex:pageBlock title="Contacts">

        <apex:form >

            <apex:dataTable value="{!account.Contacts}" var="contact" cellPadding="4"  border="1">

                  <apex:column >

                      <apex:commandLink rerender="detail">

                          {!contact.Name} <apex:param name="cid" value="{!contact.id}"/>

                      </apex:commandLink>

                  </apex:column>

            </apex:dataTable>

        </apex:form>

    </apex:pageBlock>

    <apex:outputPanel id="detail">

        <apex:actionStatus startText="Requesting...">

            <apex:facet name="stop"> 

                <apex:detail subject="{!$CurrentPage.parameters.cid}"  relatedList="false" title="false"/>

            </apex:facet>

        </apex:actionStatus> 

    </apex:outputPanel>

</apex:page>

<apex:page standardController="Position__c" title="Sample Position Layout Page" showHeader="true" sidebar="true" >

  <!-- Uses <apex:actionSupport> to dynamically render the Technical Skills section of the Layout when Dept = IT, Engineering. -->

  <apex:sectionHeader title="{!$ObjectType.Position__c.label} Edit" subtitle="New Position"/>

  <apex:form >

      <apex:pageBlock title="Position Detail" mode="edit" id="thePageBlock">

        <apex:pageBlockButtons >

            <apex:commandButton value="Save" action="{!save}"/>

            <apex:commandButton value="Cancel" action="{!cancel}"/>

        </apex:pageBlockButtons>

        <apex:actionRegion >

        <apex:pageBlockSection title="Information" columns="2">

            <apex:inputField value="{!Position__c.name}"/>           

            <apex:inputField value="{!Position__c.Priority__c}"/>

            <apex:inputField value="{!Position__c.Location__c}"/>

            <apex:inputField value="{!Position__c.Status__c}"/>

            <apex:inputField value="{!Position__c.Type__c}"/>

            <apex:inputField value="{!Position__c.Sub_Status__c}"/>

            <apex:inputField value="{!Position__c.Department__c}">

                <apex:actionSupport event="onchange" rerender="techSkills"/>

            </apex:inputField>         

            <apex:inputField value="{!Position__c.Start_Date__c}"/>

            <apex:inputField value="{!Position__c.Pay_Grade__c}"/>

            <apex:pageBlockSectionItem />

            <apex:inputField value="{!Position__c.Hiring_Manager__c}"/>

            <apex:pageBlockSectionItem />

            <apex:inputField value="{!Position__c.Duration__c}"/>

            <apex:pageBlockSectionItem />

            <apex:inputField value="{!Position__c.Legacy_Position_Number__c}"/>

            <apex:pageBlockSectionItem />

        </apex:pageBlockSection>

        </apex:actionRegion>

        

        <apex:outputPanel id="techSkills">

      <apex:pageBlockSection id="theSection" title="Technical Skills" columns="2" rendered="{!Position__c.Department__c == 'IT' || Position__c.Department__c == 'Engineering'}">

            <apex:inputField value="{!Position__c.Operating_Systems__c}"/>

            <apex:inputField value="{!Position__c.Programming_Languages__c}"/>

          </apex:pageBlockSection>

    </apex:outputPanel>

        

        <apex:pageBlockSection title="Description" columns="1">

            <apex:inputField value="{!Position__c.Job_Description__c}" />

            <apex:inputField value="{!Position__c.Responsibilities__c}" />

            <apex:inputField value="{!Position__c.Skills_Required__c}" />

            <apex:inputField value="{!Position__c.Education__c}" />

        </apex:pageBlockSection>

     </apex:pageBlock>

  </apex:form>

</apex:page>

    

Customize Home Page Layout to Add Chatter Quick Links:

Customize Home Page Layout to Add Chatter Quick Links:
Continuous to previous post Chatter Follow Multiple Items add to home page components and display as a custom link.Creating a custom link for home page components setup-->customize-->Home-->Custom Links create a new custom link called Position Subscriptions select display existing window with sidebar.Further setup-->customize-->Home-->Home Page Components create a new custom component called Chatter Quick Links as a type of links add Position Subscriptions to the list of links to show.Go to your home page layout add the Chatter Quick Links by setup-->customize-->Home-->Home page layouts next to the Dashboard home page default line click edit under select the narrow components to show select Chatter Quick Links check box and save.Finally test your page  by Home tab and expand the sidebar if it is not already expanded click the Position Subscriptions link within Chatter Quick Links section on the lower left hand side ,on the page click Follow next to several positions ,Try editing the fields you selected for chatter tracking and see what changes appear in your chatter feed.

Visual Workflow Getting Started Pack:

Visual Workflow Getting Started Pack:
The Visual Workflow Sample Pack application provides sample flows that illustrate common use cases for Visual Workflow. The application itself was built entirely with flows!
You can installed and test from Here

Wrapper Class:

Wrapper Class:
A wrapper or container class is a class, a data structure, or an abstract data type whose instances are collections of other objects. In Apex and Visualforce this type of class can be extremely useful.Here is the scenario How can I display a table of records with a check box and then process only the records that are selected?

public class crwrapperClassController {

    //Our collection of the class/wrapper objects cContact 

    public List<cContact> contactList {get; set;}

    //This method uses a simple SOQL query to return a List of Contacts

    public List<cContact> getContacts() {

        if(contactList == null) {

            contactList = new List<cContact>();

            for(Contact c : [select Id, Name, Email, Phone from Contact limit 10]) {

                // As each contact is processed we create a new cContact object and add it to the contactList

                contactList.add(new cContact(c));

            }

        }

        return contactList;

    }

    public PageReference processSelected() {

                //We create a new list of Contacts that we be populated only with Contacts if they are selected

        List<Contact> selectedContacts = new List<Contact>();

        //We will cycle through our list of cContacts and will check to see if the selected property is set to true, if it is we add the Contact to the selectedContacts list

        for(cContact cCon : getContacts()) {

            if(cCon.selected == true) {

                selectedContacts.add(cCon.con);

            }

        }

        // Now we have our list of selected contacts and can perform any type of logic we want, sending emails, updating a field on the Contact, etc

        System.debug('These are the selected Contacts...');

        for(Contact con : selectedContacts) {

            system.debug(con);

        }

        return null;

    }

    // This is our wrapper/container class. A container class is a class, a data structure, or an abstract data type whose instances are collections of other objects. In this example a wrapper class contains both the standard salesforce object Contact and a Boolean value

    public class cContact {

        public Contact con {get; set;}

        public Boolean selected {get; set;}

        //This is the contructor method. When we create a new cContact object we pass a Contact that is set to the con property. We also set the selected value to false

        public cContact(Contact c) {

            con = c;

            selected = false;

        }

    }

}

<apex:page controller="crwrapperClassController">
    <apex:form >
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton value="Process Selected" action="{!processSelected}" rerender="table"/>
            </apex:pageBlockButtons>
            <!-- In our table we are displaying the cContact records -->
            <apex:pageBlockTable value="{!contacts}" var="c" id="table">
                <apex:column >
                    <!-- This is our selected Boolean property in our wrapper class -->
                    <apex:inputCheckbox value="{!c.selected}"/>
                </apex:column>
                <!-- This is how we access the contact values within our cContact container/wrapper -->
                <apex:column value="{!c.con.Name}" />
                <apex:column value="{!c.con.Email}" />
                <apex:column value="{!c.con.Phone}" />
            </apex:pageBlockTable>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Before Testing enable your debug logs and it looks like this

Emailing Visualforce Page Rendering As PDF:

Emailing Visualforce Page Rendering As PDF:

Dynamically choose whether a Visualforce page is rendered as a PDF or not-useful when creating invoices and so on also can email that page using a little Apex code.

public class EmailingVisual { public PageReference getDeliverAsPDF() {

     // Reference the page, pass in a parameter to force PDF

     PageReference pdf =  Page.EmailPage;

     pdf.getParameters().put('p','p');

     pdf.setRedirect(true);

     // Grab it!

    Blob b = pdf.getContent();

     // Create an email

     Messaging.SingleEmailMessage email = new Messaging.SingleEmailMessage();

      email.setSubject('From getDeliverAsPDF!');

     String [] toAddresses = new String[] {'youremailaddress'};

     email.setToAddresses(toAddresses);

     email.setPlainTextBody('Here is the body of the email');

     // Create an email attachment

     Messaging.EmailFileAttachment efa = new Messaging.EmailFileAttachment();

     efa.setFileName('MyPDF.pdf'); // neat - set name of PDF

     efa.setBody(b); //attach the PDF

     email.setFileAttachments(new Messaging.EmailFileAttachment[] {efa});

     // send it, ignoring any errors (bad!)

     Messaging.SendEmailResult [] r =

             Messaging.sendEmail(new Messaging.SingleEmailMessage[] {email});

        return null;

 }}

Then the EmailPage Looks like this and Make sure give your email address in the controller to test this 

<apex:page renderAs="{!if($CurrentPage.parameters.p == null, null, 'pdf')}"

           controller="EmailingVisual">

     <apex:pageBlock title="My Dual-Rendering Invoice">

        <apex:pageBlockSection title="Section 1"> Text </apex:pageBlockSection>

        <apex:pageBlockSection title="Section 2"> Text </apex:pageBlockSection>

    </apex:pageBlock>

             <apex:form >

                <apex:commandLink rendered="{!$CurrentPage.parameters.p == null}"  value="PDF" action="{!getDeliverAsPDF}" ></apex:commandLink>

             </apex:form>

</apex:page>

Home Tab For a Single Record Type:

Home Tab For a Single Record Type:
This example shows calling an action from picklist and re-rendering a portion of the page.

public class crrecordTypeHomeTab {
static string rid = 'Supplier'; // change to match the record type for the tab
boolean which = true; // which list are we showing, simple toggle

public Account[] getAccounts() {
if (!which) {
return [select id,name,lastmodifieddate,billingcity,billingstate,phone,type,recordType.name from
Account where recordType.name = :rid order by createddate desc limit 20];
}
return [select id,name,lastmodifieddate,billingcity,billingstate,phone,type,recordType.name from
Account where recordType.name = :rid order by lastmodifieddate limit 20];
}

public PageReference changeRt() { // toggle a static var to flip between recent modified or created items
which = ( ! which) ;
return null;
}

public PageReference newRt() { // construct a new record with this record type already set
RecordType r = [select id from RecordType where Name = :rid];
PageReference p = new PageReference('/001/e?RecordType=' + r.id +
'&retURL='+ getBasePageName() );
p.setRedirect(true);
return p;
}


public string getBasePageName() {
PageReference cur = System.CurrentPageReference();
String url = cur.getUrl();
String [] basearray = url.split('\\?');
return basearray[0];
}
public String getUrl() {
return getBasePageName();
}

public static testMethod void testMyControler() {
RecordTypeHomeTab t = new RecordTypeHomeTab();
Account[] a = t.getAccounts();
t.changeRt();
t.getAccounts();
//System.Assert( t.getReportsArea() != '' );
//System.Assert( t.getToolsArea() != '' );
System.Assert( t.newRt() != null);
Boolean beforet = t.which;
t.changeRt();
System.Assert( beforet != t.which);
System.assert( t.getUrl() != '' );
}
}

<apex:page controller="crrecordTypeHomeTab" tabStyle="Account" >

<apex:sectionHeader title="Supplier Record Type" subtitle="Home" ></apex:sectionHeader>

<apex:pageBlock >

<apex:facet name="header" >
<apex:form ><apex:panelGrid styleClass="list" columnClasses="pbTitle,pbButton,pbHelp" columns="3" border="0" cellpadding="0" cellspacing="0" >

<apex:outputLabel ><h3>Recent Items</h3></apex:outputLabel>

<apex:commandButton value=" New " styleClass="btn" action="{!newRt}" ></apex:commandButton>

<apex:selectList id="recent" size="1" >
<apex:actionSupport event="onchange" action="{!changeRt}" reRender="recentmodify"></apex:actionSupport>
<apex:selectOption itemLabel="Recently Modified" itemValue="mod"></apex:selectOption>
<apex:selectOption itemLabel="Recently Created" itemValue="cre"></apex:selectOption>
</apex:selectList>

</apex:panelGrid></apex:form>
</apex:facet>

<!-- main record type data table -->
<apex:actionStatus >
<apex:facet name="start"><h1>Requesting...</h1></apex:facet>
<apex:facet name="stop">
<apex:dataTable id="recentmodify" value="{!accounts}" var="a" bgcolor="#F3F3EC"
styleClass="list" rowClasses="dataRow" onRowMouseOver="hiOn(this);" onRowMouseOut="hiOff(this);">

<apex:column >
<apex:facet name="header" ><b>Name</b></apex:facet>
<apex:outputLink value="/{!a.id}" >
{!a.name}
</apex:outputLink>
</apex:column>
<apex:column >
<apex:facet name="header"><b>Billing City</b></apex:facet>
{!a.billingcity}
</apex:column>
<apex:column >
<apex:facet name="header"><b>Phone</b></apex:facet>
{!a.Phone}
</apex:column>
<apex:column >
<apex:facet name="header"><b>Record Type</b></apex:facet>{!a.RecordType.Name}
</apex:column>
</apex:dataTable>
</apex:facet></apex:actionStatus>

</apex:pageBlock>

</apex:page>

Visualforce Sample Quote Generation-Unmanaged Package:

Visualforce Sample Quote Generation-Unmanaged Package:
Developing Visualforce Email Templates is very similar to developing a Visualforce Page. To understand the similarities and differences, the email template (complete version below) will be compared to the QuotePDF page
Visualforce Quote2PDF

Sample Tool Bar:

Sample Tool Bar:
A stylized, horizontal toolbar that can contain any number of child components. By default, all child components are aligned to the left side of the toolbar.

<apex:page id="thePage">

<!-- A simple example of a toolbar -->

    <apex:toolbar id="theToolbar">

        <apex:outputText value="Sample Toolbar"/>

        <apex:toolbarGroup itemSeparator="line" id="toobarGroupLinks">

            <apex:outputLink value="http://www.salesforce.com">

              salesforce

            </apex:outputLink>

            <apex:outputLink value="http://developer.salesforce.com">

             apex developer network

            </apex:outputLink>

        </apex:toolbarGroup>

        <apex:toolbarGroup itemSeparator="line" location="right" id="toobarGroupForm">

            <apex:form id="theForm">

                <apex:inputText id="theInputText">Enter Text</apex:inputText>

                <apex:commandLink value="search" id="theCommandLink"/>

            </apex:form>

        </apex:toolbarGroup>

    </apex:toolbar>

</apex:page>

RADAR SERIES or Spider web chart:

RADAR SERIES or Spider web chart:
A data series to be rendered as the area inside a series of connected points in a radial Visualforce chart. Radar charts are also sometimes called "spider web" charts. At a minimum you must specify the fields in the data collection to use as X and Y values for each point, as well as a radial axis to scale agains

public class crChartController {

    // Return a list of data points for a chart 

    

    public List<Data> getData() {

        return crChartController.getChartData();

    }

    

    // Make the chart data available via JavaScript remoting 

    

    @RemoteAction

    public static List<Data> getRemoteData() {

        return crChartController.getChartData();

    }

    // The actual chart data; needs to be static to be 

    

    // called by a @RemoteAction method 

    

    public static List<Data> getChartData() {

        List<Data> data = new List<Data>();

        data.add(new Data('Jan', 30, 90, 55));

        data.add(new Data('Feb', 44, 15, 65));

        data.add(new Data('Mar', 25, 32, 75));

        data.add(new Data('Apr', 74, 28, 85));

        data.add(new Data('May', 65, 51, 95));

        data.add(new Data('Jun', 33, 45, 99));

        data.add(new Data('Jul', 92, 82, 30));

        data.add(new Data('Aug', 87, 73, 45));

        data.add(new Data('Sep', 34, 65, 55));

        data.add(new Data('Oct', 78, 66, 56));

        data.add(new Data('Nov', 80, 67, 53));

        data.add(new Data('Dec', 17, 70, 70));

        return data;

    }

    

    // Wrapper class 

    

    public class Data {

        public String name { get; set; }

        public Integer data1 { get; set; }

        public Integer data2 { get; set; }

        public Integer data3 { get; set; }

        public Data(String name, Integer data1, Integer data2, Integer data3) {

            this.name = name;

            this.data1 = data1;

            this.data2 = data2;

            this.data3 = data3;

        }

    }

}

<apex:page controller="crChartController" >
 <apex:chart height="530" width="700" legend="true" data="{!data}">
    <apex:legend position="left"/>
    <apex:axis type="Radial" position="radial">
        <apex:chartLabel />
    </apex:axis>
    <apex:radarSeries xField="name" yField="data1" tips="true" opacity="0.4"/>
    <apex:radarSeries xField="name" yField="data2" tips="true" opacity="0.4"/>
    <apex:radarSeries xField="name" yField="data3" tips="true" 
        markerType="cross" strokeWidth="2" strokeColor="#f33" opacity="0.4"/>
</apex:chart>

</apex:page>

Input File:

Input File:
A component that creates an input field to upload a file.Max file size 10MB

public class crInputFile {

    public crInputFile(ApexPages.StandardController controller) {

        Document d = (Document) controller.getRecord();

        d.folderid = UserInfo.getUserId(); //this puts it in My Personal Documents

    }                 

}

<apex:page standardController="Document" extensions="crInputFile">
    <apex:messages />
    <apex:form id="theForm">
      <apex:pageBlock >
          <apex:pageBlockSection >
            <apex:inputFile value="{!document.body}" filename="{!document.name}"/>
            <apex:commandButton value="Save" action="{!save}"/>
          </apex:pageBlockSection>
       </apex:pageBlock>
    </apex:form>
</apex:page>

Inline Edit Support:

Inline Edit Support:
This component provides inline editing support to  <apex:outputField> and  various container components. In order to support inline editing, this component must also be within an <apex:form> tag.

<apex:page standardController="Contact">
    <apex:form >
        <apex:pageBlock mode="inlineEdit">
            <apex:pageBlockButtons >
                <apex:commandButton action="{!edit}" id="editButton" value="Edit"/>
                <apex:commandButton action="{!save}" id="saveButton" value="Save"/>
                <apex:commandButton onclick="resetInlineEdit()" id="cancelButton" value="Cancel"/>
            </apex:pageBlockButtons>
            <apex:pageBlockSection >
                <apex:outputField value="{!contact.lastname}">
                    <apex:inlineEditSupport showOnEdit="saveButton, cancelButton" 
                        hideOnEdit="editButton" event="ondblclick" 
                        changedStyleClass="myBoldClass" resetFunction="resetInlineEdit"/>
                </apex:outputField>
                <apex:outputField value="{!contact.accountId}"/>
                <apex:outputField value="{!contact.phone}"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Gauge Series:

Gauge Series:
A data series that shows progress along a specific metric. At a minimum you must specify the fields in the data collection to use as label and value pair for the gauge level to be shown

public class crChartController {

    // Return a list of data points for a chart 

    

    public List<Data> getData() {

        return crChartController.getChartData();

    }

    

    // Make the chart data available via JavaScript remoting 

    

    @RemoteAction

    public static List<Data> getRemoteData() {

        return crChartController.getChartData();

    }

    // The actual chart data; needs to be static to be 

    

    // called by a @RemoteAction method 

    

    public static List<Data> getChartData() {

        List<Data> data = new List<Data>();

        data.add(new Data('Jan', 30, 90, 55));

        data.add(new Data('Feb', 44, 15, 65));

        data.add(new Data('Mar', 25, 32, 75));

        data.add(new Data('Apr', 74, 28, 85));

        data.add(new Data('May', 65, 51, 95));

        data.add(new Data('Jun', 33, 45, 99));

        data.add(new Data('Jul', 92, 82, 30));

        data.add(new Data('Aug', 87, 73, 45));

        data.add(new Data('Sep', 34, 65, 55));

        data.add(new Data('Oct', 78, 66, 56));

        data.add(new Data('Nov', 80, 67, 53));

        data.add(new Data('Dec', 17, 70, 70));

        return data;

    }

    

    // Wrapper class 

    

    public class Data {

        public String name { get; set; }

        public Integer data1 { get; set; }

        public Integer data2 { get; set; }

        public Integer data3 { get; set; }

        public Data(String name, Integer data1, Integer data2, Integer data3) {

            this.name = name;

            this.data1 = data1;

            this.data2 = data2;

            this.data3 = data3;

        }

    }

}

<apex:page controller="crChartController">
<apex:chart height="250" width="450" animate="true" legend="true" data="{!data}">
    <apex:axis type="Gauge" position="left"  minimum="0" maximum="100" steps="10"/>
    <apex:gaugeSeries dataField="data1" highlight="true" tips="true" donut="25" colorSet="#F49D10, #ddd">
        <apex:chartLabel display="over"/>
    </apex:gaugeSeries>
</apex:chart>
</apex:page>

Axis:

Axis:
Defines an axis for a chart.Use this to sets the units,scale,labeling,and other visual actions for the axis.You can define upto 4 axes for a single chart,one for each edge.

public class crChartController {
    // Return a list of data points for a chart
   
    public List<Data> getData() {
        return crChartController.getChartData();
    }
   
    // Make the chart data available via JavaScript remoting
   
    @RemoteAction
    public static List<Data> getRemoteData() {
        return crChartController.getChartData();
    }

    // The actual chart data; needs to be static to be
   
    // called by a @RemoteAction method
   
    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 30));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;
    }
   
    // Wrapper class
   
    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Integer data3 { get; set; }
        public Data(String name, Integer data1, Integer data2, Integer data3) {
            this.name = name;
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;
        }
    }
}

<apex:page controller="crChartController">
  <apex:chart height="400" width="700" data="{!data}">
    <apex:axis type="Numeric" position="left" fields="data1"
        title="Opportunities Closed" grid="true"/>
    <apex:axis type="Numeric" position="right" fields="data3"
        title="Revenue (millions)"/>
    <apex:axis type="Category" position="bottom" fields="name"
        title="Month of the Year">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:barSeries title="Monthly Sales" orientation="vertical" axis="right"
        xField="name" yField="data3"/>
    <apex:lineSeries title="Closed-Won" axis="left" xField="name" yField="data1"/>
</apex:chart>

</apex:page>

AREA SERIES:

AREA SERIES:
A data series to be rendered as shaded areas in Visualforce chart.

public class crChartController {
    // Return a list of data points for a chart 
    
    public List<Data> getData() {
        return crChartController.getChartData();
    }
    
    // Make the chart data available via JavaScript remoting 
    
    @RemoteAction
    public static List<Data> getRemoteData() {
        return crChartController.getChartData();
    }

    // The actual chart data; needs to be static to be 
    
    // called by a @RemoteAction method 
    
    public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 30));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;
    }
    
    // Wrapper class 
    
    public class Data {
        public String name { get; set; }
        public Integer data1 { get; set; }
        public Integer data2 { get; set; }
        public Integer data3 { get; set; }
        public Data(String name, Integer data1, Integer data2, Integer data3) {
            this.name = name;
            this.data1 = data1;
            this.data2 = data2;
            this.data3 = data3;
        }
    }
}



<apex:page controller="crChartController" >
 <apex:chart height="400" width="700" animate="true" legend="true" 
data="{!data}">
    <apex:legend position="left"/>
    <apex:axis type="Numeric" position="left" fields="data1,data2,data3" 
        title="Closed Won" grid="true">
        <apex:chartLabel />
    </apex:axis>
    <apex:axis type="Category" position="bottom" fields="name" 
        title="Month of the Year">
        <apex:chartLabel rotate="315"/>
    </apex:axis>
    <apex:areaSeries axis="left" xField="name" yField="data1,data2,data3" 
tips="true"/>
</apex:chart>
</apex:page>

DataList Usage:

DataList Usage:
This example for data list usage for custom data for related list data instead of standard page block table.
The controller looks like this

public class MyController {
public Id selectedAccount { get; set; }
public List<Contact> contactsInformation { get; set; }
   public List<Account> getMyAccounts() {
return [SELECT Id, Name, AccountNumber FROM Account ORDER BY LastModifiedDate DESC  LIMIT 10];
}
public void accountClicked() {
contactsInformation = [SELECT FirstName, LastName FROM Contact WHERE AccountID =:selectedAccount];
}

}
and the visual force page is

<apex:page controller="MyController">
<apex:form >
<apex:dataList value="{! myaccounts}" var="acct">
<apex:commandlink action="{! accountClicked}" rerender="ContactDetail">
<apex:outputText value="{! acct.name}"/>
<apex:param name="id" value="{! acct.Id}" assignTo="{!selectedAccount}"/>
</apex:commandLink>
</apex:dataList>
</apex:form>
<apex:outputPanel id="ContactDetail">
<apex:repeat value="{! contactsInformation}" var="contact">
<p>{! contact.FirstName & ' ' & contact.LastName}</p>
</apex:repeat>
</apex:outputPanel>
</apex:page>

జగద్గురు శ్రీశ్రీశ్రీ ఆదిశంకరాచార్యులు పాదపద్మములకి నమస్కరించి :

జగద్గురు శ్రీశ్రీశ్రీ ఆదిశంకరాచార్యులు పాదపద్మములకి నమస్కరించి :

Hyperlinks in VF:

Hyperlinks in VF:
This sample shows how to traverse links from vfp to other vfp or another url ,action.Please find static resource Here

<apex:page sidebar="false" showHeader="false" standardStylesheets="false">
  <!-- Begin Default Content REMOVE THIS -->
  <h1>Congratulations</h1>
  This is your new Page: hyperlinks
  <!-- End Default Content REMOVE THIS --><p/>
  <apex:outputLink value="http://developer.force.com/">Click me!</apex:outputLink><p/>
  <apex:outputLink value="{! $Page.AccountDisplay}">I am me!</apex:outputLink><p/>
  <apex:outputLink value="{! URLFOR($Action.Account.new)}">Create</apex:outputLink><p/>
<!--
<apex:stylesheet value="http://developer.force.com/workbooks/vfdemo.css"/>
-->
<apex:stylesheet value=" {! URLFOR($Resource.Style, 'styles.css')} "/>
<!-- or
<style>
body {font-family: Arial Unicode MS;}
h1 {color:red;}
</style>
-->
  <h1>My Styled Page</h1>
  <p>Great!</p>
 </apex:page>

Standard UI Components:

Standard UI Components:
This is a simple example for standard user interface components within standard controller.

<apex:page standardController="Account">
<p>Hello {! $User.FirstName}!</p>
<p>You are viewing the {! account.name} account.</p>
<p>Here's the Region field: {! account.Region__c}</p>
<p>Here's the owner of this account: {! account.Owner.Name}</p>
<apex:pageBlock title="Custom Output">
<apex:pageBlockSection title="Custom Section Title">
<apex:outputField value="{!account.Name}"/>
<apex:outputField value="{!account.Owner.Name}"/>
</apex:pageBlockSection>
</apex:pageBlock>
<apex:pageBlock title="My Account Contacts">
<apex:pageBlockTable value="{! account.contacts}" var="item">
<apex:column value="{! item.name}"/>
</apex:pageBlockTable>
</apex:pageBlock>
<apex:detail relatedList="false" />
<apex:relatedList list="Cases" />

</apex:page>

Simple variables and Formulas:

Simple variables and Formulas:
This example shows how to use formulas directly from page.

<apex:page sidebar="false">
{! $User.FirstName}<br/>
first name and last name of the logged-in user: {! $User.FirstName} {! $User.LastName}<br/>
{! $User.firstname & ' ' & $User.lastname}<br/>
<p> Today's Date is {! TODAY()} </p>
<p> Next week it will be {! TODAY() + 7} </p>
<p>The year today is {! YEAR(TODAY())}</p>
<p>Tomorrow will be day number {! DAY(TODAY() + 1)}</p>
<p>Let's find a maximum: {! MAX(1,2,3,4,5,6,5,4,3,2,1)} </p>
<p>The square root of 49 is {! SQRT(49)}</p>
<p>Is it true? {! CONTAINS('salesforce.com', 'force.com')}</p>
{! IF ( CONTAINS('salesforce.com','force.com'), 'Yep', 'Nah') }<p/>
{! IF ( DAY(TODAY()) > 14, 'After the 14th', 'On or before the 14th') }<p/>

</apex:page>