使用 Java Persistence API 修改数据库表行

前提条件

本文假定您拥有以下技术的基本知识或者具备相关编程经验：

• Java Persistence API
• JavaScript

本文所需要的软件

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

• NetBeans IDE 6.0（下载）

使用 Grid Panel 组件控制页面显示

首先需要在网页上放置 Grid Panel 组件。放置在页面上的第一个 Grid Panel 作为 Grid Panel 后续组件以及其他组件的容器。

添加 Grid Panel 作为组件容器。在 Designer 窗口中打开 Page1，然后将 Grid Panel 组件拖放到该页面上。（ Grid Panel 位于 Palette 的 Layout 部分中。） 为帮助确定 Grid Panel，请将 Grid Panel 的 id 属性更改为 mainContainer。此 Grid Panel 作为页面上其他组件的容器。将其他 Grid Panel 、按钮和文本字段等其他组件拖放到面格面板，帮助控制对齐这些组件。

默认情况下，添加到 Grid Panel 的组件根据添加的顺序从左至右显示。如果发现不是这样显示，请检查 Grid Panel 的 dir 属性设置（您可以在 Properties 表的 Advanced 部分中找到）。dir 属性方向应设置为从左至右；否则，请使用属性的下拉菜单更改设置。

使用导航器窗口定位组件

接下来，将组件添加到 mainContainer Grid Panel，然后在 Navigator 窗口中使用分层大纲显示重新定位这些组件。首先需要将 Table 组件拖放到 mainContainer Grid Panel 上。如果是新页面，您应将 Table 组件拖放到 Grid Panel，然后将该 Table 组件绑定到 users 数组，正如您以前所做的那样。由于已经将 Table 组件绑定到页面上的 users 数组，您可以使用 Navigator 窗口将 Table 组件移到 Grid Panel 上。通常，Navigator 窗口提供易于使用的访问和移动页面上组件的机制，特别是由于 Navigator 窗口显示页面上的所有组件，而不考虑页面上组件的可见性。由于当添加到页面时，组件的数量并不明确可见，因此牢记这一点非常重要。

您可以直接将 Table 组件拖放到 Design 窗口的 Grid Panel 上。如果按此操作，请确保拖放组件之前突出显示 Grid Panel。您可以通过将该组件拖放到 Navigator 窗口中和将其拖放到 Grid Panel 上，将已在页面上的 Table 组件放置在 mainContainer 上。图 2 说明的是拖放 table1 并将其放置在 Grid Panel mainContainer 上，然后予以突出显示。拖放 table1 之后，导航器显示发生变化，以表明 table1 位于 mainContainer 中。页面上的显示亦随之变化。

将其他组件添加到页面

现在，为 Add、Delete 和 Update 按钮添加 Grid Panel，然后为 Button 组件自身添加 Grid Panel。将第二个 Grid Panel 添加到页面，然后将这三个按钮（Add、Delete 和 Update）放置在该面板中。确保将这个新的 Grid Panel 拖放到第一个 mainContainer 的顶部（或者，在将其添加到页面之后，使用 Navigator 窗口移动此 Grid Panel，从而使其位于 mainContainer 中）。将此 Grid Panel 的 id 属性设置为 buttonPanel。

由于三个按钮应水平排列，请使用 buttonPanel 属性表将 columns 属性设置为 3。然后，将三个按钮拖放到 buttonPanel 上，按此处所示设置它们的 id 和 text 属性。要使按钮保持在左侧，请将 buttonPanel 的宽度调整为 mainContainer 的一半左右。

• 第一个按钮：将 id 设置为 addButton 并将 text 属性设置为 Add。
• 第二个按钮：将 id 设置为 deleteButton 并将 text 设置为 Delete。
• 第三个按钮：将 id 设置为 updateButton 并将 text 设置为 Update。

