Sep 21, 2005 / Acceptance Tests are Executable System Specification

0 comments

Many, many people think that Test First approach is not working and not intuitive at all (especially for acceptance tests). They have a point when say "How could we test something if we don't have implementation and even system specification?". Yes, if you don't have requirements, you can't test. But they don't understand that acceptance tests ARE that spec. It is not wise to artificially separate User Stories from Acceptance Tests. They may be in one place and make up the spec. And even more, it should be executable spec. FIT is one of the closest solution to make spec executable. The tricky thing is to make acceptance tests creation as informal as possible, while keeping them executable. FIT provide a mix: you may write some informal sentences in Word doc, then create a table that will contain test harness. While the first part is simple for customer, the second is not and should be created together with developer, QA or someone who have experience with FIT.

Is it possible to make acceptance tests creation process simpler? Less formal? Intuitive? That's an interesting challenge!

posted by Michael Dubakov @ 7:14 AM

Sep 20, 2005 / Personal Transformation and Agile Development Adoption

0 comments

The article worth to read. Why many people don't try new things, make so many mistakes and solve wrong problems. The article talks about three important dysfunctions of our culture: fragmentation, competition, and reactiveness. Some symptoms:

Fragmentation:

• "We eventually become convinced that knowledge is accumulated bits of information and that learning has little to do with our capacity for effective action"
• "Fragmentation results in "walls" that separate different functions into independent and often warring fiefdoms"

Competition

• "We continually think in terms of war and sports analogies when we interpret management challenges. We need to "beat the competition," "overcome resistance to our new program," "squeeze concessions from the labor union," or "take over this new market." "
• "Fascinated with competition, we often find ourselves competing with the very people with whom we need to collaborate. "
• "The quick-fix mentality also makes us "system blind." Many of today's problems come from yesterday's solutions, and many of today's solutions will be tomorrow's problems. "

Reactiveness

• "If it ain't broke, don't fix it"
• " Many managers think that management is problem solving. But problem solving is not creating. The problem solver tries to make something go away. A creator tries to bring something new into being."

These are the roots of many problems with adoption of agile development practices. People should change to accept agile development, managers should change, customers should change. This is hard and lengthy process. What can we do with it?

posted by Michael Dubakov @ 7:50 AM

Sep 12, 2005 / Danger of Iterative Development

1 comments

As always, Alistair Cockburn wrote great article about iterative development. In general, he shows that iterative development could be helpful for non-agile teams, and could be hazardous for agile teams if improperly adopted. Short iterations could guide project to death.

posted by Michael Dubakov @ 3:30 AM

Sep 1, 2005 / Implementing Ajax.NET-based Lookup Server Control

17 comments

Source code can be downloaded from http://www.targetprocess.com/download/AjaxLookupControlSources.zip

AJAX is one of the most popular buzz words today. Idea is not new, but for some reasons it became popular during last half a year. With web-applications popularity growth, users demand richer and faster interface. And AJAX could improve user experience.

Let me show one example of real user requirements. One of our customers need a way to quickly select user stories and bugs. For example, bugs could be linked to user story and there is a drop down for that purpose. But when you have about 100 items in drop down it is just unusable and lookup control makes selection simpler. That could be achieved via lookup control (like Google Suggest), so we decided to use AJAX in our product to implement this features, improve user interface and make it more responsive. AJAX is completely new for me. I read some general articles about idea sometime ago, but didn't try anything due to lack of tools and ready to use libraries. However, recently I found Ajax.NET – quite powerful framework that supports asynchronous callbacks. Examples are simple and I decided to use it to reach the goal.

In this article I'll describe my experience of creating lookup control based on Ajax.NET. To build lookup control you need quite a few things:

1. Server method that will return a list of matched records
2. JavaScript that will handle post-backs and show a list of matched records
3. Input field on aspx/ascx page.

I will not describe Ajax.NET installation, since it is very simple and there are some great sources that you should check.

Server Side Part

This part was really simple. All I had to implement is one simple method that returns ArrayList of matched records and register class where this method located:

