HOMEWORK 6: Magic Lenses

Objective

You'll augment the PageSorter to add the ability to display a Magic Lens that reveals the tags of any page thumbnails over which it passes. You should be able to make lenses appear and disappear, and drag them around the sorter UI.

The learning goals for this assignment are:

• Experience with lens-style interaction techniques.
• Experience implementing Swing lenses using GlassPane and other mechanisms.
• Experience with input/output redirection in Swing.

Description

When the lens passes over a page thumbnail it should change the graphical presentation within its bounds. Specifically, it should cause the thumbnail to not show page contents (ink and text), but rather a graphical representation of the tags that are on the thumbnail(s) below it, such as appointment, action item, and so forth.

Think of the lens as an alternative view that changes the page thumbnails from displaying content to displaying tags.

NOTE: Remember in the previous assignment I said that it's ok to implement the magnet animation as an alternate view or mode in your interface. If you've done this, it's ok if the lenses only work with the "standard" page sorter view or mode, and not the animated mode.

There are a number of specific requirements you should implement for this assignment:

• The PageSorter should have some control to cause a lens to be displayed. This can be a button or menu item or something else of your choosing.
• Once displayed, the lens must have some visible border, must have a draggable region (such as a title bar or grab handle), and some control on it to allow the user to dismiss the lens (such as a gizmo on the title bar, or other control).
• Output: As the lens is dragged over thumbnails, the view through the lens should show a representation of the thumbnail with no content (ink or text). You can do this as simply a box or an outline of the thumbnail you pass over. To this basic representation you should also draw graphical decorations on the page to indicate what tags (if any) have been assigned to the page. This could be graphical icons or text, for example. These elements should appear to stay at a fixed location on the thumbnail as the lens moves (for example, the decorations should stay at the top of the thumbnail, even if the lens is repositioned over it).
• Input: You need to distinguish between two types of input for this assignment: input intended for the lens and input intended for the thumbnail below the lens. Mouse events that occur in the draggable area or the dismiss control should be handled by the lens, and not passed through to the underlying components. Events that happen in the transparent area of the lens should be passed through to the underlying components as if the lens were not there. In other words, you should be able to select pages, drag them, etc., through the lens. Don't worry about handling the case of dragging something from inside the lens to outside, or vice versa. We won't test for that case.

Implementing the Lenses

Next you'll want to implement the lens class itself. You can either extend JComponent directly (which means that you'll implement paintComponent() to draw your titlebar or drag handles or whatever, as well as your dismiss control), or you may want to investigate using JInternalFrame as a shortcut way to create a lens that looks something like a normal window. You do not need to use the MVC model for your lenses.

For the input part of the assignment, make sure your lens implements listeners for all of the sorts of events that it wants to receive. When an event happens, you simply need to see where in your lens it occurred. If it is on the draggable area or other control, then your lens should respond to the event itself. If on the other hand it's in the transparent main area of the lens, you will need to tweak the event and then re-dispatch it to the underlying component over which it occurred. Look at SwingUtilities.convertMouseEvent() and Component.dispatch() as ways to do this.

For the output part of the assignment, in paintComponent() you'll have to do two things. First is figure out what components are within the lens' bounding box and render them. Remember the strategies for output we talked about in class: ambush, model-in/model-out, and reparameterize and clip. You will likely use either ambush (create your own Graphics object subclass and then ask the thumbnails to draw themselves using this object; see SwingUtilities.paintComponent() ), or model-in/model-out (which would mean just looking at the hierarchy of thumbnails at runtime and drawing a representation of them yourself). Model-in/model-out is probably the easiest approach. Most of the work here will likely be in simply getting the coordinate transforms right. After rendering the new view of the thumbnails, then render the lens' own appearance (drag and dismiss controls) over this.

Extra Credit

• Make your lenses resizable. +2 points.
• Come up with a lens that's more visually interesting than just a square box or JInternalFrame, such as a non-rectangular lens. +3 points
• Use the lens as a control for setting tags, much like the color palette lens we talked about in class. You could do this by having special regions of the lens that you click through to set or remove tags, or you could even have the lens display check box controls over the tops of page thumbnails, which the user can then interact with. +3 points.
• Multiple types of lenses. For example you can imagine a lens that only displays pages that have certain tags (allowing you to pass it over a stack of pages and filter out ones that are not interesting to you). If you have multiple types of lenses you may want to consider making them composable. +2 to +5 points, depending on complexity of the new lens type(s), whether they're composable, etc.

Deliverable

While this assignment is significantly more difficult than the previous one, most of the parts should be fairly straightforward. Start with the basic PLAF component architecture and get that working in your application first; one easy way to do this is to implement the UI class's paint method so that it only draws the page background. This way you'll be able to see your component show up and know it's working correctly. After this do the stroke processing (it's the next easiest), followed by the text processing (slightly more complicated). Finally, once all of this is working, it should be fairly straightforward to keep a list of notepage components in your application and make the New/Delete/Next/Previous controls work.

To turn in the assignment, please follow the same process as last time:

0. Make sure your program is runnable from the command line using the command "java NotebookApp" when run from inside your project directory (described below). Use exactly this name (with no package) to make things easier on me and the TAs.

1. Create a new directory using your last name as the name of the directory.

2. Compile your application and place both the sources and classfiles into this directory (they can be at the top-level or in a subdirectory, whatever you want).

3. Put a README.txt file into the top level of the directory. This file should contain your name and email address, the version of Java you used (1.5.x or 1.6.x, please) as well as any special info we migiht need in order to run your code.

4. ZIP this directory and submit via T-Square (instructions are here).

Please take care to remove any platform dependencies, such as hardcoded Windows path names or depencence on a particular look-and-feel that may not exist on all platforms. Also, if you use any images in your application, please make sure that you include these in your ZIP file and that your code will refer to them and load them properly when from inside the directory that's created when I unZIP your code.

Grading for this assignment, and future assignments, will roughly follow this breakdown:

• 60% functionality
• 40% good architectural design, coding style, commenting