Spring 2008 6.831 User Interface Design and Implementation 1Lecture 16: Constraints & Layout UI Hall of Fame or Shame?Spring 2008 6.831 User Interface Design and Implementation 2Suggested by Dennis Ramdass This example was suggested by Dennis Ramdass. Doodle is a web site for conducting small polls, which is most commonly used to schedule an event by asking a group of people to mark their availability. The interface for entering your choices is shown on the left – you enter your name in the textbox, click on the checkboxes to mark your availability, and then click Participate. The editing interface is shown on the right. You click the Edit An Entry or Delete An Entry link (shown at the top), and then the page displays Edit and Delete links next to individual entries (shown at the bottom). Let’s discuss this interface from the perspective of: - learnability - efficiency - graphic design - user control & freedom - error preventionToday’s Topics• Automatic layout• Layout managers•ConstraintsSpring 2008 6.831 User Interface Design and Implementation 3 Today’s lecture is about automatic layout – determining the positions and sizes of UI components. Automatic layout is an good example of declarative user interface specification. The programmer specifies what kind of layout is desired by attaching properties or layout managers to the view hierarchy, and then an automatic algorithm (layout propagation) actually computes the layout. We’ll also talk about constraints, which is a rather low-level, but also declarative, technique for specifying layout. Constraints are useful for more than just layout; unfortunately most GUI toolkits don’t have a general-purpose constraint solver built in. But constraints are nevertheless a useful way to think about relationships in a user interface declaratively, even if you have to translate them to procedural code yourself. Automatic Layout• Layout determines the sizes and positions of components on the screen– Also called geometry in some toolkits• Declarative layout– Java: layout managers– CSS: layout styles• Procedural layout– Write code to compute positions and sizesSpring 2008 6.831 User Interface Design and Implementation 4 In Java, automatic layout is a declarative process. First you specify the graphical objects that should appear in the window, which you do by creating instances of various objects and assembling them into a component hierarchy. Then you specify how they should be related to each other, by attaching a layout manager to each container. You can contrast this to a procedural approach to layout, in which you actually write Java or Javascript code that computes positions and sizes of graphical objects. (You probably wrote a lot of this kind of code in the checkerboard output assignment, for example, to compute where each checker should appear on the screen.) Reasons to Do Automatic Layout• Higher level programming– Shorter, simpler code• Adapts to change–Window size– Font size– Widget set (or theme or skin)– Labels (internationalization)– Adding or removing componentsSpring 2008 6.831 User Interface Design and Implementation 5 Here are the two key reasons why we like automatic layout – and these two reasons generalize to other forms of declarative UI as well. First, it makes programming easier. The code that sets up layout managers is usually much simpler than procedural code that does the same thing. Second, the resulting layout can respond to change more readily. Because it is generated automatically, it can be regenerated any time changes occur that might affect it. One obvious example of this kind of change is resizing the window, which increases or decreases the space available to the layout. You could handle window resizing with procedural code as well, of course, but the difficulty of writing this code means that programmers generally don’t. (That’swhy many Windows dialog boxes, which are often laid out using absolute coordinates in a GUI builder, refuse to be resized! A serious restriction of user control and freedom, particularly if the dialog box contains a list or file chooser that would be easier to use if it were larger.) Automatic layout can also automatically adapt to font size changes, different widget sets (e.g., buttons of different size, shape, or decoration), and different labels (which often occur when you translate an interface to another language, e.g. English to German). These kinds of changes tend to happen as the application is moved from one platform to another, rather than dynamically while the program is running; but it’s helpful if the programmer doesn’t have to worry about them. Another dynamic change that automatic layout can deal with is the appearance or disappearance of components -- if the user is allowed to add or remove buttons from a toolbar, for example, or if new textboxes can be added or removed from a search query. Layout Manager Approach• Layout manager performs automatic layout of a container’s children– 1D (BoxLayout, FlowLayout, BorderLayout)– 2D (GridLayout, GridBagLayout, TableLayout)• Advantages– Captures most common kinds of layout relationships in reusable, declarative form• Disadvantages– Can only relate siblings in component hierarchySpring 2008 6.831 User Interface Design and Implementation 6 Let’s talk specifically about the layout-manager approach used in Java, which evolved from earlier UI toolkits like Motif and Tcl/Tk. A layout manager is attached to a container, and it computes the positions and sizes of that container’s children. There are two basic kinds of layout managers: one-dimensional and two-dimensional. One-dimensional layouts enforce only one direction of alignment between the components; for example, BoxLayout aligns components along a line either horizontally or vertically. BorderLayout is also one-dimensional: it can align components along any edge of the container, but the components on different edges aren’t aligned with each other at all. Two-dimensional layouts can enforce alignment in two directions, so that components are lined up in rows and columns. 2D layouts are generally more complicated to specify (totally GridBag!), but we’ll see in the Graphic Design lecture that they’re really essential for many dialog box layouts, in which you want to align captions and fields both horizontallyand vertically at the same time. Layout managers are a great tool
View Full Document
Unlocking...