UML软件工程组织

采用敏捷方法进行用户界面开发
作者: cnJava 来源:ccid

1991年秋,在美国勒海大学亚科卡学院的一份研究报告《21世纪美国制造业的战略:一个工业主导的观点》中,首次提出了敏捷竞争的概念.而今天,我们似乎已经看到,敏捷已经在我们身边,形影不离.

概述

如果你没有采用敏捷的方式,那你就落后了。这是最近SD Best Practices 2004会议上的标语。敏捷的方法就象XP和Scrum正在世界的软件发展中,变得越来越普遍了。敏捷是一个巨大的改变,让软件开发者把重心转移到质量和速度上。这对已经被比喻成面向对象设计的软件开发有很大的影响。但是,这种影响的一些方面已经放慢了:GUI的开发,自从大多数软件包含了一些类型的GUI,而且比较多的软件开发的百分比是去完成以GUI为中心的,应用敏捷的优势去开发GUI就是关键问题了。

什么在阻止人们用敏捷的方法来开发GUI呢?不论他们的应用是基于web的或是桌面应用,大多数开发者不做用户界面user interface的测试驱动开发test-driven development (TDD)。这都因为一个简单的原因:单元测试GUI是很困难的。测试GUI是很乏味沉闷而且容易出错的,包含了模拟用户事件的复杂代码,在事件传播和控制重绘的时候等待,然后在他显示给用户之前,尝试着检测状态。敏捷依赖于测试驱动开发,但是为GUI的特定行为来写有效的测试代码是困难的。在cube farm(办公农庄,用隔断间隔成很多小工作间的办公室? 商务英语)的GUI方面上,质量和设计从敏捷方法中受益已经被完全认识到。

敏捷实践正在渗透进这个领域。单元测试GUI元素的工具激增,JFCUnit 框架测试GUI是用java Swing,基于Web的GUI能被HTMLUnit, HTTPUnit, jWebUnit和类似的工具测试。许多GUI构造器和工具包和单元测试工具有关系,比如VBUnit是为了Visual Basic,QtUnit是给Qt用的。

工具已经存在了,但是处理仍是不确定的。在测试驱动开发(TDD)中,每个代码的改变都在新行为的单元测试前。在开发GUI时,许多变化不过是视觉显示上的调整,比如改变元素的位置,文本,或者颜色。你可以加一个按钮,建一个菜单项,或者构造一个对话框。但是怎样和为什么你要测试这种变化呢?测试每个标签或者颜色值是很愚蠢的。同样的,对于标准的元素象按钮和域,测试他们通常的行为是没有意义的,象对鼠标移动的响应,键的按下,点击,和诸如此类的。这些事情是不可能被中断的。怎样去测试他们的问题只是徒劳的增添了做GUI测试的难度。

一个关键的问题:怎样做测试先行的开发?答案就在于GUI的编码是怎样组织的。敏捷方式的领袖例如Kent Beck 和 David Astels建议在构造GUI的时候要保持视图对象尽可能是轻量的,而且“在表面下”( below the surface.)测试视图层。这个 敏捷对象/瘦视图 模型和我们熟悉的 文档-视图 及 客户端-服务器模式类似,但是被应用于个别的GUI元素。内容和表现的分离改善了代码的设计,使他更模块化和更利于测试。每个用户界面的组件被实现为一个敏捷对象,包括将要被测试的应用的行为,但不包括GUI表现的代码。每个敏捷对象有一个相应的瘦视图类只包括普通的GUI行为。采用这种设计模式,GUI构造变得可以被应用于 测试驱动开发(TDD) 处理了。

例子:构造一个登录对话框

让我们进入一个例子看看怎样使用TDD和 敏捷对象/瘦视图 代码设计模式去开发一个GUI对话框。起初,让我们考虑对话框的图形,敏捷开发提倡预先最小化设计,让软件构架在多次循环开发中重构,但是这个方法对GUI设计不是很合适。设计一个用户界面是一个创造的过程,应该规范地处理,画草图,做原型,和可用性测试。然后,尽管在GUI下的代码可以用TDD迭代地设计,一个形象的设计草图是明智的第一步。这个对话框的基本的设计在图1中勾画出来。


 Figure 1. GUI design sketch for login dialog

这个对话框很简单,包括用户名和密码域,相应的静态文本框和标签,登录和取消按钮。做为一个他行为的初始轮廓,我们决定登录成功的话对话框关闭,登录失败的话对话框仍然开着。取消按钮也关闭对话框。

基本的 敏捷对象/瘦视图 代码类设计的对话框实现在图2中表示。


 Figure 2. The classes LoginDialog and LoginDialogView

