将GoogleMap添加到示例JSF目录应用程序中

本示例将演示如何使用 BluePrints JSF Google Map Viewer 组件 为使用 JAX-WS、JSF、EJB 3.0 和 Java 的 商店物品清单应用程序 添加地图。

商店物品清单应用程序中 Blueprints JSF Ajax Map 组件的功能解释下图显示的是某商品详细情况的 页面。

当用户单击销售商地址的超连接时,应用程序就会将该地址在 Google 地图中显示出来,如下图所示 :

Blueprints JSF Ajax Map 组件在 JSF Catalog Web Service 客户机中的使用方法说明。JSF STore UI 是一个独立的 web 应用程序,它是一种 JAX-WS 客户机 。8 有关此应用程序的更多信息,请阅读 Sample STore Catalog Application using JAX-WS, JSF, EJB 3.0, and Java。有关代码中 JSF 部分的 详细信息,请阅读 上一篇博客文章。a

然而,这种 JSF 地图 组件可以添加到任何 JSF 客户端中。例如,还可以将它添加到以下这些 JSF 应用程序中: 在 Glassfish 上使用 JSF、Seam 和 Java Persistence API 的应用程序, 使用 JSF、C atalog Facade Stateless Session 和 Java Persistence API 的应用程序, 在 Glassfish 上使用 JSF 、Spring 2.0 和 Java Persistence API 的应用程序。

Detail.jsp 页面定义了销售商地址的超连接,如下所示:

Detail.jsp 中的示例代码

JSF commandLink 用于提供连接,点击后将显示对应于 address(由 value 标签显示) 的 Google Map。 commandLink 标签代表一个超连接,由 HTML 元素修饰。 commandLink 标签用于向应 用程序提交一个 活动事件(action event) 。 commandLink action 属性指向一个 MapBean ManagedBean(它在 faces-config.xml 文件中定义):

faces-context.xml 中的示例代码   MapBean          sessionpagination.client.MapBean       session   item          sessionpagination.client.ItemController       session

MapBean mapAction 方法将获取 address 的经度和纬度,并返回 map 字符串的逻辑输出(它导致浏 览器跳转到 map.jap 页面)。MapBean mapAction 方法的定义如下所示:

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";   }

在 mapAction 方法中,FacesContext 用于获取 ItemController ,以得到当前店铺 Item 的 Address。 然后调用 findLocation(它使用 blueprints GeoCoder 组件)。blueprints GeoCoder 使用 Yahoo map 服务核实输入地址,并得到确切的经度和纬度。

JavaServer Faces NavigationHandler 匹配逻辑输出,映射( map)应用程序配置资源文件 faces- config.xml中的导航规则,来确定下一个要访问的页面。这样,当 mapAction 方法返回后,JavaServer Faces 实现将加载 map.jsp 页面

示例代码位于:faces-config.xml            map       /item/map.jsp     

在 map.jsp 中,Blueprints JSF mapViewer 组件使用经度和纬度来显示 Google map:

Map .jsp 中的示例代码

mapViewer 组件将使用 MapBean 提供呈现 Google map 所需的信息(它由 GeoCoder 组件的 Yahoo lookup 功能返回)

mapViewer center 属性是由 com.sun.j2ee.blueprints.ui.mapviewer.MapPoint(它可以通过 MapBean backing bean 访问) 生成的。 mapPoint 用于根据经度和纬度(来自 mapPoint ),来显示地 图中心位置。

mapViewer info 属性包含地址字符串文本(它在显示在地图上的信息气球中)。

mapViewer markers 属性存储一个 com.sun.j2ee.blueprints.ui.mapviewer.MapMarker 对象数组( 它们代表地图中的点)。本例中只在该数组中包含了 GeoCoder 返回的第一个点。

有关这一方面的更多信息,请参阅 How to Use the Map Viewer and GeoCoder Components 这篇文章 。

结束语

下面将总结如何在示例 JSF STore UI 中添加 Blueprints JSF Map Viewer 组件。

在 Glassfish 上运行示例应用程序:

根据下载页面的指导, 下载 并安装 GlassFish V2。此外也可以使用 Sun Java System Application Server PE 9,Sun 的 GlassFish 发行版。

下载 并安装 NetBeans 5.5.1

下载应用程序代码

安装 Glassfish 和 Netbeans 5.5.1。然后在 Netbeans 中添加 Glassfish 应用服务器。

打开并测试运行 sessionpagination 项目:

打开 Netbeans sessionpagination 项目:在 Netbeans 的 File Open Project 菜单下,打开解压示 例的目录,选择 sessionpagination 项目。

如果 IDE 提示存在引用问题,则右键单击项目,选择 Resolve Reference Problems。使用 Resolve Reference Problems 对话框将 ejb 和 web 模块映射到它们的项目(这些项目是 sessionpagination 下 的子目录)。

引用问题解决后,右键单击 sessionpagination 项目,选择 Open Required Projects。

若 web 模块提示存在引用问题,则右键单击 sessionpagination-Web 模块,选择 Resolve Reference Problems:

浏览到 sessionpagination-ejb 目录(它是 essionpagination 目录下的一个子目录),选择 Open Project Folder。

如果你没有遇到任何与引用问题有关的错误,则忽略这些步骤。

启动应用服务器,或至少要连接到数据库,因为此应用程序的运行脚本也会创建数据库表,若数据库 没有启动,这将会失败。

右键单击项目结点,选择 Run Project。

Netbeans IDE 将启动应用服务器,编译应用程序,并在浏览器中打开 web 上下文页面。此应用程序 也有本地 JSF 客户端。

使用这个 url 来运行 web 客户端测试应用程序: http://host:8080/CatalogService/Catalog? Tester。你将会看到下面的测试页面。对于 getItems 操作,输入整数0,5,然后点击 getItems 按扭。 这将返回 0 到 5 的项目列表。

打开并测试运行 sessionpagination-wsclient 项目:

打开 Netbeans sessionpagination-wsclient 项目:在 Netbeans 中选择 File Open Project… 并 进入解压示例的目录,选择 sessionpagination-wsclient 项目。

若 sessionpagination-wsclient 项目提示存在引用问题,则右键单击库结点,选择 JAR/Folder,在 sessionpagination-wsclient 目录下浏览到 lib 目录,添加 bp-ui-14.jar、 commons-logging- 1.1.jar 和 shale-remoting.jar 文件。

右键单击项目结点,选择 Run Project.。

Netbeans IDE 将编译并部署这个应用程序。

运行这个项目时,浏览器应该显示应用程序的初始页面: http://localhost:8080/sessionpagination-wsclient/

昨晚多几分钟的准备,今天少几小时的麻烦。

将GoogleMap添加到示例JSF目录应用程序中

相关文章:

你感兴趣的文章:

标签云: