Java Applets: Interactive Programming

Lab/Assignments


The purpose of this assignment is


Instructions:

Objectives:



  1. Open a browser and go to: http://www.prodraw.net/button/index.htm or Google search for free buttons
  2. Find a dark-colored button that you like (we're going to want a light-colored font for the text on the button, so best to have a dark background)
    Note: It MUST be a round button, NOT square so you will have to go through the transparency exercise.
    For example, the one I used is below (you may NOT use this one):

  3. When you find one you like, right-click on it and choose "Copy Image Location" If you are using Vista, you need to right-click on the image and choose "Properties" then copy the Address URL
  4. Go to the transparency online form from Recitation and make the background transparent by pasting the URL into the box: http://stuff.mit.edu/tweb/map.html
    If you forgot how, review Lab 4
  5. Save the image with the transparency

  6. Open Eclipse
  7. Import your transparent image in to your project where your class will be located.
  8. Create a new class named Options in this project.
  9. Make it a JApplet.
  10. Declare three JButtons as instance variables, one for "Home" one for "Portfolio" and one for "Contact Us".
    Remember that instance variables are declared at the top of the class.
    Declaration means that you define the data type (JButton) and the variable name.
  11. add a method named setupButtons that returns nothing and takes no parameters:
  12. Inside this method, we're going to initialize our buttons.
    Create the images and create your buttons with the image and the appropriate text.
  13. add an init method, either before or after your setupButtons method (doesn't matter where):
  14. Inside the init method,
    1. call the method setupButtons that you created
    2. add each of your buttons to the applet
  15. Now compile and run the applet. You should see your buttons displayed with the text to the right of the images.
    Yours should look something like the following:


  16. Fix it so that the text lies on top of the image (similar to last lab).


  17. Change the button text to be white, or another light-color.
    This code would be best to be inside the setupButtons method. Why?


  18. Now remove the border around each button


  19. Now remove the content area for each button


  20. Now remove the focus box around each button


  21. Change the font of the Home button to be BOLD and size obviously bigger than the current size of the other buttons.

    It should now look as follows

  22. The last thing you need to do is to enable a different image for when the user rolls over each button.

    Create a copy of the background image and make it darker (using a paint program), then set up each button such that when the user rolls over the button, this new background image is displayed.
    Remember: setting the rollover image on a JButton requires you to reference an ImageIcon object.


    Questions to answer

    Put the answers in your comments at the top of your program, after your name, e-id, date and course CS150.
    1. When does the setupButtons method get called?
    2. What happens if you call setupButtons before you call the add method to add the buttons to the applet? What happens if you call setupButtons after you call the add method to add the buttons to the applet? Make sure you followed the instructions in this assignment exactly to be able to answer this question!
    3. What is the difference between the ContentAreaFilled and BorderPainted?


    What To Electronically Submit:

    Using the RamCT Assignment Submission System, submit:

    • the Java applet file, Options.java.

    • ALL your IMAGE files, .gif that you made with transparency

    Click Here for how to use the RamCT Submission System.


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