NetBeans下构建操作数据库行的Web应用程序(二)

本教程介绍了如何使用具备Web功能的NetBeans IDE构建一个可以创建、检索、更新和删除数据库行的Web应用程序。该应用程序提供一个主数据的下拉列表以及一个同步的详细信息表。该 应用程序的用户可以在详细信息表及其关联数据库中添加、更新和删除记录。

本教程使用了其他基础教程中介绍的一些概念。如果您不具备 IDE 及其设计组件的基本知识，可以考虑首先阅读一些入门教程，比如Visual Web JSF应用程序开发入门和使用Databound组件访问数据库。

测试应用程序：第1部分

单击主工具栏上的Run Main Projec 按钮  以生成、部署和运行项目。当Web浏览器呈现此页面时，您会看到一些名字填充了下拉列表，并且表也由一些数据进行了填充。当您从列表中选择某个名字时，与该名字相关的旅程就会显示在表格中。

添加插入功能

在此部分，我们将通过在数据库中插入行集，实现将行程添加到表中的功能。首先，为Table的Text Field提供Message组件。这些组件可确保当用户输入错误信息时可以看见错误。然后，在页面中添加一个按钮，以便用户可以通过它将新行添加到数据缓冲区中。

1.   单击Design按钮以便在Visual Designer中查看Page1。

2.   在Palette的Basic区域中，将Message组件分别拖放到Table的前三列每列的最顶层Text Field中。

3.   选择第一个Message组件。在Properties窗口中，滚动至for属性，并从下拉列表中选择textField1选项。只有当Message与Text Field正确关联时，Message文本才会显示关联信息，如图11所示。

4.   将第二个Message组件的for属性设置为textField2。

5.  将第三个Message组件的for属性设置为textField3。 

6.   在Palette的Basic区域，将一个Button组件拖到Page1中并将其放在靠近第二列顶端的Table组件的上面，如图12所示。

特别注意：在IE7中有一个影响JSF 1.2 Button组件宽度的已知问题。解决方法是将Button组件放在布局组件（Grid Panel、Group Panel 或 Layout Panel）的上面。重设布局组件的大小会自动重设Button组件的大小。

7.   将文本从Button更改为Add Trip。

8.   在Properties窗口中，将按钮的id属性更改为add。

9.   在Visual Designer中，双击按钮以打开Java Editor，插入点将位于该按钮的add_action事件处理程序方法中。

10. 将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：

代码示例 3：添加行程操作的代码

public String add_action() {         try {             RowKey rk = tripDataProvider.appendRow();             tripDataProvider.setCursorRow(rk);             tripDataProvider.setValue("TRIP.TRIPID", new Integer(0));             tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected());             tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1));         } catch (Exception ex) {             log("Error Description", ex);             error(ex.getMessage());         }         return null;     }

11. 在Java编辑器中单击鼠标右键，然后选择Fix Imports选项以解决“未找到 RowKey”的错误。

        IDE会将下包添加到导入语句的Page1.java段：

        import com.sun.data.provider.RowKey;

 

测试应用程序：第2部分

通过单击Run Main Project按钮  以生成、部署和运行项目。当Web浏览器呈现此页面时，将显示Add Trip按钮，如下图所示。每次单击该按钮时，都会在表的底部附加一个新的空行。可以编辑行中的信息，但由于尚未提供行集的保存机制，因此，从下拉列表中选择其他名字时，所做的更改将会丢失。

修改页面以保存行集

在此部分，将添加第二个行集到项目中。该行集用于计算已使用的最大行程ID。

1.   单击编辑器窗口中的Design以返回Visual Designer中的Page1。

2.  打开Services窗口，选择Databases > Travel > Tables > TRIP表，将其拖动到Navigator窗口中的SessionBean1节点上。

3.   该操作将为SessionBean1创建两个新子节点：tripDataProvider和tripRowSet1。

4.  在Add New Data Provider对话框中，选择Create SessionBean1/tripRowSet1单选按钮，将数据提供程序名称更改为maxTripRowSet，然后单击OK按钮。

注意： 行集在对话框中出现了两次。这是一个已知问题，请予以忽略。这不会影响本教程中的应用程序。
此操作将在SessionBean1中创建maxTripDataProvider和maxTripRowSet。