为用户输入字段添加 Grid Panel，然后为标签和输入字段自身添加 Grid Panel。将第三个 Grid Panel 拖放到 mainContainer Grid Panel 上。将其 id 属性设置为 addUpdatePanel 并将其 columns 属性设置为 2。然后，将三个 Label 和 Text Field 组件添加到 addUpdatePanel，用于用户名、密码和电子邮件地址等输入字段。先后将一个 Label 组件和一个 Text Field 组件拖放到 addUpdatePanel，标签及其输入字段应在这个分为两列的 Grid Panel 中水平对齐，每一对组应与表格垂直对齐。按此顺序添加以下 Label 和 Text Field 组件对，然后设置各自的文本和 id 属性，如下所示：

• Label1：将 text 属性设置为 User Name； Text Field：将 id 属性设置为 userNameField。
• Label2：将 text 属性设置为 Password；Text Field：将 id 属性设置为 passwordField。
• Label3：将 text 属性设置为 Email Address; Text Field：将 id 属性设置为 emailAddressField。

为 Add Record 和 Update Record 按钮添加 Grid Panel，并且添加这两个按钮。将此 Grid Panel 拖放到 addUpdatePanel 上，将其属性 id 设置为 addUpdateButtonPanel 并将其列属性设置为 2，然后在其中添加以下两个按钮。同时调整宽度，使按钮保持在左侧显示。（您可以在 Properties 表中更改 addUpdateButtonPanel 的宽度，或者使用鼠标在 Design 窗口中调整面板。）

• 第一个按钮：将 id 设置为 addRecordButton 并将文本属性设置为 Add Record。
• 第二个按钮：将 id 设置为 updateRecordButton 并将文本属性设置为 Update Record。

将 addUpdateButtonPanel 按钮放置在 addUpdatePanel 中，可保持这两个按钮与三个数据输入字段在一起。随后，在为按钮操作处理程序添加代码之后，我们还将自定义 prerender 方法，从而使 addUpdatePanel（三个输入字段以及带添加/更新记录按钮的面板）的内容仅在用户要添加记录或修改现有记录时才显示。当列示所有用户的表格显示在页面中时，或者当用户从表格中删除一行时，addUpdatePanel 将不会显示。

使用表格布局自定义表格显示

使用 Table Layout 功能更改 Table 组件显示。使用 Table Layout 对话框，您可以向表格显示添加新的列，然后通过将其移至列列表的顶部，将其定位为表格中最左侧的列。添加之后，为其指定一个默认的 tableColumn5 列标题文本。从 Header Text 字段删除此文本并保留为空白。此外，从 Component Type 下拉列表中，选择 Radio Button 选项并删除 Value Expression 字段中的文本。

图 4：Table Layout 对话框

已完成的 Page1 看起来如图 5 中所示。注意，有一列未移至 emailAddress 的左侧。

为单选按钮编写 Java 代码

您需要编写某些逻辑（Java 代码）以保存有关在 Page1 中所选的单选按钮的信息，并将代码放置在 Page1.java 文件中。此代码依赖于 TableSelectPhaseListener 类，即属于 JavaServer Faces 事件包（com.sun.webui.jsf.event）一部分的实用程序类。实用程序类专用于单选按钮组件，而且您使用该实用程序类的方法选择表行。这些方法将所选的表格行返回为 RowKey 对象，它是数据行表格标识符可检索的表示形式。

在 Design 窗口中显示 Page1 的情况下，单击 Java 选项卡，在源编辑器中打开 Java 代码。添加如代码示例 4 中所示的代码。添加代码之后，单击 Fix Imports，从而 IDE 导入两个缺失的类（RowKey 和 TableSelectPhaseListener）并修补错误。

