Adding a Google Map to the Sample JSF Catalog Application

Posted by caroljmcdonald on October 19, 2007 at 2:50 PM PDT

Adding a Google Map to the Sample JSF Catalog Application

This example demonstrates adding a Map to the href="http://weblogs.java.net/blog/caroljmcdonald/archive/2007/09/sample_applicat_2.html">Sample
Store Catalog Application using JAX-WS, JSF, EJB 3.0, and Java
using the href="https://blueprints.dev.java.net/complib/v2/map-viewer.html">BluePrints
JSF Google Map Viewer Component.

href="https://techdayscode.dev.java.net/servlets/ProjectDocumentList?folderID=8050&expandFolder=8050&folderID=8050">Download
the Sample Application Code

Explanation of the functionality of the Blueprints JSF Ajax Map
Component in a sample Store Catalog Application

The image below shows the Catalog Item Detail page, which displays a
Store item's details.

When the user clicks on the Seller's Location hyperlink, a Google Map
for the location is displayed as shown below:

Explanation of the usage of the Blueprints JSF Ajax Map Component
in the JSF Catalog Web Service client.

The JSF Store UI is a separate web application which is a JAX-WS
client. To learn more about this App read the href="http://weblogs.java.net/blog/caroljmcdonald/archive/2007/09/sample_applicat_2.html">Sample
Store Catalog Application using JAX-WS, JSF, EJB 3.0, and Java, and
for more information on
the JSF part of this code see href="http://weblogs.java.net/blog/caroljmcdonald/archive/2007/05/pagination_of_d.html">this
previous blog.

However this JSF map component could be added to any JSF client, for
example it could also be added to these sample JSF apps: href="http://weblogs.java.net/blog/caroljmcdonald/archive/2007/07/sample_applicat_1.html">Sample
Application using JSF, Seam, and Java Persistence APIs on Glassfish,
href="http://weblogs.java.net/blog/caroljmcdonald/archive/2007/05/pagination_of_d.html">Sample
Application using JSF, Catalog Facade Stateless Session, and Java
Persistence APIs, href="http://weblogs.java.net/blog/caroljmcdonald/archive/2007/06/sample_applicat.html">Sample
Application using JSF, Spring 2.0, and Java Persistence APIs on
Glassfish.

In the Detail.jsp
web page, the Seller's Location hyperlink is defined as shown below:

Code Sample from:

Detail style="color: rgb(0, 0, 0);">.jsp



 <h:commandLink style="font-weight: bold;">  style="color: rgb(204, 0, 0); font-weight: bold;">action="#{ style="color: rgb(0, 102, 0); font-weight: bold;">MapBean.mapAction}"
      value="#{ style="color: rgb(0, 102, 0); font-weight: bold;">item.item.address.street1},

     #{ style="color: rgb(0, 102, 0); font-weight: bold;">item.item.address.city},
#{item.item.address.state}"/> style="font-weight: bold;">

A JSF commandLink
is used to provide a link to click on to
display a Google map corresponding to the address
displayed by the

 style="color: rgb(204, 0, 0); font-weight: bold;">value

tag. The commandLink
tag represents an HTML hyperlink and is rendered as an HTML <a> element. The

 style="color: rgb(204, 0, 0); font-weight: bold;">commandLink style="font-weight: bold;">

tag is used to submit an style="color: rgb(204, 0, 0); font-weight: bold;">action event
to the application. This

 style="color: rgb(204, 0, 0); font-weight: bold;">commandLink action

attribute
references a

 style="color: rgb(0, 102, 0); font-weight: bold;">MapBean

ManagedBean which is defined in the
faces-config.xml file:

Code Sample from: faces-context.xml



 <managed-bean>

    <managed-bean-name> style="font-family: mon; color: rgb(0, 102, 0);"> style="font-weight: bold;">MapBean</managed-bean-name>

      <managed-bean-class>

          style="color: rgb(0, 102, 0); font-weight: bold;">sessionpagination.client.MapBean

      </managed-bean-class>

   
