We developers are often guilty of sitting down at a computer and writing a program's source code without taking time to think about the program's design. This "seat of the pants" coding without design takes substantially more time to complete than it would if some thought was first given to what the program's graphical user interface (GUI) and structure look like. Therefore, before writing any source code for our media player, we should give its design some thought.
How do we express the media player's design? We accomplish this task in two phases: First, we design the GUI. A visual indication of what the media player looks like along with an inventory of GUI components that need to be coded helps us think about a basic structure for the program. Second, we design the program's structure by writing an English languagelike (or Japanese languagelike, or French languagelike, or Arabic languagelike, and so on) description of this structure. (Because I speak and write in English, an English languagelike description will have to suffice.) This description is known as pseudo-code because it shows how a program works without regard to the actual syntax of the language used to code the program. (An alternative technique for expressing program structure uses a flowcharta graphical description of a program's structure. However, flowcharts are often cumbersome to create, and need to be changed whenever program design changes. Therefore, I won't say anything more about flowcharts.)
Our media player's GUI consists of a main window, a pop-up File menu, and an Open File dialog box. To begin designing this GUI, let's focus on the main window. This window will display Media Player 1.0 in its title bar, the word File in its menu bar, and a welcome message on a colored background. Figure 1 illustrates the main window.
The media player's main window identifies a File menu and a welcome message.
The File menu contains three menu items. The Open... menu item presents a dialog box for selecting the location and name of a media file. The Loop menu item determines whether a media file is played once (the default) or repetitively (when this menu item is checked). Finally, the Exit menu item exits the program. We can also exit by clicking the Close button, labeled with an X, in the upper-right corner of the main window. Figure 2 illustrates the File menu.
The File menu presents menu items for opening a media file, determining whether or not media will be played in a loop, and exiting the program.
When Open... is selected from the File menu, an Open File dialog box is displayed. Clicking the Open button opens a media file; clicking Cancel terminates the dialog box without opening a file. This dialog box appears in Figure 3.
The Open File dialog box gives users the ability to select the location and name of a media file to be opened and played.
In addition to the aforementioned components, a media player also contains a visual component, a control panel component, or a combination of these components. The visual component displays each frame (media image) in sequence for media files that contain images. The control panel component allows the user to pause, start, and otherwise control the playback of media. Both the visual and control panel components are created by the JMF and not our program. Although they're important to the overall media player GUI, these components are not discussed in this sectiontheir creation and destruction is shown in the media player's source code. Furthermore, they're illustrated when we look into running the media player.
Now that you've seen the various components comprising our media player's GUI, you should be starting to get a "feel" for how this program will be structured. Essentially, this GUI-based program will be menu-driven. Before diving into the source code, let's write this program, using pseudo-code. Then, when we write the actual source code, we can follow this pseudo-code plan. Listing 1 presents the media player program's pseudo-code representation.
Listing 1 A pseudo-code representation of our media player
Application class: MediaPlayer Superclass: Frame Listeners implemented by Frame: Action, Controller, Item, Window main: * Allocate memory for MediaPlayer object. * Call constructor to establish MediaPlayer's main window and implicitly create/start background AWT threads. * Exit main program thread. Background AWT threads keep program running. constructor: * Set main window title to Media Player 1.0. * Register window listener to respond to window closing and window closed events. * Create File menu. * Create Open... menu item. * Register MediaPlayer object as a listener for action events originating from Open... menu item. * Add Open... menu item to File menu. * Add a horizontal separator line to File menu. * Create checked Loop menu item. * Register MediaPlayer object as a listener for item events originating from Loop menu item. * Add Loop menu item to File menu. * Add a horizontal separator line to File menu. * Create Exit menu item. * Register MediaPlayer object as a listener for action events originating from Exit menu item. * Add Exit menu item to File menu. * Create a menu bar. * Add the File menu to this menu bar. * Establish the newly created menu bar as the main window's menu bar. * Set the main window's size to 200 by 200 pixels. * Show the main window. * Exit constructor (Background AWT threads have been created/ started). Action listener: On action: * If the action event originates from the Exit menu item, * Indirectly fire a window closed event to the window listener. * Exit handler. * Create an Open File dialog box. * Set the Open File dialog box's current directory to the directory that was current when the dialog box was closed. * Show the Open File dialog box. This dialog box is modal. * If no file was selected, * Exit handler. * Save the Open File dialog box's directory. * If a previous JMF player object was created, * Close the player represented by this object. * Create a media locator object that uses the file: protocol along with the directory and filename selected in the Open File dialog box, and use this object to create a JMF player object. * If an exception is thrown, * Display an appropriate error message describing the exception. * Exit handler. * Set main window title to filename (chosen from Open File dialog box). * Register MediaPlayer object as a listener for controller events originating from JMF player object. * Tell the JMF player object to prefetch the media content contained in the player's media file. * Exit handler. Controller listener: On controller closed: * Remove JMF player's visual component from MediaPlayer frame container, if visual component exists. * Remove JMF player's control panel component from MediaPlayer frame container, if control panel component exists. * Exit handler. On end of media: * If Loop menu item checked, * Reset the JMF player object's start time. * Tell the JMF player object to start playing the media. * Exit handler. On prefetch complete: * Tell the JMF player object to start playing the media. * Exit handler. On realize complete: * Get the JMF player object's visual component. * If visual component exists, add it to the center of MediaPlayer's frame container. * Get the JMF player object's control panel component. * If control panel component exists, add it to the south part of MediaPlayer's frame container. * Pack all components into the main window. This causes the size of the main window to be adjusted by its container's layout manager. * Exit handler. Item listener: On item state changed: * Toggle the checked status of the Loop menu item. * Exit handler. Paint listener: On paint: * If a media file has not been loaded, * Obtain the width and height of the main window. * Set all pixels in the main window to blue. * Create a DialogInput/Bold/size 16 font and establish this font as the main window's font. * Obtain the font metrics for this font. * Use the font metrics to calculate the width (in pixels) of a welcome message. * Change the drawing color to white. * Draw the welcome message in the center of the main window (more or less). * Invoke the Frame superclass's paint handler to ensure that the control panel component will paint itself appropriately (when a media file is displayed). * Exit handler. On update: * Call the paint handler. * Exit handler. Window listener: On window closing: * Indirectly fire a window closed event to the window listener. * Exit handler. On window closed: * If JMF player object was created, * Close player associated with object. * Exit program by terminating all threads.
The first three lines of pseudo-code establish our media player's class name, the class name of its superclass, and the listeners that are implemented by the MediaPlayer class. The line prefixed main: identifies MediaPlayer's main method. Similarly, constructor: identifies the MediaPlayer constructor. The rest of the pseudo-code is broken down into five listener sections: Action listener, Controller listener, Item listener, Paint listener, and Window listener. Each listener section is subdivided into one or more "on" subsections; each "on" subsection handles a specific event under its listener category. I recommend spending some time studying this pseudo-code to learn how the media player works.