background image

Understanding the Image Map Example

<< Component Renderer and Tag Combinations | Understanding the JSP Page >>
<< Component Renderer and Tag Combinations | Understanding the JSP Page >>

Understanding the Image Map Example

Understanding the Image Map Example
Duke's Bookstore includes a custom image map component on the chooselocale.jsp page.
This image map displays a map of the world. When the user clicks one of a particular set of
regions in the map, the application sets the locale on the UIViewRoot component of the current
FacesContext
to the language spoken in the selected region. The hotspots of the map are the
United States, Spanish-speaking Central and South America, France, and Germany.
Why Use JavaServer Faces Technology to Implement
an Image Map?
JavaServer Faces technology is an ideal framework to use for implementing this kind of image
map because it can perform the work that must be done on the server without requiring you to
create a server-side image map.
In general, client-side image maps are preferred over server-side image maps for several
reasons. One reason is that the client-side image map allows the browser to provide immediate
feedback when a user positions the mouse over a hotspot. Another reason is that client-side
image maps perform better because they don't require round-trips to the server. However, in
some situations, your image map might need to access the server to retrieve data or to change
the appearance of non-form controls, tasks that a client-side image map cannot do.
Because the image map custom component uses JavaServer Faces technology, it has the best of
both styles of image maps: It can handle the parts of the application that need to be performed
on the server, while allowing the other parts of the application to be performed on the client
side.
Understanding the Rendered HTML
Here is an abbreviated version of the form part of the HTML page that the application needs to
render:
<form id=
"_id38" method="post"
action=
"/bookstore6/chooselocale.faces" ... >
...
<img id=
"_id38:mapImage"
src=
"/bookstore6/template/world.jpg"
alt=
"Choose Your Preferred Locale from the Map"
usemap=
"#worldMap" />
<map name=
"worldMap">
<area alt=
"NAmerica"
coords=
"53,109,1,110,2,167,,..."
shape=
"poly"
Understanding the Image Map Example
Chapter 13 · Creating Custom UI Components
413