|
|
将 Google Map 添加到示例 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 中的示例代码
|
<h:commandLink action="#{MapBean.mapAction}" value="#{item.item.address.street1},
#{item.item.address.city}, #{item.item.address.state}"/>
|
JSF
commandLink
用于提供连接，点击后将显示对应于
address（由
value
标签显示） 的 Google Map。
commandLink
标签代表一个超连接，由 HTML
<a> 元素修饰。
commandLink
标签用于向应用程序提交一个 活动事件（action event） 。
commandLink action
属性指向一个
MapBean
ManagedBean（它在 faces-config.xml 文件中定义）：
|
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>
|
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
|
<navigation-rule>
<navigation-case>
<from-outcome>
map
</from-outcome>
<to-view-id>/item/map.jsp</to-view-id>
</navigation-case>
</navigation-rule>
|
在
map.jsp 中，Blueprints JSF
mapViewer
组件使用经度和纬度来显示 Google map：
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"/>
|
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/
参考资料：
|
|
|
|
|
|
|
Print-friendly Version
