Using a Custom Component
Using a Custom Component
<h:inputText id=
"name" value="#{CustomerBean.name}"
size=
"10" ... >
<f:validator validatorId=
"customValidator" />
...
</h:inputText>
Using a Custom Component
In order to use a custom component in a page, you need to declare the tag library that defines
the custom tag that renders the custom component, as explained in
, and you add the component's tag to the page.
The Duke's Bookstore application includes a custom image map component on the
chooselocale.jsp
page. This component allows you to select the locale for the application by
clicking on a region of the image map:
...
<h:graphicImage id=
"mapImage" url="/template/world.jpg"
alt=
"#{bundle.chooseLocale}"
usemap=
"#worldMap" />
<bookstore:map id=
"worldMap" current="NAmericas"
immediate=
"true"
action=
"bookstore"
actionListener=
"#{localeBean.chooseLocaleFromMap}">
<bookstore:area id=
"NAmerica" value="#{NA}"
onmouseover=
"/template/world_namer.jpg"
onmouseout=
"/template/world.jpg"
targetImage=
"mapImage" />
...
<bookstore:area id=
"France" value="#{fraA}"
onmouseover=
"/template/world_france.jpg"
onmouseout=
"/template/world.jpg"
targetImage=
"mapImage" />
</bookstore:map>
The standard graphicImage tag associates an image (world.jpg) with an image map that is
referenced in the usemap attribute value.
The custom map tag that represents the custom component, MapComponent, specifies the image
map, and contains a set of area tags. Each custom area tag represents a custom AreaComponent
and specifies a region of the image map.
On the page, the onmouseover and onmouseout attributes specify the image that is displayed
when the user performs the actions described by the attributes. The page author defines what
these images are. The custom renderer also renders an onclick attribute.
Using Custom Objects
The Java EE 5 Tutorial · September 2007
376