<managed-bean-scope>session</managed-bean-scope>

 </managed-bean>

 <managed-bean>

    <managed-bean-name> style="font-family: mon; color: rgb(0, 102, 0);"> style="font-weight: bold;">item</managed-bean-name>

      <managed-bean-class>

          style="color: rgb(0, 102, 0); font-weight: bold;">sessionpagination.client.ItemController

      </managed-bean-class>

   
<managed-bean-scope>session</managed-bean-scope>

 </managed-bean>

The

 style="color: rgb(0, 102, 0); font-weight: bold;">MapBean

 style="color: rgb(0, 102, 0); font-weight: bold;">mapAction

 style="color: rgb(0, 102, 0); font-weight: bold;">

method
gets the longitude and latitude for the

 style="color: rgb(0, 102, 0); font-weight: bold;">address

and returns the logical outcome
String map, which causes the navigation to go to the map.jsp page.
This

MapBean

 style="color: rgb(0, 102, 0); font-weight: bold;">mapAction

 style="color: rgb(0, 102, 0); font-weight: bold;">

method
is defined as shown below:

border="1" cellpadding="2" cellspacing="0">

Code Sample from: style="font-family: monospace;"> style="color: rgb(0, 102, 0); font-weight: bold;">MapBean.java

import
com.sun.j2ee.blueprints.ui.geocoder. style="color: rgb(0, 0, 153); font-weight: bold;">GeoCoder;

import com.sun.j2ee. style="color: rgb(0, 0, 153); font-weight: bold;">blueprints style="font-family: monospace;">.ui.geocoder. style="color: rgb(0, 0, 153); font-weight: bold;">GeoPoint;

import com.sun.j2ee. style="color: rgb(0, 0, 153); font-weight: bold;">blueprints style="font-family: monospace;">.ui.mapviewer. style="color: rgb(0, 0, 153); font-weight: bold;">MapMarker;

import com.sun.j2ee. style="color: rgb(0, 0, 153); font-weight: bold;">blueprints style="font-family: monospace;">.ui.mapviewer. style="color: rgb(0, 0, 153); font-weight: bold;">MapPoint;

import javax.faces.context. style="color: rgb(204, 0, 0); font-weight: bold;">FacesContext;

public class MapBean
{

    private style="color: rgb(0, 0, 153); font-weight: bold;">MapMarker
mapMarker=new MapMarker();

    private style="color: rgb(0, 0, 153); font-weight: bold;">MapPoint
mapPoint=new MapPoint();

    private String style="font-weight: bold; color: rgb(0, 0, 0);">location="";

    public style="color: rgb(0, 0, 153); font-weight: bold;">MapMarker style="font-family: monospace;">[] style="color: rgb(0, 102, 0); font-weight: bold;">getLocations()
{

        return new style="font-family: monospace;"> style="color: rgb(0, 0, 153); font-weight: bold;">MapMarker style="font-family: monospace;">[]{this.mapMarker};

    }

 

    public String  style="color: rgb(0, 102, 0); font-weight: bold;">mapAction() {

        // get the ItemController
ManagedBean

 style="color: rgb(0, 102, 0); font-weight: bold;">ItemController

itemController = (ItemController)

style="font-family: monospace;"> style="color: rgb(204, 0, 0); font-weight: bold;">FacesContext

.getCurrentInstance().getExternalContext().getSessionMap().get("item");

         style="color: rgb(0, 102, 0); font-weight: bold;">Address
address =
itemController.get

 style="color: rgb(0, 102, 0); font-weight: bold;">Item

().getAddress();

         style="color: rgb(0, 102, 0); font-weight: bold;">

 style="font-weight: bold; color: rgb(0, 0, 0);">location

 style="color: rgb(0, 102, 0); font-weight: bold;">=address.getStreet1()
+ COMMA + address.getCity()+ COMMA + address.getState() +

           COMMA + address.getZip();

        return  style="font-weight: bold;">findLocation();

    }



      

