首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

JSF 2.0 Ajax 世界中的 GMaps4JSF -1

JSF 2.0 Ajax 世界中的 GMaps4JSF -1

简介GMaps4JSF 旨在集成 Google 地图和 JavaServer Faces (JSF),使 JSF 开发人员只使用几个 JSF 标记就可以构造复杂的全景街拍图。您还可以轻松向地图添加几个不同的组件(标记、信息文本、控件、地表覆盖、多边形、多段线)。GMaps4JSF 还可以向组件添加不同的服务端和客户端事件,无需编写 JavaScript 代码来绑定事件和组件。您只需在实现组件的客户端事件处理程序时编写 JavaScript 代码。
Ajax 是任何当代 Web 应用程序中的主要技术。尽管在 JavaServer Faces 的早期版本中没有引入 Ajax,但许多 JSF 组件库(如 Apache MyFaces Trinidad、JBoss RichFaces、ICEFaces 等)也可以提供 Ajax。好消息是,在 JSF 2.0 实现中已经提供了 Ajax 的本机支持。            
在本文中,我介绍了如何在 JSF 2.0 应用程序中配置 GMaps4JSF,并简单介绍了 JSF 2.0 Ajax。最后,我演示了如何使用 GMaps4JSF 和 JSF 2.0            Ajax 构建一个简单的 mashup 应用程序。
使用 JSF 2.0 应用程序配置 GMaps4JSF首先,使用 JSF 2.0 应用程序配置 GMaps4JSF。要做到这一点:
注册 Google Maps API(见 )。您需要接受使用协议并注册将使用应用程序的站点。然后,Google 将为您的应用程序提供一个密钥。
图 1. 注册 Google               Maps API为了使用 Google Maps API,您必须在页面中包含 Google Maps API。清单 1 展示了必须在 <h:head> 标记中包含的 Google Maps API 脚本。您可以在 Google Maps API 文档(见 )中查看如何使用该代码的详细信息。
清单 1. 包含 Google Maps API 的头文件代码
1
2
3
4
5
6
7
<head>
     <script
          src="//maps.google.com/maps?file=api&amp;v=2&amp";
          key="gen_website_key"
          type="text/javascript">
     </script>
</head>




在清单 1 的代码中,您需要将短语 "gen_website_key"            替换为注册时提供的密钥。图 2 展示了 Google Maps 网站上该密钥的示例,以及它如何适应您的代码。
图 2. 放入 Google Maps API 脚本包含的页面 <h:head> 标记接下来您需要 GMaps4JSF 的 JAR 文件。从项目网站下载最新版(见 )。图 3 展示了项目页面右边的下载链接。
图 3. 下载最新的库截屏 jar将下载的 JAR 文件放入 JSF 2.0 Web 应用程序的 WEB-INF/lib 目录。
最后,将清单 2 中的库声明添加到 XHTML 页面以便使用 GMaps4JSF 组件。
清单 2. GMaps4JSF 组件的库声明
1
2
3
4
5
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:m="http://code.google.com/p/gmaps4jsf/">

返回列表