集成 Ajax 与 EJB 3.0/JPA — 使用 ICEFaces、JPA 和 Oracle JDeveloper 构建 Web 应用程序

概述

先决条件

在 JDeveloper 上安装 ICEFaces

创建数据库连接

使用 JPA 构建数据模型

为 UI 创建辅助 Bean

创建 JSF 页面以显示 ICEFaces 数据表

运行应用程序

添加表分页

总结

1.

可以访问或已经安装了 Oracle JDeveloper 10g 第 3 版 (10.1.3.2) 生产版。Oracle JDeveloper 是一个免费的 Java IDE，为构建企业 Java 应用程序提供特别支持。可以从 Oracle 技术网上下载。

2.

可以访问或已经安装了 Oracle HR 示例模式。
此模式内置于 Oracle 数据库和免费的 Oracle XE 数据库的默认安装中，这样可以确保数据库中的 HR 用户是解除锁定的。可在此处获取有关安装 HR 模式和在 JDeveloper 中为其创建连接的指导。

3.

启动 JDeveloper。双击 JDeveloper 可执行文件 (jdeveloper.exe)，该文件可以在您解压缩它的根目录下找到。

如果 Migrate User Settings 对话框打开，则单击 No。

1.

从此处下载 ICEfaces-v1.5.3-JDeveloper.zip

2.

在 JDeveloper 中，从 JDeveloper 的主菜单进入 Help | Check for Updates ，选择 Install from Local file 并查找 ICEfaces-v.1.5.3-jDeveloper.zip

单击 Next 继续

3.

JDeveloper 需要重新启动。执行此操作之后，转至 Tools | Manage Libraries
以验证 ICEFaces 库安装成功。


还是在这个地方，验证 JSP Tag Libraries 是否安装成功

1.

单击 Connections 选项卡。如果未显示 Connections 选项卡，则从 JDeveloper 主菜单中选择 View | Connection Navigator。

2.

右键单击 Database 节点，从上下文菜单中选择 New Database Connection。

3.

如果打开了 Create Database Connection 向导的 Welcome 页面，则单击 Next。

在该向导的 Type 页面上，在 Connection Name 域中输入 hrconn。单击 Next 继续。

4.

在该向导的 Authentication 页面中，在 Username 域中输入 hr，并在 Password 域中输入 hr。选中 Deploy password 框。

单击 Next 继续。

5.

在该向导的 Connection 页面中，默认的连接值应如下所示：

Driver：thin

Host Name：localhost

JDBC Port： 1521

SID：ORCL（对于 Oracle XE 数据库，SID 的值为 XE）

如果将数据库安装到本地，则保留域的这些默认值。如果您使用的是远程数据库，为到数据库的连接输入适当的值。如果您不知道这些值，请联系您的数据库管理员。

单击 Next 继续。

6.

单击 Test Connection。

如果数据库可用且连接的详细信息正确，您将看到 Status 窗口中显示 Success! 这个词。

如果发生错误，则确认这些设置是否正确。单击 Back 进行任何必要的更改，然后重新测试该连接。

如果连接成功，则单击 Finish 完成该连接。

这样您就创建了一个数据库连接,该数据库为您在本教程中构建的应用程序提供数据。注意，数据库导航器允许你浏览甚至编辑您的数据库连接中的对象。

创建新的应用程序和项目

使用 JPA 和 EJB 创建业务逻辑

1.

单击 Applications Navigator 选项卡，返回 Applications Navigator。

右键单击 Applications 节点，从上下文菜单中选择 New Application。

2.

在 Create Application 对话框中，在 Application Name 域中输入 iceFacesDemo。注意，当您输入应用程序名时，目录名将自动改变。

在 Application Package Prefix 域中输入 oracle.com。

从 Application Template 下拉列表中选择值 Web Application [JSF, EJB, Toplink]。

单击 OK。

3.

创建应用程序的同时还创建了 Model (JPA) 和 ViewController （用户界面）项目。向 ViewController 项目中添加 ICEFaces 集成。右键单击 ViewController 节点并选择 ICEFaces Integration

查看操作，单击 YES。 

4.

执行此操作后，检查 ICEFaces 库是否已被添加到 Project Properties