敏捷对象类LoginDialog 将包含一个方法对应对话框的每个功能行为。瘦视图类LoginDialogView 将只包含简单的和显示相关的代码,还有get/set 方法去读取和设置显示的信息。在这个过程里,只有LoginDialog里复杂的功能需要被单元测试。我们可以十分自信在LoginDialogView 里的简单行为可以正常工作。

第一个构造的组件是敏捷对象LoginDialog 。他需要一个相应的测试类LoginDialogTest 。第一个测试方法将要验证登录方法,如图3所示。


 Figure 3. The smart object LoginDialog and its test class LoginDialogTest

作为测试先行的开发方法规定,首先要写单元测试。测试预期和定义了要被测试的功能设计。我们需要获得一个用户名和密码,然后返回一个登录成功或者登录失败。一个用来判断的接口方法来做刚才所述的

boolean login(String username, String password);

测试类LoginDialogTest 将测试这个功能。例1展示了在LoginDialogTest.java. 文件中他的初始实现。

LoginDialogTest.java

import junit.framework.*;

 public class LoginDialogTest extends TestCase {

    public void testLogin() {

     LoginDialog dialog = new LoginDialog();

     assertTrue( dialog.login("user", "passwd") ); }

  }

这个测试是基于JUnit基础测试类TestCase的。测试方法testLogin()创建了一个LoginDialog 的实例,调用了他的login()方法,然后判定结果是真。这段代码将不会编译,因为LoginDialog 不存在。在TDD过程后,LoginDialog

将生成和保存,代码编译后,测试运行验证将象预期的那样失败(因为方法没有实现)。然后 LoginDialog 为了通过单元测试给出最小的实现,遵照敏捷的圣条 做 可能工作的最简单的事情(the simplest thing that could possibly work)。例2展示了最初的LoginDialog 版本,用最少的代码通过了单元测试,实现在LoginDialog.java. 文件里。

LoginDialog.java

public class LoginDialog {

   LoginDialog() {}

  public boolean login(String username, String password)

  { return true; }

 }

使用下面的命令来运行代码

javac -classpath ".;junit.jar" LoginDialogTest.java
javac -classpath "." LoginDialog.java

classpath 必须包括junit.jar 来运行单元测试,因为他使用了JUnit.在Linux,Mac OSX,还有其他的UNIX系统上,classpath将包含一个冒号(:)而不是想下面那样用一个分号。

 测试将如下运行

java -classpath ".;junit.jar" junit.textui.TestRunner LoginDialogTest

单元测试通过了,真好!不幸的是,这个编码只是模拟一下。Login()方法将总是批准登录。毋庸置疑,客户将不会欣赏这种水平的安全机制。显然,要写的下一个测试是验证如果给的条件不正确的话将失败。例3展示了LoginDialogTest 的第二个测试方法去实现这个目的,testLoginFail() 。既然两个测试都使用一个LoginDialog 的实例,测试类被重构为在他的setUp() 方法里创建一个固定的测试用的
LoginDialog。

LoginDialogTest.java

import junit.framework.*;
 public class LoginDialogTest extends TestCase {
  private LoginDialog dialog; public void setUp() {
      dialog = new LoginDialog();
      }
  public void testLogin() {
      assertTrue( dialog.login("user", "passwd") );
      }
  public void testLoginFail() {
      assertFalse( dialog.login("", "") );
      }
}

LoginDialog 必须得通过新的测试,不能在第一次测试的时候有失败。TDD过程引导我们构造我们需要的真正的功能,在用正确的用户名和密码登录的时候,能成功登录,如果不是,就失败。例4展示了按此修改的LoginDialog

LoginDialog.java

public class LoginDialog {
  private String user = "user";
  private String passwd = "passwd";
  LoginDialog() {} public boolean login(String username, String password) {

    if (user.equals(username) && passwd.equals(password))
        return true;
   else return false; }
  }

LoginDialog 现在能通过所有的测试。为此,他包括了符合成功登录条件的用户名和密码域。显然,这只是比第一个版本的安全性能稍微好一些。登录代码不应该包含认证的硬编码!基于这点,我们应该引入一个单独的类来包含LoginDialog 用的验证用户的登录信息。然而,这个例子是关于GUI构造的,那让我们暂停这个不安全的登录代码,继续GUI方面。

现在,我们已经建立了登录功能,并用单元测试覆盖了他,但没有可视的GUI来显示它。那下一步该做什么呢?对于已经作的和测试的实际功能,在GUI方面做的是创建和显示图像元素,然后在适当的时候调用login()方法。这个功能是普通和容易建立的,所以他不包含能中断和需要单元测试的复杂行为。因此,当建立GUI元素时,我们不需要去做测试先行的开发。例5展示了创建对话框窗口的Swing类LoginDialogView ,他的实现在LoginDialogView.java.文件。

LoginDialogView.java