public class Main : Page
{

private void Page_Load(object sender, EventArgs e)
{
 Utility.RegisterTypeForAjax(typeof (Main));
}

[AjaxMethod()]
public ArrayList GetSearchItems(string query)
{
 // use real method ti query data from database instead
 ArrayList items = GetRecords();

 ArrayList matchItems = new ArrayList();

 foreach (string item in items)
 {
  if (item.ToLower().StartsWith(query.ToLower()))
   matchItems.Add(item);
 }
 return matchItems;
}

private ArrayList GetRecords()
{
 ArrayList items = new ArrayList();
 items.Add("Ted");
 items.Add("Teddy");
 items.Add("Mark");
 items.Add("Alfred");
 return items;
}
. . .

GetSearchItems method gets a list of all records from any source and filter records that start with query parameter. Query is what user types in input field.

Client Side Part

Firstly, I decided to write very simple JavaScript that will show DIV with found records right under the query input field. "One step closer", I thought. But it is required to select one of the items below. The simplest thing is turn all items to hyperlinks and fill query field with correct value on click. Here what I’ve got:

<INPUT id=search type=text name=search runat="server"
autocomplete ="off">
<div id="list"></div>

autocomplete=”off” is required to tell browser to not show possible values for input field. Otherwise our control will not work.

function GetSearchItems_CallBack(response) {
var div = document.getElementById("list");
div.innerHTML = "";
if (response.value != null && response.value.length > 0) {
 for (var i = 0; i < response.value.length; ++i){
 div.innerHTML += "<a href=\"javascript:Fill('" + response.value[i] + "');\">"
+ response.value[i] + "</a><br />";
}
}

JavaScript GetSearchItems_CallBack function should be bended to onkeydown event. This could be done in code behind or right on *.aspx page. Let’s use code behind.

private void Page_Load(object sender, EventArgs e)
{
search.Attributes.Add("onkeydown",
"javascript:Main.GetSearchItems(this.value,GetSearchItems_CallBack);");
Utility.RegisterTypeForAjax(typeof ( Main ));
}

The result looks like that:

While it is simplest thing, it is not very usable. You type something, then take a mouse and click a link in appeared list – too many actions. What is required is a cool keyboard support. People should be able to use up/down keys for list navigation and enter key for completion.

Looking for JavaScript

I never handled keys in javascript before and too lazy to write quite large and complex script by myself. I know JavaScript, but not as good as C#, so my first reaction was "Let's find something ready to use and adopt it for my needs". I should say that there are not so many free scripts available. I spent about an hour to find a good one. So can't miss a reference. Thanks Julian Robichaux for the really fancy script with great comments (It is quite rare for free scripts, and for commercial as well :)

The script provides a function that query server, but I need a custom one. Luckily, the only change required is in mainLoop function.

mainLoop = function() {

 val = escape(queryField.value);
    
 if(lastVal != val && searching == false){
    
  var response = Main.GetSearchItems(val);
  showQueryDiv('smi', response.value); lastVal = val;
 }
    
 setTimeout('mainLoop()', 100);
 return true;
};

Script shoul be enabled via onload handler:

<body onload="InitQueryCode('search')">

Finally, I've got what I want within quite small amount of time. But the solution was not reusable, so I decided to create simple server control.

Server Control

Ajax Lookup server control is a really simple thing. The following parts of existing solution should be customizable:

• Name of callback function
• Path to javascript file
• Colors like matched list background and highlight, div padding and so on

It is possible to invent something else, but I didn't require more and, in general, I don't like add complexity if it is not required in nearest future.

Implementation is fairly simple. We may inherit our control from TextBox. Then all we need to do is set some variables and register some javascript functions.

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace play
{
/// <summary>
/// AjaxLookup.cs
/// </summary>
public class AjaxLookup : TextBox
{
 private string scriptFile = "";
 private string callBackFunction = "";
 private string backgroundColor = "#EEE";
 private string highlightColor = "#CCC";
 private string font = "Verdana";
 private string divPadding = "2px";
 private string divBorder = "1px solid #CCC";

 public string ScriptFile
 {
  get { return scriptFile; }
  set { scriptFile = value; }
 }

 public string CallBackFunction
 {
  get { return callBackFunction; }
  set { callBackFunction = value; }
 }

 public string BackgroundColor
 {
  get { return backgroundColor; }
  set { backgroundColor = value; }
 }

 public string HighlightColor
 {
  get { return highlightColor; }
  set { highlightColor = value; }
 }

 public string DivFont
 {
  get { return font; }
  set { font = value; }
 }

 public string DivPadding
 {
  get { return divPadding; }
  set { divPadding = value; }
 }

 public string DivBorder
 {
  get { return divBorder; }
  set { divBorder = value; }
 }

 public AjaxLookup()
 {
  this.Attributes.Add("autocomplete", "off");
 }

 protected override void Render(HtmlTextWriter writer)
 {
  base.Render(writer);

  // bind script that contains almost all logic
  Page.RegisterStartupScript("LoadScript", 
"<script language='JavaScript' src='" + ScriptFile + "'></script>");

  // include UI settings
  string styles = String.Format(
   @"<script language='JavaScript'>
    var DIV_BG_COLOR = '{0}';
    var DIV_HIGHLIGHT_COLOR = '{1}';
    var DIV_FONT = '{2}';
    var DIV_PADDING = '{3}';
    var DIV_BORDER = '{4}';
   </script>",
   BackgroundColor, HighlightColor, DivFont, DivPadding, DivBorder);

  Page.RegisterStartupScript("LookupStyles", styles);

  // initialize postback handling
  Page.RegisterStartupScript(
   "RegisterScript",
   "<script language='JavaScript'>InitQueryCode('" + this.ClientID + "')</script>");

  // set correct calllback function
  Page.RegisterStartupScript("RegisterCallBack", @"<script language='JavaScript'>
  
   mainLoop = function() {

    val = escape(queryField.value);
    
    if(lastVal != val && searching == false){
    
     var response = " + CallBackFunction + @"(val);
     showQueryDiv('smi', response.value); lastVal = val;
    }
    
    setTimeout('mainLoop()', 100);
    return true;};
   </script>");
 }
}

Control can be used this way:

<Ajax:AjaxLookup
 Runat="Server"
 id="search"
 BackgroundColor="#EEE"
 DivBorder="1px solid #CCC"
 DivPadding="2px"
 DivFont="Arial"
 HighlightColor="#C30"
 CallBackFunction="Main.GetSearchItems"
 ScriptFile="lookup.js" />

And here like Lookup Control looks in production:

This implementation is not ideal, but quite good to start from. You may improve flexibility, add some additional parameters and so on.

Conclusion

In general, Ajax.NET could be helpful for many useful things. It is reasonable to start from the simplest things like lookup, but I hope in future many parts of UI in our project will be based on Ajax.

posted by Michael Dubakov @ 12:15 AM