您的位置：Java->在jMaki中对表格进行查询和删除: Sun Functional Campus Ambassador

在jMaki中对表格进行查询和删除: Sun Functional Campus Ambassador2008-04-29 来自：villa123  [收藏到我的网摘]

jMaki集成了Dojo，Yahoo,Google Web ToolKit等Ajax框架，使用jMaki框架可以使web应用程序用户体验迅速提升，本实验通过使用Dojo的Data Table，通过JPA(Java Persistence API)来实现与后台数据库进行交互。



软件需求

开始之前，需要在您的计算机中安装以下软件。

1、JavaSE 5以上版本
2、Netbeans IDE 6.0 beta 或以上的版本(自带JavaDB)，注意选择完全安装版
3、Netbeans jMaki ajax support,该插件可以通过在Netbeans中选择“工具(Tools)”-“插件(plugin)”-“可用插件(available)”，在列表中可以找到该插件。

实验步骤

第一部分：查询功能(30分钟)

1、构建数据库：在Netbeans里打开"服务(Runtime)"窗口，展开数据库节点，右键单击"jdbc:derby://localhost:1527/sample"这个连接，选择连接，注意用户名和密码都是app。再次右击该连接，选择"执行命令(Execute Command)",输入以下SQL脚本并执行：
create table BOOKS (title varchar(255),
author varchar(255),
isbn varchar(255),
description varchar(255),
PRIMARY KEY (isbn))

该SQL语句创建了BOOKS表格，以下SQL语句在表格中插入一些数据：
INSERT INTO BOOKS VALUES('Galloway Book of Running', 'Jeff Galloway', 'ABC001', 'The best book on running');
INSERT INTO BOOKS VALUES('The Complete Book of Running', 'James Fixx', 'ABC002', 'Oldest book of running');
INSERT INTO BOOKS VALUES('The Runners Handbook', 'Bob Glover', 'ABC003', 'Bestselling Guide for Beginning and Intermediate Runners');
INSERT INTO BOOKS VALUES('Daniel Running Formula', 'Jack Tupper Daniels', 'ABC004', 'Proven programs 800m to Marathon');
INSERT INTO BOOKS VALUES('Chi Running', 'Danny Drever', 'ABC005', 'Revolutionary approach to effortless, injury-free running');
INSERT INTO BOOKS VALUES('Running for Mortals', 'John Bingham', 'ABC006', 'A common sense plan for changing your life through running');
INSERT INTO BOOKS VALUES('Marathoning for Mortals', 'John Bingham', 'ABC007', 'Regular person guide to marathon');
INSERT INTO BOOKS VALUES('Marathon', 'Hal Higdon', 'ABC008', 'The Ultimate Training Guide');

2、创建项目：新建一个Web应用程序，命名为jmakijpademo：


选择jmaki框架：


点击完成，主窗口会自动打开index.jsp，在组件面板中拖一个Dojo的Table到标签：

下面，如下图所示：


2、创建持久化单元。右键单击jmakijpademo项目结构，选择"新建"-"通过数据库生成实体类"，首先选择新建数据源：



选择BOOKS：




点击下一步，再点击"创建持久化单元"：



点击创建后，"包名"写上 server：



点击完成，持久性单元即被创建，在配置文件中我们就可以看到persistence.xml这个持久化单元的配置文件了。

3、添加NameQuery。打开源包中的server-Books.java，在
@NamedQueries({@NamedQuery(name = "Books.findByTitle",........
中的@NamedQuery前面添加一个NamedQuery:
@NamedQuery(name = "Books.findAll", query = "SELECT b FROM Books b"), 注意后面的逗号不要漏了。


4、创建数据读取服务data.jsp。右键单击项目结构，新建一个JSP页面，命名为data，将页面代码替换为以下代码：
<%@ page import="java.util.*" %>
<%@ page import="server.Books" %>
<%@ page import="javax.persistence.*" %>

<%
EntityManagerFactory emf=Persistence.createEntityManagerFactory("jmakijpademoPU");
EntityManager em = emf.createEntityManager();

List list = em.createNamedQuery("Books.findAll").getResultList();

out.println("{columns : [" +
"{ label : 'Title', id : 'title'}," +
"{ label :'Author', id : 'author'}," +
"{ label :'ISBN', id : 'isbn'}," +
"{ label :'Description', id : 'description'}" +
"],");

out.println("rows: [");
for (int i=0; i Books b = list.get(i);
out.print("{ id: '" + b.getIsbn() + "', " +
"title: '" + b.getTitle() + "'," +
"author: '" + b.getAuthor() + "'," +
"isbn: '" + b.getIsbn() + "'," +
"description: '" + b.getDescription() + "'}");
if (i < list.size()-1)
out.println(",");
else
out.println();
}
out.println("] }");
%>

注意红色部分的代码是持久化单元的名称，这个名称对应于persistence.xml中的持久化单元名称，必须对应，否则程序将无法正常运行。这段代码事实上是通过持久化单元管理者读取出所有的记录，并构造一个JSON的数据结构

5、打开index.jsp,把widget标签替换为以下：


6、运行项目，我们可以看到数据表中的数据都是从数据库中读取的：





第二部分：删除功能（15分钟）

1、添加删除的NamedQuery:在NamedQueries集合里面添加：
@NamedQuery(name = "Books.deleteByIsbn", query = "DELETE FROM Books b WHERE b.isbn = :isbn")


2、创建删除服务delete.jsp。创建一个JSP文件，命名为delete，将代码替换为以下的代码：
<%@ page import="javax.persistence.*" %>

<%
String isbn = request.getParameter("isbn");
EntityManagerFactory emf = Persistence.createEntityManagerFactory("jmakijpademoPU");
EntityManager em = emf.createEntityManager();

em.getTransaction().begin();
em.createNamedQuery("Books.deleteByIsbn").
setParameter("isbn", isbn).
executeUpdate();
em.getTransaction().commit();
%>

注意持久化单元的名称一定要正确。

3、我们企图通过响应客户端的一个onSelected事件，在此事件触发后，我们就把选中的那条记录删掉。由于这是一个客户端事件，我们必须在客户端去处理这个事件。打开glue.js，找到
jmaki.subscribe("*onSelect", function(args) {
jmaki.log("glue.js : onSelect request from: " + args.widgetId);
});
这段代码，在jmaki.log这行下面添加以下处理代码：
jmaki.doAjax({method: "POST",
url: "delete.jsp?isbn=" + encodeURIComponent(args.value.isbn),
callback: function(_req) {
jmaki.publish('/jmaki/table/removeRow', { targetId: args.value.isbn });
}
});

这里，首先获得选中的isbn号，传递给delete.jsp，在数据库中删除选中的记录，回调的时候再把最新的数据发布(在页面删除那行记录)。

4、打开index.jsp，在widget标签里面添加suscribe属性，变为：



5、单击项目右键，选择"取消部署后再重新部署"，刷新一下页面，点击某一行，这行就会被删掉。我们可以在HTTP监视器里面看到这一过程：



当然，我们也可以使用Yahoo的Data Table，其原理都是一样的。

Demo的来源：http://blogs.sun.com/arungupta/entry/totd_15_delete_update_row

推荐人评论

jMaki集成了Dojo，Yahoo,Google Web ToolKit等Ajax框架，使用jMaki框架可以使web应用程序用户体验迅速提升，本实验通过使用Dojo的Data Table，通过JPA(Java Persistence API)来实现与后台数据库进行交互。

用户评论

正在载入评论列表...