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.
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. | |
2. | |
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. |
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.
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.
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
| ||
3. | Save your page code to refresh your page and to display your new slogo component, as shown in the figure below. |
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.
3.128.173.53