Skip to main content.

Web Based Programming Tutorials

Homepage | Forum - Join the forum to discuss anything related to programming! | Programming Resources

Java Expert Solutions

Chapter 39 -- Implementing a Multimedia Encyclopedia

Chapter 39

Implementing a Multimedia Encyclopedia

by George Menyhert


CONTENTS

Knowledge is dynamic. Science and industry march on heedless of the headaches that this evolving picture of the universe gives publishers and authors around the world. Even information that we think of as static does not rest peacefully. Discoveries are made every day that change the way that we look upon historical events. The Dead Sea Scrolls are unearthed; a meteorite from Mars with tantalizing clues of life is discovered; the Titanic is raised from the ocean's floor. Not only is knowledge dynamic but so is language, teaching methodology, and culture. There are methods of displaying information today that were not possible several years ago.

Now, look at our feeble attempts to deal with dynamic information. Reprinted books? CD-ROMs? Something is wrong. How do you update the copy of Encarta that you've had on your machine for three years? The possibility of solutions is only now starting to emerge with increased use of the Internet, graphical browsers, and portable, small, powerful software applets written in Java.

Java's Suitability for Multimedia Applications

Java is useful for multimedia applications because it is portable, is compact, can handle streaming data, and can provide encryption. In addition, it is already based on the client/server model and will support PDAs easily. Please see Chapter 38, "Creating On-Demand Multimedia Services," for a more detailed discussion of each of these topics.

Java Is Portable

Java already runs on every popular computing platform. The same code runs on PCs, Macintoshes, and UNIX workstations.

Java Is Compact

The Multimedia Encyclopedia applet in this chapter is only 9K in size. This is critically important when dealing with the small bandwidth of phone lines (or an even smaller bandwidth for some mobile applications).

Java Can Handle Streaming Data

Encyclopedias are huge and will only get bigger. Can you imagine downloading a new version every day? Rather than downloading, storing and then playing data, Java lets you stream data. That is, the data flows through the device. You don't worry about your radio storing enough sound to play continuously. Why should your computer, or other digital devices, be any different?

Java Is Based on the Client/Server Model

Ideally, you want your multimedia encyclopedia to be updated constantly. This is not possible without adopting a client/server model. Fortunately, that is the model used by Java. The distribution of data is a nightmare using traditional media. If the distribution of data is difficult, so is the distribution of more powerful indexing or playback technologies. Using Java, the executable part of the product can be updated as frequently as the data. I'm sure that when folks look at Encarta's interface, they think it's kind of clunky and wonder why it doesn't look more like Internet Explorer. With Java, IUs are as easy to modify and distribute as the data.

Java Supports PDAs Easily

Today, Java can run on PDAs; all you need is a mini-browser. As an example, assume that you need to develop a Multimedia Tour Book for an art museum that runs on a PDA. The application lets visitors arrange a detailed personal tour and spend time at the exhibits that are of particular interest to them. In this case, you do not need a full commercial browser like Netscape; rather, you need a browser that can handle text, hypertext, and multimedia. This browser can be optimized for your specific requirements, reducing code size and increasing performance. Because this application is written in Java, tourists can take this same tour at home on their PCs, either before or after their visit, simply by accessing the museum's Web site.

Using the Multimedia Encyclopedia

This applet is designed as a public domain multimedia encyclopedia; it provides all the features of a Multimedia Encyclopedia short of video streaming. It is a good example of an application that can be written in a few hours and still be very useful and easy to improve in the future. Remember, the next time a user accesses the encyclopedia, he or she could see a greatly improved user interface, as well as better content.

To use the Multimedia Encyclopedia:

  1. Start your favorite Java-capable browser.
  2. Open the file Chapter48/Encyc.html with your browser.
    The text string, Applet Encyc running, displays on your browser's status line when the applet is fully loaded (see Figure 39.1).
  3. Double-click the name of the topic that you want to see.
    An image of the topic appears (see Figure 39.2).
  4. Click the Listen button to hear the associated audio clip.
  5. Click the Index button to go back to the topics list.

