本教程指导您如何将名为 ContactEditor 的应用程序的 GUI 连接到 Derby 数据库。在此过程中,您将向 GUI 添加数据敏感的 JDBC 组件,使该程序能够与雇员数据库交互。
在本教程中,您将学会如何:
l 使用 GUI Builder 界面
l 连接两个 GUI 窗口
l 添加和编辑 JDBCRowSet
l 添加数据模型
l 将 GUI 连接到 Derby 数据库
l 将数据绑定到 UI 组件
l 将 UI 组件连接到应用程序逻辑
本教程大约需要 30 分钟完成。
请注意本教程引用了名为 GUI DB Exercise Initial 的项目作为样例,供您在使用这些步骤时参考。另请注意,归档文件中的 GUI DB Exercise Final 项目显示了完成的应用程序。
入门
<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><stroke joinstyle="miter"></stroke><formulas><f eqn="if lineDrawn pixelLineWidth 0"></f><f eqn="sum @0 1 0"></f><f eqn="sum 0 0 @1"></f><f eqn="prod @2 1 2"></f><f eqn="prod @3 21600 pixelWidth"></f><f eqn="prod @3 21600 pixelHeight"></f><f eqn="sum @0 0 1"></f><f eqn="prod @6 1 2"></f><f eqn="prod @7 21600 pixelWidth"></f><f eqn="sum @8 21600 0"></f><f eqn="prod @7 21600 pixelHeight"></f><f eqn="sum @10 21600 0"></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"></path><lock aspectratio="t" v:ext="edit"></lock></shapetype><shape id="_x0000_i1026" style="WIDTH: 112.5pt; HEIGHT: 112.5pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/gui_database_tutorial/2.0_rowset_guts_sm.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image001.png"></imagedata></shape>在 GUI Builder Quickstart 教程中,我们致力于为 ContactEditorUI.java 应用程序构建名为 ContactEditorUI 的对话框。在本教程中,我们将以前创建的 ContactEditorUI GUI 窗体和该应用程序 UI 的主(父)窗口都连接到 Derby 数据库。请注意,尽管本教程中的图片说明的是 Macintosh OS-X 上的过程,但在其他支持平台(如 Windows 或 Solaris)上,步骤几乎相同。
要成功完成本教程,您必须已经安装并正在运行 IDE 包含的 Derby 数据库服务器。请注意,到 NetBeans IDE 5.5 Beta 版时,包含的数据库就不再叫作 Derby 了,而是被称为 Java DB。您还需要将包含在样例项目中的必要的支持类(在 Project 窗口中可见)编译进项目。有关安装和配置 Derby 以用于 NetBeans 的更多信息,请参见 NetBeans Derby tutorial。
最后,您还必须已经创建了 contact_database 并将 User Name 和 Password 设置为 nbuser。还要向数据库添加必要的字段,添加的方法是使用 Create Table UI 或执行以下 SQL 语句:
CREATE TABLE "CONTACTS"
(
"ID" INTEGER not null primary key,
"FIRST_NAME" VARCHAR(50),
"LAST_NAME" VARCHAR(50),
"TITLE" VARCHAR(50),
"NICKNAME" VARCHAR(50),
"DISPLAY_FORMAT" SMALLINT,
"MAIL_FORMAT" SMALLINT,
"EMAIL_ADDRESSES" VARCHAR(1000)
)
请注意,如果您使用 SQL 命令而不是 Create Table UI 创建表,要看到 Contacts 表,您需要在 Runtime 窗口刷新 Tables 节点。
注意:要成功完成本教程,您必须在 JDK 5 上运行 NetBeans IDE 5.0。
添加数据模型
<shape id="_x0000_i1027" style="WIDTH: 112.5pt; HEIGHT: 112.5pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/gui_database_tutorial/4.0_paste_jdbc_rowset_sm.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image003.png"></imagedata></shape>因为应用程序主窗口 GUI 已经准备妥当,我们可以直接跳到添加数据敏感组件这一步,它使我们能够与数据库中的数据交互。在本部分,我们将添加数据模型以确保数据在正确的窗体中向 UI 显示。
因为我们需要的 JDBCRowSet 已经包含在 GUI DB 示例项目中,我们只需将它添加到应用程序 GUI 中即可。而包含的 RowSets 已经有了 BeanInfos,所以我们可以像使用 IDE 中的其他组件一样使用它们,在 Properties 窗口中显示它们的属性。因为只打算使用这个类一次,所以不需要为了将它添加到窗体而将 JDBCRowSet 安装到 Palette。但是如果想重复使用某个类,这样做就很有价值了,我们为了节省时间和精力只是复制粘贴它。
添加 JDBCRowSet 到窗体:
1. 在 Projects 窗口中,右键单击 JDBCRowSet.java 节点并从弹出菜单中选择 Copy。
2. 将它粘贴到设计区域的任意位置。
IDE 将 JDBCRowSet 添加到窗体并且表示行设置的节点出现在 Inspector 窗口中。
请注意,Inspector 窗口中的节点是在 Other Components 节点内添加的。如果在试图粘贴行设置时收到错误消息,则编译项目,然后再试。
现在需要编辑 JDBCRowSet 属性,这样它就能引用我们先前创建的 Contacts 数据库了。还需要设置驱动程序及其使用的路径并提供它进行连接时需要的密码和用户名。
编辑 JDBCRowSet 的属性:
1. 在 Inspector 窗口(不是 Projects 窗口)中选择 JDBCRowSet1 节点。
2. 在 Properties 窗口中,为命令属性输入 select * from contacts。
3. 为驱动程序属性输入 org.apache.derby.jdbc.ClientDriver。
4. 为 url 属性输入 jdbc:derby://localhost:1527/contact_database。
5. 为密码属性输入 nbuser。
6. 为用户名属性输入 nbuser。
现在我们需要添加数据模型,它将成为应用程序与数据库之间的一层,并封装数据访问,为访问和修改数据提供逻辑。示例项目中再次提供了必要的 ContactsModel 类,所以我们只需将它添加到应用程序。包含这样一个类可以在不迫使 GUI 发生变化的情况下更改数据模型。
向窗体添加数据模型:
1. 在 Projects 窗口中,右键单击 ContactsModel.java 节点并从弹出菜单中选择 Copy。
2. 将它粘贴到设计区域的任意位置。
IDE 将 ContactModel 添加到窗体并且表示行设置的节点出现在 Inspector 窗口中的 Other Components 节点内。
改变数据模型的变量名:
1. 在 Inspector 窗口中,右键单击 contactsModel1 节点并从弹出菜单中选择 Change Variable Name。
2. 在显示的 Rename 对话框中,输入新变量名 contactsModel 并单击 OK。
设置数据模型的 rowSet 属性:
1. 在 Inspector 窗口中,选择 contactsModel 节点。
2. 在 Properties 窗口中,单击 rowSet 属性的省略号按钮 (...)。
3. 在显示的编辑器中,选择 Get Parameter From 窗格中的 Bean 单选按钮。
4. 从 Select Bean 组合框中,选择 jDBCRowSet1。
5. 单击 OK 退出对话框。
IDE 设置窗体的 contactsModel 数据模型以使用 jDBCRowSet。
将数据库绑定到 UI
<shape id="_x0000_i1028" style="WIDTH: 112.5pt; HEIGHT: 112.5pt" alt="" type="#_x0000_t75"><imagedata o:href="http://www.netbeans.org/images/articles/gui_database_tutorial/3.0_source_editor_sm.png" src="file:///C:/DOCUME~1/fujiang/LOCALS~1/Temp/msohtml1/01/clip_image005.png"></imagedata></shape>为了让 GUI 与存储在数据库中的联系人信息交互,需要将数据绑定到组件,这样才能显示这些数据并允许用户与它进行交互。在本部分,我们开始将 GUI 连接到 JDBC 组件,启用与数据库的交互。
为了使 GUI 的 JTable 能够正确显示联系人数据,我们需要设置它以使用提供的 RowSetTableModel 类。还需要将 RowSetTableModel 指向先前添加的 JDBCRowSet,使它能够向 JTable 自身转发列信息和数据。最后,我们将编辑 rowSetTableModel1 实例,仅让那些我们想显示的列在 GUI 主窗口中可见。
向窗体添加 RowSetTableModel:
1. 在 Projects 窗口中,右键单击 RowSetTableModel.java 节点并从弹出菜单中选择 Copy。
2. 将它粘贴到设计区域的任意位置。
设置表模块的 rowSet 属性:
1. 在 Inspector 中,选择 rowSetTableModel1 节点。
2. 在 Properties 窗口中,单击省略号按钮 (...) 打开 rowSet 属性编辑器。
3. 在 Get Parameter From 窗格中,选择 Bean 单选按钮。
4. 在 Select Bean 组合框中,选择 jDBCRowSet1。
5. 单击 OK 退出对话框。.
设置 JTable 的模型属性:
1. 在 Inspector 中,选择 JTable。请注意,当您在窗体中选择 JTable 时,JScrollPane 组件在 Inspector 窗口中被高亮显示并且可以在 Properties 窗口中编辑其属性(不是 JTable 的属性)。
2. 在 Properties 窗口中,单击省略号按钮 (...) 打开模型属性的编辑器。
3. 在显示的模型编辑器中,在 Select Mode 组合框中选择 Form Connection。
4. 选择 Bean 单选按钮并在 Component 组合框中选择 rowSetTableModel1。
5. 单击 OK 关闭编辑器。
要决定表的哪些列在运行时可见,需要明确设置它们。为此,我们需要调整 rowSetTableModel1 的属性。
设置表列的可见性:
1. 在 Inspector 中,选择 rowSetTableModel1 节点。
2. 在 Properties 窗口中,单击省略号按钮 (...) 打开 visibleColumns 属性编辑器。
3. 在显示的编辑器中,在 Item 字段输入以下列名,每次输入一个并单击 Add。
m NICKNAME
m FIRST_NAME
m LAST_NAME
4. 单击 OK 退出对话框。.
IDE 设置窗体的 JTable 以显示指定的列,并且列标题按它们被添加的顺序出现在窗体中。
在应用程序窗口关闭时,要释放驻留在模型中的各种资源,我们还需要明确指定预期的行为。在本部分,我们将为应用程序主窗口和 Details 对话框,设置控制此行为的事件动作。
为主窗口 Close 按钮编辑事件动作:
1. 右键单击 Close 按钮并选择 Events > Action > actionPerformed。
2. 在源编辑器中,选择光标所在的行(它应显示为 //TODO add your handling code here),在 editContactActionPerformed 方法主体中添加以下代码:
contactsModel.dispose(); // releases resources held by the model (like DB connection)
System.exit(0); // exists the application
3. 单击 Design 按钮,返回 GUI Builder。
为主窗口编辑事件动作:
1. 在 Inspector 中,右键单击 JFrame 容器并选择 Events > Window >windowClosing。
2. 在源编辑器中,选择光标所在的行。然后添加以下代码:
contactsModel.dispose(); // releases resources held by the model (like DB connection)
System.exit(0); // exists the application
3. 再次单击 Design 按钮,返回 GUI Builder。
为了使主窗口中的各种按钮引起预期的行为,必须给它们设置动作。本部分正是要完成这一工作,通过定义它们必需的事件处理程序触发相应的事件。
向 Edit 按钮添加事件处理程序:
1. 右键单击 Edit 按钮并选择 Events > Action > actionPerformed。
2. 在源编辑器中,选择光标所在的行。然后添加以下代码:
3. 将以下方法添加到 contactEditor 类主体的代码中(在或大约在 346 行)。
private void showDetailDialog(boolean inserting) {
contactsModel.setInsertMode(inserting);
firstNameField.setText(contactsModel.getFirstName());
lastNameField.setText(contactsModel.getLastName());
titleField.setText(contactsModel.getTitle());
nicknameField.setText(contactsModel.getNickname());
displayFormat.setSelectedIndex(contactsModel.getDisplayFormat());
emailField.setText("");
switch (contactsModel.getMailFormat()) {
case 0: htmlChoice.setSelected(true); break;
case 1: plainTextChoice.setSelected(true); break;
case 2: customChoice.setSelected(true); break;
}
javax.swing.DefaultListModel listModel = new javax.swing.DefaultListModel();
Object[] mails = contactsModel.getEmails();
for (int i=0; i<mails.length i listmodel.addelement></mails.length>
emailsList.setModel(listModel);
details.pack();
details.setVisible(true);
}
IDE 向 Edit 按钮添加侦听器使该按钮能够在单击时与 contactsModel 和数据库交互,
为 Add 按钮添加事件处理程序:
1. 右键单击 Add 按钮并选择 Events > Action > actionPerformed。
2. 在源编辑器中,选择光标所在的行。然后添加以下代码:
showDetailDialog(true);
为 Remove 按钮添加事件处理程序:
1. 右键单击 Remove 按钮并选择 Events > Action > actionPerformed。
2. 在源编辑器中,选择光标所在的行。然后添加以下代码:
contactsModel.removeContact();
现在是设置表的选择模型的时候了,它将侦听模型中属性的更改并决定是否可以对选定的联系人进行编辑。请注意,对于本教程,ContactsModel 实现允许编辑或删除任何选定的联系人。
设置表的选择模型:
1. 在 Inspector 窗口中,展开 JScrollPane1 节点并选择 JTable。
2. 在 Properties 窗口中,单击 selectionModel 属性的省略号按钮。
3. 在显示的编辑器中,选择 Property 单选按钮并单击省略号按钮。
4. 在打开的 Select Property 对话框中,在组合框中选择 contactsModel。然后选择 Properties 窗格中的 contactSelection
。
5. 单击 OK 退出对话框。
将 contactsModel 与 Edit 和 Remove 按钮连接:
1. 右键单击设计区域的 Edit 按钮并从弹出菜单中选择 Events > PropertyChange > propertyChange。
2. 在源编辑器中光标所在的行,复制并粘贴以下代码。
editContact.setEnabled(contactsModel.isEditingEnabled());
3. 为 Remove 按钮重复此步骤,但这次使用以下代码:
removeContact.setEnabled(contactsModel.isRemovalEnabled());
IDE 设置这些按钮以启用对数据库联系人的编辑和删除。