Frank is using an advanced query tool to run a report on current output. He begins entering an SQL-like query: "list all ". At this point, a suggestion list appears with all the things that can be listed, and he chooses "products". Continuing on, the query is now "list all products where " and a new list appears: "creationTime", "quality", and so on. He chooses creationTime. then enters the rest manually, preferring to ignore further suggestions. The query ends up as "list all products where creationTime is today and quality is faulty". There's a tick next to the query to indicate it's valid.

How can a command-line interface be supported?

In command-line interfaces, monitor the command being composed and dynamically modify the interface to support the interaction. The interface changes according to data, business logic, and application logic. When the command-line is to be executed on the server, as is often the case, the browser usually delegates to the server to evaluate the partial command.

The command-line is the quintessential expert interface and it's worth bearing in mind that most users are "perpetual intermediates". That is, they learn enough to get by, and generally learn new things only as and when required. So, while a powerful command-line may be a superior choice in the long-run, most users simply don't have the time to spend learning it in advance.

The problem arises with traditional command lines because they present the user with a blank slate. Everything the user types must be based on prior, upfront, learning, and the only feedback occurs after the command-line has been executed. That's not only inefficient for learning, but downright dangerous for sufficiently powerful commands. The model is: human enters command, computer executes command.

The solution is to be more interactive: with a smarter, more proactive, command-line, the construction of a command - its quick evolution from nothingness to an executable string - becomes something of a human-computer collaboration. Examples include:

The benefits apply to novices and experts alike. In supporting novices, the technique has sometimes been referred to as a "training wheels" approach. Like training wheels on a bike, you get a feel for the more powerful interface while still being productive.

Often, the command goes to the server, so it usually makes sense for the server to advise on partial commands. A basic procedure is this:

As an Ajax feature, this pattern is largely speculative: I'm not aware of any production-level Ajax Apps, but the command-line interface is growing at the same time as Ajax; it's inevitable these things will collide, and as the discussion here suggests, there are plenty of synergies. One source of inspiration here is the evolution of IDEs over the past five years, particularly in the Java space. Environments like Eclipse and IntelliJ Idea internally represent source files as data structures, leading to features such as ongoing error detection, offers to fix errors, suggestions, powerful refactorings, alternative displays. All of this happens without ever having to compile the source code. As another source of inspiration, there was a recent experiment on training wheels for the command-line. Students learned about the Unix command line from either a book or a GUI "training wheels" interface, similar to a Live Command-Line. The training wheels interface was found to be more productive and a more pleasant experience too.

I'm not aware of an all-encompassing Live Command Line demo. However, the examples in “Live Search” and “Suggestion” are special cases of Live Command Lines. There are also some Javascript terminal emulators around, though they don't provide Live Command Lines - see Web Shell and JS/UNIX Unix Shell. Also, see the Try Ruby! tutorial for an impressive web interface to the interactive Ruby programming environment.

The Assistive Search Demo was inspired by services such as Google Search, which are trending towards a general-purpose command line. It aims to illustrate the "training wheels" style of command-line support.

There's a typical search engine form - a free-range text input with a Submit button. In addition, there are a few images below, one for each category that can be searched. Thus, the user is alerted as to the capabilities of the search. As you type, the categories “Highlight” and un- “Highlight” to help predict what kind of results will be returned (Figure 1.63, “Assistive Search Demo”). All of this information comes from the server-side: the browser application doesn't know anything about the categories. It calls the server and startup to discover the categories and corresponding images. A timer monitors the command-line, continuing to ask the server which categories it matches. The browser then highlights those categories.

Figure 1.63. Assistive Search Demo

The startup sequence loads the categories and kicks off the command-line monitoring loop. The server is required to have a corresponding image for each category. If it says there's a category "phone" category, then there will be an image at Images/phone.gif. The images are all downloaded and placed alongside each other:

    window.onload = function() {
      initialiseCategories();
      requestValidCategoriesLoop();
      ...
      }
    }
    
    function initialiseCategories() {
      ajaxCaller.getPlainText("categories.php?queryType=getAllCategoriesCSV",
                              onAllCategoriesResponse);
    }
   
    function onAllCategoriesResponse(text, callingContext) {
        allCategoryNames = text.split(",");
        var categoriesFragment = document.createDocumentFragment();
        for (i=0; i<allCategoryNames.length; i++) {
          var categoryName = allCategoryNames[i];
          var categoryImage = document.createElement("img");
          categoryImage.id = categoryName;
          categoryImage.src = "Images/"+categoryName+".gif";
          categoriesFragment.appendChild(categoryImage);
        }
        document.getElementById("categories").appendChild(categoriesFragment);
    }

The key to the Live Command-Line is the monitoring loop. Whenever a change occurs, it asks the server to return a list of all matching categories:

    function requestValidCategoriesLoop() {
        if (query()!=latestServerQuery) {
          var vars = {
            queryType: "getValidCategories",
            queryText: escape(query())
          }
          ajaxCaller.get("categories.php", vars, onValidCategoriesResponse,
                         false, null);
          latestServerQuery = query();
        }
        setTimeout('requestValidCategoriesLoop();', THROTTLE_PERIOD);
    }

The server uses a bunch of heuristics to calculate the categories that are valid for this query. For instance, it decides if something belongs to the "people" category by looking up a collection of pronouns in the dictionary. A controller will ultimately return the categories as a comma-separated list, generated with the following PHP logic:

    function getValidCategories($queryText) {
      logInfo("Queried for '$queryText'\n");
   
      $cats = array();
      eregi(".+", $queryText) && array_push($cats, 'web');
      eregi("^[0-9\+][A-Z0-9 \-]*$", $queryText) && array_push($cats, 'phone');
      eregi("^[0-9\.\+\/\* -]+$",$queryText) && array_push($cats, 'calculator');
      isInTheNews($queryText) && array_push($cats, 'news');
      isInWordList($queryText, "./pronouns") && array_push($cats, 'people');
      isInWordList($queryText, "./words") && array_push($cats, 'dictionary');
   
      return $cats;
    }

Back in the browser, the category images are dynamically updated with a CSS class indicating whether or not they are valid, determined by checking if they were in the list. There's also an event handler to perform a search on a specific category, as long as its valid:

    function onValidCategoriesResponse(text) {
   
        var validCategoryNames = text.split(",");
   
        // Create a data structure to make it faster to determine if a named
        // category is valid. For each valid category, we add an associative array
        // key into the array, with the key being the category name itself.
        validCategoryHash = new Array();
        for (i=0; i<validCategoryNames.length; i++) {
            validCategoryHash[validCategoryNames[i]] = "exists";
        }
   
        // For all categories, show the category if it's in the valid category map
        for (i=0; i<allCategoryNames.length; i++) {
            var categoryName = allCategoryNames[i];
            var categoryImage = $(categoryName);
            if (validCategoryHash[categoryName]) {
              categoryImage.onclick = onCategoryClicked;
              categoryImage.className="valid";
              categoryImage.title =
                "Category '" + categoryName + "'" +" probably has results";
            } else {
              categoryImage.onclick = null;
              categoryImage.className="invalid";
              categoryImage.title =
                "Category '" + categoryName + "'" + " has no results";
            }
        }
    }