内容


使用 IBM Rational Application Developer V7.5 中的 JPA, Ajax 与 Dojo 工具开发 Web 2.0 应用程序

Rational Application Developer 提供了新的技巧,使 Web 2.0 应用程序结构变得更加简单

下载 Rational Application Developer 试用版 | 在线试用 Rational Application Developer
下载更多的 IBM 软件试用版,并加入 IBM 软件下载与技术交流群组,参与在线交流。

简介

IBM® Rational® Application Developer for WebSphere Software V7.5 (以下简称 Rational Application Developer)以及后续版本为开发人员提供了新的 Web 工具,来构建带有 Ajax 特性(异步 Java™Script 与 XML,Asynchronous JavaScript and XML),EJB3 (Enterprise Java™ Beans 技术)和 Web 2.0 特性包 (Web 2.0 Feature Pack),运行在 IBM® WebSphere ®Application Servers 上的应用程序。本文将向您展示,怎样快速使用 Rational Application Developer 的 Web 工具,应用这个附加特性包中包含的新功能,来构建一个简单的 Web 应用程序。

本文使用到的技术包括:

  • Java™ Persistence API (JPA)工具来访问一个数据库
  • Remote Procedure Call (RPC) Adapter 工具,来将 JPA 方法作为 JavaScript Object Notation (JSON)-RPC Web 服务公布
  • Dojo Web 开发工具

先决条件

如果您想要构建程序,请确认您已经安装了以下工具 :

  • IBM Rational Application Developer
  • 一个能支持的服务器,下面二者任选其一:
    • WebSphere Application Server V6.1,带有 EJB3 和 Web 2.0 特性包 (Web 2.0 Feature Packs)
    • WebSphere Application Server V7.0,带有 Web 2.0 特性包

本文还解释了怎样使用 IBM WebSphere Application Server V7.0。您也可以选择使用 WebSphere Application Server V6.1。不过注意,WebSphere Application Server V6.0 只支持 Web 2.0 特性包,尚不支持 EJB3 特性包。所有三种 WebSphere 环境都与 Rational Application Developer 进行了捆绑。

程序范例介绍

本文描述了您(作为一个开发人员),怎样使用 Rational Application Developer 中包含的一个新的 Web 工具,来构建一个端到端的 Web 应用程序。

您可以创建一个动态的 Web 项目。在这个 Web 项目中,JPA 实体(JPA entities)与 JPA Manager beans 将从一个示例数据库中创建。RPC Adapter Service 将用于公布(来自 JPA Manager bean)一个方法,该 Manager bean 可以通过 http 地址访问并返回一个结果。该结果将作为 JSON 格式化。

在 Web 项目内,一个 Web 页面将使用 Rational Application Developer 的工具,来生成 RPC Adapter JSON 结果。在运行时,Web 页面将显示 Dojo 组件 JSON 结果中返回的数据。构建程序的过程,通过使用在下面章节中介绍的 Rational Application Developer 工具,可以简化。

构建端到端的 Web2.0 应用程序

您将会在一个动态的 Web 项目中构建作为范例的程序。

创建一个 Web 项目

创建一个新的 Dynamic Web Project 与 EAR,如图 1 所示:

  1. 选择 File>New>Dynamic Web Project
  2. 输入 MyWebProject 作为 Project Name
  3. 选择 WebSphere Application Server V7.0 作为 Target Runtime
    1. 如果您正在应用于一个远程的 WebSphere Server,选择运行时存根。
  4. 接受剩余其他地方的默认设置。
  5. 点击 Finish
  6. 如果成功,切换至 Web 透视图。
图 1. New Dynamic Web Project 向导
项目选项, 包括 Target Runtime
项目选项, 包括 Target Runtime

Enterprise Explorer 视图中会显示出 Web 项目和 EAR 。为了访问范例 Web 程序中的数据,使用 JPA 工具来创建永久性的实体。首先,向项目添加 JPA facet。

  1. 右键点击 Web 项目, MyWebProject 选择 Properties
  2. 前进至 Project Facets 透视图。
  3. 检查 Java Persistence
  4. 点击 OK

