Adding a Google Map to the Sample JSF Catalog Application

Posted by caroljmcdonald on October 19, 2007 at 5:50 PM EDT

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.get

Item

().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/

Main Menu

Carol McDonald

Adding a Google Map to the Sample JSF Catalog Application