private TableSelectPhaseListener tablePhaseListener =
                                  new TableSelectPhaseListener();
    public void setSelected(Object object) {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        if (rowKey != null) {
            tablePhaseListener.setSelected(rowKey, object);
        }
    }
    public Object getSelected(){
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return tablePhaseListener.getSelected(rowKey);
    }
    public Object getSelectedValue() {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return (rowKey != null) ? rowKey.getRowId() : null;
    }
    public boolean getSelectedState() {
        RowKey rowKey = (RowKey)getValue("#{currentRow.tableRow}");
        return tablePhaseListener.isSelected(rowKey);
    }

在 JavaServer Page 文件中添加 JavaScript 代码

现在，您可以将 JavaScript 添加到 Page1 的 JavaServer Page (JSP) 文件。在 Design 窗口中，单击 JSP 选项卡打开 JSP 页面进行编辑。将如代码示例 5 中所示的代码添加到 Table 组件；即，将其添加到 <webuijsf:table> 标记中。

<script>
  function initAllRows() {
   var table = document.getElementById("form1:table1");
   table.initAllRows();
  }
</script>

添加 JavaScript 代码之后，切换至 Design 视图对代码进行验证。注意，在 Navigator 窗口中显示的 Page1.jsp 反映的是表格绑定（单独绑定至用户数据库表格以及您已添加的单选按钮）以及您刚刚插入的 JavaScript。JSP 代码自身显示表格绑定的细节。（注意：如果 Navigator 窗口不显示更新的 Page1.jsp，请单击 Window > Reset Windows 选项。）

图 6：Navigator 窗口中所显示的 Page1.jsp

将 Radio Button 绑定至 Table 组件

Table 组件必须通过（以前已添加到表格的）Radio Button 跟踪当前所选表行。要进行此操作，请使用 Visual Web Properties Binding 对话框，将 Radio Button 的属性绑定为当前行值。完成对话框之后，IDE 将为您更新 JSP 代码。下面介绍如何执行此绑定。

1. 为 Page1 上的 radioButton1 打开 Properties Binding 对话框。在 Navigator 窗口中，向下滚动 Page1 树，直至在表中查找到 radioButton1。（要查看 Navigator 窗口，请为 Page1 选择 Design 选项卡。如果 Navigator 窗口不显示，请单击 Window > Reset Windows 选项。） 右击 radioButton1 节点，然后从上下文菜单中选择 Property Bindings 选项。
2. 使用 Properties Binding 对话框设置此处所注明的三个属性。您需要单击 All 选项才能查看 Set 可绑定属性列中的这些属性。为每一属性设置绑定表达式之后，请务必单击 Apply 按钮，从而将新表达式保存到 JSP 文件。将所选属性设置为 #{Page1.selected}。单击 Select 可绑定属性列中的 selected，然后单击 Select 绑定目标列中的 selected。当新的绑定表达式字段显示正确绑定时，单击 Apply 按钮；当前绑定字段应更改为新绑定。
   
   • 将属性 selectedValue 设置为 #{Page1.selectedValue}。按照与 selected 属性相同的方式设置此属性。
   • 将属性 name 设置为 #{Page1.radioButton1.id}。您必须手动输入此属性的新绑定表达式。

当正确完成绑定之后，JSP 文件中的 Radio Button 标记应如下所示：

代码示例 6：JSP 文件中的 Radio Button 标记

<webuijsf:radioButton binding="#{Page1.radioButton1}" id="radioButton1" label="" name="#{Page1.radioButton1.id}"selected="#{Page1.selected}" selectedValue="#{Page1.selectedValue}"/>

图 7：应用属性绑定

您还必须执行其他一些属性绑定。

1. 您需要为已放置 Radio Button 的表格列绑定一些属性。在我们的示例中，此表格列为 tableColumn5。在 Navigator 窗口中选择该表格列（或者在 Design 窗口中单击该列），从上下文菜单中打开 Properties Binding 对话框，然后设置两个属性。您必须手动输入这些绑定表达式。如前所示，设置每一属性之后单击 Apply 按钮。
   • 将 onClick 属性设置为 setTimeout(‘initAllRows()’,0)。当前绑定字段很有可能不会反映应用属性之后的新绑定表达式。即使如此，绑定仍应显示在 JSP 代码中。
   • 将 selectId 属性设置为 #{Page1.radioButton1.id}