    public String findLocation()
{

         style="color: rgb(0, 0, 153); font-weight: bold;">GeoCoder
geoCoder=new
GeoCoder();

        // use

blueprints
GeoCoder

 to get points based on location (this uses
Yahoo's map service)

         style="color: rgb(0, 0, 153); font-weight: bold;">GeoPoint
points[]=geoCoder.geoCode( style="font-weight: bold; color: rgb(0, 0, 0);">location);

style="font-family: monospace;"> style="color: rgb(0, 0, 153); font-weight: bold;">mapMarker

. style="color: rgb(0, 0, 153); font-weight: bold;">setLatitude(points[0].getLatitude());

style="font-family: monospace;"> style="color: rgb(0, 0, 153); font-weight: bold;">mapMarker

. style="color: rgb(0, 0, 153); font-weight: bold;">setLongitude(points[0].getLongitude());

       
      mapMarker.setMarkup(points[0].toString();

       
      mapPoint.setLatitude(points[0].getLatitude());

       
      mapPoint.setLongitude(points[0].getLongitude());

        return " style="color: rgb(0, 102, 0); font-weight: bold;">map";

    }

In the

mapAction

method, the style="color: rgb(204, 0, 0); font-weight: bold;">FacesContext is
used to get the

 style="color: rgb(0, 102, 0); font-weight: bold;">ItemController

in order to get the current store

 style="color: rgb(0, 102, 0); font-weight: bold;">Item

's
Address.
Then the findLocation is called, which uses the style="font-family: monospace;"> href="https://blueprints.dev.java.net/complib/v2/map-viewer.html"> style="color: rgb(0, 0, 153); font-weight: bold;">blueprints style="color: rgb(0, 0, 153); font-weight: bold;">GeoCoder component style="font-family: monospace;">. The style="font-family: monospace;"> style="color: rgb(0, 0, 153); font-weight: bold;">blueprints style="color: rgb(0, 0, 153); font-weight: bold;">GeoCoder
uses the Yahoo map service to verify the entered address and to get the
exact latitude and longitude.

The JavaServer Faces style="color: rgb(204, 0, 0); font-weight: bold;"> NavigationHandler
matches the logical outcome, map
against the navigation rules in the application configuration resource
file faces-config.xml
to determine which page to access next. In this case, the
JavaServer Faces implementation loads the map.jsp
page after this method returns.

Code Sample from: faces-config.xml

  < style="color: rgb(204, 0, 0);">navigation-rule> style="font-weight: bold;">
           
<navigation-case> style="font-weight: bold;">
               
<from-outcome>

map

 style="font-weight: bold;"></from-outcome> style="font-weight: bold;">
               
<to-view-id>/item/ style="color: rgb(0, 102, 0);">map.jsp</to-view-id>  style="font-weight: bold;">
     
</navigation-case>

  </navigation-rule>

In the

 style="color: rgb(0, 102, 0);">map.jsp

the blueprints
JSF mapViewer
component uses the latitude and longitude to render the Google map :

Code Sample from: Map.jsp



<%@taglib prefix=" style="color: rgb(0, 0, 153); font-weight: bold;">ui"
uri="http://java.sun.com/ style="color: rgb(0, 0, 153); font-weight: bold;">blueprints/ui/14"
%>

      

<ui:mapViewer
id="mapViewerx" center="#{ style="color: rgb(0, 102, 0); font-weight: bold;">MapBean. style="color: rgb(0, 0, 153);">mapPoint}"  style="color: rgb(0, 0, 153); font-weight: bold;">info="#{ style="color: rgb(0, 102, 0); font-weight: bold;">MapBean. style="color: rgb(0, 0, 153);">mapMarker}"

             style="color: rgb(0, 0, 153); font-weight: bold;">markers="#{ style="color: rgb(0, 102, 0); font-weight: bold;">MapBean.locations}"
zoomLevel="4" style="height: 500px;
width: 700px"/>

The mapViewer
component uses the

 style="color: rgb(0, 102, 0); font-weight: bold;">MapBean

to provide the necessary information, which was returned from the style="font-family: monospace;"> style="color: rgb(0, 0, 153); font-weight: bold;">GeoCoder
component's Yahoo lookup, to render the Google map.

The

mapViewer

 style="color: rgb(0, 0, 153); font-weight: bold;">center

style="font-weight: bold;">attribute is populated by a style="color: rgb(0, 0, 153); font-weight: bold;">com.sun.j2ee.blueprints.ui.mapviewer.MapPoint
which is accessed through the

 style="color: rgb(0, 102, 0); font-weight: bold;">MapBean

backing bean. The

 style="color: rgb(0, 102, 0); font-weight: bold;"> style="color: rgb(0, 0, 153);">mapPoint

is used
to center the map utilizing the latitude and longitude from the

 style="color: rgb(0, 102, 0); font-weight: bold;"> style="color: rgb(0, 0, 153);">mapPoint

.

The

mapViewer

 style="color: rgb(0, 0, 153); font-weight: bold;">info

attribute holds the address string text that is printed in the
information balloon that is shown with the map.

The

mapViewer

 style="color: rgb(0, 0, 153); font-weight: bold;">markers

attribute holds an Array of style="color: rgb(0, 0, 153); font-weight: bold;">com.sun.j2ee.blueprints.ui.mapviewer.MapMarker
objects that represent points to be identified on the map.
This example only populates the Array with the first point returned
from the GeoCoder.

See href="https://blueprints.dev.java.net/complib/v2/map-viewer.html">How
to Use the Map Viewer and GeoCoder Components for more information
on this.

Conclusion

This concludes how to add the Blueprints JSF Map Viewer
component to the sample JSF Store UI.

Running the Sample Application on
Glassfish:

href="https://glassfish.dev.java.net/public/downloadsindex.html">Download
and install GlassFish V2, following the instructions on the download
page. Alternatively you can use Sun Java System Application Server PE
9, Sun's GlassFish distribution.
Download
and install NetBeans 5.5.1
href="https://techdayscode.dev.java.net/servlets/ProjectDocumentList?folderID=8050&expandFolder=8050&folderID=8050">Download
the Sample Application Code
install Glassfish and Netbeans 5.5.1. Then add the
glassfish application server to Netbeans.

To Open and Test Run the sessionpagination Project:

Open the Netbeans sessionpagination project: In Netbeans under
File Open Project... go to the directory where you unzipped the sample
and select the sessionpagination project.
If you get a message that says unresolved references, right click
on the project and select Resolve Reference Problems. Use the Resolve
Reference Problems dialog to map the ejb and web
modules to their
project, which are subdirectories beneath the sessionpagination
directory.
After the references are resolved, right-click the
sessionpagination
project and select Open Required Projects.
If the web module says unresolved references, right-click the
sessionpagination-Web module and select Resolve
Reference
Problems:
Browse to the sessionpagination-ejb directory which is a
sub-directory below the sessionpagination directory and select Open
Project
Folder.
If you don't have any resolve reference problems errors then
ignore those steps.
Starts the application server, or at least connect to the
database, because the run script for this application will also create
the database tables, and this will fail if the database is not started.
Right-click the project node and choose Run Project.

The Netbeans IDE starts the application server, builds the application,
and opens the web context page in your browser. This application also
has a local JSF client in the war of the application which will be
displayed.
To go to the web client Tester
application provided by the
Glassfish Application Server use the url :
http://host:8080/CatalogService/Catalog?Tester. You should see the
tester page. For the getItems operation type in integer the integers 0,
5 as input and click on the getItems button. This will return a list
of items 0 through 5.

To Open and Test Run the sessionpagination-wsclient Project:

Open the Netbeans sessionpagination-wsclient project: In Netbeans
under File
Open Project... go to the directory where you unzipped the sample and
select the sessionpagination-wsclient project.
If the sessionpagination-wsclient project says unresolved
references, right-click the libraries node, select add JAR/Folder,
browse to the lib directory under the sessionpagination-wsclient and
add the bp-ui-14.jar, commons-logging-1.1.jar, and the
shale-remoting.jar files.
Right-click the project node and choose Run Project.

The Netbeans IDE builds the application,
and deploys it.
When you run the project, your browser should display the opening
page
of the application at http://localhost:8080/sessionpagination-wsclient/

References:

href="https://blueprints.dev.java.net/complib/v2/map-viewer.html">How
to Use the Map Viewer and GeoCoder Components
Java
EE tutorial
Netbeans
Web Services (JAX-WS) in Java EE 5 tutorial

Main Menu

Carol McDonald

Adding a Google Map to the Sample JSF Catalog Application