[an error occurred while processing this directive]
[an error occurred while processing this directive]

PS5: Constraints and Layout

Due at 5:00pm, Monday, March 31st, 2008, by email submission only.

This assignment explores the following topics related to implementing user interfaces declaratively:

In this problem set, you will implement the same dialog box layout using two different techniques: (1) HTML and CSS; and (2) constraint equations as implemented by SpringLayout in Java.

Provided Resources

We provide you with skeletons for your two implementations, along with testing classes to test your implementations; Get all the code here:

You can run ps5-provided.jar to see the LayoutTester window pop up and display the skeleton dialog interfaces.

Dialog Box Layout

Here is the layout you will be expected to create:


Most of the layout rules are straightforward from the picture:

  1. The red lines show how components should be aligned.  (Your dialog shouldn't actually display the red lines, of course.)
  2. The Send button and Cancel button should be the same size (both width and height), separated by 10 pixels, and balanced around the center of the dialog.
  3. The single-line textboxes should grow and shrink horizontally as the window is resized, but not vertically.
  4. The multiline text area should grow and shrink in both directions as the window is resized.
  5. The labels, buttons, and drop-down box should neither grow nor shrink as the window is resized.
  6. There should be at least a 5-pixel vertical gap between the Subject textbox and the Priority drop-down box, and between the Attach textbox and the Send/Cancel buttons.

Your code should make no assumptions about the pixel sizes of components, and it should react dynamically if those preferred pixel sizes change at runtime. LayoutTester has buttons that change font sizes and label contents, so that you can see whether your layout reacts appropriately when the components change size. Your HTML implementation can be tested similarly using your browser settings and the provided bookmarklet, linked below.

Any layout behavior not mentioned in these rules, and not obvious in the picture, is unspecified (i.e., up to you). For example, we don't care what happens when the window is too small to fit some of the components.

Problem 1: HTML Layout (30%)

Implement DialogBoxLayout.html using only HTML and CSS stylesheets, no Javascript. The provided code already declares all the labels and components you will need for the dialog box. Your layout should work in Firefox.

Hints

Problem 2: Constraint-Based Layout (40%)

Implement ConstraintView, which should use the SpringLayout layout manager (and no other layout managers).

SpringLayout includes some convenience methods, such as SpringLayout.putConstraint(). It also defines an alernative "edge" view of components, which allows you to constrain a component's north, south, east and west edges. Do not use putConstraint(), and do not use edge constraints. For this assignment, you should instead define a constraint formula for each component's x, y, width, and height properties. The skeleton shows how to lay out the To and Subject part of the dialog. You should follow this model for the rest. In particular, you should not change the part of ConstraintView that is marked "DO NOT CHANGE"; this part of the code will require you to use only x, y, width, and height formulas. (This isn't just an arbitrary requirement. Some very subtle issues arise when you use edge constraints in combination with x/y/width/height constraints -- the order in which you define the constraints starts to matter, and debugging can become very difficult. See Question 4 below.)

Hints

Questions (30%)

Answer the following questions in readme.txt.

  1. What parts of the layout can't be done with HTML/CSS?
  2. Look carefully at the labels and fields in your HTML implementation. Are the text baselines aligned? (Enlarging the font and taking screenshots may help you check.) What layout choices cause the baselines to be aligned, and what choices cause them to become unaligned? What does this imply about where the components themselves are drawing their text?
  3. Is it possible to create a cycle of constraint equations using SpringLayout? Why or why not?
  4. How does SpringLayout behave when the layout is overconstrained? For example, if a component has constraints on its west edge (x), east edge, and width? (Hint: look at SpringLayout.Constraints.)
  5. The layout has 5-pixel gaps separating it into three parts vertically: the message envelope (To & Subject), the message body, and the button panel. Suppose you wanted each part to be represented by a separate, reusable component. How would this affect your ability to implement the layout rules with HTML? What about with constraint-based layout? (Note: SpringLayout currently isn't designed to handle this case, so answer this question with respect to constraint-based layout in general, not SpringLayout in particular.)

What to Hand In

Package your completed assignment as a zip file with the following included:

  1. folder with all your HTML and CSS files
  2. jar file, as described in PS1:
    • include all your Java source (Javadoc documentation isn't necessary)
    • specify the main class of your jar file as LayoutTester
    • include all necessary third-party libraries, either inside your jar or as separate jars referenced by your jar's classpath
  3. readme.txt with answers to the questions above and credit to anybody you discussed the assignment with

Before you submit your solution, put all the jar files you plan to submit in an empty directory and make sure you can run it:

java -jar yourfile.jar

Submit your solution by email (with all required files attached) to 6831handin@csail.mit.edu and include PS5 in the subject line.

[an error occurred while processing this directive]