使用 UI 调试器调试 Swing 应用程序

作者: Frank NimphiusShay Shmeltzer,Oracle,2005 年 12 月

简介

如果您观察开发人员构建 Swing 应用程序,通常会看到他们使用可视化布局编辑(例如,JDeveloper 中的可视化布局编辑)来创建应用程序。但是,在调试 Swing 时,大多数开发人员不得不在没有任何可视化帮助的情况下使用“常规”行调试器。在开发 JDeveloper(本身就有十分复杂的 Swing 应用程序)时,Oracle 的开发人员想用一种更好的方法来调试 Swing 应用程序,从而在 JDeveloper 中创建了特有的 Swing UI 调试器。可视化调试器的设计思想是:能够在不查看代码且不了解代码用途的情况下调试应用程序。

在本文中,我们将说明该调试器的一些功能。

 

调试 Swing 演示

 

为了阐释使用 UI 调试器是多么简单,我们将说明如何理解 JDK 附带的 Swing 演示,并了解它们的内部工作方式。
首先,我们针对 swing 演示在 JDeveloper 中建立一个项目。在 JDeveloper 中创建新的应用程序和项目。转到 project properties,在 project content 中移除现有目录,并添加您使用的 JDK 版本中的 demo/jfc/swingset2/src 目录。

现在,我们来调试演示。单击 SwingSet2.java 文件,从 Debug 菜单中选择 UI Debug。该 Swing 演示应用程序将开始运行。

单击 Jslider Demo 图标,注意当您移动“Minor Ticks”滑块时,屏幕底部将显示一个带有值的消息。这是如何做到的?

此时应该激活 UI Debugger。不要关闭运行的应用程序,切换到 JDeveloper 窗口。在 JDeveloper 的 UI Outline 调试器窗口中,单击小照相机图标以获得应用程序的快照。在快照中单击“Minor Ticks”滑块以锁定它,您希望了解谁正在通过该对象监听事件。右键单击滑块并选择“show listeners”。



将显示一个包含该对象的监听程序列表的窗口。您可以选择监听程序并单击 go-to-source 按钮,这样可以直接查看将调用的代码。



另一个有用的特性是能够在屏幕上查看对象,例如,假设您要找到某个按钮图标在工具栏中的位置。右键单击最顶层的一个按钮并选择“inspect”。



将显示 Inspect 窗口,您能够从中找到图标位置的值。


您已经看到了在 Swing 用户界面中查找内容(无需深入代码级别)是多么容易。

现在,我们来探究另一个示例,它重点强调了 UI Debugger 提供的 UI Tree 视图。

UI Tree 搜索示例

虽然 Swing 应用程序的结构从表面上看很简单,但实际上从技术方面看,Swing UI 是组件和容器的复杂嵌套,非常类似于著名的俄罗斯套娃(一个娃娃中包含着其他娃娃)。但与俄罗斯套娃(只是简单的嵌套)不同的是,Swing UI 可以有非常复杂的嵌套层次结构,这将使您疑惑如何找到要使用的特定组件的位置。

下面,我们来看一下 Oracle JDeveloper 中的可视化 Swing UI Debugger 如何帮助应用程序开发人员找到并调试 Swing 应用程序中的 UI 组件。

介绍示例应用程序

为了引导您阅读该方法文档,我们创建了这个简单的应用程序。 下载示例文件,将其解压缩到您的磁盘,然后使用 JDeveloper 10.1.3 打开 swingLogon.jws 文件。
我们的应用程序非常简单,只包含有 RunnerFrame,后者只有一个用于调用 LogonDialog 的按钮。LogonDialog 具有两个字段(用户名和密码)以及“OK”和“Cancel”按钮。

GUI 对话框中的常见设计功能是,tab 键用于字段导航,而 enter 键用于提交对话框。要在登录对话框中实现该功能,我们需要针对用户名和密码字段添加一个键盘监听程序,以便在按下 enter 键时调用 ok 按钮。

该事件监听程序执行的代码与以下代码类似:

private void mPassword_keyPressed(KeyEvent e) {
  if (e.getKeyCode() == KeyEvent.VK_ENTER){        
        ((JButton)#path to button#.getComponent(0)).doClick();          
   }
}

开发难点是确定 JOptionPane 对话框上 ok 按钮的访问路径。我们来看一下 Oracle JDeveloper 中的 Swing GUI Debugger 如何在本例中变得易于使用。

使用 Swing UI Debugger

要使用 Swing UI Debugger,单击导航器中的 RunnerFrame 文件,并从调试器菜单中选择 UI 调试器选项。

现在,单击应用程序中的登录按钮,这将弹出一个登录对话框。此时,按下 UI Tree 窗口或 UI Outline 窗口中的照相机图标。UI outline 窗口显示当前用户界面的屏幕捕获,并允许您选择要调试的 UI 组件。选中“outline”选项将显示包含组件的容器的概要。

现在,您可以单击 UI Outline 窗口中的“ok”按钮。UI Tree 窗口与 UI outline 窗口同步,并显示所选组件在 UI 组件树中的位置。您可以单击图像中的其他组件(例如,用户名字段),以查看它们的相对位置。

对于我们的对话框,UI Tree 的图像显示:为了从用户名字段跳转到 ok 按钮,我们需要进入上一级,然后在以下三级,我们还可以在 UI Tree 中看到每个容器中项的顺序。当前组件上面的组件(祖先)通过调用所选组件的 getParent 方法来访问,而当前组件下面的组件(后代)则通过调用 getComponent 来访问。因此,该按钮的访问路径是

             JPanel topPanel = (JPanel) usernameField.getParent().getParent() ;
             JOptionPane buttonOptionPane = (JOptionPane) topPanel.getComponent(2);
             JPanel buttonPanel = (JPanel) buttonOptionPane.getComponent(1);
             JButton okButton = (JButton) buttonPanel.getComponent(0);
 

如果不使用 UI Debugger,找到该路经无疑需要更多的时间。针对层次结构的每一级使用类的类型信息可让开发人员在分析树时编写更有效的代码。

总结

通过提供可视化方式来访问和分析 Swing 应用程序的复杂结构,JDeveloper 中的 Swing UI 调试器使得调试基于 Swing 的应用程序更为简单。对于真正的 Swing 开发人员来说,它是一个必备功能。

 

false ,,,,,,,,,,,,,,,,