Adding a Google Map to the Sample JSF Catalog Application

This example demonstrates adding a Map to the Sample Store Catalog Application using JAX-WS, JSF, EJB 3.0, and Java using the BluePrints JSF Google Map Viewer Component.
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  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 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:  Sample Application using JSF, Seam, and Java Persistence APIs on Glassfish, Sample Application using JSF, Catalog Facade Stateless Session, and Java Persistence APIs, 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.jsp

<h:commandLink action="#{MapBean.mapAction}" value="#{item.item.address.street1},      #{item.item.address.city}, #{item.item.address.state}"/>

A JSF commandLink is  used to provide a link to click on to display a Google map corresponding to the address displayed by the value tag. The commandLink tag represents an HTML hyperlink and is rendered as an HTML <a> element. The commandLink tag is used to submit an action event to the application. This commandLink action attribute references a MapBean ManagedBean which is defined in the faces-config.xml file:

Code Sample from: faces-context.xml

<managed-bean>     <managed-bean-name>MapBean</managed-bean-name>       <managed-bean-class>          sessionpagination.client.MapBean       </managed-bean-class>     <managed-bean-scope>session</managed-bean-scope>  </managed-bean>  <managed-bean>     <managed-bean-name>item</managed-bean-name>       <managed-bean-class>          sessionpagination.client.ItemController       </managed-bean-class>     <managed-bean-scope>session</managed-bean-scope>  </managed-bean>

The MapBean mapAction method gets the longitude and latitude for the address  and returns the logical outcome String map, which causes the navigation to go to the map.jsp page. This MapBean mapAction method is defined as shown below:

Code Sample from: MapBean.java

import com.sun.j2ee.blueprints.ui.geocoder.GeoCoder; import com.sun.j2ee.blueprints.ui.geocoder.GeoPoint; import com.sun.j2ee.blueprints.ui.mapviewer.MapMarker; import com.sun.j2ee.blueprints.ui.mapviewer.MapPoint; import javax.faces.context.FacesContext; public class MapBean {     private MapMarker mapMarker=new MapMarker();     private MapPoint mapPoint=new MapPoint();     private String location="";     public MapMarker[] getLocations() {         return new MapMarker[]{this.mapMarker};     }     public String mapAction() {         // get the ItemController ManagedBean         ItemController itemController = (ItemController)             FacesContext.getCurrentInstance().getExternalContext().getSessionMap().get("item");         Address address = itemController.getItem().getAddress();         location=address.getStreet1() + COMMA + address.getCity()+ COMMA + address.getState() +            COMMA + address.getZip();         return findLocation();     }     public String findLocation() {         GeoCoder geoCoder=new GeoCoder();         // use blueprints GeoCoder to get points based on location (this uses Yahoo's map service)         GeoPoint points[]=geoCoder.geoCode(location);         mapMarker.setLatitude(points[0].getLatitude());         mapMarker.setLongitude(points[0].getLongitude());         mapMarker.setMarkup(points[0].toString();         mapPoint.setLatitude(points[0].getLatitude());         mapPoint.setLongitude(points[0].getLongitude());         return "map";     }

In the mapAction method, the FacesContext is used to get the ItemController in order to get the current store Item's Address. Then the findLocation is called, which uses the blueprints GeoCoder component. The blueprints GeoCoder uses the Yahoo map service to verify the entered address and to get the exact latitude and longitude. 

The JavaServer Faces 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

<navigation-rule>       <navigation-case>           <from-outcome>map</from-outcome>           <to-view-id>/item/map.jsp</to-view-id>       </navigation-case>   </navigation-rule>

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

Code Sample from: Map.jsp

<%@taglib prefix="ui" uri="http://java.sun.com/blueprints/ui/14" %> <ui:mapViewer id="mapViewerx" center="#{MapBean.mapPoint}" info="#{MapBean.mapMarker}"             markers="#{MapBean.locations}" zoomLevel="4" style="height: 500px; width: 700px"/>

 
The mapViewer component uses the MapBean to provide the necessary information, which was returned from the GeoCoder component's Yahoo lookup,  to render the Google map. 

The mapViewer center attribute is populated by a com.sun.j2ee.blueprints.ui.mapviewer.MapPoint which is accessed through the MapBean backing bean.  The mapPoint is used to center the map utilizing the latitude and longitude from the mapPoint.

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

The mapViewer markers attribute holds an Array of  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 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:

• 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
• 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:

• How to Use the Map Viewer and GeoCoder Components
  
• Java EE tutorial
• Netbeans Web Services (JAX-WS) in Java EE 5 tutorial