添加 JPA facet 将会在 java 源 META-INF 文件夹下创建 JPA 配置 .xml 文件(persistence.xmlorm.xml) ,如图 2 所示。另外,它创建了(在 Web 项目中)一个顶级的 JPA Content 节点,该节点能够提供对 Persistence XML Editor 的快速访问。

图 2. Web 项目中的 JPA 内容
 Enterprise Explorer 中的树状视图

在生成 JPA 实体之前, 向 Web 项目添加一个数据库链接。在本例中,使用了 Derby Sample Database 。您可以按照以下操作创建数据库的链接:

  1. 右键点击您的 Web Project(MyWebProject))。
  2. 选择 Properties
  3. 前进至 JDBC Connections 页面。
  4. 点击 New 按钮。
  5. 选择已经存在的 Derby Sample Connection,如图 3 所示。
图 3. 选择 Derby Sample Connection
顶部的 Connections,底部的 Properties
顶部的 Connections,底部的 Properties
  1. 点击 Finish

Derby Sample Connection 出现在 Web Project properties JDBC Connection 页面中,如图 4 所示。Runtime 链接细节会显示出关于 JDBC 链接的信息,包括资源参考名,数据源类名,数据库名,以及类的位置。 一个资源参考会添加至 Web.xml(在 WebContent/WEB-INF 文件夹中)。参考指向了资源参考名以及目标数据源,这些都会在扩展的 EAR 中自动得到配置。

图 4. 项目中的 JDBC 链接中的 Derby Sample Connection
左边的树状视图列表, 右边的细节
左边的树状视图列表, 右边的细节

该数据库链接可以被检查,并在如图 5 所示的 Data Source Explorer 视图下查看。在该视图下列出了所有的数据库链接。通过展开每一个数据库链接,您可以检查数据库,项目,表格与列。

图 5. Data Source Explorer 视图
Derby Sample Connection Apache v 10.1.2.1 细节
Derby Sample Connection Apache v 10.1.2.1 细节
  1. 通过点击 OK 按钮,来关闭 Web Project 属性对话框,现在就可以创建 JPA 实体了。

创建 JPA 实体和 beans

Rational Application Developer V7.5 的 JPA 工具,使您能够快速地创建 JPA 实体。JPA 实体是一个数据库的 Java 类的代表,并使您能够与数据库没有链接的模型相交流 。 一个 JPA 实体中的注释,可以显示出表格的列,其他表格之间的关系,主关键字以及等等。

Rational Application Developer 提供的工具,还能生成 JPA Manager beans,这是在 Rational Application Developer V7.5 中引入的概念,它向您提供了查询数据库的简化通用访问权,并组成了 EJB 与 Web 模型中的 JPA 数据。如果您想要得到关于 Rational Application Developer 的 JPA 工具的更多细节信息,以及特定的指导方法,您可以在程序的帮助文件中找到这些。

按照以下步骤创建 JPA 实体:

  1. 右键点击您的 Web 项目(MyWebProject),并选择 JPA Tools>Add JPA Manager Beans
  2. 点击 Create New JPA Entities 按钮以启动 Generate Entities 向导。
  3. 选择 Derby Sample Connection 和 SAMP 项目,如图 6 所示。
图 6. 选择数据库链接以创建 JPA 实体
数据库设置的对话框
数据库设置的对话框
  1. 点击 Next
  2. 在 Generate Entities from Database 页面上,选择 EMPLOYEE 表格,并选择 Synchronize Classes 复选框,如图 7 所示。
图 7. 选择表格以生成 JPA 实体
表格的列表
表格的列表
  1. 点击 Finish。JPA 实体会被创建,并重新回到 Add JPA Manager Bean 向导。Employee 实体将出现在可得到实体的列表中。

JPA Manager Bean 向导向您提供的工具,使您能够访问一个数据库,并有效的管理它的实体。通过使用自动生成的查询,或者使用包含的查询构建器生成的查询,可以查询数据库。Manager Bean 向导会显示出一个数据库中包含的关键字与关系,并允许您去定义它们。改变 JPA Manager Bean 向导中的选项,将能够编辑 Employee 实体或者 EmployeeManager bean 中的代码。

  1. 在 JPA Manager Bean 向导中,检查 Employee 实体,如图 8 所示。
