1Fall 2003 6.893 UI Design and Implementation 1Lecture 9: UI Software Architecture2Fall 2003 6.893 UI Design and Implementation 2UI Hall of Fame or Shame?Source: Interface Hall of ShameToday’s hall of shame candidate is the spin control from Microsoft Visual C++ 5.0. By default, the spin control is configured so that clicking on the down arrow increments the value shown in the control. The up arrow decrements the value, so at least the design is consistent with itself, but it isn’t consistent with most users’ models of how up and down should change a numerical value. To actually use this spin control in an interface, a developer would have to override the default behavior of the buttons and reverse them.One might speculate that the reason for this strange default behavior is that the spin control was based on code for a scrollbar. A spin control is basically a scroll bar with the scroll track and thumb removed, leaving only the up and down arrows. Furthermore, the internal model of a typical scrollbar is an integer representing the scrollbar’s position – which usually starts at 0 with the thumb at the top, and increases as the thumb moves down the scrollbar. So the spin control designer may have simply started with a scrollbar, stripped out the unneeded parts, and exposed the internal model as the value of the control. In other words, the implementation model has been exposed, incorrectly, as the interface model.3Fall 2003 6.893 UI Design and Implementation 3Today’s Topics• Computer prototype post-mortem• Model-view-controller• View hierarchyStarting with today’s lecture, we’ll be talking about how graphical user interfaces are implemented. Today we’ll take a high-level look at the software architecture of GUI software, focusing on the design patterns that have proven most useful. Two of the most important patterns are the model-view-controller abstraction, which has evolved somewhat since its original formulation in the early 80’s; and the view hierarchy, which is a central feature in the architecture of every popular GUI toolkit.First, however, we’ll discuss the outcome of computer prototyping.4Fall 2003 6.893 UI Design and Implementation 4Computer Prototype Post-Mortem• Storyboard vs. form builder– Any hybrid approaches?• Tools used (survey)– Good or bad features?– Limitations?• Tricks?• How much coding required?• Could you get the fidelity you wanted?The class discussed the computer prototyping assignment after the fact. Some of the points raised:•Roughly 5 groups did storyboards, 10 groups used a form builder.•Flash was very effective for building hybrid prototypes, since it lets you draw anything but also includes standard widgets like a form builder. HTML imagemaps could be combined with HTML forms in the same way.•Only one group used PowerPoint for a storyboard, and found it painful because its default griddingprevented aligning screenshot components perfectly. Gridding can be turned off.•Most of the form builders used were Java-based. JBuilder was widely criticized for bugginess and strange behavior. NetBeans/Forte seemed better.•Form builder users found themselves debugging Java code even though they didn’t write any backend.5Fall 2003 6.893 UI Design and Implementation 5Model-View-Controller Pattern• Separates frontend concerns from backend concerns• Separates input from output• Permits multiple views on the same application data• Permits views/controllers to be reused for other models• Example: text box– Model: mutable string– View: rectangle with text drawn in it– Controller: keystroke handlerThe model-view-controller pattern, originally articulated in the Smalltalk-80 user interface, has strongly influenced the design of UI software ever since. In fact, MVC may have single-handedly inspired the software design pattern movement; it figures strongly in the introductory chapter of the seminal “Gang of Four” book (Gamma, Helm, Johnson, Vlissides, Design Patterns: Elements of Reusable Software).MVC’s primary goal is separation of concerns. It separates the user interface frontend from the application backend, by putting backend code into the model and frontend code into the view and controller. MVC also separates input from output; the controller is supposed to handle input, and the view is supposed to handle output.In principle, this separation has several benefits. First, it allows the interface to have multiple views showing the same application data. For example, a database field might be shown in a table and in an editable form at the same time. Second, it allows views and controllers to be reused for other models, in other applications. The MVC pattern enables the creation of user interface toolkits, which are libraries of reusable interface objects.In practice, the MVC pattern doesn’t quite work out the way we’d like. We’ll see why.A simple example of the MVC pattern is a text box widget. Its model is a mutable string of characters. The view is an object that draws the text on the screen (usually with a rectangle around it to indicate that it’s an editable text field). The controller is an object that receives keystrokes typed by the user and inserts them in the string.6Fall 2003 6.893 UI Design and Implementation 6MVC DiagramSource: Krasner & PopeHere’s a schematic diagram of the interactions between model, view, and controller. (Figure taken from Krasner & Pope, “A Description of the Model-View-Controller User Interface Paradigm in the Smalltalk-80 System”, JOOP v1 n3, 1988).7Fall 2003 6.893 UI Design and Implementation 7Model• Responsible for data– Maintains application state (data fields)– Implements state-changing behavior– Notifies dependent views/controllers when changes occur (observer pattern)• Design issues– How fine-grained are the change descriptions?• “The string has changed somehow” vs. “Insertion between offsets 3 and 5”– How fine-grained are the observable parts?• Entire string vs. only the part visible in a viewLet’s look at each part in a little more detail. The model is responsible for maintaining application-specific data and providing access to that data. Models are often mutable, and they provide methods for changing the state safely, preserving its representation invariants.OK, all mutable objects do that. But a model must also notify its clients when there are changes to its data, so that
View Full Document
Unlocking...