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

Dynamic Data in jMaki Widgets Using JPA

http://blogs.sun.com/arungupta/entry/dynamic_data_in_jmaki_widgets

 

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

jMaki提供了一批可内嵌于Web应用程序的数据小部件。要使大部分小部件派上用场，需将其绑定到数据库后端，例如，我们来考虑设计一个能显示您需要的股价信息的Table小部件。本文将阐述创建此类Web应用程序的步骤，该应用程序部署在GlassFish V2上，其中包含一个jMaki包装的Yahoo Data Table小部件，用于从JavaDB取回数据。

1. 创建Web应用程序项目
1. 在 NetBeans IDE 5.5.1中, 创建一个新的 Web Application 项目并命名为 jmaki-jpa。
2. 如下所示，选择GlassFish V2作为Server：
   
   
3. 在创建项目的同时，通过单击 Next 按钮添加 jMaki Ajax Framework。
4. 如下所示，选择 Standard 布局：
   
   
   
   单击 Finish。
2. 配置Database
1. 在NetBeans IDE的 Runtime 选项卡中，展开Databases，连接到默认的数据库（URL为 jdbc:derby://localhost:1527/sample [app on APP])。用户名和密码都指定为 app。
2. 右击新建的连接并选择 Execute Command...，输入如下查询以生成表定义：
   
   create table COMPANY (id int,
                      companyName varchar(255),
                      price float,
                      change float,
                      percentChange float,
                      lastUpdated varchar(50),
                      PRIMARY KEY (id))
3. 右击数据库连接，选择 Refresh 后可在Tables树中看到新建的表。选择 COMPANY 表，右击并选择 Execute Command...，输入：
   
   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' );
   
   现在，我们的数据库结构就已创建并填充好了。
3. 创建映射到数据库的JPA (Java Persistence API) Entity类
1. 在项目窗口中选择 jmaki-jpa 项目，右击并选择 New，接着选择 Entity Classes From Database...。
2. 选择 jdbc/sample 作为 Data Source。
3. 在 Available Tables 中选择 COMPANY，单击 Add，输入如下值：
   
   
   
   单击 Next。
4. 如下所示，指定包名称为 server ：
   
   
5. 单击 Create Persistence Unit... 创建持久性单元，输入如下值：
   
   
   
   单击 Create。

单击 Finish。

4. 在您创建的项目中，右击 Web Pages，选择 New 和 JSP...。如下所示，命名为 data ：
   
   
   
   然后单击 Finish。
5. 用如下内容替代模板 data.jsp 中的所有内容：
   
   <%@ 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("]");
%>
6. 添加和配置jMaki小部件
1. 从 Main Content Area 中的jMaki Palette，将一个 Yahoo Data Table 小部件拖放到生成的 index.jsp 中。
2. 将生成的代码段从以下内容：
   
   <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']
    ]" />
   
   修改为：
   
   <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" />

新的文本以粗体突出显示。 service 属性通知jMaki运行时从 data.jsp 处而非从静态数据获取DataTable小部件所需的数据。

7. 大功告成！单击NetBeans IDE 中的绿色按钮来运行该项目，或通过默认的键盘快捷方式（F6）。您的浏览器将显示该应用程序部署为：

                                                                        这个jMaki包装的Yahoo Data Table小部件现在从JavaDB取回数据。

更新：基于用户请求，这里由Java WebStart公开了该示例的一个NetBeans项目。另外，您也可以下载该项目并随意查看。感谢Geertjan的提示！

Technorati: jmaki glassfish jpa netbeans