A Very Early Dynamic GUI Prototype

[Previous] [Next]

The test stub code we inserted in the facade classes in Chapter 6, "Reducing Time to Market," makes it possible for GUI developers to start designing an early GUI prototype, like the one in Figure 7-1. Thanks to the facade code, this prototype shows signs of life rather than just being a picture of what is to come. It effectively mimics the behavior of the GUI-to-be.

Figure 7-1. This prototype allows GUI developers and users to get an early proof of concept.

This prototype even knows how to take advantage of the many animation facilities that are available in DHTML. You can't see it in the figure, but the first time the list of horse names comes up, no form fields appear on the right side of the page. These don't appear until the first time the user clicks a name on the list, at which point an animated form field appears. Beginning as a very small circle, the form expands into a larger circle. It takes less than a second, so the cost for this little extravagance is insignificant. (After all, it happens only once in every session.) The "On Animation" section later in this chapter shows how we did this.

Naturally, this prototype GUI can't show much data. Furthermore, the horses, the countries, and the trainers are hard-coded into the facade test stubs. Just the same, the GUI developers will be able to find weaknesses that might exist in your design of the facade class. Also, together you will be able to find weak spots that might exist in the application requirements.

Later, when real server application code is available, tested and validated GUI objects will already exist. Using the same DHTML page as shown in Figure 7-1, we'll be able to list real horse names from the database, add new horses, modify existing horses, and delete or deactivate retired horses without changing one line of HTML or VBScript.

Figure 7-2 shows this transformation. We used exactly the same DHTML page we used in Figure 7-1. We didn't change one line of HTML or Script. The only changes were on the server side. Instead of using test stub code, we used real production-quality code, going all the way to the database to fetch the information required.

(Incidentally, Sharp Matt—featured in Figure 7-2—is a Black Type horse, which means that he has won internationally classified races. He has won more than SEK 2 million—approximately $240,000 US—which is quite a lot for a Scandinavian thoroughbred.)

Figure 7-2. The same GUI prototype shown in Figure 7-1 now provides "live" data from a real database. Notice that the user has selected Sharp Matt and that data for this horse is displayed in the form.

The most important thing to understand about this process is that the GUI is exactly the same in both cases. Only the server-side code has changed—from test stub code to real production code.