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:
- layout managers;
- constraint propagation;
- declarative specification.
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:
- The red lines show how components should be aligned. (Your
dialog shouldn't actually display the red lines, of course.)
- 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.
- The single-line textboxes should grow and shrink horizontally as
the window is resized, but not vertically.
- The multiline text area should grow and shrink in both directions
as the window is resized.
- The labels, buttons, and drop-down box should neither grow nor
shrink as the window is resized.
- 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
- Some of the layout requirements may be impossible to enforce in HTML/CSS.
Question 1 below asks you to explain what parts of this layout can't
be done by HTML/CSS.
- Use a <TABLE> element for your main layout.
- Test your layout to make sure it obeys the rules above.
Resize the window. Vary the font size (using your browser's
controls) to make sure alignments are satisfied. You can
also change the labels randomly using this random-text bookmarklet.
(To use a bookmarklet, make a bookmark from the bookmarklet link, and
then click on that bookmark while you're viewing your layout.)
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
- Write down constraint equations for each component's x, y, width, and
height, before you try to translate them into Spring calls.
- Work incrementally -- add one row of controls at a time, and test after each row. Save a copy of your source after each row, in case you screw up and
have to throw it away.
- The Swing tutorial has a section about How to Use SpringLayout
that gives a
useful overview -- but beware that its examples use a lot of convenience
methods like putConstraint(), edge constraints, makeGrid(), and
makeCompactGrid(), all of which are out of bounds for this problem set. If
you read the examples and understand how they work, however, you'll be on
the right track.
- You'll need to familiarize yourself with the Spring class for creating
constraint formulas.
- We have provided a Spring2 class which contains a couple of useful operators that were missing from Spring. Spring2.noStretch() creates a spring that
can't stretch beyond its preferred size, only shrink; and Spring2.noShrink() is its converse. You can see examples of Spring2.noStretch() in the
skeleton for ConstraintsView.
- ConstraintsView also includes a debugging framework that dumps constraint
formula values to the console when you press F1. You might try this on the
skeleton ConstraintsView while you're learning how it works.
Questions (30%)
Answer the following questions in readme.txt.
- What parts of the layout can't be done with HTML/CSS?
- 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?
- Is it possible to create a cycle of constraint equations using SpringLayout?
Why or why not?
- 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.)
- 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:
- folder with all your HTML and CSS files
- 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
- 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.