Download FAQ History |  | API Search Feedback

> ## Understanding the Image Map Example

> The `cardemo` application now includes a custom image map component on the `ImageMap.jsp` page. This image map displays a map of the world. When the user clicks on one of a particular set of regions in the map, the application sets the locale in the `FacesContext` to the language spoken in the selected region. The hot spots 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 a few reasons. One reason is that the client-side image map allows the browser to provide immediate feedback when a user positions her mouse over a hot spot. 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 some data or to change the appearance of non-form controls, which a client-side image map cannot do.

> The image map custom component--because it uses JavaServer Faces technology--has the best of both style 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 METHOD="post" ACTION="/cardemo/faces/...">
>       <table> <tr> <td> Welcome to JavaServer Faces</td></tr>
>         <tr><td>
>           <img id="mapImage" src="world.jpg" usemap="#worldMap">
>             <map name="worldMap">
>               <area shape="poly"
>                 coords="6,15,6,28,2,30,6,34,13,28,17,..."
>                 onclick="document.forms[0].selectedArea.value=
>                   'NAmericas';
>                   document.forms[0].submit()"
>                 onmouseover="document.forms[0].mapImage.src=
>                   'world_namer.jpg';"
>                 onmouseout="document.forms[0].mapImage.src=
>                   'world.jpg';"
>                 alt="NAmericas">
>                 ...
>               <input type="hidden" name="selectedArea"></map>
>         </td></tr>
>       </table>
>     </form>

> The `img` tag associates an image (`world.jpg`) with an image map, referenced in the `usemap` attribute value.

> The `map` tag specifies the image map and contains a set of `area` tags.

> Each `area` tag specifies a region of the image map. The `onmouseover`, `onmouseout`, and `onmouseclick` attributes define which JavaScript code is executed when these events occur. When the user moves her mouse over a region, the `onmouseover` function associated with the region displays the map with that region highlighted. When the user moves her mouse out of a region, the `onmouseout` function redisplays the original image. If the user clicks on a region, the `onclick` function sets the value of the `input` tag to the id of the selected area and submits the page.

> The `input` tag represents a hidden control that stores the value of the currently-selected area between client/server exchanges so that the server-side component classes can retrieve the value.

> The server side objects retrieve the value of `selectedArea` and set the locale in the `FacesContext` according to what region was selected.

> ### Understanding the JSP Page

> Here is an abbreviated form of the JSP page that the image map component will use to generate the HTML page shown in the previous section:

>     <f:use_faces>
>       <h:form formName="imageMapForm" >
>       ...
>         <h:graphic_image id="mapImage" url="/world.jpg"
>           usemap="#worldMap" />
>         <d:map id="worldMap" currentArea="NAmericas" >
>           <f:action_listener
>             type="cardemo.ImageMapEventHandler" />
>           <d:area id="NAmericas" valueRef="NA"
>             onmouseover="/cardemo/world_namer.jpg"
>             onmouseout="/cardemo/world.jpg" />
>           ...
>         </d:map>
>         ...
>       </h:form>
>     </f:use_faces>

> The `action_listener` tag nested inside the `map` tag causes the `ImageMapEventHandler` to be registered on the component corresponding to `map`. This handler changes the locale according to the area selected from the image map. The way this event is handled is explained more in Handling Events for Custom Components.

> Notice that the `area` tags do not contain any of the JavaScript, coordinate, or shape data that is displayed on the HTML page. The JavaScript is generated by the `AreaRenderer` class. The `onmouseover` and `onmouseout` attribute values indicate the image to be loaded when these events occur. How the JavaScript is generated is explained more in Performing Encoding.

> The coordinate, shape, and alt data are obtained through the `valueRef` attribute, whose value refers to an attribute in application scope. The value of this attribute is a model object, which stores the coordinate, shape, and alt data. How these model objects are stored in the application scope is explained more in Simplifying the JSP Page.

> ### Simplifying the JSP Page

> One of the primary goals of JavaServer Faces technology is ease-of-use. This includes separating out the code from the page so that a wider range of page authors can easily contribute to the Web development process. For this reason, all JavaScript is rendered by the component classes rather than being included in the page.

