HOMEWORK 3: Building multiple user interfaces to the same app

This is an PAIRED assignment.

Objective

In the last assignment you saw how to create custom components. In this assignment, you'll see how the MVC pattern can be exploited to create new views onto existing data models. You'll also learn how to manage and layout children components in Swing. You will also make differemt design decisions for each interface that may involve different functionality given the different form factors. For example, you may decide to simulate importing an image from the phone's camera roll on the mobile interface rather than from a file on the system.

The learning goals for this assignment are:

Functionality

Description

This assignment requires you to build two different user interfaces for your energyJournal: a regular monitor/keyboard/mouse interface of the kind you have already built, and a UI for a mobile phone. You do not have to use a phone programming environment, but you must simulate the phone by building the interface as a small window application. Assume the size of your window will be the approximate size of an iPhone or an Android or any other such smart phone - not a tablet. Your simulation will ofcourse have lower pixel resolution than a real phone (you won't get HD resolution in a window that small on your laptop). However, the visual size should be realistic. You will not be expected to implement touch screen interactions in terms of mouse behaviour, but you should simulate them with keystrokes and identify where they would be used in your design document.

You can also take the opportunity to redesign your current interface to improve interaction and to replace some of the test components from assignments 1 and 2 with actual functioning components. Finally you will be replacing your "hand drawing" app with a graph.

There are two complementary aspects to this assignment: designing the two UIs and building the modular code architecture: you will be assessed on both.

Functionality

To recap, your energy journal application is a tool for you to track and comment on things that help you conserve energy in your daily life (rather like a GoogleMeter™ on steroids). You are designing this as an application that can be accessed from multiple devices, and potentially (later) by multiple people at the same time. The designed functionality may differ by device as long as the core functionality is met. The required functionality is below. Remember that you MAY decide to amend or remove functionality according to form factor. You will need to justify this. Some suggestions of where are included (these are NOT requirements,but they just indicate examaples of where you may make design decisions.). Note that you will have to scale your images and your graph.

  1. a journal entry can contain an image, a text note, or a graph, or some combination of all. They may be presented together or as a series of views on the same entry. Long text notes should not be overlaid on the image or the graph. The graph and image can have overlaid annotations, either text or graphics.
  2. a journal entry has a date and keywords associated with it.
  3. the graph is static for now, but should have a time of day X axis and an energy use (in kWH) Y axis. It can be a bar graph or a line graph. You may decide that the graph tick marks and axis lines are shown at a different scale on the small screen.
  4. The user must be able to add text, images, and a "current graph" (the current graph is simply one that you draw.). Note this means you need to keep track of the values from which you draw the graph as they will differ for each journal entry so you can draw it on demand. You may decide to change where and how you add your images.
  5. The user should be able to tag (add keywords to) a journal entry. (Remember the buttons from assignment 1?)
  6. The user should be able to browse between journal entries and edit each as necessary. (You can implement a search for extra credit).
  7. This means you need more than 1 journal entry, and your journal application should have some way of showing and accessing the entries.

To do this properly , you are expected to use the MVC design pattern we discussed in class, so that the same energyJournal model can interact with both UIS with no changes that are interface dependent to the model. Therefore you will have to reconfigure (we call it refactoring) your program architecture.

Remember: you will now have to resize and rescale your photos.

Design document

In your design document, you will now report on the two aspects of your application.

First, as usual, describe the code architecture and class structures. Concentrate on the MVC aspects of your architecture. Second, describe the designs of the two UIs, including the interactions for each. (Remember you are simulating mobile phone interactions so describe where a key stroke is actually used and where it is just simulating a touch interaction - for example, swiping between screens might be simulated with a keystroke, whereas posting a text note in an entry might really sue the ENTER key). If you decided to change or remove functionality in the phone interface, describe why! Jusitfy it.

Deliverable

This assignment will probably be a bit easier for most people than the last one.

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

1. Create a new project using Ass3<your last names> as the name of the project..

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. Putthe design document 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 I might need in order to run your code (command line arguments, etc.)

4. ZIP this directory and submit it via Sakai).

If you do any extra credit work, be sure to let us know about it in the Design document 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:

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