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取回数据。 |
- 创建Web应用程序项目
- 在 NetBeans IDE 5.5.1中, 创建一个新的
Web Application
项目并命名为 jmaki-jpa
。 - 如下所示,选择GlassFish V2作为Server:
- 在创建项目的同时,通过单击 Next 按钮添加
jMaki Ajax Framework
。
- 如下所示,选择 Standard 布局:
单击 Finish。
- 在 NetBeans IDE 5.5.1中, 创建一个新的
- 配置Database
- 在NetBeans IDE的
Runtime
选项卡中,展开Databases,连接到默认的数据库(URL为jdbc:derby://localhost:1527/sample [app on APP]
)。用户名和密码都指定为 app。 - 右击新建的连接并选择
Execute Command...
,输入如下查询以生成表定义:create table COMPANY (id int,
companyName varchar(255),
price float,
change float,
percentChange float,
lastUpdated varchar(50),
PRIMARY KEY (id))
- 右击数据库连接,选择 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' );
现在,我们的数据库结构就已创建并填充好了。
- 在NetBeans IDE的
- 创建映射到数据库的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
中的所有内容:<%@ 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
中。 - 将生成的代码段从以下内容:
<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小部件所需的数据。
- 大功告成!单击NetBeans IDE 中的绿色按钮来运行该项目,或通过默认的键盘快捷方式(F6)。您的浏览器将显示该应用程序部署为:
这个jMaki包装的Yahoo Data Table小部件现在从JavaDB取回数据。
更新:基于用户请求,这里由Java WebStart公开了该示例的一个NetBeans项目。另外,您也可以下载该项目并随意查看。感谢Geertjan的提示!
Technorati: jmaki glassfish jpa netbeans