import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
  public class LoginDialogView extends JFrame implements ActionListener {
  protected JTextField usernameField;
  protected JTextField passwordField;
  protected JButton loginButton;
  protected JButton cancelButton;
   private LoginDialog dialog;
   LoginDialogView(LoginDialog dlg) {
    super("Login");
    setSize(300, 140);
    dialog = dlg;
    addControls();
   loginButton.addActionListener( this );
   cancelButton.addActionListener( this );
}
 public void actionPerformed(ActionEvent e) {
   String cmd = e.getActionCommand();
   if (cmd.equals("Login") && dialog.login(usernameField.getText(),     passwordField.getText())) { hide(); } }
 private void addControls() {
   Container contentPane = this.getContentPane();
   contentPane.setLayout(new GridBagLayout());
   GridBagConstraints c = new GridBagConstraints();
   JLabel label1 = new JLabel("Username:", Label.RIGHT);
   c.insets = new Insets(2, 2, 2, 2); c.gridx = 0;
   c.gridy = 0; contentPane.add(label1, c);
   usernameField = new JTextField("", 60);
   usernameField.setMinimumSize(new Dimension(180, 30));
   c.gridx = 1;
   contentPane.add(usernameField, c);
   JLabel label2 = new JLabel("Password:", Label.RIGHT);
   c.gridx = 0;
   c.gridy = 1;
   contentPane.add(label2, c);
   passwordField = new JTextField("", 60);
   passwordField.setMinimumSize(new Dimension(180, 30));
   c.gridx = 1;
   contentPane.add(passwordField, c);
   loginButton = new JButton("Login");
   c.gridx = 0;
   c.gridy = 2;
   contentPane.add(loginButton, c);
   cancelButton = new JButton("Cancel");
   c.gridx = 1;
   contentPane.add(cancelButton, c); }}

LoginDialogView 包含了文本域,标签,和按钮元素。除了普通的GUI行为外,他只是有一个简单的行为,被actionPerformed() 方法实现。这个行为就是当登录按钮被点击后,login()方法被调用。如果登录成功,对话框就被所调用的hide()方法所关闭。

为了调用login()函数,在LoginDialogView 构造器里需要接收一个LoginDialog实例。另外,他组装了完整的GUI设置和事件处理代码。大部分代码在addControls() 里,他简单的创建和排版了窗体上的GUI元素。

LoginDialogView 代码示范了一个GUI瘦视图元素怎样被设计使它只包含普通的GUI代码,而把重要的需要测试应用的行为放到一个单独,可测试的敏捷对象中。
LoginDialogView 只需要通过创建它来测试,察看他,从用户的角度确认它看起来和运行起来象期望的那样。例6展示了可执行的类APPMain,它创建了对话窗体来传递可用性测试(指的是传递loginDialog的实例)。

AppMain.java

public class AppMain {
 public static void main(String[] args)
 { AppMain app = new AppMain();
 }
 public AppMain() {
 LoginDialog dialog = new LoginDialog();
 LoginDialogView view = new LoginDialogView(dialog);
 view.show();
  while (view.isVisible()) {
  try { Thread.currentThread().sleep(100);
  }
  catch(Exception x) {}
  }
  System.exit(0);
 }
}

AppMain 类简单的创建一个LoginDialog 和LoginDialogView ,显示视图,休眠直到视图关闭,然后退出。
AppMain 象下面一样运行

java –classpath "." AppMain

运行它创建登录对话框,如图4所示

 
 Figure 4. The login dialog window

和登录对话框交互验证了用图4所示的值登录,会登录成功然后窗体关闭。试着用其它的值登录,窗体将保持打开,因为登录失败了。取消按钮关闭窗体,就象窗体的关闭按钮一样。这个登录对话框就如同设计的那样运行。

解决方案

我们已经根据TDD创建了登录对话框和一个敏捷对象/瘦视图设计模式。得到了一个有很好构架和功能的程序。有功能的应用行为被单元测试所覆盖,普通的用来显示的代码不需要复杂的GUI测试。图5展示了我们所开发的这个软件的构架。


Figure 5. The classes LoginDialog, LoginDialogView, and LoginDialogTest

基于此,其他的特性可以被加入。登录对话框可以有一个消息域去提醒用户登录失败。其他的登陆参数域也可以被加入。一个单独的验证对象可以被创建,硬编码的登录值可以被删掉。不管怎么变化,TDD和敏捷对象/瘦视图模式提供了一个设计和实现上的清晰的方向。重要的应用功能是在于可以测试的敏捷的对象,和在瘦视图中普通的显示用的代码的。

要找更多的测试驱动GUI开发的详细例子,JUnit和其他xUnit测试框架的广泛覆盖,TDD,还有单元测试策略,请看我的书Unit Test Frameworks ,2004年11月O'Reilly出版。


版权所有:UML软件工程组织