Understanding the Image Map Example

Why Use JavaServer Faces Technology to Implement an Image Map?

Understanding the Rendered HTML

Understanding the JSP Page

Configuring Model Data

Summary of the Application Classes

Understanding the Image Map Example

Duke’s Bookstore includes a custom image map component on thechooselocale.jsp page. This imagemap displays a map of the world. When the user clicks oneof a particular set of regions in the map, the application sets thelocale on theUIViewRoot component of the currentFacesContext to the language spokenin 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 kindof image map because it can perform the work that must bedone 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 severalreasons. One reason is that the client-side image map allows the browser toprovide immediate feedback when a user positions the mouse over a hotspot. Anotherreason is that client-side image maps perform better because they don’t require round-tripsto the server. However, in some situations, your image map might need toaccess the server to retrieve data or to change the appearance of non-formcontrols, tasks that a client-side image map cannot do.

Because the image map custom component uses JavaServer Faces technology, it has thebest of both styles of image maps: It can handle the partsof the application that need to be performed on the server, while allowingthe 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 HTMLpage that the application needs to render:

<form method="post"     action="/bookstore6/chooselocale.faces" ... >    ...    <img         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"                 onmouseout=                    "document.forms[0][’_id_id38:mapImage’].src=                        ’/bookstore6/template/world.jpg’"                onmouseover=                    "document.forms[0][’_id_id38:mapImage’].src=                        ’/bookstore6/template/world_namer.jpg’"                onclick=                    "document.forms[0][’worldMap_current’].                        value=                            ’NAmerica’;document.forms[0].submit()"            />            <input type="hidden" name="worldMap_current">        </map>        ...</form>

Theimg tag associates an image (world.jpg) with the image map referenced intheusemap attribute value.

Themap tag specifies the image map and contains a set ofareatags.

Each area tag specifies a region of the image map. Theonmouseover,onmouseout,andonclick attributes define which JavaScript code is executed when these events occur.When the user moves the mouse over a region, theonmouseover functionassociated with the region displays the map with that region highlighted. When theuser moves the mouse out of a region, theonmouseout function redisplaysthe original image. If the user clicks on a region, theonclick functionsets the value of theinput tag to the ID of theselected area and submits the page.

Theinput tag represents a hidden control that stores the value of thecurrently selected area between client-server exchanges so that the server-side component classes canretrieve the value.

The server-side objects retrieve the value ofworldMap_current and set the locale intheFacesContext instance according to the region that was selected.

Understanding the JSP Page

Here is an abbreviated form of the JSP page that the imagemap component will use to generate the HTML page shown in the precedingsection:

<f:view>    <f:loadBundle basename="messages.BookstoreMessages"         var="bundle"/>    <h:form>        ...        <h:graphicImage url="/template/world.jpg"             alt="#{bundle.ChooseLocale}"            usemap="#worldMap" />         <bookstore:map current="NAmericas"             immediate="true" action="bookstore"            actionListener="#{localeBean.chooseLocaleFromMap}">            <bookstore:area value="#{NA}"                 onmouseover="/template/world_namer.jpg"                 onmouseout="/template/world.jpg"                 targetImage="mapImage" />            <bookstore:area value="#{SA}"                onmouseover="/template/world_samer.jpg"                onmouseout="/template/world.jpg"                 targetImage="mapImage" />            <bookstore:area value="#{gerA}"                onmouseover="/template/world_germany.jpg"                 onmouseout="/template/world.jpg"                 targetImage="mapImage" />            <bookstore:area value="#{fraA}"                 onmouseover="/template/world_france.jpg"                onmouseout="/template/world.jpg"                 targetImage="mapImage" />            </bookstore:map>        ...    </h:form></f:view>

Thealt attribute ofgraphicImage maps to the localized string"Choose Your Locale from the Map".

TheactionListener attribute of themap tag points at a method inLocaleBeanthat accepts an action event. This method changes the locale according to thearea selected from the image map. The way this event is handled isexplained more inHandling Events for Custom Components.

Theaction attribute specifies a logical outcomeString, which is matched againstthe navigation rules in the application configuration resource file. For more information onnavigation, see the sectionConfiguring Navigation Rules.

Theimmediate attribute of themap tag is set totrue, whichindicates that the defaultActionListener implementation should execute during the apply request values phaseof 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 tothe invoke application phase.

Thecurrent attribute of themap tag is set to the default area,which isNAmerica.

Notice that thearea tags do not contain any of the JavaScript, coordinate,or shape data that is displayed on the HTML page. The JavaScript isgenerated by theAreaRenderer class. Theonmouseover andonmouseout attribute values indicate the imageto be loaded when these events occur. How the JavaScript is generated isexplained more inPerforming Encoding.

The coordinate, shape, and alternate text data are obtained through thevalue attribute,whose value refers to an attribute in application scope. The value of thisattribute is a bean, which stores thecoords,shape, andalt data. How thesebeans are stored in the application scope is explained more in the nextsection.

Configuring Model Data

In a JavaServer Faces application, data such as the coordinates of a hotspotof an image map is retrieved from thevalue attribute through a bean.However, the shape and coordinates of a hotspot should be defined together becausethe coordinates are interpreted differently depending on what shape the hotspot is. Because acomponent’s value can be bound only to one property, thevalue attribute cannotrefer to both the shape and the coordinates.

To solve this problem, the application encapsulates all of this information in aset ofImageArea objects. These objects are initialized into application scope by themanaged bean creation facility (seeBacking Beans). Here is part of the managed beandeclaration for theImageArea 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 creation facility,see the sectionApplication Configuration Resource File.

Thevalue attributes of thearea tags refer to the beans in theapplication scope, as shown in thisarea tag fromchooselocale.jsp:

<bookstore:areavalue="#{NA}"         onmouseover="/template/world_namer.jpg"         onmouseout="/template/world.jpg" />

To reference theImageArea model object bean values from the component class, youimplement agetValue method in the component class. This method callssuper.getValue. The superclassoftut-install/javaeetutorial5/examples/web/bookstore6/src/java/com/sun/bookstore6/components/AreaComponent.java,UIOutput, has agetValue method that does the work of findingtheImageArea object associated withAreaComponent. TheAreaRenderer class, which needs to render thealt,shape, andcoords values from theImageArea object, calls thegetValue method ofAreaComponent to retrieve theImageArea object.

ImageArea iarea = (ImageArea) area.getValue();

ImageArea is only a simple bean, so you can access the shape, coordinates,and alternative text values by calling the appropriate accessor methods ofImageArea.Creating the Renderer Classexplains how to do this in theAreaRenderer class.

Summary of the Application Classes

Table 13-2 summarizes all the classes needed to implement the image map component.

Table 13-2 Image Map Classes

The Duke's Bookstore source directory, calledbookstore-dir, istut-install/javaeetutorial5/examples/web/bookstore6/src/java/com/sun/bookstore6/. The event and listenerclasses are located inbookstore-dir/listeners/. The tag handlers are located inbookstore-dir/taglib/. The componentclasses are located inbookstore-dir/components/. The renderer classes are located inbookstore-dir/renderers/.ImageArea is located inbookstore-dir/model/.LocaleBean is located inbookstore-dir/backing/.

Copyright © 2010, Oracle and/or its affiliates. All rights reserved.Legal Notices