Java Applets: Interactive Programming

Lab/Assignments


The purpose of this assignment is


Instructions:

We're going to create a slideshow of images, with a previous and next button so the user can walk through the slideshow via buttons.

  1. You're going to need some images, so copy some from another project or import some in to your working project.

  2. Create a new class named SlideshowUsingButtons

  3. Add an instance variable for an Image named photo.

  4. Add an array of ImageIcon objects named icons, which will keep track of all the images in the Slideshow.

  5. Add a JLabel instance variable named imgLabel which is the label displaying the current image in the slideshow.

  6. Create the init method, and set the layout to FlowLayout.

  7. Inside the init method, instantiate the array icons to the size of 4.

  8. Inside the init method, grab one of the images and store in photo.
    Then create an ImageIcon object on photo and save it in the first spot in the array icons.

  9. Repeat the above step for the other 3 images, storing in to subsequent spots in the array.

  10. Inside the init method, instantiate the JLabel variable imgLabel with the first ImageIcon in your array icons.

  11. Inside the init method, add the imgLabel to the applet.

  12. Test the applet so far by running it, making sure the first image appears. Make sure you have images available to display!

     
    Now let's add the buttons to walk through the list of images.

  13. At the top of your program, add JButton instance variables: one for prev, one for next. When the user clicks on each button, it will scroll one way or another through the list of images.

  14. Inside the init method, instantiate the two buttons you created.

  15. Inside the init method, add the two buttons, on either side of the JLabel being displayed.

  16. Test the program to ensure the buttons appear correctly.

     
    Now let's add events to the buttons to walk through the list of images.

  17. To add events, add the import statement, implements listener, and add listeners to both buttons and set up the actionPerformed method.

  18. To keep track of the current image being displayed, add an instance variable named currentIndex and initialize it to zero. This will be the index in to our array of ImageIcons.

  19. Inside the actionPerformed method, check to see if the source of the event was the next button. If it was, then call the method setupIcon with the value of the currentIndex plus one - stating that we want to display the next image.
    If the source of the event was the previous button, then call the method setupIcon with the value of the currentIndex minus one - display the previous image.

  20. Now we have to write the setupIcon method. Set up the method to return nothing and takes the new index as a parameter.
    The purpose of the method is to set the currentIndex to the new index, then enable/disable the prev/next buttons based on where we are with the index.
    If we're at the beginning of the list, we need to disable the previous button.
    If we're at the end of the list, we need to disable the next button.

  21. First set the currentIndex to the new index passed in to the method.

  22. Now set the icon on the label imgLabel with the icon based on the new index value.

  23. Now set both the previous and next buttons to enabled.

  24. Now we'll decide which of the buttons, if any, need to be disabled.
    Check to see if the new index is zero. If it is, disable the previous button.
    Check to see if the new index is the last one in the array. If it is, disable the next button.

  25. Try running your program now. Doesn't quite work right? What didn't work?

  26. At the end of the actionPerformed method, we need to add the call to repaint( ) to force the applet to redraw the screen.

     

    We can also arrange the images such that they're all centered:

  27. To center all of the images, go back to the init method and call the method setHorizontalAlignment on the JLabel imgLabel and send it the parameter JLabel.CENTER.


Copyright © 2006-2007: E.S.Boese All rights reserved.