Wednesday, 5 September 2012

Add Additional Components - Visualforce

You’ve created a page, used the <apex:page> component, and changed its behavior. You’ll typically want to use additional components that supply a lot more functionality.
Visualforce comes with a few dozen built-in components, and you can install and build your own components to extend this set. In this lesson you’ll learn how to locate them, and use one.
  1. Click the Component Reference link in the Page Editor. A help popup window displays with all available components.
  2. Click <apex:pageBlock>. A description of what the component does, and what attributes you can add to change its behavior displays in the Component Details tab.
  3. Click the Usage tab to see an example of how to use the component. You’ll notice that the <apex:pageBlock> component is often used with the<apex:pageBlockSection> component. Click <apex:pageBlockSection> to learn more about that component.
    In general, you’ll dip into the component reference whenever you need to. You’ll soon learn what the major components do—and while some of them take a large number of attributes, in practice you will only use a handful.
    Now add both components to your page. We’re going to go a little faster here—see if you can do this without looking at the final code below:
  4. Within the <apex:page> component, add an <apex:pageBlock> component with a title attribute set to A Block Title.
  5. Within the <apex:pageBlock> component, add an <apex:pageBlockSection> component, with its title attribute set to A Section Title.
  6. Within the <apex:pageBlockSection>, add some text, like I'm three components deep!
  7. Click Save. Your final code will look something like this:
    <apex:page sidebar="false"> 
        <apex:pageBlock title="A Block Title">
            <apex:pageBlockSection title="A Section Title">
                I'm three components deep!
            </apex:pageBlockSection>
        </apex:pageBlock> </apex:page>
    The final page will look something like this:
    A sample page block using Visualforce
You can click the tiny disclosure triangle next to A Section Title to minimize that section of the block.

No comments:

Post a Comment