5.

单击 OK。

单击工具栏上的 Save All 以保存您的工作。或者，您可以从菜单中选择 File | Save All。

1.

在 Applications Navigator 中，右键单击 Model 项目并从上下文菜单中选择 New。

2.

在 New Gallery 的 Categories 列表中展开 Business Tier，然后选择 EJB 节点。在 Items 列表中，选择 Entity From Tables (JPA/EJB3.0) 并单击 OK。

3.

如果显示 Create Entity from Tables 向导的 Welcome 页面，则单击 Next。

在 Database Connection Details 页面上，选择以前创建的 hrconn



单击 Next。

4.

在 Select Tables 上，单击 Query 显示数据库连接中的所有表。将 Departments 表从 Available 表列表选择到 Selected 列表。

单击 Next。

5.

选择 java.util.List 作为 Collection Type for Relationship Fields。

单击 Next。
单击 Finish。

6.

查看使用生成的代码创建的 Departments.java bean

我们已经基于表创建了一个基本的 EJB 3.0 实体 bean。现在，我们将创建一个会话外观 bean，以封装业务逻辑并向外界公开展示方法和接口。

7.

在 Applications Navigator 中，右键单击 Model 项目并从上下文菜单中选择 New。

8.

在 New Gallery 的 Categories 列表中展开 Business Tier，然后选择 EJB 节点。在 Items 列表中，选择 Session Bean (EJB 1.1/2.x/3.0) 并单击 OK。

9.

如果显示了 Create Session 向导的 Welcome 页面，则单击 Next。

在该向导的 EJB Name and Options 页面上，将值设置为如下所示的值。

无状态会话 bean 没有内部状态。它们不记录从一个方法调用传递到另一个方法调用的信息。无状态业务方法的每个调用都独立于它的前一个调用。只有需要在方法调用之间维护会话状态的应用程序（如在线购物车）才需要有状态会话 bean。

通过指定一个事务类型的容器，您将启用容器来管理事务，因此不必编写事务机制的代码。仅当您要编写自己的事务机制时才需要更改此设置。

单击 Next。

10.

在该向导的 Session Facade 页面上，确保选中了所有复选框，因为您需要此会话 facade 并入所有方法和命名查询。单击 Next。

11.

在该向导的 Class Definitions 页面上，确保将 Bean Class 设置为 oracle.com.model.DepPublicFacadeBean。默认目录是可接受的。单击 Next。

12.

在该向导的 EJB Component Interfaces 页面上：

单击 Next。

单击 Finish 完成该过程。

13.

查看生成的代码

单击 JDeveloper 工具栏上的 Save All ，或者从菜单中选择 File | Save All。

1.

右键单击 ViewController 项目并选择 Project Properties

转至 Dependencies ，选中 Model.jpr 以确保我们可以在视图内通过 Model 调用方法。

在 J2EE Application 中，更改 iceFacesDemo 的应用程序名和上下文根

单击 Save All 保存您的工作。

2.

在 Applications Navigator 中，右键单击 ViewController 项目并从上下文菜单中选择 Open JSF Navigation。

3.

JDeveloper 为我们提供了三种 编辑 faces-config.xml 配置文件的方式，这是 JSF 控制器层的核心。在设计编辑模式下，您可以可视地设计应用程序的页面流。您可以通过底部的 Source 选项卡直接编辑 XML 代码。我们将使用 Overview 选项卡对文件进行声明式编辑。

选择左下侧 Overview 选项卡

 

从左侧选择 Managed Beans，然后在右侧选择 New

4.

指定值

单击 OK

单击 JDeveloper 工具栏上的 Save All ，或者从菜单中选择 File | Save All。

5.

打开 DepartmentsBean.java，在 ViewController 项目上展开 Application Sources->oracle.com.view 并双击 DepartmentsBean.java

6.

下面的代码创建一个从您的实体 bean 返回一个部门列表的方法，用此代码替换类代码。
注意 — 用于访问 EJB 的代码与您在 JDeveloper 中通过右键单击会话外观并创建“sample EJB client”所生成的代码类似。

package oracle.com.view;

import java.util.List;
import javax.naming.Context;
import javax.naming.InitialContext;
import javax.naming.NamingException;
import oracle.com.model.DepPublicFacade;

