使用JPA时jMaki小部件中的动态数据

jMaki提供了一批可内嵌于Web应用程序的数据小部件。要使大部分小部件派上用场，需将其绑定到数据库后端，例如，我们来考虑设计一个能显示您需要的股价信息的Table小部件。本文将阐述创建此类Web应用程序的步骤，该应用程序部署在GlassFish V2上，其中包含一个jMaki包装的Yahoo Data Table小部件，用于从JavaDB取回数据。 　　创建Web应用程序项目
　　在 NetBeans IDE 5.5.1中, 创建一个新的 Web Application 项目并命名为 jmaki-jpa。
　　如下所示，选择GlassFish V2作为Server：

　　在创建项目的同时，通过单击 Next 按钮添加 jMaki Ajax Framework。
　　如下所示，选择 Standard 布局：
单击 Finish。
　　配置Database
　　在NetBeans IDE的 Runtime 选项卡中，展开Databases，连接到默认的数据库（URL为 jdbc:derby://localhost:1527/sample [app on APP])。用户名和密码都指定为 app。
　　右击新建的连接并选择 Execute Command...，输入如下查询以生成表定义：
[font=NSimsun]create table COMPANY (id int,
　　　　　　　　　　　companyName varchar(255),
　　　　　　　　　　　price float,
　　　　　　　　　　　change float,
　　　　　　　　　　　percentChange float,
　　　　　　　　　　　lastUpdated varchar(50),
　　　　　　　　　　　PRIMARY KEY (id))[/font]
　　右击数据库连接，选择 Refresh 后可在Tables树中看到新建的表。选择 COMPANY 表，右击并选择 Execute Command...，输入：
[font=NSimsun]insert into COMPANY values (1, 'A Co', 71.72, 0.02, 0.03, 'Jan 1, 2007, 10:00am' );
insert into COMPANY values (2, 'B Inc', 29.01, 0.42, 1.47, 'Feb 1, 2007, 10:00am' );
insert into COMPANY values (3, 'C Group Inc', 83.81, 0.28, 0.34, 'Mar 1, 2007, 10:00am' );
insert into COMPANY values (4, 'D Company', 52.55, 0.01, 0.02, 'Apr 1, 2007, 10:00am' );
[/font]现在，我们的数据库结构就已创建并填充好了。 创建映射到数据库的JPA (Java Persistence API) Entity类
　　在项目窗口中选择 jmaki-jpa 项目，右击并选择 New，接着选择 Entity Classes From Database...。
　　选择 jdbc/sample 作为 Data Source。
　　在 Available Tables 中选择 COMPANY，单击 Add，输入如下值：
单击 Next。
　　如下所示，指定包名称为 server ：

　　单击 Create Persistence Unit... 创建持久性单元，输入如下值：
单击 Create。
　　单击 Finish。
　　在您创建的项目中，右击 Web Pages，选择 New 和 JSP...。如下所示，命名为 data ：
然后单击 Finish。
　　用如下内容替代模板 data.jsp 中的所有内容：
[font=NSimsun]<%@ page import="java.util.*" %>
<%@ page import="server.Company" %>
<%@ page import="javax.persistence.*" %>
<%
　　EntityManagerFactory emf = Persistence.createEntityManagerFactory("jmaki-jpaPU");
　　EntityManager em = emf.createEntityManager();
　　List<Company> list = em.createQuery("select c from Company c").getResultList();
　　out.println("[");
　　for (int i=0; i<list.size(); i++) {
　　　　Company c = list.get(i);
　　　　out.println("['" + c.getCompanyname() + "'," +
　　　　　　c.getPrice() + "," + c.getChange() + "," +
　　　　　　c.getPercentchange() + ",'" + c.getLastupdated() +
　　　　　　"']");
　　　　if (i < list.size()-1)
　　　　　　out.println(",");
　　}
　　out.println("]");
%>添加和配置jMaki小部件
　　从 Main Content Area 中的jMaki Palette，将一个 Yahoo Data Table 小部件拖放到生成的 index.jsp 中。
　　将生成的代码段从以下内容：
[font=NSimsun]<a:widget name="yahoo.dataTable" args="{
　　columns :[
　　　　{title : 'Company', width : 200, locked:false},
　　　　{title : 'Price', width : 75, renderer: 'usMoney'},
　　　　{title : 'Change', width : 75, renderer: 'change'},
　　　　{title : '% Change', width : 75, renderer: 'pctChange'},
　　　　{title : 'Last Updated', width : 85, renderer: 'italic'}
　　]}"
　　value="[
　　　　['A Co',71.72,0.02,0.03,'9/1 12:00am'],
　　　　['B Inc',29.01,0.42,1.47,'9/1 12:00am'],
　　　　['C Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
　　　　['D Company',52.55,0.01,0.02,'9/1 12:00am']
　　]" />
[/font]修改为：
[font=NSimsun]<a:widget name="yahoo.dataTable" args="{
　　columns :[
　　　　{title : 'Company', width : 200, locked:false},
　　　　{title : 'Price', width : 75, renderer: 'usMoney'},
　　　　{title : 'Change', width : 75, renderer: 'change'},
　　　　{title : '% Change', width : 75, renderer: 'pctChange'},
　　　　{title : 'Last Updated', width : 85, renderer: 'italic'}
　　]}"
　　service="data.jsp" />[/font]
[font=NSimsun][/font]
　　新的文本以粗体突出显示。 service 属性通知jMaki运行时从 data.jsp 处而非从静态数据获取DataTable小部件所需的数据。
　　大功告成！单击NetBeans IDE 中的绿色按钮来运行该项目，或通过默认的键盘快捷方式（F6）。您的浏览器将显示该应用程序部署为：
　　这个jMaki包装的Yahoo Data Table小部件现在从JavaDB取回数据。
　　更新：基于用户请求，这里由Java WebStart公开了该示例的一个NetBeans项目。另外，您也可以下载该项目并随意查看。感谢Geertjan的提示！
[/font]