Figure 39.1 : The Multimedia's welcome screen and topics list are loaded.

Figure 39.2 : An image of the topic along with the applet's controls can be seen here.

Adding Images and Sound to Applets

Adding sound and pictures to Java applets is very simple. This is also discussed in Chapter 4 "Displaying Images," and Chapter 38, "Creating On-Demand Multimedia Services." Both media types are handled in similar ways. Simply obtain a reference to an object of the correct media type; then display the media. The media functionality is available only via the applet class. Although it is possible to run an applet as an application, there are many limitations to applets executed in this mode (including media streaming). However, there are some available work-arounds. See Chapter 13, "Running Applets as Applications," for details on the techniques and limitations of running applets as applications and ways of overcoming these limitations.

To select the source of a sound clip, call the method Applet.getAudioClip. This method is overloaded and has two invocations. A sound file can be referenced either by a base URL and a relative file path, or by its absolute URL. To include audio in your applet, add the following line:

AudioClip sound =
myApplet.getAudioClip(getDocumentBase(), "sound.au");

Tip
Getting the audio clip this way is usually very slow the first time it is done in an applet. This is due to dynamic class loading.
When you are running these applets over the Internet, each instantiation of an AudioClip is extremely slow. This is because the AudioClip object does not truly stream the audio data. It downloads and buffers the data at the time of instantiation.
You need to give users some feedback so they don't cancel the operation. Try a call to showStatus that states something like, "Initializing audio. Please wait…". Changing the cursor to a wait state would be ideal, but is not possible in applets.

This sample creates an object that references the sound file, sound.au, in the same location as the applet's URL. To play the sound clip, simply invoke the AudioClip.play method. You can also stop and loop (continually play back) the audio clip. The following line shows how to play a sound:

sound.play();

Tip
Using the loop functionality can be very helpful for background sounds. Instead of downloading long sound files, you can loop short sound files. Looping a sound file will play it over and over without pause. This will shorten download time without sacrificing quality.

Caution
The supported list of audio file formats is extremely limited. Currently, you can use only 8-bit, 8000Hz, single-channel (mono) NEXT/Sun AU files with G711 m-law compression. Note that files with a higher sample rate may produce hissing on playback.

Adding images to your applet is very similar to adding audio. The primary difference is that the image does not have a draw method to display itself, whereas the audio clip contains its own play method. To attach to a particular image, call the Applet.getImage method. The URL (or a base URL and relative path) can be specified just like the AudioClip, as follows:

Image thePicture = myApplet.getImage(getDocumentBase(), "image.gif");

An image object can reference either JPEG (JFIF) or GIF images. To display the image, add a call to Graphics.drawImage. This is usually done in the applet's (or component's) overridden paint method. The following example explains how to display an image object. Note that the call to myApplet.getGraphics is made because only a Graphics object can display an Image:

Graphics g = myApplet.getGraphics();
g.drawImage(thePicture, 20, 40, myApplet);

The method Graphics.drawImage is overloaded and has four implementations. They vary based on whether or not a default background or output resolution is specified. If an output resolution is specified, the image is scaled as it is rendered to the screen.

Images can also be created or altered by your applet, and they can be rendered on or off screen. For more information, see Chapter 4, "Displaying Images." Also, refer to the ImageProducer class and the java.awt.image package.

Tip
Unfortunately, images are not components in the Java libraries. This means that they cannot be added directly to a layout. If you want to add images to a display that contains components, you probably need to subclass Canvas. Your subclass must at least override the Component.paint method. Add the Graphics.drawImage method to the paint method. This is illustrated in the sample code ImageCanvas.java. To develop a more robust ImageCanvas, you should also override the Component.preferredSize, Component.minimumSize, and Component.size methods to return the actual image dimensions. This makes the resulting component the correct dimensions.

The On-Line Multimedia Encyclopedia In-Depth

We have discussed how to add sound and pictures to your applet; an on-line multimedia encyclopedia is a simple extension of these tools. The only thing to add is some descriptive text, an index, and a few control buttons.