图 8. JPA Manager bean Wizard 中可见的 Employee 实体
可用 JPA 视图的列表
可用 JPA 视图的列表
  1. 选择 Employee 实体复选框并点击 Next。JPA Manager Bean 向导会显示出。如图 9 所示。
  2. 如果出现一条出错信息,声称没有定义一个主关键字,那么您可以选择 empno 作为主关键字。这将向 employee 实体添加一条 @Id 注释,并解决这个错误。
图 9. JPA Manager Bean 向导
顶部的 JPA Manager bean ,左部的任务
顶部的 JPA Manager bean ,左部的任务
  1. 编辑 getEmployee 查询,以返回 employee 的列表。
  1. 转到 Query Methods 页面。
  2. 选择 getEmployee 查询并点击 Edit
  3. Result Attributes 项上,清除掉与经济消息有关的属性,以在查询结果中隐藏掉这条隐私消息(换句话说,就是清除掉 bonuscomm,与 salary 属性,如图 10 所示)。
图 10. 为一条已命名的查询编辑属性
要返回查询的属性的列表
要返回查询的属性的列表
列表 1. 使用数据源或者资源参考
	<jta-data-source>java:comp/env/Derby Sample Connection</jta-data-source>

选择第二个选项,每一个属性将会添加至 persistence.xml,如列表 2 所示。

列表 2. 通过属性直接设置链接
<properties>
	<property name="openjpa.jdbc.Schema" value="SAMP"/>
	<property name="openjpa.ConnectionDriverName" 
value="org.apache.derby.jdbc.EmbeddedDriver"/>
	<property name="openjpa.ConnectionURL" value="jdbc:derby:D:\DevWorksArticle
\.metadata\.plugins\com.ibm.datatools.db2.cloudscape.driver\SAMPLE;create=true"/>
	<property name="openjpa.ConnectionUserName" value=""/>
	<property name="openjpa.ConnectionPassword" value=""/>
	</properties>

现在 JPA 实体与管理 bean 已经被创建出来。注意,该实体创建于 src/entities 目录之下,而管理 bean 创建于 src/entities/controller 目录下,如图 13 所示。

图 13. Enterprise Explorer 中的 JPA 实体与管理 bean 类
树状视图的 Java Resources: src 文件夹

Employee 实体类包含了表格与它包含的列。EmployeeManager JPA Manager bean 包含了 getEmployee() 方法,该方法创建于 JPA Manager bean’s Query 构建器中。接下来,方法 getEmployee() 将作为带 RPC Adapter 的 JSON-RPC Web 服务而公布,而 JSON 结果将在 Web 页面中使用。

注意:Rational Application Developer V7.5 同样包含了新的 Web 工具,使组成 JavaServer Faces Web 页面的 JPA Data 更加容易。

将 JPA Manager bean 方法作为一个 RPC Adapter Web 服务公布

RPC Adapter 是一个 WebSphere 工具(包含在 Web 2.0 特性包 中),该工具将服务边的代码作为 Web 服务来公布。这些服务可以通过一个 http 地址访问,并以 XML 或者 JSON 的方式返回一个结果。Rational Application Developer 提供的工具,能快速在一个 Java 类中公布一个方法,并作为一项 Web 服务而公布。JPA Manager bean 中的 getEmployee() 方法,将在本例中通过 RPC Adapter 公布。

在使用 Rational Application Developer V7.5 中的 RPC Adapter 功能之前,向 Web Project 添加 Web 2.0 Server-side 技术项。

  1. 右键点击 Web Project,MyWebProjct,并选择 Properties
  2. 转到 Project Facets 页面。
  3. 选择 Web 2.0 > Server-side technologies,如图 14 所示,并点击 OK
图 14. 添加 Server-side 技术项
列表在左边,细节在右边
列表在左边,细节在右边

