Visualforce Components

You have already learned about Visualforce components—you used many standard components in your Visualforce pages in Chapter 9: Visualforce Pages. You can also create your own Visualforce components to use in the same way as standard components in a Visualforce page.

Visualforce components do not require the use of any Apex code, but you use a slightly different path to create these components, as well as some syntax that is only relevant for reusable components.

For our example, the particular Visualforce component you create addresses a particular need at Universal Containers. Universal Containers is fortunate in having extremely creative employees, but they are perhaps a bit too fortunate in this area. The company, as a whole, has had trouble deciding on a single slogan for their enterprise, so they have reached a compromise solution. All slogans displayed in their Force Platform applications have the same form, with the Universal Containers logo, and one of many mottos underneath the logo.

Further, the executives at Universal Containers like emphatic slogans, with a normal statement followed by one of increased emphasis. To account for this scenario, you will be creating a Visualforce component with this form, but with the option of assigning different slogans for each use. This section introduces you to creating and using components.

Creating a Visualforce Component

Visualforce components use all the same syntax as a standard Visualforce page, with several added tags and attributes to provide component-specific capabilities. The starting place for component creation is the Setup environment.

1.	Go to Setup Develop Components New, which will take you to the page shown in below. Figure 189. Creating a Visualforce component [View full size image]
2.	Give the component the name of slogo, a combination of slogan and logo, and an appropriate description.
3.	Modify the code for the page, eliminating the default code and adding an image component and an HTML page break, as shown in the code below: <apex:component> <apex:image value="{!$Resource.Logo}"> </apex:image> </apex:component> You have just created your first component, The next step is to give this component more flexible capabilities.

Adding Attributes to a Component

You have created a basic component, with the Universal Containers logo. You now want to add a way for an instance of this component to receive words for the slogan.

You can create attributes to receive values passed from the Visualforce page that includes the component. An attribute, in a Visualforce component, is a way to pass values to the component. All attributes need a name, a description, and a data type, which is a primitive data type, such as string, number, or date. An attribute can also be specified as required or not.

<apex:component>
<apex:attribute name="firstText"
       description="The first text string
         that is not italic"
       type="String" required="false"/>
<apex:attribute name="firstItalicText"
       description="The first italic text string."
       type="String"
       required="false"/>
<apex:image value="{!$Resource.Logo}"> </apex:image>
</apex:component>

<apex:component>
  <apex:attribute name="firstText"
       description="The first text string
         that is not italic"
       type="String" required="false"/>
  <apex:attribute name="firstItalicText"
       description="The first italic text string."
       type="String"
       required="false"/>
  <apex:image value="{!$Resource.Logo}"> </apex:image>
  <p/>
  {!firstText} <i> {!firstItalicText}</i>
</apex:component>

As you can see, an attribute within a component is accessed just like any other field, through bind syntax.

Your component is now complete and ready to use.

Using a Visualforce Component

Now that your Visualforce component has been created, you can use it in any of your Visualforce pages.

1.	Call up the Visualforce page you created in Chapter 9: Visualforce Pages through the URL of http://c.instance_name.visual.force.com/apex/VisualforcePositions
2.	Add the component to the page, just below the opening page tag, with the following code: <c:slogo firstText="Reaching the top - " firstItalicText="together"/> The tag used to insert the component does not start with apex:, but with c:. The initial portion of any Visualforce tag indicates the namespace for that tag. A namespace is simply a way of separating Force Platform components to insure unique naming for the components. Tip Namespaces become important when you learn about packaging, discussed in Chapter 15: Deployment. The c: namespace refers to any component in your org that has not been assigned to a specific namespace, such as the slogo component.
3.	Save your page code to refresh your page and to display your new slogo component, as shown in the figure below.

Figure 190. Your Visualforce component at work

[View full size image]

Although you have only used your new Visualforce component in a single page, you can easily see how this flexible entity is used across your entire application.

Visualforce components can also be linked to their own custom controllers, which you will learn about later in this chapter.