Introduction to Programming with Java Applets (Boese)
Lab: Chapter 4
- The purpose of this assignment is
- use of JLabel: text and images
There are two parts to this lab: text and images.
- Create a program with JLabels using text.
- Open Eclipse
- Create a new class named JLabelLab.
- Make it a JApplet.
- 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" );
- add an init method:
public void init( )
The init method initializes our widgets when we first run an applet.
- Inside the init method, add the myName widget to the applet
setLayout( new FlowLayout( ) );
add( myName );
- 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" );
- 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.
- 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" );
- 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.
- Now change the text in the label to have a blank line between your first and last name.
- 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.
- 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.
In this section, we're going to add images to our applet using JLabel.
- 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:
- get the image in to an ImageIcon object
- add the ImageIcon object to a JLabel
- add the JLabel to the applet
- The first step involves loading the image into the applet.
To do this, we use the
ImageIcon constructor method.
img = getImage( getCodeBase( ), "pic.gif" );
ic = new ImageIcon( img );
- The next step is to add the ImageIcon to a JLabel.
There are multiple ways to do this, select one way and implement it:
- using the .setIcon( ImageIcon ) method
myName.setIcon( ic );
- when instantiating the JLabel with an image and text:
new JLabel( StringText, ImageIcon, horizontalAlignment )
- when instantiating the JLabel with just an image:
new JLabel( ImageIcon, horizontalAlignment )
new JLabel( ImageIcon )
where horizontal alignment could be either: JLabel.LEFT, JLabel.CENTER or JLabel.RIGHT
The horizontal alignment designates where the icon and text should be placed if the
label is stretched bigger than its components. This will become an important feature
once we start working with layout managers, but not very obvious right now.
Example with text and image:
JLabel picImg; // declared in instance variable section
picImg = new JLabel( "Cookie Monster", ic, JLabel.CENTER );
Example with just an image:
picImg = new JLabel( ic );
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 );
- Change the text position for your name such that it is to the left of the image.
- 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 )
- Create a gap of 50 with the text on the left of the image.
Questions to answer
- When does the
init method get called?
- What are the three steps to get an image to appear on an applet?
- What is the default alignment for the text with respect to an image in JLabel?
- What method do you call to get the text to appear on top of the image in JLabel?
- 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