public class DepartmentsBean {

    private DepPublicFacade model;

    public DepartmentsBean() {
        try {
            final Context context = getInitialContext();
            model = (DepPublicFacade)context.lookup("DepPublicFacade");
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
    public List getDepartments() {
        return model.queryDepartmentsFindAll();
    }
    private static Context getInitialContext() throws NamingException {
        // Get InitialContext for Embedded OC4J
        // The embedded server must be running for lookups to succeed.
        return new InitialContext();
    }
}

导入所必需的程序包，在您使用的不同对象上按 CTRL+ENT

如果没有错误警告，单击 Save All 保存您的工作。

1.

切换到 faces-congig.xml 文件和该文件的图表视图。确保从 Component Palette 的下拉列表中选择 JSF Navigation Diagram

选择 JSF Page 并单击该图上要显示该页面的位置。

注意，该页面显示了一个黄色的警告符号。这是因为您在该图上绘制了一个尚不存在的页面。以后在您创建页面时，此黄色警告将消失。

2.

键入 departments 以对该页面进行重命名。

您只需键入名称；JDeveloper 将在你按 [Enter] 时自动添加一个前导斜线和 .jsp 扩展名。

单击 Save All 保存您的工作。

3.

在 JSF Navigation Diagram 上，双击 departments.jsp 启动 Create JSF JSP 向导。

如果显示该向导的 Welcome 页面，请单击 Next。

在该向导的 JSP File 页面上，选择 JSP Document 选项。这将创建 JSP 页面的 XML 表示，以确保该页面使用格式良好的 XML 语法。

单击 Next 继续。

4.

在 Component Binding 页面上，选择 Do Not Automatically Expose UI Components in a Managed Bean 选项。保留其他值的默认值，然后单击 Next。

5.

确保 Selected Libraries 列表中显示如下所示的库。

        JSF Core 1.0
        JSF HTML 1.0
        ICEFaces Component Suite 1.5.3

否则，请在 Available Libraries 列表中选择它们，然后单击 Add 将其加入 Selected Libraries 列表中。注意，库版本号可能与以上所示的版本号不同。

单击 Next 接受您需要的库，以便在页面上创建 ICEFaces 组件。

6.

单击 Next 接受默认的 HTML 选项，然后单击 Finish 创建新 JSF JSP。

将在编辑器中打开空的 departments.jspx 页面。在随后的步骤中，您将在该页面中添加一个数据绑定的 ICEFaces dataTable 组件。该组件显示各个部门。

7.

单击 Save All 保存您的工作。

8.

返回到 Design 视图。单击空白屏幕。

写入一个标题 List of Departments Using JPA and ICEFaces

现在写入一些附加文本

切换到页面的源视图，查看您刚才可视化修改后的页面的 JSF 源。

9.

ICEFaces 组件使用 ice:form 组件封装其他组件。我们将把 h:form 组件转换成一个正确的组件。
在 Structure 窗格中，右键单击 h:form 组件并选择 Convert

现在，从组件库的下拉列表中选择 ICE Faces Components Suite，然后选择 Form 作为要转换的组件。

单击 Save All 保存您的工作。

10.

接下来，我们将使用 Component Palette 向页面添加一个数据表。在 Component Palette 窗口（按 ctrl+shift+p 弹出）中，确保您正在查看 ICEFaces Components Suite 组件集，然后找到 DataTable 组件。

将该组件从 Component Palette 拖到 Structure 窗格窗口中的 ice:forms 节点上。

接下来，单击 Structure 窗口中的 dataTable 节点并使用 Property Inspector 窗口设置 DataTable 组件的以下属性。

• Border： 1
• Id：depTable
• Var：dep

将光标放在 Value 属性处，单击 Bind to data 按钮。

这将弹出了表达式创建器对话框。在 Variables 窗口中，导航到 JSF Managed Beans - DepartmentBean - departments 并将其添加到右侧，然后单击 OK。该操作将该表绑定到从我们以前创建的托管 bean 返回的 departments 列表。


接下来，我们将向该数据表添加列，您也可以通过相同的拖放过程来完成该操作，您可能会发现，复制并粘贴以下代码的速度更快。删除 <ice:dataTable/> 标记中的结束标记“/”，转至下一行，键入 </ — 这将导致 JDeveloper 自动完成正确的结束标记。
在 <ice:dataTable></ice:dataTable> 之间添加以下代码：

            <ice:column>
                <f:facet name="header">
                    <ice:outputLabel value="Department ID"/>
                </f:facet>
                <ice:outputText value="#{dep.departmentId}"/>   
            </ice:column>
            <ice:column>
                <f:facet name="header">
                    <ice:outputLabel value="Department Name"/>
                </f:facet>
                <ice:outputText value="#{dep.departmentName}"/>
            </ice:column>
            <ice:column>
                <f:facet name="header">
                    <ice:outputLabel value="Department Location"/>
                </f:facet>
                <ice:outputText value="#{dep.locationId}"/>
            </ice:column>

您应得到如下所示的内容

单击 Save All 保存您的工作

1.

在 Applications Navigator（该页面的编辑器）或 JSF Navigation Diagram 中右键单击 departments.jspx，然后从上下文菜单中选择 Run。

嵌套式 OC4J 服务器随即启动并初始化，同时浏览器中将显示该页面。

2.

查看结果

提示 — 如果你收到一条错误信息 javax.faces.FacesException:Failed to execute JSP lifecycle.导航到 Web Content - WEB-INF 并打开 web.xml 文件。在文件中找到以下条目：

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

用以下内容替换本条目：

    <servlet-mapping>
        <servlet-name>Persistent Faces Servlet</servlet-name>
        <url-pattern>/faces/*</url-pattern>
    </servlet-mapping>

现在再次尝试运行该页面。

1.

转到 departments.jspx 设计编辑器。在 Structure 窗格中，展开 body 结构并选择 ice:dataTable。转到 Inspector 窗格，指定 Rows 值为 5。

单击 Save All 保存您的工作。

2.

转到 departments.jspx 源代码，在 </ice:dataTable>
后面添加以下代码
<ice:dataPaginator id="dataScroll_1" for="depTable"
                                   paginator="true" paginatorMaxPages="5">
                    <f:facet name="first">
                        <ice:outputLabel value="First"/>
                    </f:facet>
                    <f:facet name="next">
                        <ice:outputLabel value="Next"/>
                    </f:facet>
                    <f:facet name="previous">
                        <ice:outputLabel value="Prev"/>
                    </f:facet>
                    <f:facet name="last">
                        <ice:outputLabel value="Last"/>
                    </f:facet>
</ice:dataPaginator>

它应如下图所示

单击 Save All 保存您的工作

3.

在 Applications Navigator（该页面的编辑器）或 JSF Navigation Diagram 中右键单击 departments.jspx，然后从上下文菜单中选择 Run。

查看结果

4.

最后，在表的 footer 中添加一个导航范围分页。转到 departments.jspx 源代码编辑器，在最后一个 </ice:column> 后面、</ice:dataTable> 前面用以下代码添加一个页脚外观：

<f:facet name="footer">
                        <ice:dataPaginator id="dataScroll_2" for="depTable"
                                           rowsCountVar="rowsCount"
                                           displayedRowsCountVar="displayedRowsCount"
                                           firstRowIndexVar="firstRowIndex"
                                           lastRowIndexVar="lastRowIndex"
                                           pageCountVar="pageCount"
                                           pageIndexVar="pageIndex">
                            <ice:outputFormat value="{2} to {3} of {0} departments found"
                                              styleClass="standard">
                                <f:param value="#{rowsCount}"/>
                                <f:param value="#{displayedRowsCount}"/>
                                <f:param value="#{firstRowIndex}"/>
                                <f:param value="#{lastRowIndex}"/>
                                <f:param value="#{pageIndex}"/>
                                <f:param value="#{pageCount}"/>
                            </ice:outputFormat>
                        </ice:dataPaginator>
</f:facet>

现在，您的页面应如下所示：

单击 Save All 保存您的工作

5.

在 Applications Navigator（该页面的编辑器）或 JSF Navigation Diagram 中右键单击 departments.jspx，然后从上下文菜单中选择 Run。

查看结果