Page

The Visualforce page defines the appearance of your user interface using a mixture of
standard HTML and Visualforce-specific XML markup.The XML markup is used to add
view components to the page.View components bind the controller to the page, defining
how data and user actions are to be rendered in the user interface. Force.com provides a
standard set of view components to support common HTML user interface patterns and
supports user-defined components.
In Figure 7-1, the arrows between the page and the controller represent expressions.
Expressions are embedded in view components to allow the page to reference methods in
the controller or in system classes such as UserInfo. Expressions in Visualforce use the
same language as formula fields in the database, with a special prefix and suffix added. For
example, {!save} is an expression that invokes the save method of the controller.



Note
Visualforce maintains a strict separation of business logic and presentation. No business
logic is allowed in a Visualforce page, not even for trivial formatting tasks.

Displaying pop-up summaries on hover in visualforce 

What if I want to make a summary pop-up window when a user hovers over a link in a visualforce page. This Feature is easy in standard salesforce pages, mostly because it happens automatically. But not in visualforce pages. I have seen most of example for pop-up in salesforce were created using the output panels with some embedded styles. 


Here I'm posting a pop-up example which show the details of a partuclar record on a mouseover using the Hover links similar to those used in standard Salesforce links. 

/*Visualforce page*/

<apex:page controller="PopupTest">  
<apex:form >  
    <apex:repeat value="{!accounts}" var="acc">                              
            
  <a href="/{!acc.Id}" id="{!acc.Id}" onblur="LookupHoverDetail.getHover('{!acc.Id}').hide();" onfocus="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();" onmouseout="LookupHoverDetail.getHover('{!acc.Id}').hide();" onmouseover="LookupHoverDetail.getHover('{!acc.Id}', '/{!acc.Id}/m?retURL=%2F{!acc.Id}&isAjaxRequest=1').show();">{!acc.Name}</a>  
    </apex:repeat>  
</apex:form>  
</apex:page>  

 /*Controller*/

public with sharing class PopupTest {    
    public List<account> getAccounts()  
    {  
        List<account> accounttList = new List<account>();  
        accounttList = [Select Id, Name from Account LIMIT 10];  
        return accounttList ;  
    }  
  
}  

Controller

The controller is Apex code that reads and writes data in the model, typically theForce.com database.The interaction of the controller with the user interface is accomplished through variables and action methods.Variables are exposed to the presentation layer through getter and setter methods. Getter methods allow the page to retrieve the value of a variable and display it for the user. Setter methods allow the user to modify the value of a variable through a user interface component such as a text input box.

Action methods perform the processing work on behalf of the user.They are wired up to buttons, links, and even asynchronous events on the user interface.

Force.com provides default controller implementations, called standard controllers. Standardcontrollers replicate the behavior of the native user interface, such as editing and creating records, but allow customization of its user interface without code. Custom behavior can be added to standard controllers using controller extensions, which are classes written in Apex.You can also implement a controller from scratch in Apex.This is called a customcontroller.