> Ease-of-use also includes compartmentalizing the tasks of developing a Web application. For example, rather than requiring the page author to hardcode the coordinates of the hot spots in the page, the application should allow the coordinates to be retrieved from a database or generated by one of the many image map tools available.

> In a JavaServer Faces application, data such as coordinates would be retrieved via a model object from the `valueRef` attribute. However, the shape and coordinates of a hotspot should be defined together because the coordinates are interpreted differently depending on what shape the hotspot is. Since a component's `valueRef` can only be bound to one property, the `valueRef` attribute cannot refer to both the shape and the coordinates.

> To solve this problem, the application encapsulates all of this information in a set of `ImageArea` objects. These objects are initialized into application scope by the Managed Bean Facility (Managed Bean Creation). Here is part of the managed-bean declaration for the `ImageArea` bean corresponding to the South America hotspot:

>     <managed-bean>
>       ...
>       <managed-bean-name>SA</managed-bean-name>
>       <managed-bean-class>
>         components.model.ImageArea
>       </managed-bean-class>
>       <managed-bean-scope>application</managed-bean-scope>
>       <managed-property>
>         <property-name>shape</property-name>
>         <value>poly</value>
>       </managed-property>
>       <managed-property>
>         <property-name>alt</property-name>
>       <value>SAmerica</value>
>       </managed-property>
>       <managed-property>
>         <property-name>coords</property-name>
>         <value>89,217,95,100...</value>
>       </managed-property>
>     </managed-bean>

> For more information on initializing managed beans with the Managed Bean Facility, see section Creating Model Objects.

> The `valueRef` attributes of the `area` tags refer to the beans in the application scope, as shown in this `area` tag from `ImageMap.jsp`:

>     <d:area id="NAmericas"
>         valueRef="NA"
>         onmouseover="/cardemo/world_namer.jpg"
>         onmouseout="/cardemo/world.jpg" />

> To reference the `ImageArea` model object values from the component class, you need to call `getvalueRef` from your component class. This returns the name of the attribute that stores the `ImageArea` object associated with the tag being processed. Next, you need to pass the attribute to the `getValueRef` method of the `Util` class, which is a reference implementation helper class that contains various factories for resources. This will return a `ValueBinding`, which uses the expression from the `valueRef` attribute to locate the `ImageArea` object containing the values associated with the current `UIArea` component. Here is the line from `AreaRenderer` that does all of this:

>     ImageArea ia = (ImageArea)
>       ((Util.getValueBinding(
>       uiArea.getValueRef())).getValue(context));

> `ImageArea` is just a simple bean, so you can access the shape, coordinates, and alt values by calling the appropriate accessor methods of `ImageArea`. Performing Encoding explains how to do this in the `AreaRenderer` class.

> ### Summary of the Application Classes

> Table 22-2 summarizes all of the classes needed to implement the image map component.

> Table 22-2 Image Map Classes
> Class | Function
> --- | ---
> `AreaTag` | The tag handler that implements the area custom tag
> `MapTag` | The tag handler that implements the map custom tag
> `UIArea` | The class that defines the `UIArea` component, corresponding to the area custom tag
> `UIMap` | The class that defines the `UIMap` component, corresponding to the map custom tag
> `AreaRenderer` | This `Renderer` performs the delegated rendering for the `UIArea` component
> `ImageArea` | The model object that stores the shape and coordinates of the hot spots
> `ImageMapEventHandler` | The listener interface for handling the action event generated by the `map` component

> `AreaTag` and `MapTag` are located in `<JWSDP_HOME>``/jsf/samples/components/src/components/taglib/`.

> `UIArea` and `UIMap` are located in `<JWSDP_HOME>``/jsf/samples/components/src/components/components/`.

> `AreaRenderer` is located in `<JWSDP_HOME>``/jsf/samples/components/src/components/renderkit/`.

> `ImageArea` is located in `<JWSDP_HOME>``/jsf/samples/components/src/components/model/`.

> `ImageMapEventHandler` is located in `<JWSDP_HOME>``/jsf/samples/cardemo/src/cardemo/`.

Download FAQ History |  | API Search Feedback

All of the material in The Java(TM) Web Services Tutorial is copyright-protected and may not be published in other works without express written permission from Sun Microsystems.