Home > Database > Mysql Tutorial > NetBeans下构建操作数据库行的Web应用程序(二)

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

WBOY
Release: 2016-06-07 15:41:29
Original
1099 people have browsed it

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

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

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

测试应用程序:第1部分

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

添加插入功能

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

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

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

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

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

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

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

特别注意:IE7中有一个影响JSF 1.2 Button组件宽度的已知问题。解决方法是将Button组件放在布局组件(Grid PanelGroup 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>
Copy after login
<span><font face="宋体"><span>        </span>try {<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>RowKey rk = tripDataProvider.appendRow();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>tripDataProvider.setCursorRow(rk);<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>tripDataProvider.setValue("TRIP.TRIPID", new Integer(0));<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>tripDataProvider.setValue("TRIP.PERSONID", personDD.getSelected());<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>tripDataProvider.setValue("TRIP.TRIPTYPEID", new Integer(1));<p></p></font></span>
Copy after login
<span><font face="宋体"><span>        </span>} catch (Exception ex) {<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>log("Error Description", ex);<p></p></font></span>
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>error(ex.getMessage());<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>}<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>return null;<p></p></font></span>
Copy after login
Copy after login
<span><font face="宋体"><span>    </span>}<p></p></font></span>
Copy after login
Copy after login
Copy after login

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创建两个新子节点:tripDataProvidertripRowSet1

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

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

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>
Copy after login

        您将会使用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>
Copy after login
<span><font face="宋体"><span>        </span><strong>try {<p></p></strong></font></span>
Copy after login
<span><font face="宋体"><span>            </span>// Get the next key, using result of query on MaxTrip data provider<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>CachedRowSetDataProvider maxTrip = getSessionBean1().getMaxTripDataProvider();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>maxTrip.refresh();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>maxTrip.cursorFirst();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>int newTripId = ((Integer) maxTrip.getValue("MAXTRIPID"));<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>// Navigate through rows with data provider<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>if (tripDataProvider.getRowCount() > 0) {<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                </span>tripDataProvider.cursorFirst();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                </span>do {<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                    </span>if (tripDataProvider.getValue("TRIP.TRIPID").equals<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                  </span><span>                        </span>(new Integer(0))) {<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                        </span>tripDataProvider.setValue("TRIP.TRIPID",<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                                            </span>new Integer(newTripId));<br>
<span>                        </span>newTripId++;<p></p></font></span>
Copy after login
<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>
Copy after login

测试应用程序:第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.        HeaderFooter Text删除 HeaderFooter文本字段中的任何默认文本,使其保持空白。

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>
Copy after login
<span><font face="宋体"><span>        </span>form1.discardSubmittedValues("save");<p></p></font></span>
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>try {<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>RowKey rk = tableRowGroup1.getRowKey();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>if (rk != null) {<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                </span>tripDataProvider.removeRow(rk);<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                </span>tripDataProvider.commitChanges();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>                </span>tripDataProvider.refresh();}<p></p></font></span>
Copy after login
<span><font face="宋体"><span>        </span>} catch (Exception ex) {<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>log("ErrorDescription", ex);<p></p></font></span>
Copy after login
<span><font face="宋体"><span>            </span>error(ex.getMessage());<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>}<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>return null;<p></p></font></span>
Copy after login
Copy after login
<span><font face="宋体"><span>    </span>}<p></p></font></span>
Copy after login
Copy after login
Copy after login

测试应用程序:第4部分

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

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

 

添加恢复功能

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

添加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>方法中。

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

<span><font face="宋体"><span> </span>public String revert_action() {<p></p></font></span>
Copy after login
<span><font face="宋体"><span>        </span>form1.discardSubmittedValues("save");<p></p></font></span>
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>try {<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>tripDataProvider.refresh();<p></p></font></span>
Copy after login
<span><font face="宋体"><span>        </span>} catch (Exception ex) {<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>log("Error Description", ex);<p></p></font></span>
Copy after login
Copy after login
<span><font face="宋体"><span>            </span>error(ex.getMessage());<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>        </span>}<p></p></font></span>
Copy after login
Copy after login
Copy after login
<span><font face="宋体"><span>         </span>return null;<p></p></font></span>
Copy after login
<span><font face="宋体"><span>    </span>}<p></p></font></span>
Copy after login
Copy after login
Copy after login

配置虚拟表单

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

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

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

1.        Visual Designer中,按Ctrl键的同时单击以选择AddRevertDelete按钮,单击鼠标右键,然后从弹出菜单中选择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和事件代码,从而可以插入、更新和删除数据库中的数据,并恢复在表单上输入的更改。您还使用了虚拟表单,这使得应用程序使用一个页面即可,并且在添加行或恢复更改时提交的数据可以绕过有效性检查。

 
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template