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

本教程介绍了如何使用具备 Web 功能的 NetBeans IDE 构建一个可以创建、检索、更新和删除数据库行的 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窗口中，滚动至<span>for</span>属性，并从下拉列表中选择<span>textField1</span>选项。只有当Message与Text Field正确关联时，Message文本才会显示关联信息，如图11所示。

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

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

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

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

7.   将文本从<span>Button</span>更改为<span>Add</span> <span>Trip</span>。

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

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

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

<span><font face="宋体">public String add_action() {<strong><p></p></strong></font></span>

<span><font face="宋体"><span>        </span>try {<p></p></font></span>

<span><font face="宋体"><span>            </span>RowKey rk = tripDataProvider.appendRow();<p></p></font></span>

<span><font face="宋体"><span>            </span>tripDataProvider.setCursorRow(rk);<p></p></font></span>

<span><font face="宋体"><span>            </span>tripDataProvider.setValue("TRIP.TRIPID", new Integer(0));<p></p></font></span>

<span><font face="宋体"><span>            </span>tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected());<p></p></font></span>

<span><font face="宋体"><span>            </span>tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1));<p></p></font></span>

<span><font face="宋体"><span>        </span>} catch (Exception ex) {<p></p></font></span>

<span><font face="宋体"><span>            </span>log("Error Description", ex);<p></p></font></span>

<span><font face="宋体"><span>            </span>error(ex.getMessage());<p></p></font></span>

<span><font face="宋体"><span>        </span>}<p></p></font></span>

<span><font face="宋体"><span>        </span>return null;<p></p></font></span>

<span><font face="宋体"><span>    </span>}<p></p></font></span>

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

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

<span><font face="宋体"><span>        </span>import com.sun.data.provider.RowKey;</font></span>

测试应用程序：第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单选按钮，将数据提供程序名称更改为<span>maxTripRowSet</span>，然后单击OK按钮。

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

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

<span><font face="宋体"><span> </span><span>       </span>SELECT MAX(TRAVEL.TRIP.TRIPID)+1 AS MAXTRIPID FROM TRAVEL.TRIP<p></p></font></span>

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

6.  关闭Query Editor。

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

将用户更改保存到数据库

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

2.   将按钮文本从<span>Button</span>更改为<span>Save</span> <span>Changes</span>。

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

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

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

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

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

<span><font face="宋体"><span>    </span>public String save_action() {<p></p></font></span>

<span><font face="宋体"><span>        </span><strong>try {<p></p></strong></font></span>

<span><font face="宋体"><span>            </span>// Get the next key, using result of query on MaxTrip data provider<p></p></font></span>

<span><font face="宋体"><span>            </span>CachedRowSetDataProvider maxTrip = getSessionBean1().getMaxTripDataProvider();<p></p></font></span>

<span><font face="宋体"><span>            </span>maxTrip.refresh();<p></p></font></span>

<span><font face="宋体"><span>            </span>maxTrip.cursorFirst();<p></p></font></span>

<span><font face="宋体"><span>            </span>int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID"));<p></p></font></span>

<span><font face="宋体"><span>            </span>// Navigate through rows with data provider<p></p></font></span>

<span><font face="宋体"><span>            </span>if (tripDataProvider.getRowCount() > 0) {<p></p></font></span>

<span><font face="宋体"><span>                </span>tripDataProvider.cursorFirst();<p></p></font></span>

<span><font face="宋体"><span>                </span>do {<p></p></font></span>

<span><font face="宋体"><span>                    </span>if (tripDataProvider.getValue("TRIP.TRIPID").equals<p></p></font></span>

<span><font face="宋体"><span>                  </span><span>                        </span>(new Integer(0))) {<p></p></font></span>

<span><font face="宋体"><span>                        </span>tripDataProvider.setValue("TRIP.TRIPID",<p></p></font></span>

<span><font face="宋体"><span>                                            </span>new Integer(newTripId));<br>
<span>                        </span>newTripId++;<p></p></font></span>

<span><font face="宋体"><span>                    </span>}<br>
<span>                </span>} while (tripDataProvider.cursorNext());<br>
<span>            </span>}<br>
<span>            </span>tripDataProvider.commitChanges();<br>
<span>        </span>} catch (Exception ex) {<br>
<span>            </span>log("Error Description", ex);<br>
<span>            </span>error("Error :"+ex.getMessage());<br>
<span>        </span>}<br>
<span>        </span>return null;<br>
<span>    </span>}<p></p></font></span>

测试应用程序：第3部分

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

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

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

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

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

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

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

添加删除功能

在此部分，我们将在表中添加删除功能。利用此功能，用户能够通过从数据库中删除某行来删除行程。在本教程中，Delete按钮的操作是即时的，并且从数据库中删除行时并不需要使用Save Changes按钮。实际上，由于Delete按钮的事件处理器使用<span>commitChanges</span>方法，它也会像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: <span>Button</span>

c.        Value Expression: <span>Delete</span>

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

e.        Horizontal Align: <span>Center</span>

f.         Vertical Align： <span>Middle</span>

g.        单击OK按钮。

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

添加事件代码

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

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

<span><font face="宋体"><span>    </span>public String delete_action() {<p></p></font></span>

<span><font face="宋体"><span>        </span>form1.discardSubmittedValues("save");<p></p></font></span>

<span><font face="宋体"><span>        </span>try {<p></p></font></span>

<span><font face="宋体"><span>            </span>RowKey rk = tableRowGroup1.getRowKey();<p></p></font></span>

<span><font face="宋体"><span>            </span>if (rk != null) {<p></p></font></span>

<span><font face="宋体"><span>                </span>tripDataProvider.removeRow(rk);<p></p></font></span>

<span><font face="宋体"><span>                </span>tripDataProvider.commitChanges();<p></p></font></span>

<span><font face="宋体"><span>                </span>tripDataProvider.refresh();}<p></p></font></span>

<span><font face="宋体"><span>        </span>} catch (Exception ex) {<p></p></font></span>

<span><font face="宋体"><span>            </span>log("ErrorDescription", ex);<p></p></font></span>

<span><font face="宋体"><span>            </span>error(ex.getMessage());<p></p></font></span>

<span><font face="宋体"><span>        </span>}<p></p></font></span>

<span><font face="宋体"><span>        </span>return null;<p></p></font></span>

<span><font face="宋体"><span>    </span>}<p></p></font></span>

测试应用程序：第4部分

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

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

添加恢复功能

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

添加Revert Changes按钮

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

2.        将按钮文本更改为<span><font face="宋体">Revert</font></span> <span>Changes</span>。

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

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

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

<span><font face="宋体"><span> </span>public String revert_action() {<p></p></font></span>

<span><font face="宋体"><span>        </span>form1.discardSubmittedValues("save");<p></p></font></span>

<span><font face="宋体"><span>        </span>try {<p></p></font></span>

<span><font face="宋体"><span>            </span>tripDataProvider.refresh();<p></p></font></span>

<span><font face="宋体"><span>        </span>} catch (Exception ex) {<p></p></font></span>

<span><font face="宋体"><span>            </span>log("Error Description", ex);<p></p></font></span>

<span><font face="宋体"><span>            </span>error(ex.getMessage());<p></p></font></span>

<span><font face="宋体"><span>        </span>}<p></p></font></span>

<span><font face="宋体"><span>         </span>return null;<p></p></font></span>

<span><font face="宋体"><span>    </span>}<p></p></font></span>

配置虚拟表单

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

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

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

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

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

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

测试应用程序：第5部分

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

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

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

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

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

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

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

结束语

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