5.   在Navigator窗口中，双击SessionBean1 > maxTripRowSet以打开Query Editor。在Source Code窗格（从顶部开始第三个）中单击鼠标左键。删除此处现有的SQL查询，然后输入以下查询：

        SELECT MAX(TRAVEL.TRIP.TRIPID)+1 AS MAXTRIPID FROM TRAVEL.TRIP
   
   

        您将会使用Save按钮（下一步您将会添加）的操作处理器中的MAXTRIPID值。

6.  关闭Query Editor。

    注意： Query Editor的图形化编辑器不支持此查询。如果您看见一个警告对话框提示语法错误，您可以单击Continue按钮忽略它。

将用户更改保存到数据库

1.   在靠近第一列顶部的Table组件上放置一个Button组件。为了准确定位

2.   将按钮文本从Button更改为Save Changes。

3.   在Properties窗口中，将id属性更改为save。

4.   右键单击Save Changes按钮，并从弹出菜单中选择Configure Virtual Forms选项。

5.   在Configure Virtual Forms对话框中，请确保save显示在左上角的列表中，这样您在此窗口中的更改可以应用到Save Changes按钮中。然后，选择save虚拟表单，将Submit值更改为Yes，并单击OK按钮。

6.   在Visual Designer中，双击Save Changes按钮以打开Java Editor。在Java Editor中，插入点将位于该按钮的save_action事件处理程序方法中。

7.  将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：

代码示例 4：保存操作代码

