HOMEWORK 1: Getting Acquainted with Java Swing
This is an INDIVIDUAL assignment.
In this homework assignment, we want you to become familiar with the basics of using Java Swing to create a GUI interface. Unlike in future assignments, where you'll be extending Swing to do new things, here you'll only be assembling already provided Swing components to create a user interface.
Future assignments will build on this first assignment, so it's important for you to get this one right and to understand what you have done.
PLEASE NOTE: You are NOT allowed to use any type of GUI builder tool for this assignment (anything that allows you to graphically lay out an interface and then automatically generates code for it). The reason is that this assignment is designed to get you up-to-speed on swing through writing some basic Swing code; if you're using a GUI builder, you're not getting that practice.
If you're unsure about the tools you're using, check with us first.
During the course of this semester, we will be creating a version of the Microsoft Courier tablet's functionality. Courier was a (discontinued) prototype of a two-screen digital journal, allowing the user to take notes using digital ink, embed content from the web and other sources into journal pages, and process and interpret ink strokes in some interesting ways.
There are some videos of the Courier prototype in action
(The first of these demonstrates more of the functionality that will be relevant for the class project.)
While we obviously won't be building custom two-screen hardware for the project, we will create a passable replica of Courier's functionality that can run on a laptop, tablet, or other standard computer.
Please note that this will be a continuing assignment that we'll build on in successive parts throughout the semester. Because of this, its important to not fall behind on any part of the project!
In this first homework, we'll create the basic "shell" of the application, using existing off-the-shelf Swing components. You'll get experience with working with the component hierarchy, doing layout, and writing callback functions.
Your application will create a new window (a JFrame component) when it starts. Inside this window will be two main areas:
1. On the left, an area for computer-generated content. In the Courier demo videos, this area contains things like address books, web browsers, and photo browsers.
For this assignment, you should create this region as a JTabbedPane containing tabs for a number of different components that present computer-generated content. At a minimum, you should provide two tabs that include:
(See below for other things you might add to tabs for extra credit.)
- A web browser. This can be implemented by using a JEditorPane (which can display HTML content) along with a JTextField for entering URLs and any JButtons necessary for control, including a back button at a minimum. This web browser should actually work, in the sense that the browser should visit URLs entered into the address bar, links should be clickable, etc. (NOTE: the JEditorPane makes for a pretty crappy browser, so don't sweat the fact that it may not behave well on certain web pages; you'll only be graded for how well you integrate the component into your application, not how well it renders HTML.)
- An address book. This can be implemented as a JPanel containing (on the top) a scrollable JTable with columns for name, phone number, etc., and (on the bottom) a scrollable JTextArea that displays whatever information is selected from the JTable. The behavior should be that the user sees a list of names and possibly other information in tabular form at the top; by clicking on a row, the text area updates to show a nicely formatted version of the address book entry for that user. (You can just make up the data that's here; no need for fancy controls to edit or add to the address book.)
2. On the right, an area for user-generated content. In the Courier videos, this area is used for free-form user-created digital ink, and can also contain information dragged over from the left side of the application.
For now, you can just create an empty JPanel for this region of the application; in the next assignment, we'll create a custom component that allows for digital ink and other functionality. Below this JPanel (that is, in a horizontal strip along the bottom of the right-side user content area) should be the following:
The left and right content areas should be contained in a JSplitPane that allows the user to control how the space is apportioned between them.
- JButton controls for New Page, Delete Page, Page Forward, and Page Backward. For this assignment, all these controls have to do is display a message in the status bar at the bottom of the application (see below).
- JRadioButton controls for drawing controls: Free-form ink, Rectangle, Oval, Text. Again, these don't have to do anything in this assignment, other than update the status bar at the bottom of the application.
Along the bottom of the entire application should be a status bar (a JLabel or JTextField) that you can use for status messages. For this assignment, all it needs to do is display a message whenver the user clicks on one of the JButton or JRadioButton controls for the user-generated content area (for example, "New Page Selected.")
Your application must be resizable, and must behave reasonably when resized, moved, etc. "Reasonable resizing" means that the application should have a minimum size that's small, but large enough to display all of the control components (buttons, etc.). The user should be also able to enlarge the application to arbitrary sizes. When the application grows or shrinks, there shouldn't be any big "gaps" of whitespace; in other words, all the pieces of your app should look nice, grow to fill available space, and not arbitrarily re-layout as the application is resized.
This should not be a terribly hard assignment. Again, the main goal is to ensure that you understand how to structure a basic Swing application, how to use a range of components, how to write callbacks, and how to respond to events.
In this and future assignments we'll suggest some ways you can earn extra credit on the project.
Some possibilities for this assignment are:
- Include new tabs on the left-hand side of the application which contain content that might be useful in a Courier-like setting. These might include, for example, a Calendar/datebook component, or a photo browser component, or a map viewer, or an RSS reader component. You don't have to create custom components for these, since many are likely available off the web as freeware. If you do this, be certain that you properly include the classfiles necessary for these custom components to work inside your JAR file. +2 points for each new type of tab (as long as it makes sense in the courier context... you can't just add a million tabs with empty JPanels for instance :-)
The easiest way to make a component scrollable is to embed it in a JScrollPane.
Check the documentation for JEditorPane for how to use it as a basic web browser. There are also tutorials you can find on the web such as this one.
BorderLayout is a handy LayoutManager to use for most aspects of this assignment. In fact, I tend to prefer simple LayoutManagers, such as combinations of BorderLayouts and Box or FlowLayouts, rather than more complex tools such as GridBagLayout.
See here for instructions on how to submit your homework. These instructions will be the same for each assignment.