Skip to main content

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.


detail.jpg



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


map.jpg



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.



jaxws-ClientService.gif




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


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

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

     

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

     


   
session

 managed-bean>

 <managed-bean>

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

     

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

     


   
session

 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;"> style="font-weight: bold;">
               
<to-view-id>/item/ style="color: rgb(0, 102, 0);">map
.jsp style="font-weight: bold;">
     


 

     

     



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/

index.jpg

References:




Related Topics >>