Applet Architecture

To make the applet as flexible as possible, all of the display options are specified as either applet parameters or in configuration files. The encyclopedia cover page (image file name) and the index file are specified in the applet parameter list. The topic configuration filename is a field in the index file (associated with the index listing), which references a file that contains fields specifying an image filename, a sound filename, and a textual description of the topic. Thus, the encyclopedia can be easily modified without changing the underlying Java source code.

Due to the simplicity of this example, there is no need to create a large set of new classes. However, due to their nature, some new classes are straightforward, obvious, and well- behaved. These classes are ImageCanvas and FileParser. The FileParser class was not actually created for this sample. It was originally developed for the sample in Chapter 38, "Creating On-Demand Multimedia Services." Follow good object practice here and reuse it.

FileParser aids in configuration file input, file and field parsing, and text region population (loading the fields from the file into specified text regions). ImageCanvas is a component that displays an image within its body. The ImageCanvas is required in order to include an image in a display that also contains buttons and other widgets. The Canvas allows an image to be displayed as part of a component. If the image is not a component, no space is reserved for it by the Layout Managers. Listing 39.1 is an example of a basic ImageCanvas.


Listing 39.1  Implementing a Basic ImageCanvas
public class ImageCanvas extends Canvas {

 private Image theImage;

 // image canvas constructor
 public ImageCanvas(Image that) {
 theImage = that;
 }

 // draw the canvas
 public void paint(Graphics g) {
 // draw the image
 g.drawImage(theImage, 0, 0, this);
 }

}

Index Window

The encyclopedia consists of two screens. The first is the index screen; it contains a list of indexes and the encyclopedia cover page (image). Double-clicking a list topic takes you to the topic screen. Listing 39.2 shows the major steps required to display an image in a Canvas on the interface.


Listing 39.2  Creating the Cover Page Image Object and Placing It in an ImageCanvas
...

// get the startup image
Image startUpImage = getImage(getDocumentBase(),imageFileName);

// create the intro image canvas component
introImage = new ImageCanvas(startUpImage);

//
// Create the GUI. Notice that the image canvas is a component and
// can be handled by the Layout Managers like any other component.
//
setLayout(new GridLayout(1,2));
add(indexPanel);
add(introImage);

...

Note
There is no need to explicitly draw the image, because its parent component ImageCanvas draws the image in its paint method.

Topic Window

The topic window displays the topic's image, a text region containing the topic information, a Listen button to play the sound clip associated with the image, and an Index button that takes you back to the original index screen.

Again, the ImageCanvas is employed to place and display the image component. The AudioClip object is created and tied to the Listen button. Listing 39.3 shows the major steps required to create Image and Audio objects. Listing 39.4 is an example of binding sound playback to a button action.


Listing 39.3  Creating Media Objects and Adding Them to the Applet
...

//
// Create the image, image canvas, and audioclip objects.
// Sometimes the audio initialization takes some time, so post a
// message to the user.
//
showStatus("Initializing the audio. Please wait...");
sound = getAudioClip(getDocumentBase(), audioName);
Image theImage = getImage(getDocumentBase(), imageName);
ImageCanvas theCanvas = new ImageCanvas(theImage);
showStatus("");

// add the items to the applet
setLayout(new GridLayout(1,2));
add(theCanvas);
add(textPanel);

...


Listing 39.4  Play the Sound in Reaction to the Listen Button
//
// watch for button events
//
public boolean action(Event event, Object arg) {

 // the listen button was pressed
 if(event.target == listenButton)
 sound.play();

 // didn't find anything of interest. see if my parent wants it.
 else
 return super.action(event,arg);

 return true;
}

Shortcomings

Following are some shortcomings of Java for developing this multimedia encyclopedia:

Tip
Until this happens, try subclassing Canvas and overriding the paint method. Also, override the minimumSize, preferredSize, and size method to make the panel conform to the image size.

New Features

Java is evolving; look for the following changes that will affect the development of multimedia applications: