HOMEWORK 6: Magic Lenses

This is an INDIVIDUAL assignment.

Objective

In this assignment you'll learn how to implement Magic Lenses in Swing, and integrate lenses with your PageSorter UI.

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

In this homework we'll add Magic Lenses to the notebook UI. The basic idea is that lenses should provide a new way to find the pages you're looking for. Augment the PageSorter to provide controls to make a lens appear or disappear; once on screen, the lens should be draggable across the page sorter.

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

Take a look at the slides and other resources for implementing lenses in Swing; they'll be very helpful for this assignment. The first step is that you'll likely want to create a lens parent component that you install as the GlassPane for your PageSorter. This will be the container that holds 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

As usual, there are a lot of ways to make this fancier than described.

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.

As usual, if you do something else that's above and beyond the call of duty, let us know in your README file and we may assign some extra credit for it.

Deliverable

This is an INDIVIDUAL assignment; while you may ask others for help on Java or Swing details, please write the code on your own.

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

Create a new directory using your last name as the name of the directory. Please compile your application and place both the sources and classfiles, as well as a README.txt file (described below) into this directory; ZIP this directory and mail it to the TA.

The README.txt file should contain your name and email address, the version of Java you used (either 1.4.x or 1.5.x, please) as well as any special info I might need in order to run your code. (Command line arguments, etc.)

If you do any extra credit work, be sure to let us know about it in the README file so that we don't miss it!!

Please take care to remove any platform dependencies, such as hardcoded Windows path names or dependence 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 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

Please let the TA or me know if you have any questions.