接下来,创建 RPC Adapter 服务:

  1. 在 Enterprise Explorer 视图中,点击 Web Project (MyWebProject),并选择 Services>Expose RPC Adapter Service。随后会出现 Expose RPC Adapter Service 对话框。
  2. Web 项目将预填充于 Web Project 下拉项中。
  3. 点击 Class 区域旁边的 Browse按钮。
  4. 在 Select a Java Class to Expose 对话框中,输入 JPA Manager bean 类的名字:EmployeeManager。EmployeeManager 将会在匹配项的列表中显示出来,选中它并点击 OK
  5. 注意来自 JPA Manager bean 的方法列表,将出现在对话框中。
  6. 选择 getEmployee 方法,如图 15 所示。
图 15. 选择 JPA Manager bean 方法以作为一个 RPC Adapter Service 而公布
选择所有或全不选择选项的方法列表
选择所有或全不选择选项的方法列表
  1. 点击 Next
  2. Expose RPC Adapter Service 向导的 Configure Methods 页面,就是配置服务的地方,如图 16 所示。接受这个页面中的其他默认设置。
图 16. RPC Adapter Configure Methods 页面
配置 Alias,Description,HTTP Method,以及 URL
配置 Alias,Description,HTTP Method,以及 URL
  1. 点击 Finish

RPC Adapter Service 将会被创建。服务将出现在 Services 节点的 Enterprise Explorer 视图中。服务的配置包含在一个新创建的文件中 :WebContent/WEB-INF/RPCAdapterConfig.xml。打开这个文件将会载入 RPC Adapter Configuration 编辑器,在这里 RPC 配置可以在图形化编辑器中编辑。

当您创建 JPA Manager bean 查询时,带有 java.sql.Date 种类的区域将仍然被选中。种类 java.sql.Date 需要由 RPC Adapter 通过转化器特别处理。在 Date 区域向 RPC Adapter 添加一个转化器:

  1. 打开 RPCAdapterConfig.xml 文件。
  2. 在 RPC Adapter 概述中选择 Converters
  3. 点击 Add 按钮。
  4. 在 Add Item 对话框中选择 Converter,并按下 OK
  5. 如果想得到转化器的细节,您可以输入以下内容,如图 17 所示:
    1. Bean:java.sql.Date
    2. Converter:com.ibm.websphere.rpcadapter.converters.sql.Date
图 17. RPC Adapter Configuration Editor
左边的 Overview  , 右边的 Details
左边的 Overview , 右边的 Details

在 WebSphere Application Server V7.0 上测试 RPC Adapter。

  1. 为了简单的测试 Web 服务,在 Services/Employee Manager 之下的 Enterprise Explorer 视图中右键点击 getEmployee 方法。
  2. 选择 Run As>Run on Server,如图 18 所示。
图18. 运行 getEmployee() JSON-RPC 服务菜单选项
命令菜单
命令菜单

以下的 URL 将在一个 Web 浏览器中打开:

http://localhost:9080/MyWebProject/RPCAdapter/httprpc/EmployeeManager/getEmployee

该 Web 浏览器将会启动,并下载结果。

  1. 在一个文本编辑器中打开结果文件,例如在 NotePad 中打开该文件。来自 RPC adapter 服务的 JSON 结果的开始部分,如列表 3 所示的代码那样。
