PS4: Declarative UI

Due at 5:00pm, Monday, March 17th, 2008, by email submission only.

This assignment explores the following topics related to web programming:

• declarative vs. procedural user interface description;
• performance costs of the component model;
• declarative layout.

In this problem set, you will reimplement the WordFinder program that you created in PS1. Instead of using Java Swing, however, you will implement the WordFinder in HTML and Javascript, so that it runs in a web browser.

You must use Mozilla Firefox for this assignment. We don't require your code to work in other web browsers, but it must work in Firefox.

Provided Resources

Skeleton code for this assignment can be found here:

• WordFinder-slow.html is the skeleton HTML file that you will fill in in Problem 1 and 2.
• WordFinder-fast.html is the skeleton HTML for Problem 3.
• WordList.js is a Javascript implementation of the WordList model class from PS1.
• words.js is the 45,000-word dictionary represented as JSON syntax (essentially, a Javascript array).
• FakeScroll.js implements a listbox that scales to larger lists than the standard HTML listbox. You'll use it in Problem 3.

We also provide some resources to help you with web programming:

• Tutorial on HTML/CSS/Javascript debugging in Firefox
• Resources about HTML, CSS, and Javascript on the course wiki.

Problem 1: Static HTML Wireframe (25%)

Start by filling in WordFinder-slow.html so that it displays a static (unchanging, basically unfunctional) rendition of the WordFinder interface shown at the right. You should only add declarative code (HTML and CSS) at this point; you shouldn't introduce any Javascript yet. Your static interface should show a dozen or so words in the listbox, but the list shouldn't change when you type into the textbox.

Follow the specification of PS1 for your interface, with the following exceptions:

• No menubar. You don't need to support File/Open or File/Exit.
• Fixed size. Your interface does not need to be resizable. It can occupy a fixed area of the web browser window.

Useful HTML elements include TABLE (to lay out the elements), INPUT (for textboxes), BUTTON (for buttons), and SELECT (for listboxes).

You should make an effort to separate the structure of your interface (specified as HTML) from details of presentation (specified as CSS), so that they are independent.

Problem 2: Dynamic but Slow (50%)

Now add Javascript code to WordFinder-slow.html in order to implement the behavior of your interface, e.g. so that typing in the Find box filters the listbox. It should behave as specified in PS1, with the following exception:

• Short list. Only use the first 500 words on the list, because the listbox can't handle the entire list.

Your Javascript code will have to add and remove OPTION elements from the listbox, in order to repopulate the list. Alternatively, you can show and hide OPTION elements by changing their CSS style properties.

Problem 3: Dynamic and Fast (10%)

The problem with using a SELECT element as a listbox is that it doesn't scale to thousands of items. To solve this problem, we provide a Javascript class (FakeScroll.js) that turns a DIV element you create into a scalable listbox.

Fill out the WordFinder-fast.html skeleton so that it uses FakeScroll to display and filter the entire dictionary. Much of WordFinder-fast can simply be copied and pasted from your WordFinder-slow; you should only need to change the parts concerning the listbox.

Read FakeScroll.js carefully, because you don't use it the same way as you used the SELECT element in the previous problem.

Questions (15%)

Answer the following questions in readme.txt.

1. Measure the cost of loading items into the listbox in WordFinder-slow. What is the largest list that can be loaded in less than 1 second? (Exclude the time to load the HTML page and Javascript files from your measurement. You can use Firebug's Profile feature to measure times, or you can do the timing yourself using the Javascript code new Date().getTime() to fetch clock times in milliseconds.) Explain how you made your measurement, and describe the platform (processor, operating system, browser) on which you made the measurement.
2. Measure the cost of loading items into the listbox in WordFinder-fast, and report it in the same way.
3. Study the listbox in WordFinder-fast using Firebug or the DOM Inspector, and study the code in FakeScroll.js. Describe the component hierarchy under the listbox -- what is the purpose of each element? How does it make the scrollbar work correctly?

What to Hand In

Package your completed assignment as a zip file, containing a single folder with your files inside it. (If you use Eclipse, then you can package your project as a zip file by selecting the project and invoking Export / General / Archive.) Here's a checklist of things you should confirm before you hand in:

1. all your HTML and Javascript files are included in your zip file
2. readme.txt is included, and it answers the questions above and credits anybody you discussed the assignment with

Before you submit your solution, unpack your zip file in an empty directory and make sure your HTML files run correctly in Firefox.

Submit your solution by email to 6831handin@csail.mit.edu and include PS4 in the subject line.