Lab 2: Media Player User Interface

* become familiar with the aspects of designing GUI (Graphical User Interface) programs

• become familiar with the use of both absolute positioning and layout manager based GUI design

In this lab, you will begin developing a Media Player that will have the following functionality:

1. Open and load a playlist file.
2. Play the media items in the playlist using an appropriate audio player.
3. Pause/Stop an audio player that is in the process of playing a media file.
4. Skip backward and forward to other audio tracks in the playlist.
5. Display the title of the currently playing media item, and the currently loaded playlist.
6. Open a Playlist Manager to create, edit, and save playlists consisting of mp3, wav, or midi media files.

We will begin with the basics. Specifically in this lab, you will design and implement the Graphical User Interfaces for the Media Player application. This includes the main Media Player GUI as well as a GUI for the Playlist Manager. You'll build upon these GUI's in subsequent lab assignments. In the end, you will have a working Media Player similar to (but better!) applications like the Microsoft Media Player, Apple iTunes, or Winamp.

Shown below are a couple of examples of Media Player/Playlist Manager GUI's created by past students, illustrating both basic and fairly advanced designs. Be creative, but don't go overboard - the student who created the second design spent a month of his summer vacation totally rewriting his initial program in order to accomplish the result shown. Both versions are fully functional.

1. Implement these GUIs in two separate classes: MediaPlayerUI and PlaylistManagerUI Create a third main class called MediaPlayerApp that, in it's main method, creates an instance of each GUI class.
2. For now, MediaPlayerUI and PlaylistManagerUI should contain only a single method each - their respective constructors. Place all code for creating the respective GUI's inside these constructors. Declare all variables used to refer to UI components (JButton, JProgressBar, etc) as private data attributes of respective the GUI class.
3. You do NOT need to implement the menus shown in the example MediaPlayerUI yet - you'll add that in a subsequent lab.
4. Your GUI should position the buttons in an arrangement similar to those shown in the basic interfaces above. Again, be creative, but make sure the layout is neat and usable (part of your grade will be based on the uniformity and consistency of your GUI's appearance). When designing your GUIs, consider the fact that you would want your friends to be able to run it without asking you for a lot of help as to how it is supposed to work.
5. You must use Layout Managers in each GUI class to help position your GUI components - it is not acceptable to use only absolute positioning. You are permitted to use absolute positioning within the cells of the layout managers you use; however, you must use at least one nested layout (with no absolute positioning) in each GUI. You must describe (in Javadoc comments at the top of each GUI class's constructor method) what type of layout you implemented in that class.

The image below is an example (which you need not follow) of a BorderLayout manager used on the JFrame of the MediaPlayerUI with the fields of the BorderLayout indicated in dark red.

• Within the East field, a JPanel contains a FlowLayout to position the Playlist Manager and Open Playlist JButtons.
• Within the Center field, a JPanel contains another FlowLayout to position the Play, Stop, Prev, and Next JButtons.
• Within the North field, a JPanel contains a JProgressBar (that indicates the progress in and two JLabel elements (that list the currently loaded playlist and currently playing audio track), all of which are absolutely positioned within the JPanel.

1. Your MediaPlayerUI window must not be resizeable.
2. Your program shall (for now) terminate when the user presses the “close” button on the JFrame title bar of the Media Player window.
3. The JFrame title bar should contain the text ”<your name>'s SE1020 Media Player”.

For the PlaylistManagerUI the example below uses a BorderLayout.

• The North field contains a JLabel component.
• The Center field contains a JTextArea component.
• Within the East field, a JPanel contains a FlowLayout that positions the Add, Remove, Save, and Cancel JButton.

1. Your PlaylistManagerUI window must be resizeable; all the GUI components must remain in the same relative location and size regardless of how the user resizes the window.
2. Your program shall do nothing when the user presses the “close” button on the JFrame title bar of the PlaylistManagerUI window. That is, the window should remain visible on the screen (along with the MediaPlayerUI window). Only the MediaPlayerUI is allowed to close the program.
3. The JFrame title bar should contain the text “Playlist Manager”.

Even when using layout managers, you will still have to experiment by trial and error to achieve a reasonable sizing of the various controls within the windows (remember, part of your grade will be based on the appearance of your GUI). Review the documentation for the various layout managers for use in positioning the components appropriately (alignment and sizing), and review the setPreferredSize() and setMinimumSize() methods to specify sizes of the components you place within the layout.

If you fulfill all requirements stated in the previous section, you will receive a maximum grade of 90 on this lab. For the extra 10 points, complete the following additional requirements:

1. Do some research into JButton, and determine how to place something other than text on a button. Hint: Look at the JButton methods that contain the word “icon” in the method name. Here are some files containing images you can use in this and future labs. Incorporate these images into the buttons of the MediaPlayer GUI so that the end result is as shown below. You need different images to indicate the various states of the button - all needed images are included in the file you download through the link above.
2. Since the four main control buttons no longer contain text, incorporate tool tips into the graphical buttons. These are the small windows that pop up when your mouse hovers over a button that contain a brief explanation of the button's function. The tool tip containing the word “Play” is shown.
3. Implement raised bevel borders on the cells of the layouts within BOTH GUIs. Note that the MediaPlayerUI above implements these borders, but the PlaylistManagerUI does not (so you can see the difference).
4. Set the background color of your GUI's to something other than what you get as the default.
5. Set the cursor for the MediaPlayerUI to the one that looks like a hand pointing it's index finger. Use the default cursor for the PlaylistManagerUI
6. Set the icon for both the MediaPlayerUI and PlaylistManagerUI to be something other than the default icon.

You should indicate how much time (in minutes) you spend on this assignment in the FAST database. You are encouraged to log your activity as you work on the project. At a minimum, you should log all of the time spent on this assignment before the due date given above. All time spent on this assignment should be entered into the week 2 column (even if you worked on it in week 3).

Follow your instructor's directions for your lab report.

If you have any questions, consult your instructor.