列表 3. 来自 RPC adapter 服务的部分 JSON 结果
{"result":[{"lastname":"ADAMSON","hiredate":"1972-02-12T00:00:00-0500",
"edlevel":16,"workdept":"D11","sex":"M","firstnme":"BRUCE","midinit":"",
"empno":"000150","job":"DESIGNER","birthdate":"1947-05-17T00:00:00-0400",
"phoneno":"4510"}

来自 Derby 示例数据库的 JSON 结果在 <field>:<value> 注释中格式化,通过使用新 Rational Application Developer V7.5 Web Tools,可以包含在一个 Dojo Web 页面中。

使用 Dojo 来描述 Web 前端

为了使用 Rational Application Developer V7.5 Web Projects 中的 Dojo Web Tools,首先向 Web Project 添加 Dojo 项。

  1. 在 Web Project 的属性中,通过转至 Project Facets 页面并选择 Web 2.0 > Dojo Toolkit,来添加 Dojo 项,如图 19 所示。
图 19. 添加 Dojo Toolkit 项
Web 2.0
Web 2.0
  1. 如果您点击页面底部的 Further Configuration Available 信息,您就能指定 Dojo 资源的位置。默认条件下使用包含在 Rational Application Developer V7.5 中的 Dojo 版本。在写本文的时候, Dojo 1.1.1 已经包含在 Rational Application Developer V7.5 之中。
  2. 在添加 Dojo facet 项之后,这些选项可以在 Dojo Toolkit 页面的项目属性中访问,如图 20 所示。
  • Target Runtime
  • Workspace
  • File System
  • Dojo Loader
  • Dojo CSS
  • Dijit CSS
  • Theme CSS
  • Copy to current project
  • Target Folder
图 20. Dojo Toolkit 资源页面
引入或者共享 Dojo 工具栏的对话框
引入或者共享 Dojo 工具栏的对话框

组成 RPC adapter 服务的 Web 页面将会被构建成两部分 。首先, Dojo 组件将会被添加至页面中。第二,访问 RPC adapter 和运行时构建页面的逻辑,将会使用 JavaScript 来创建。

创建一个新的 Web page 页面:

  1. 选择 File > New > Web Page
  1. File Name:dojoExample.html
  2. Folder:/MyWebProject/WebContent
  3. Template:HTML/XHTML
  1. 点击 Finish
  2. dojoExample.html 文件将在 Web 编辑器中打开。
  3. 注意新 Web 页面配置版中的 Dojo palette drawers,如图 21 所示。在向 Web 项目添加 Dojo facet 之后,在新的 Web 页面中可得到 Dojo drawers 。
图 21. Dojo Palette drawers
Outline, Snippets, 以及 Palette 页签
  1. 当您从配置版中,拖拉 Dojo 组件至 Rational Application Developer V7.5 Web 编辑器中的页面时,使用 Split 视图,以同时查看 Preview 与 Source 视图。
  2. 拖拉 Dojo 组件至源视图,以得到 Dojo 标签的精确位置。选择 Page>Show Panes>Preview + Source

向页面添加 Dojo Components:

  1. the Dojo – Layout drawer 中,选择 Split Container
  2. 拖拉 Split Container <body> 标签内的源视图中去。随着您拖拉 Dojo 组件到 Web 页面中,@import 声明(for styles)与 dojo.require 声明(for components)将会自动添加至 <style> 标签与 <script> 标签中。注意在 <body> 标签中生成的如列表 4 所示的代码。
列表 4. 生成的 SplitContainer div 标签
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal" sizerwidth="7" 
activesizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;"></div>
  1. Dojo > Layout drawer 中,<div></div> 之间,为 Split Container 拖拉两个 Content Panes。左边内容格子会包含了表格,右边的会包含区域。
  2. 在以 <h1> 样式开始 <body> 声明之后,直接为页面添加一个标题。

一旦两个 Content Panes 出现在格子中时,标签 <body> 内部将如列表 5 所示的那样。

列表 5. 在添加 SplitContainer and ContentPanes 之后的 HTML
<h1>Rational Application Developer V7.5 JPA, RPC Adapter and Dojo Example</h1>
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal" sizerwidth="7" 
activesizing="true" style="border: 1px solid #bfbfbf; width: 400px; height: 300px;"> 
<div preload="true" dojotype="dijit.layout.ContentPane"> </div> 
<div preload="true" dojotype="dijit.layout.ContentPane"> </div></div>

继续构造 dojoExample.html 页面。

  1. 在左 Content Pane 内部(在 <div> 标签之间)在配置版中从 Dojo – Other drawer 中去掉 Grid 组件。设置模型属性为等同 model,并构造结果属性为 layout,如列表 6 所示。
列表 6. 页面代码中的 Dojo 格子
<div id="grid" dojotype="dojox.Grid" model="model" structure="layout"></div>
  1. 在右 Content Pane 内部,在配置版中从 Dojo > Form drawer 去掉五个 TextBox 组件。
  2. 为每一个 <input> 标签添加一个 Id 属性,按照以下的顺序:fnamelnameworkdeptjob,与 phoneno
  3. 在每一个文本区域的 <input> 标签之前,按照以下顺序:First NameLast NameWork DeptJob Title,与 Phone,为每一个区域添加一个标签。
  4. 在五个标签之中的第二个之前添加一道分割线 <br/>,并更改 Split Container 的宽度为 800 像素,这样标签和区域将会在同一条线上显示出来。
  5. 到此为止,我们就完成了添加所有需要的 Dojo, 以构建示例数据库的工作。前言与 source split pane 如图 22 所示的那样。
图 22. 在向页面拖拉 Dojo 组件之后的 Preview and source split 视图
顶部的设计视图,底部的代码
顶部的设计视图,底部的代码

添加 JavaScript

现在您可以添加 JavaScript 以填充 Dojo grid 和文本区域。JavaScript 将在 RPC adapter 中访问公布 JPA 方法的 URL,然后使用 Dojo 组件中的结果。这是一个取得数据地方的示例 ,但是数据也可以通过使用相似的 RPC adapter 服务工具,来传送至数据库中。

当您书写 JavaScript 时,使用 Source 视图将会非常有用。Rational Application Developer V7.5 将不会生成需要的 JavaScript ,来填充表格或者文本区域,所以在列表 7 (带有评论)中提供了 JavaScript。

不论在任何地方,Dojo Toolkit 中 dojo,dojox,或者 dijit 的一部分,在 <script> 标签中都会使用的到,并支持内容。

列表 7. 和前面创建的 Dojo 组件一起使用的 JavaScript 组件
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.SplitContainer");
dojo.require("dojox.grid.Grid");
dojo.require("dijit.form.TextBox");
// manually added dojox.grid._data.model require for the grid's model
dojo.require("dojox.grid._data.model");

var clickedUser;
// a grid view is a group of columns
var view1 = {
			cells: [
			[{name: 'First Name'}, {name: 'Last Name'}]
			]
};
// a grid layout is an array of views.
var layout = [ view1 ];
// define a data array to contain the grid contents 
data = [];

// global var "model" to represent grid table model
model = new dojox.grid.data.Table(null, data);   
		
// on page load init() is called to call the RPC adapter service and call fillGrid
function init(){
// call the RPC Adapter service using dojo's xhrGet function which calls another function
// to handle the JSON result response
dojo.xhrGet({
		    url: "/MyWebProject/RPCAdapter/httprpc/EmployeeManager/getEmployee",
		    load: fillGrid,
		    handleAs: "JSON",
		    error: function(type, error){ alert("Error!" + error.message)}
		});
}

// called by init() to fill the grid using the response parameter containing the 
// JSON result of the RPC adpater service
function fillGrid(response, ioArgs){
var users = response.result;
for(i=0; i<users.length; i++){
// the JSON result is using <response>.<field> notation to extract the value from the 
JSON result
data.push([users[i].firstnme,users[i].lastname]);
}
// fill the grid model with data from the JSON result
model.setData(data);
};

// global variable rowClicked to store the row clicked index value 
var rowClicked = 0;

// getDetails is called from the onRowClick attribute of the grid calls the RPC adapter
// service to gather more details about the user
function getDetails(e) {
	// capture the rowIndex of the event e
	rowClicked = e.rowIndex;
	dojo.xhrGet({
		    url: "/MyWebProject/RPCAdapter/httprpc/EmployeeManager/getEmployee",
		    load: displayUserDetails,
		    handleAs: "JSON",
		    error: function(type, error){ alert("Error!" + error.message)}
		});
}

// called by the getDetails() function and fills the text fields with information from 
//   the RPC adapter service's JSON result 
function displayUserDetails(response, ioArgs){
var users = response.result;
	
// set the value of the text field using the dijit id
// the JSON result is using <response>.<field> notation to extract the value from 
// the JSON result
dijit.byId('fname').setValue(users[rowClicked].firstnme);
dijit.byId('lname').setValue(users[rowClicked].lastname);
dijit.byId('workdept').setValue(users[rowClicked].workdept);
dijit.byId('job').setValue(users[rowClicked].job);
dijit.byId('phoneno').setValue(users[rowClicked].phoneno);
};

</script>

以上的 JavaScript,同样还需要您去对页面的 HTML 做以下改变:

  1. 两个在 <style> 标签内添加的项目,以改善表格的外观与感觉:
  1. @import "dojo/dojox/grid/_grid/tundraGrid.css";
  2. #grid {
    border: 1px solid #333;width: 35em;height: 30em;}
  1. 接下来的编辑是在 <body> 标签内部:
  1. 一个 onload 属性,用于访问 init()JavaScript 函数,被添加至 <body> 标签:<body class="tundra" onload="init();">
  2. 在表格的 <div> 标签中:
    1. 属性 structure 被更改为 layout
    2. 属性 onRowClick 被添加以访问 getDetails JavaScript 函数。
    3. 表格的 <div> 标签现在看起来类似于:
      <div id="grid" dojotype="dojox.Grid" model="model" structure="layout" onRowClick="getDetails"></div>

<style> <body> 段落中完成的代码如列表 8 所示。

列表 8. dojoExample.html 样式与主体标签 HTML
<style type="text/css">
@import "dojo/dojo/resources/dojo.css";

@import "dojo/dijit/themes/tundra/tundra.css";

@import "dojo/dijit/themes/dijit.css";

@import "dojo/dojox/grid/_grid/tundraGrid.css";
#grid {
                        border: 1px solid #333;
                        width: 35em;
                        height: 30em;
                }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body class="tundra" onload="init();">
<h1>Rational Application Developer V7.5 JPA, RPC Adapter and Dojo Example</h1>
<div dojotype="dijit.layout.SplitContainer" orientation="horizontal"
	sizerwidth="7" activesizing="true"
	style="border: 1px solid #bfbfbf; width: 800px; height: 300px;">

<div preload="true" dojotype="dijit.layout.ContentPane">
<div id="grid" dojotype="dojox.Grid" model="model" structure="layout" 
    onRowClick="getDetails"></div>
</div>
<div preload="true" dojotype="dijit.layout.ContentPane">
	First Name: <input type="text" name="input1" id="fname" value=""
	dojotype="dijit.form.TextBox" trim="true">
	<br>Last Name: <input type="text"
	name="input10" id="lname" value="" dojotype="dijit.form.TextBox" trim="true">
	<br>Work Dept: <input
	type="text" name="input11" id="workdept" value="" dojotype="dijit.form.TextBox"
	trim="true">
	<br>Job Title: <input type="text" name="input12" id="job" value=""
	dojotype="dijit.form.TextBox" trim="true">
	<br>Phone No: <input type="text"
	name="input13" id="phoneno" value="" dojotype="dijit.form.TextBox" trim="true">
    </div>
</div>
</body>

Web 页面现在就完成了,您可以在一个支持服务器上公布并运行它。当您的浏览器载入该 Web 页面时,在左边会出现带一个表格的 Dojo split 容器,在右边会出现五个文本区域。表格中会填充入从 Derby 示例数据库中查询得到的姓与名。当您点击表格中的一行时,右边的文本区域会显示出关于用户的更多信息。

在 WebSphere Application Server V7.0 上运行 dojoExample.html 。

  1. 在 Enterprise Explorer 视图下,右键点击 dojoExample.html 并选择 Run As>Run on Server
  2. 在 Run on Server 对话框中,选择 WebSphere Application Server V7.0 并点击 Finish
  3. dojoExample.html 将在一个浏览器中启动,如图 23 所示。
图 23. 运行时的 dojoExample.html
左部的名字列表, 右边的个人细节
左部的名字列表, 右边的个人细节

您学到了什么?

使用 Rational Application Developer V7.5 提供的新功能,您创建了一个 Ajax Web 程序。该 JPA 工具用于创建一个实体,以及访问示例Derby 数据库的 Manager bean 。 RPC Adapter Service 在JPA Manager bean 中公布了一个方法,用于查询数据库。使用新的拖拉功能创建一个 Dojo Web 页面。手写的 JavaScript 会被添加,以从 http 地址访问 RPC 服务,并在Web 页面的Dojo 组件中显示出 JSON 结果。

致谢

非常感谢 Tracey Brown Burton,Tom Mutdosch,Sarah Stein,和 Jim Zhang 对本文所做的技术以及编辑支持。


相关主题

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Rational
ArticleID=346731
ArticleTitle=使用 IBM Rational Application Developer V7.5 中的 JPA, Ajax 与 Dojo 工具开发 Web 2.0 应用程序
publish-date=10202008