完成之后，tableColumn5 标记的 JSP 代码应如下所示：

代码示例 7：tableColumn5 的 JSP 标记

<webuijsf:tableColumn binding="#{Page1.tableColumn5}" id="tableColumn5" onClick="setTimeout('initAllRows()', 0)" selectId="#{Page1.radioButton1.id}">

2. 现在，将表格表行组（在我们的示例中为 tableRowGroup1）中的 selected 属性绑定为 selectedState。新绑定表达式应为 #{Page1.selectedState}，如图 9 中所示。标记 tableRowGroup 的 JSP 代码应如下所示：

   代码示例 8：tableRowGroup1 的 JSP 标记

   <webuijsf:tableRowGroup binding="#{Page1.tableRowGroup1}" id="tableRowGroup1" rows="10" selected="#{Page1.selectedState}" sourceData="#{SessionBean1.users}" sourceVar="currentRow"

创建布尔变量

将两个布尔变量添加到 Page1.java 源文件。调用 addRequest 和 updateRequest 变量并将这两个值设置为错误。在源文件中，您会看到以下语句。

private boolean addRequest = false;
private boolean updateRequest = false;

编写按钮操作处理程序方法

将代码添加到 Add 按钮的 addButton_action 方法。已添加的代码将标志 (addRequest) 设置为正确，以便启用 addUpdatePanel，它包含用户名、密码和电子邮件地址等条目字段。prerender 方法使用这些布尔值确定 addUpdatePanel 的处理。

在 Design 窗口中双击页面上的“添加按钮”，在 Java 源编辑器中打开按钮代码。向将 addRequest 设置为正确的 addButton_action 方法添加一行。操作处理程序应如下所示：

private boolean addRequest = false;
  public String addButton_action() {
  addRequest = true;
  return null;
}

注意： 如果通过单击 Java 选项卡而非双击该按钮打开 Page1 的 Java 源文件，您将不会看到该按钮的操作处理程序方法。当双击按钮时，方便起见，IDE 将为操作处理程序添加一个空方法，您只需要添加代码的自定义行即可。

双击 Update 按钮打开 updateButton_action 方法并添加以下代码。与 addButton 操作处理程序一样，此代码将布尔 updateRequest 设置为正确，从而启用 addUpdatePanel。操作处理程序应如下所示：

private boolean updateRequest = false;
public String updateButton_action() {
  updateRequest = true;
  return null;
}

现在，将代码添加到 Delete 按钮程序处理程序，从而当单击按钮时，从数据库中删除表格的所选行。此代码从 tableRowGroup1 首先获取所选 RowKey。它使用 RowKey 索引确定并获取 Users 表格中的相应行。然后调用 UserController.removeUser 方法，将其传递给行标识符，然后 removeUser 从数据库中删除所选行。在将此代码添加到 Page1.java 文件之后，您很可能需要使用 Fix Imports 函数。

public String deleteButton_action() {
        if (getTableRowGroup1().getSelectedRowsCount() > 0){
          RowKey[] selectedRowKeys = getTableRowGroup1().getSelectedRowKeys();
          Users[] users = getSessionBean1().getUsers();
          int rowId = Integer.parseInt(selectedRowKeys[0].getRowId());
          Users user = users[rowId];
          // Remove the Entity from the database using UserController
          UserController userController = new UserController();
          userController.removeUser(user);
        }
        return null;
}

编写创建实体 Bean 的代码并添加到数据库

