The Java EE 5 Tutorial

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 preceding section:

<f:view>
    <f:loadBundle basename="messages.BookstoreMessages"
         var="bundle"/>
    <h:form>
        ...
        <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="SAmerica" value="#{SA}"
                onmouseover="/template/world_samer.jpg"
                onmouseout="/template/world.jpg"
                 targetImage="mapImage" />
            <bookstore:area id="Germany" value="#{gerA}"
                onmouseover="/template/world_germany.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>
        ...
    </h:form>
</f:view>

The alt attribute of graphicImage maps to the localized string "Choose Your Locale from the Map".

The actionListener attribute of the map tag points at a method in LocaleBean that accepts an action event. This method 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.

The action attribute specifies a logical outcome String, which is matched against the navigation rules in the application configuration resource file. For more information on navigation, see the section Configuring Navigation Rules.

The immediate attribute of the map tag is set to true, which indicates that the default ActionListener implementation should execute during the apply request values phase of the request-processing life cycle, instead of waiting for the invoke application phase. Because the request resulting from clicking the map does not require any validation, data conversion, or server-side object updates, it makes sense to skip directly to the invoke application phase.

The current attribute of the map tag is set to the default area, which is NAmerica.

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 alternate text data are obtained through the value attribute, whose value refers to an attribute in application scope. The value of this attribute is a bean, which stores the coords, shape, and alt data. How these beans are stored in the application scope is explained more in the next section.