public String save_action() {         try {             // Get the next key, using result of query on MaxTrip data provider             CachedRowSetDataProvider maxTrip = getSessionBean1().getMaxTripDataProvider();             maxTrip.refresh();             maxTrip.cursorFirst();             int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID"));             // Navigate through rows with data provider             if (tripDataProvider.getRowCount() > 0) {                 tripDataProvider.cursorFirst();                 do {                     if (tripDataProvider.getValue("TRIP.TRIPID").equals                                           (new Integer(0))) {                         tripDataProvider.setValue("TRIP.TRIPID",                                             new Integer(newTripId));                         newTripId++;                     }                 } while (tripDataProvider.cursorNext());             }             tripDataProvider.commitChanges();         } catch (Exception ex) {             log("Error Description", ex);             error("Error :"+ex.getMessage());         }         return null;     }

测试应用程序：第3部分

通过单击Run Main Project按钮以生成、部署和运行项目。应用程序将可以实现以下功能：

l          可以添加行程并进行保存。然后，该行程将显示在表中并持续存在。如果选择其他人员，然后返回到此人员，则会看到所添加的行程。

l          可以编辑现有的行程信息，并保存所做的更改。

l          如果在Date字段中输入除日期之外的内容，应用程序将提供一条错误消息。

l          在保存之前您可以多次单击Add Trip按钮，这是一次添加多行的简便方法。如果在保存更改时任何行仍然为空，则会将其保存为空行。

l          如果在单击Save Changes之前您切换到其他人员，则会丢失所有更新。

l          如果修改了某些值，然后单击某个列标题以按该列进行排序，则Table组件会记住这些暂挂的更改，随后可以保存这些更改。

添加删除功能

在此部分，我们将在表中添加删除功能。利用此功能，用户能够通过从数据库中删除某行来删除行程。在本教程中，Delete按钮的操作是即时的，并且从数据库中删除行时并不需要使用Save Changes按钮。实际上，由于Delete按钮的事件处理器使用commitChanges方法，它也会像Save Changes按钮一样保存所有待定的更改。

向每行添加一个Delete按钮

1.      单击编辑器窗口中的Design以返回Visual Designer中的Page1，然后右键单击Trips Summary表，并从弹出菜单中选择Table Layout选项。这将打开Table Layout对话框。

2.        如有必要，单击Columns选项卡，然后单击New按钮，将一个新列添加到表中。

3.      在Selected列表中选择新列的名称后，在Column Details区域中进行以下更改：

a.        Header和Footer Text：删除 Header和Footer文本字段中的任何默认文本，使其保持空白。

b.        Component type: Button

c.        Value Expression: Delete

d.        Width: 删除任何缺省值，使其保持空白。

e.        Horizontal Align: Center

f.         Vertical Align： Middle

g.        单击OK按钮。

4.        选择表中最上面的Delete按钮，然后在Properties窗口中，将id属性设置为delete。

添加事件代码

1.        双击Delete列中的第一个按钮，以在delete_action事件处理器方法中打开Java Editor。

2.      将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：

代码示例 5：删除操作代码

public String delete_action() {         form1.discardSubmittedValues("save");         try {             RowKey rk = tableRowGroup1.getRowKey();             if (rk != null) {                 tripDataProvider.removeRow(rk);                 tripDataProvider.commitChanges();                 tripDataProvider.refresh();}         } catch (Exception ex) {             log("ErrorDescription", ex);             error(ex.getMessage());         }         return null;     }

测试应用程序：第4部分

通过单击Run Main Project按钮以生成、部署和运行项目。下图显示了该运行应用程序。

部署后，您应该可以从表中删除行，进而将其从数据库中删除。删除操作还会将所有待定更改提交到数据库。  

添加恢复功能

现在，将恢复功能添加到页面中。使用此功能，用户将可以放弃其编辑并恢复为以前保存的数据。注意：恢复功能不能恢复已保存或删除的行；Save Changes和Delete 按钮会将更改提交到数据库。

添加Revert Changes按钮

1.        单击编辑器窗口中的Design以返回到Visual Designer中的Page1，然后从Palette中拖一个Button组件到Page1。将该新Button放在Add Trip按钮的右侧。

2.        将按钮文本更改为Revert Changes。

3.        在Properties窗口中，将该Button组件的id属性更改为revert。

4.        双击Revert Changes按钮以在revert_action方法中打开Java Editor。

5.        将下面代码样例中以粗体显示的代码添加到revert_action方法中。

代码示例 6：恢复操作代码

public String revert_action() {         form1.discardSubmittedValues("save");         try {             tripDataProvider.refresh();         } catch (Exception ex) {             log("Error Description", ex);             error(ex.getMessage());         }          return null;     }

配置虚拟表单

如果应用程序使用目前的配置，则会出现一些不理想的行为。例如，如果用户在现有行的第一列中输入无效日期，然后单击Add按钮，操作将会失败，由于日期转换错误而拒绝提交表单。用户单击Add按钮时的理想行为是：放弃处理表中的输入字段，以便在忽略现有行的暂挂编辑内容的情况下添加新行。

同样地，当用户单击Revert按钮时（其目的是放弃所有编辑内容），也应该忽略以上情况的编辑内容。但是，当用户单击Delete按钮时，您仍然希望进行验证，因为此按钮不仅删除某个行，而 且还会提交所有暂挂的更改，这要求先处理输入字段。

要为确保用户在单击Add或Revert按钮时放弃处理（包括验证检查）页面上的输入字段，您可以让这些按钮提交虚拟表单。在这种情况下，您可以使两个按钮提交同一个虚拟表单，因 为它们需要一个没有参与者的虚拟表单。

1.        在Visual Designer中，按Ctrl键的同时单击以选择Add、Revert和Delete按钮，单击鼠标右键，然后从弹出菜单中选择Configure Virtual Forms选项。

在Configure Virtual Forms窗口中，add、revert和delete应出现在左上角，表明这些按钮处于选定状态。

2.      在Configure Virtual Forms窗口中，单击New按钮，将该新虚拟表单命名为add/revert/delete，然后将Submit设置为Yes。单击OK按钮。

测试应用程序：第5部分

通过单击Run Main Project按钮  以生成、部署和运行项目。部署后，程序可执行以下功能：

l          从下拉列表中选择一个名字，并显示此人的行程摘要。

l          编辑现有的行程信息，并将更改保存到数据库中。

l          编辑具有不正确的日期格式的现有行程信息，然后单击Add Trip按钮添加新行，或者单击Revert Changes按钮放弃编辑。

l          在表中添加行，填写行程字段，并将更改保存到数据库中。

l          从表中（同时从数据库中）删除行。

l          放弃编辑内容，并恢复为数据库中最近保存的数据。

结束语

在本教程中，您将Table组件、Text Field组件以及Drop Down List组件和数据库中的信息进行了关联。此外，还为组件设置了属性，添加了prerender和事件代码，从而可以插入、更新和删除数据库中的数据，并恢复在表单上输入的更改。您还使用了虚拟表单，这使得应用程序使用一个页面即可，并且在添加行或恢复更改时提交的数据可以绕过有效性检查。