现在，您将准备把代码添加到 Add Record 和 Update Record 操作处理程序方法。“添加记录”操作处理程序的代码抓取输入到 addUpdatePanel 字段的数据，并且创建包括 Users 表格中一行数据的一个新实体 bean。然后，它调用 UserController 方法 addUser 将此实体 bean 数据添加到数据库。同时，它还将布尔 updateRequest 设置为错误。随后，在按钮操作处理程序完成之后，将代码添加到 prerender 方法，以便使用布尔变量 updateRequest 和 addRequest 确定所采取的处理路径。

双击 Design 窗口中的 Add Record 按钮，在 Java 源编辑器中打开 addRecordButton 操作处理程序。然后，将下列代码添加到方法。完整方法应如下所示：

public String addRecordButton_action() {
        // Create a new User Entity
        Users newUser = new Users();
        newUser.setUsername((String) userNameField.getText());
        newUser.setPassword((String) passwordField.getText());
        newUser.setEmailAddress((String) emailAddressField.getText());
        // Add the new Entity to the database using UserController
        UserController userController = new UserController();
        userController.addUser(newUser);
        updateRequest = false;
        return null;
    }

编写更新数据库记录的代码

将代码添加到 Update Record 按钮的操作处理程序，以便更新数据库中的现有记录。操作处理程序抓取由用户输入在 addUpdatePanel 字段中的数据，并且将该数据写至数据库记录。

双击 Update Record 按钮，在 Java 源编辑器中打开 updateRecordButton_action 操作处理程序，并将下列代码添加到操作处理程序。已添加的代码使用表格中的当前选择首先获取 Users 实体 bean。它可以用在 addUpdatePanel 字段中输入的数据更新 Users 字段，然后调用 UserController.updateUser 方法用实体 bean 数据更新数据库数据。完成的操作处理程序应如下所示：

public String updateRecordButton_action() {
        // TODO: Process the action. Return value is a navigation
        // case name where null will return to the same page.
        // Create a new Users Entity
        RowKey[] selectedRowKeys = getTableRowGroup1().getSelectedRowKeys();
        Users[] users = getSessionBean1().getUsers();
        int rowId = Integer.parseInt(selectedRowKeys[0].getRowId());
        Users user = users[rowId];
        user.setUsername((String) userNameField.getText());
        user.setPassword((String) passwordField.getText());
        user.setEmailAddress((String) emailAddressField.getText());
        // Update the database table data using UserController
        UserController userController = new UserController();
        userController.updateUser(user);
        addRequest = false;
        return null;
    }

修改控制页面显示的 prerender 方法

页面上的 prerender 方法可以设置页面显示的任何自定义参数，并且在显示页面之前予以调用。您添加到 prerender 方法的以下代码，使用布尔值 addRequest 和 updateRequest 确定是否显示或隐藏 addUpdatePanel。它还可以根据是否发生修改或增加数据来更新用户数据的显示。

public void prerender() {
        if(addRequest){
            addUpdatePanel.setRendered(true);
            addRecordButton.setRendered(true);
            updateRecordButton.setRendered(false);
            userNameField.setText("");
            passwordField.setText("");
            emailAddressField.setText("");
        }else if (updateRequest){
            if (getTableRowGroup1().getSelectedRowsCount() > 0){
                // Get the data from the selected Entity and update the fields
                RowKey[] selectedRowKeys = getTableRowGroup1().getSelectedRowKeys();
                Users[] users = (Users[]) getSessionBean1().getUsers();
                int rowId = Integer.parseInt(selectedRowKeys[0].getRowId());
                Users user = users[rowId];
                userNameField.setText(user.getUsername());
                passwordField.setText(user.getPassword());
                emailAddressField.setText(user.getEmailAddress());
                
                addUpdatePanel.setRendered(true);
                addRecordButton.setRendered(false);
                updateRecordButton.setRendered(true);
            }
        }else{
            addUpdatePanel.setRendered(false);
        }
        // Refresh the users data array in the session bean to to show
        // the newly added data or modified data in the Table Component
        getSessionBean1().updateUsers();
    }