Using the Custom Component in the Page

After you've created your custom component and written all the accompanying code, you are ready to use the component from the page.

To use the custom component in the JSP page, you need to declare the custom tag library that defines the custom tag corresponding to the custom component. The tag library is described in Defining the Custom Component Tag in a Tag Library Descriptor.

To declare the custom tag library, include a taglib directive at the top of each page that will contain the tags included in the tag library. Here is the taglib directive that declares the JavaServer Faces components tag library:

<%@ taglib uri="http://java.sun.com/jsf/demo/components"
  prefix="d" %>

The uri attribute value uniquely identifies the tag library. The prefix attribute value is used to distinguish tags belonging to the tag library. For example, the map tag must be referenced in the page with the d prefix, like this:

Don't forget to also include the taglib directive for the standard tags included with the RI:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

When you reference any JavaServer Faces tags--custom or standard--from within a JSP page, you must enclose all of them in the use_faces tag:

<f:use_faces>
  ... other faces tags, custom tags, and possibly mixed with
  other content
</f:use_faces>

All form elements must also be enclosed within the form tag, which is also nested within the use_faces tag:

<f:use_faces>
  <h:form formName="imageMapForm" >
    ... other faces tags, custom tags, and possibly mixed with
    other content
  </h:form>
<f:use_faces>

The form tag encloses all of the controls that display or collect data from the user. The formName attribute is passed to the application, where it is used to select the appropriate business logic.

Now that you've set up your page, you can add the custom tags in between the form tags, as shown here in the ImageMap.jsp page:

...
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsf/demo/components" 
        prefix="d" %>
<f:use_faces> 
  <h:form formName="imageMapForm" >
    <table> <tr> <td> 
    ...
      <tr> <TD>
      <h:graphic_image url="/world.jpg" usemap="#worldMap" />  
      <d:map id="worldMap" currentArea="NAmericas" >  
        <d:area id="NAmericas" valueRef="NA"
          onmouseover="/cardemo/world_namer.jpg"
          onmouseout="/cardemo/world.jpg" />
        ...
      </d:map>
    </TD></tr></table>
    </h:form>
  </f:use_faces>