Introduction to Programming with Java Applets (Boese)

Lab: Chapter 4
Swing Components

The purpose of this assignment is


There are two parts to this lab: text and images.

Part 1

  1. Open Eclipse
  2. Create a new class named JLabelLab.
  3. Make it a JApplet.
  4. Add a JLabel widget named myName and enter your full name.
    Remember to add widget declarations at the top of the class, NOT inside a method.
    	JLabel myName = new JLabel( "Cookie Monster" );
  5. add an init method:
    	public void init( )
    The init method initializes our widgets when we first run an applet.
  6. Inside the init method, add the myName widget to the applet
    		setLayout( new FlowLayout( ) );
    		add( myName );
  7. Now compile and run the applet. You should see your name printed on the applet.
    If it doesn't appear, fix your code until it does!
    Now let's get the text to go on multiple lines. In order to do this, we need to use some HTML tags. HTML is not too difficult, and we only need to learn a few of them to enhance our labels a lot.

    HTML tags are always within less-than and greater-than signs, and some require an end tag by specifying </tag>

    The first thing we need to know, is that whenever we're going to use HTML tags in our Java widgets, we need to start with the <HTML> tag.
    Now, if we want our text to go across multiple lines, we need to use the <BR> tag.
    For example, if our name was "Cookie Monster" and we want our first and last names on separate lines, we would enter:

    	JLabel myName = new JLabel( "<HTML>Cookie<BR>Monster" );
  8. Modify your program to put your name on separate lines, following the example above.
    We can also control the color and size of each word (or even letter!) within our label by using the <FONT> tag. The <FONT> tag allows us to specify a size, color and style.
  9. Let's put the first letter of your first name in a much bigger size.
    We can do this by setting the size to +5, or other number. When using the FONT tag, we need to set the closing tag to specify where to stop using the new font.
    In our Cookie Monster example, the code would now be:
    	JLabel myName = new JLabel( "<HTML><FONT SIZE=+5>C</FONT>ookie<BR>Monster" );

  10. Now let's change the color of your last name to red. See if you can figure out how to do this, using the FONT tag.

  11. Now change the text in the label to have a blank line between your first and last name.

  12. Now make the first letter of your first and last name really big, bigger than the rest of the text. To do this, you need to use the <FONT> tag with the SIZE attribute. You can set the size to a particular point size, or use the plus sign and some value to specify you want that text that much bigger than the current font size.

  13. Now make your first name in all italics and your last name in bold.
    Use the <I> tag to put text in italics and the <B> tag to put in bold. Reminder, you will need to specify the end tags to get it to work.

    Part 2

    In this section, we're going to add images to our applet using JLabel.
  14. First we need an image to play with, so download the following image pic.gif to your account and import it into Eclipse.
    To import files into Eclipse, see: Importing files into Eclipse

    There are three steps involved in adding images to applets:

    1. get the image in to an ImageIcon object
    2. add the ImageIcon object to a JLabel
    3. add the JLabel to the applet
  15. The first step involves loading the image into the applet.
    To do this, we use the ImageIcon constructor method.
    	Image img;
    	ImageIcon ic;
    	img = getImage( getCodeBase( ), "pic.gif" );
    	ic = new ImageIcon( img );
  16. The next step is to add the ImageIcon to a JLabel.
    There are multiple ways to do this, select one way and implement it:
    We can also customize how we want the text with respect to the image.
    To change it such that the text is to the left of the image, we can call the method
    	setHorizontalTextPosition( textPosition )
    where textPosition specifies where the text is with respect to the image, and could be either JLabel.LEFT, JLabel.CENTER, JLabel.RIGHT


    	picImg.setHorizontalTextPosition( JLabel.LEFT );
  17. Change the text position for your name such that it is to the left of the image.
  18. Now change it so that it is centered.
    There's also a way to add space between an image and the text, when the text is not on top of the image. To do this, we need to call the following method:
    	setIconTextGap( numPixelsGap )
    	picImg.setIconTextGap( 20 )
  19. Create a gap of 50 with the text on the left of the image.

Questions to answer

  1. When does the init method get called?

  2. What are the three steps to get an image to appear on an applet?

  3. What is the default alignment for the text with respect to an image in JLabel?

  4. What method do you call to get the text to appear on top of the image in JLabel?

  5. What method do you call to add space between the text and the image in a JLabel?

When you are finished, show your GTA your final applet and the answer to the above questions.
© by E.S.Boese. All Rights Reserved