Create a Simple Custom Component - Visualforce

All custom components in Visualforce are wrapped in an <apex:component> component. They typically have named attributes, the values of which you can use in the body of your component. In this lesson, you create a component that uses attributes to determine the contents and width of a red box:

1. Click Setup | Develop | Components.
2. Click New.
3. In the Label and Name text boxes, enter boxedText.
4. In the Visualforce Markup tab, enter the following:

   <apex:component>
       <apex:attribute name="text" 
              description="The contents of the box."
              type="String" required="true"/> 
       <apex:attribute name="borderWidth" 
              description="The width of the border."
              type="Integer" required="true"/>
    <div style="border-color:red; border-style:solid; border-width:{! borderWidth}px">
    <apex:outputText value="{! text}"/>
    </div>
   </apex:component>

5. Click Quick Save.

Note how the two attributes are defined to have different types. Visualforce supports a suite of different attribute types and enforces them when someone creates a page that uses the component.

The body of the component can contain other components or simple HTML, as used here—it can also reference the incoming attributes. For example, {! text} is substituted with the value of the text attribute when using the component.