本文是本系列文章（共两篇）的第二部分。在第一篇文章（在Visual Web应用程序中使用Java Persistence API） 中，您已了解了如何使用Java Persistence API访问数据库表和检索其中的数据，以及如何使用Visual Web Table组件显示该数据。在本文中，我将介绍如何使用相同的Java Persistence API和Visual Web Table组件添加、更新和删除数据库表行。

有关如何使用NetBeans IDE的更多信息，请参阅NetBeans网站上的支持和文档。

预计时间：30分钟

目录

-  阅读本文的前提条件

-  简介

-  修改Java数据库访问类

-  修改Web页面设计

-  为按钮组件添加逻辑

-  编写按钮处理程序方法的代码

-  运行应用程序

-  结束语

-  未来计划

本文将使用以下技术和资源

本文是本系列文章（共两篇）的第二部分。您应该已经阅读了在Visual Web应用程序中使用Java Persistence API这篇文章，并且创建了其中所描述的两个项目以及一些不同的类和网页。第一篇文章提供了建立这两个项目所需的所有信息。

在开始之前，确保对本节的系统要求有所了解。

前提条件

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

• Java Persistence API
• JavaScript

本文所需要的软件

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

• NetBeans IDE 6.0

简介

第一篇文章提供了有关Java Persistence API的背景知识。它逐步介绍了如何使用Java Persistence API访问数据库表和检索其中的数据，然后使用Visual Web Table组件显示该数据。在第一篇文章中，您创建了两个项目，即TestModelApp标准JSE项目和TestWebApp Visual Web项目。您还在TestWebApp中创建了显示数据库表数据的页面，并且在TestModelApp中创建了包含Java Persistence API方法的两个类，即Users和UserController。还包括TestWebApp中的代码，以便调用TestWebApp中的两个类，从而从数据库表中检索数据。

现在，您将开始了解使用同一Java Persistence API和Visual Web Table组件添加、更新和删除数据库表行。为此，您需要向TestModelApp UserController类添加其他方法。您还应修改显示表格组件的TestWebApp页面，添加能够使用户交互和改进表格显示的功能。

让我们从修改TestModelApp中的代码开始讲起。然后，我们将向您说明如何修改TestWebApp中的页面。我们还将对需要添加到不同Button组件处理程序的代码进行解释，从而使一切按预期进行工作。

修改Java数据库访问类

回忆TestModelApp项目中的UserController类包含起一些设置作用的代码，并将数据库表中的数据作为数组返回。UserController设置代码调用EntityManagerFactory创建EntityManager对象。然后，调用EntityManager中的createQuery方法构建已从Users数据库表中选择行的Java Persistence查询。

现在，您需要向UserController类添加三种方法：

• addUser方法，用于向Users表添加记录。
• removeUser方法，用于从表中删除记录。
• updateUser方法，用于修改表中的记录。

首先，将addUser方法添加到UserController类中。addUser方法依赖于EntityManager和EntityTransaction接口的方法。特别是，它需要通过调用getTransaction().begin()建立事务上下文。在事务上下文中，它使用EntityManager persist方法使用户实体实例变得持久一致，然后提交事务，将数据写入数据库表并终止事务上下文。

public boolean addUser(Users users) {

  EntityManager em = getEntityManager();

   try{

     em.getTransaction().begin();

     em.persist(users);

     em.getTransaction().commit();

   } finally {

    em.close();

    return false;

   }

}

接下来，将removeUser代码添加到UserController中以便删除记录。与addUser方法类似，这种方法建立了事务上下文，使用主键查找与要删除的实体匹配的数据库表行，然后删除该实体实例。commit调用将完成删除并终止事务。

public boolean removeUser(Users users) {

  EntityManager em = getEntityManager();

  try{

    em.getTransaction().begin();

    Users userx = em.find(Users.class, users.getUserId());

    em.remove(userx);

    em.getTransaction().commit();

  } finally {

    em.close();

    return false;

  }

}

最后，添加updateUser方法以便更新记录。与前两种方法类似，updateUser方法在事务上下文中起重要作用。它使用主键查找匹配的实体实例，然后调用Users类中的get和set方法，对表列（用户名、电子邮件地址和密码）进行必要的更改，然后提交更改以终止事务。

public boolean updateUser(Users users) {

  EntityManager em = getEntityManager();

  try{

    em.getTransaction().begin();

    Users userx = em.find(Users.class, users.getUserId());

    userx.setUsername(users.getUsername());

    userx.setPassword(users.getPassword());

    userx.setEmailAddress(users.getEmailAddress());

    em.getTransaction().commit();

  } finally {

    em.close();

    return false;

  }

}

修改Web页面设计

将代码添加到TestModelApp UserController类之后，您便可以开始更改TestWebApp中的Page1页面。更改包括增强Table组件显示、向页面添加其他组件以及自定义某些页面组件代码。

我 们从增强页面和Table组件显示开始。第一篇文章中的绑定示例创建了具有较小外观和功能的页面和Table组件。由于该示例仅说明了显示通过Java Persistence API检索的数据库数据的步骤，概要显示就已经足够。现在，我们向您说明如何使用Visual Web功能创建与“真实”应用程序极其相似的网页和Table组件。

简而方之，向页面添加三个按钮（Add、Delete和Update）并放置到位，从而使它们显示在表格的下方。在用户创建新用户条目或修改现有条目情况下，您还可以添加输入字段，从而使用户可以输入用户名、密码和电子邮件地址。您还可以添加Add Record和Update Record按钮，从而使用户可以指明他们是否正在添加或修改表行。

您 还将了解如何使用Grid Panel组件将输入字段和按钮对齐，以实现更好的演示效果。对于布局页面上的文本和其他组件，Grid Panel是非常有用的组件。添加到页面之后，这些组件会创建一个类似表格的容器，您可以在其中添加其他组件。组件从左至右（这种水平方向可以颠倒）和从上至下添加到Grid Panel显示，Grid Panel可以有一列至众多列，以及尽可能多的行。

此外，您还将了解如何使用prerender方法以及Grid Panel在浏览器中动态地显示部分页面，这取决于用户所选择的选项。例如，当页面最初显示时，您只能看到列示存储在数据库中的用户数据的表格。当从表格中删除条目时，基本显示仍然保持不变；当然，指定的行将被删除。但是，当指明需要一个条目或修改现有条目时，页面显示变为显示您需要输入的数据字段以及相应的两个按钮。prerender方法代码根据按钮操作处理程序设定的布尔值控制页面显示。

页面上总共放置四个Grid Panel组件，其中三个组件嵌套在第一个Grid Panel中，另外一个组件（包括Table组件 、按钮和输入字段）放置在这些Grid Panel中。

在页面放置所有组件之后，您将开始了解如何使用Table Layout功能更改Table组件的显示。

使用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上。

将其他组件添加到页面

现在，为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字段中的文本。

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

为按钮组件添加逻辑

现在，您已完成了网页设计，需要向应用程序添加逻辑，从而使各种按钮能够按预期进行工作。您需要：

• 为Page1.java文件编写某些Java代码，即网页的backing bean。
• 为Table组件编写JavaScript功能。
• 使用Visual Web GUI将按钮属性绑定为通过JavaScript函数返回的值。

为单选按钮编写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选项。）

将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按钮；当前绑定字段应更改为新绑定。

o        将属性selectedValue设置为#{Page1.selectedValue}。按照与selected属性相同的方式设置此属性。

o        将属性name设置为#{Page1.radioButton1.id}。您必须手动输入此属性的新绑定表达式。

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

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

发表于 @ 2008年02月29日 17:23:00|评论(loading...)|编辑