1: Basic component architecture. The basic idea of this assignment is that we want to create a custom widget to display our photos and to handle displaying and adding annotations. Think back to what we saw in class: in Swing, the main class for the widget is its controller. It will also have a view and a model. That means that you will need to create three classes: the main class (controller), a model (abstraction), and a view (presentation). To create a new widget in Swing, we typically create a subclass of JComponent. We’ll call ours PhotoComponent (or some such).
2: Photo display. Your component will display a single photo, and so your component should render this image in its paintComponent() method whenever it is requested to draw itself. But be sure to realize that the component may be larger or smaller than the photo it displays (because the user may resize the window, for example). Your component should have a size and a preferredSize that are the size of the photo itself, but you probably don’t want any minimumSize or maximumSize. When your PhotoComponent is initialized, and before any photo is loaded, you probably want to use some default value for its size and preferred size. So that the component looks good in cases where the window is larger than the photo itself, you should render some nice-looking background behind the photo, which will be visible when the photo doesn’t cover the entire extent of the component. This can be as simple as a solid color, or some pattern such as graph paper. You’d create this effect by simply doing some drawing in your drawing method before rendering the image. If the user shrinks the window so that the component cannot display the entire photograph, it should be scrollable so that the user can pan around the image. The easiest way to do this is to simply insert your PhotoComponent into a JScrollPane, and then insert that JScrollPane into the container area in your application. There are settings on JScrollPane that determine whether the scrollbars are always displayed, or just when they are needed (it’s fine if the scrollbars are always displayed). The way JScrollPane works is that it allows its child to be any size it wants, but clips and positions it so that the correct part is shown under the visible region. This is why you want to make sure your component has a size and preferred size. If you reload a photo and change the size, you will probably want to call revalidate() on your PhotoComponent so that the scroll pane “notices” that its size has been updated. If you want, you might also like to display some graphical “frame” around the picture, such as a white border or “scrapbook corners,” although this is not required.
3: Flipping to annotate. With physical paper photos (do people still use those?), people often flip them over to write notes and other annotations on the back. Your PhotoComponent should support some similar kind of interaction. Double-clicking on the photo should cause it to be replaced by a plain white surface of the same size as the photo for annotation. The background of your component should stay the same—only the photo should be replaced. When in this mode, you can annotate the photo’s “back” via drawn strokes and typed text (see #4 and #5 below). Double-click on the photo back again to flip it over and see the photo again. The current “flip state” of a given photo should be stored in a boolean.
4: Support for drawn strokes. When in the flipped state, you should be able to draw onto the photo back using the mouse (if you’re using a pen tablet, the pen also produces mouse events and so this sort of implementation will also work nicely on a pen-based computer). What this means is that the user should be able to draw freehand strokes by dragging the mouse on the back of the photo with the button pressed. The component should show the stroke while it is in the process of being drawn, to give appropriate feedback to the user. Drawing should only occur in the white back-of-photo area, not the background.
5: Support for typed text. When in the flipped state you should also allow the user to enter typed text on the back of the photo. The way this should work is that the user clicks on the photo back to set an insertion point for the text. Then, any typing will begin to fill the photo back starting at that insertion point. Clicking again will reset the insertion point to another position. While you don’t have to do any especially fancy text processing (no ligatures or custom fonts or anything like that), you should make the basics work correctly. The basics are: You should implement word wrap. This means that when your typing hits the end of the photo back you should find the rightmost whitespace in the line, break the line there, and put the remaining word on a new line. If there is no whitespace in the line then you can just break the line at the last character that will fit on the line. Use reasonable line spacing. Remember: ascent + descent + leading. Please do not implement this feature by trying to insert a JTextComponent into your photo back. We’d like you to get experience with the low-level Java text APIs, plus reusing a photo component in this way is probably more work than just doing it “by hand.” You do not have to implement more complicated features (although you’re welcome to for extra credit). For example, you do not have to implement: Backspacing over already entered characters. The ability to put the insertion point into already-entered text and edit it. The ability to select a span of text, or do copy-and-paste, etc.
6: Integration with the rest of the application Once you’ve implemented and debugged your PhotoComponent, it’s time to integrate it into the application you wrote for Homework #1.