Salesforce - Developer - Visualforce - Components


// Salesforce - Developer - Visualforce - Components:

When we use an expression to display a number, the number is displayed using 
scientific notation (its raw value). To control the formatting of the value, 
we need to use a component, and give the component the value to handle. The 
component will take the raw value and format it appropriately, and then take 
care of outputting the result onto the page. 

Coarse-grained components let you quickly add lots of functionality to a page, 
while fine-grained components give you more control over the specific details of 
a page.

Visualforce includes nearly 150 built-in components that you can use on your 
pages. Components are rendered into HTML, CSS, and JavaScript when a page is 
requested. Coarse-grained components provide a significant amount of 
functionality in a single component, and might add a lot of information and 
user interface to the page it’s used on. Fine-grained components provide more 
focused functionality, and enable you to design the page to look and behave the 
way you want.

Some output components bring a lot to the party. These “coarse grained” 
components offer a lot of functionality, displaying many fields, labels, and 
other user interface elements. They let you quickly build pages that are 
variations on the built-in Salesforce user interface.

<apex:detail> is a coarse-grained output component that adds many fields, 
sections, buttons, and other user interface elements to the page in just one 
line of markup. Notice also that everything it adds to the page uses the 
Salesforce Classic styling. There are quite a few attributes for customizing 
the appearance of <apex:detail>. Spend a few minutes now and try changing a 
few to see what they do.

The <apex:detail> component displays the details of a particular record, as 
well as lists of related records, such as contacts, cases, opportunities, and 
so on. This might be too much, so you can remove those related lists, and then 
add back just a few, using a different coarse-grained component.  Revise the 
markup to omit related lists by adding relatedList="false" to the 
<apex:detail> component:

<apex:detail relatedList="false"/>

Below the <apex:detail/> line, add the following markup:

<apex:relatedList list="Contacts"/>
<apex:relatedList list="Opportunities" pageSize="5"/>

Our page should now display two related lists, for contacts and opportunities. 
Notice that we can configure each related list independently, by changing 
attributes on just that component.

The <apex:relatedList> component is another coarse-grained component, but it’s 
lower level than <apex:detail>. That is, <apex:detail> shows many related lists 
at once (or none), while <apex:relatedList> lets you go one by one. This lets 
you show only the related lists that you’re interested in, and you can customize 
the display of each related list individually.

Use higher level components when they offer the functionality you need, and use 
lower level components when you need more control over what’s displayed on the 
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License