Building the Play/Pause Button

File: PlayPauseButton.java

Contents

Overview

Play Mode
Up	Rollover	Down
Pause Mode
Up	Rollover	Down

Like its siblings ForwardButton and BackwardButton, the PlayPauseButton class is a subclass of RolloverButton. It is a little special, however, because it is a toggle button that switches between a “play” series of images and a “pause” series of images.

The image on the right shows the various images used by this button. This class implements the method, initImages( ), which is declared as abstract in RolloverButton. Additionally, it keeps track of its own state information and provides two accessor routines, getState( ) and setState( ).

Steps to Follow

Back to top

Step 1 - Declaring and Defining Constants

This class does not import any packages. It uses only the default package java.lang.* and classes in its default package. This class is derived from RolloverButton which we examined earlier.

public class PlayPauseButton extends RolloverButton
{

    //Declare and define constants
    //Insert "PlayPauseButton Constants"

Locate the PlayPauseButton Constants clipping in the ForwardButton folder and drag it directly below the last line of code shown above. Your code should now look like this:

public class PlayPauseButton extends RolloverButton
{
    //Declare and define constants
    //Insert "PlayPauseButton Constants"

    public static final String PLAY_UP_IMAGE =  "play up";
    public static final String PLAY_DOWN_IMAGE ="play down";
    public static final String PLAY_ROLLOVER_IMAGE = 
                                                "play rollover";
    public static final String PAUSE_UP_IMAGE = "pause up";
    public static final String PAUSE_DOWN_IMAGE="pause down";
    public static final String PAUSE_ROLLOVER_IMAGE = 
                                                "pause rollover";
	
    public static final int PLAY_STATE  = 0;
    public static final int PAUSE_STATE = 1;

We are declaring many string constants. A majority of these are to be used for identifiers for the button images as they are placed in the hashtable of button images. The last two integers are constants that define the two possible button states for our toggle button, PLAY_STATE, and PAUSE_STATE.

Now that we have these constants, let’s see how they are used in initImages( ).

Back to top

Step 2 - Implementing initImages( )

Like the other RolloverButton derivatives, the initImages( ) method of the PlayPauseButton class is used to specify the images to be used for the various button states. This method is slightly different because we have six states instead of three since we are a toggle button.

Public void initImages( )
{

    //Initialize images and set the state for the PlayPauseButton
    //Insert "PlayPauseButton initImages"

Locate the PlayPauseButton initImages clipping in the ForwardButton folder and drag it directly below the last line of code shown above. Your code should now look like this:

public void initImages( )
{
    //Initialize images and set the state for the PlayPauseButton
    //Insert "PlayPauseButton initImages"

    addImage("images/play.jpg", PLAY_UP_IMAGE);
    addImage("images/playa.jpg", PLAY_DOWN_IMAGE);
    addImage("images/playb.jpg", PLAY_ROLLOVER_IMAGE);
    addImage("images/pause.jpg", PAUSE_UP_IMAGE);
    addImage("images/pausea.jpg", PAUSE_DOWN_IMAGE);
    addImage("images/pauseb.jpg", PAUSE_ROLLOVER_IMAGE);

    setState(PLAY_STATE);

The implementation for this method is pretty straightforward. We add the six images to our hashtable using addImage( ) and passing our constant identifiers for the hash key string. We then call setState( ) to set the initial state to the play mode. Let’s look at what setState( ) does.

Back to top

Step 3 - Implementing setState( )

The set state method toggles the state of the button to either PLAY_STATE or PAUSE_STATE.

/**
 * Sets the state of the PlayPauseButton.
 * @param the state to use.
 * @see #PLAY_STATE
 * @see #PAUSE_STATE
 */
 public void setState(int state)
 {

     //Handle switching states
     //Insert "PlayPauseButton setState"

SetState( ) takes and integer state parameter. Locate the PlayPauseButton setState clipping in the ForwardButton folder and drag it directly below the last line of code shown above. Your code should now look like this:

/**
 * Sets the state of the PlayPauseButton.
 * @param the state to use.
 * @See #PLAY_STATE
 * @see #PAUSE_STATE
 */
 public void setState(int state)
 {
     //Handle switching states
     //Insert "PlayPauseButton setState"

     switch (state)
     {
         case PLAY_STATE:
             upImage = PLAY_UP_IMAGE;
             downImage = PLAY_DOWN_IMAGE;
             rolloverImage = PLAY_ROLLOVER_IMAGE;
             setActionCommand("" + PLAY_STATE);
             this.state = state;
             refreshImage( );
             break;
         case PAUSE_STATE:
             upImage = PAUSE_UP_IMAGE;
             downImage = PAUSE_DOWN_IMAGE;
             rolloverImage = PAUSE_ROLLOVER_IMAGE;
             setActionCommand("" + PAUSE_STATE);
             this.state = state;
             refreshImage( );
             break;
      }

Our setState( ) method does a switch on the state that is passed in. If the state is play, we set the upImage, downImage, and rolloverImage to the appropriate image strings. Then we set the action command to the play state. This allows listeners to recognize whether the event is a play command or a pause command. We change our internal state variable (state is a private data member that we will declare in Step 5), and call refreshImage( ) from RolloverButton to update the visual appearance of our button.

The PAUSE_STATE case is very similar. We set cache the appropriate image strings in our data members for the images, set our action command member, store the current state, and refresh our button.

Now that we have a setState( ), let’s look at getState( ).

Back to top

Step 4 - Implementing getState( )

Our state accessor routine, getState( ) is fairly trivial. All it has to do is return the current state as either PLAY_STATE or PAUSE_STATE.

/**
 * Gets the state of the PlayPauseButton.
 * @return the state currently in use.
 * @See #PLAY_STATE
 * @see #PAUSE_STATE
 */
 public int getState( )
 {

     //Return the current state
     //Insert "PlayPauseButton getState"

Locate the PlayPauseButton getState clipping in the ForwardButton folder and drag it directly below the last line of code shown above. Your code should now look like this:

/**
 * Gets the state of the PlayPauseButton.
 * @Return the state currently in use.
 * @See #PLAY_STATE
 * @see #PAUSE_STATE
 */
 public int getState( )
 {     //Return the current state
     //Insert "PlayPauseButton getState"

     return state;

All we do is return our stored state variable. Lastly, it is time to declare a single private variable.

Back to top

Step 5 - Declaring the State Variable

We have a single private variable that we need to declare.

Public int getState( )
{
     //Return the current state
     //Insert "PlayPauseButton getState"
     return state;
}	

//Declare data members
//Insert "PlayPauseButton data members"

Locate the PlayPauseButton data members clipping in the ForwardButton folder and drag it directly below the last line of code shown above. Your code should now look like this:

public int getState( )
{
     //Return the current state
     //Insert "PlayPauseButton getState"
     return state;
}	

//Declare data members
//Insert "PlayPauseButton data members"

protected int state;

This finishes off the PlayPauseButton class.

Back to top

Summary

In this section of the tutorial, we started by defining a base button class called ImageButton. We built a class on top of that called RolloverButton that defined specific behavior for changing the button images based on user interaction. We built two more buttons, ForwardButton and BackwardButton that defined a set of images to use for their display. Lastly, we built a PlayPauseButton class that toggled between two separate states while inheriting our image and rollover behavior.

In our next class, we will be working with is the CloseBoxButton. Click here to return to the main tutorial file.