本教程介绍了如何使用具备 Web 功能的 NetBeans IDE 构建一个可以创建、检索、更新和删除数据库行的 Web 应用程序。该应用程序提供一个主数据的下拉列表以及一个同步的详细信息表。该 应用程序的用户可以在详细信息表及其关联数据库中添加、更新和删除记录。
本教程介绍了如何使用具备Web功能的NetBeans IDE构建一个可以创建、检索、更新和删除数据库行的Web应用程序。该应用程序提供一个主数据的下拉列表以及一个同步的详细信息表。该 应用程序的用户可以在详细信息表及其关联数据库中添加、更新和删除记录。
本教程使用了其他基础教程中介绍的一些概念。如果您不具备 IDE 及其设计组件的基本知识，可以考虑首先阅读一些入门教程，比如Visual Web JSF应用程序开发入门和使用Databound组件访问数据库。
单击主工具栏上的Run Main Projec 按钮
在此部分，我们将通过在数据库中插入行集，实现将行程添加到表中的功能。首先，为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.将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：
|
代码示例 3：添加行程操作的代码 |
<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>
通过单击Run Main Project按钮
在此部分，将添加第二个行集到项目中。该行集用于计算已使用的最大行程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. 将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：
|
代码示例 4：保存操作代码 |
<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>ログイン後にコピー |
通过单击Run Main Project按钮以生成、部署和运行项目。应用程序将可以实现以下功能：
l 可以添加行程并进行保存。然后，该行程将显示在表中并持续存在。如果选择其他人员，然后返回到此人员，则会看到所添加的行程。
l 可以编辑现有的行程信息，并保存所做的更改。
l 如果在Date字段中输入除日期之外的内容，应用程序将提供一条错误消息。
l 在保存之前您可以多次单击Add Trip按钮，这是一次添加多行的简便方法。如果在保存更改时任何行仍然为空，则会将其保存为空行。
l 如果在单击Save Changes之前您切换到其他人员，则会丢失所有更新。
l 如果修改了某些值，然后单击某个列标题以按该列进行排序，则Table组件会记住这些暂挂的更改，随后可以保存这些更改。
在此部分，我们将在表中添加删除功能。利用此功能，用户能够通过从数据库中删除某行来删除行程。在本教程中，Delete按钮的操作是即时的，并且从数据库中删除行时并不需要使用Save Changes按钮。实际上，由于Delete按钮的事件处理器使用<span>commitChanges</span>方法，它也会像Save Changes按钮一样保存所有待定的更改。
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. 将下面以粗体显示的代码添加到该按钮的事件处理程序方法中：
|
代码示例 5：删除操作代码 |
<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> ログイン後にコピー ログイン後にコピー ログイン後にコピー |
通过单击Run Main Project按钮以生成、部署和运行项目。下图显示了该运行应用程序。
部署后，您应该可以从表中删除行，进而将其从数据库中删除。删除操作还会将所有待定更改提交到数据库。
现在，将恢复功能添加到页面中。使用此功能，用户将可以放弃其编辑并恢复为以前保存的数据。注意：恢复功能不能恢复已保存或删除的行；Save Changes和Delete 按钮会将更改提交到数据库。
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>方法中。
|
代码示例 6：恢复操作代码 |
<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按钮。
通过单击Run Main Project按钮
l 从下拉列表中选择一个名字，并显示此人的行程摘要。
l 编辑现有的行程信息，并将更改保存到数据库中。
l 编辑具有不正确的日期格式的现有行程信息，然后单击Add Trip按钮添加新行，或者单击Revert Changes按钮放弃编辑。
l 在表中添加行，填写行程字段，并将更改保存到数据库中。
l 从表中（同时从数据库中）删除行。
l 放弃编辑内容，并恢复为数据库中最近保存的数据。
在本教程中，您将Table组件、Text Field组件以及Drop Down List组件和数据库中的信息进行了关联。此外，还为组件设置了属性，添加了prerender和事件代码，从而可以插入、更新和删除数据库中的数据，并恢复在表单上输入的更改。您还使用了虚拟表单，这使得应用程序使用一个页面即可，并且在添加行或恢复更改时提交的数据可以绕过有效性检查。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
