Sams Teach Yourself Java 2 in 24 Hours

Sams Teach Yourself Java 2 in 24 Hours

By Rogers Cadenhead

Workshop: Using Image Icons and Toolbars

One of the easiest ways to improve the visual appeal of a graphical user interface is to use icons, small images used to identify buttons, menu items, and other parts of an interface.

With many of the components in the Swing class library, you can label a component with an image instead of text by using the ImageIcon class in the javax.swing package.

You can create an ImageIcon from a file on your computer by calling the ImageIcon( String ) constructor method. The argument to the method is either the name of the file or its location and name, as in these examples:

ImageIcon stopSign = new ImageIcon("stopsign.gif"); 
ImageIcon saveFile = new ImageIcon("images/savefile.gif"); 

The graphics file used to create the image icon must be in GIF or JPEG format. Most will be in GIF format, because it is well-suited to displaying small graphics with a limited number of colors.

The constructor method of ImageIcon will load the entire image from the file immediately—unlike other graphics-related classes you will work with during Hour 23, "Working with Graphics."

You can use image icons as labels and buttons by using the JLabel( ImageIcon ) and JButton( ImageIcon ) constructor methods, as in the following example:

ImageIcon siteLogo = new ImageIcon("siteLogo.gif"); 
JLabel logoLabel = new JLabel(siteLogo); 
ImageIcon searchWeb = new ImageIcon("searchGraphic.gif"); 
JButton search = new JTextField(searchWeb); 

Several components can have an icon and a text label. The following statement creates a button with both:

JButton refresh = new JButton("Refresh", 
    "images/refreshIcon.gif"); 

Image icons are often used in toolbars, containers that group several components together into a row or column.

They can also be added to menus. Call the JMenuItem( Icon ) to add an icon to a menu or JMenuItem( String , Icon ) to add an icon and text.

Toolbars, which are created by using the JToolBar class in Swing, can be designed so that a user can move them from one part of a graphical user interface to another. This process is called docking, and these components are also called dockable toolbars.

You can create a toolbar with one of the following constructor methods:

Components are added to a toolbar in the same way they are added to other containers— the add( Component ) method is called with the component to be added.

For a toolbar to be dockable, it must be placed in a container that uses BorderLayout as its layout manager. This layout arranges a container into north, south, east, west, and center areas. When you are using a dockable toolbar, however, the container should only use two of these: the center and only one directional area.

The toolbar should be added to the directional area. The following statements create a vertical, dockable toolbar with three icon buttons:

Container pane = getContentPane(); 
BorderLayout border = new BorderLayout(); 
pane.setLayout(border); 
JToolBar bar = new JToolBar(SwingConstants.VERTICAL); 
ImageIcon play = new ImageIcon("play.gif"); 
JButton playButton = new JButton(play); 
ImageIcon stop = new ImageIcon("stop.gif"); 
JButton stopButton = new JButton(stop); 
ImageIcon pause = new ImageIcon("pause.gif"); 
JButton pauseButton = new JButton(pause); 
bar.add(playButton); 
bar.add(stopButton); 
bar.add(pauseButton); 
pane.add(bar, BorderLayout.WEST); 
setContentPane(pane); 

The next project you will undertake during this hour is Tool, a Java application that includes image icons and a dockable toolbar around.

Open your text editor and enter Listing 16.3, saving the file as Tool.java.

Example 16.3. The Full Text of Tool.java

 1: import java.awt.*; 
 2: import java.awt.event.*; 
 3: import javax.swing.*; 
 4: 
 5: public class Tool extends JFrame { 
 6:     public Tool() { 
 7:         super("Tool"); 
 8:         setSize(370, 200); 
 9:         setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
10:         ImageIcon image1 = new ImageIcon("newfile.gif"); 
11:         JButton button1 = new JButton(image1); 
12:         ImageIcon image2 = new ImageIcon("openfile.gif"); 
13:         JButton button2 = new JButton(image2); 
14:         ImageIcon image3 = new ImageIcon("savefile.gif"); 
15:         JButton button3 = new JButton(image3); 
16:         JToolBar bar = new JToolBar(); 
17:         bar.add(button1); 
18:         bar.add(button2); 
19:         bar.add(button3); 
20:         JTextArea edit = new JTextArea(8, 40); 
21:         JScrollPane scroll = new JScrollPane(edit); 
22:         JPanel pane = new JPanel(); 
23:         BorderLayout border = new BorderLayout(); 
24:         pane.setLayout(border); 
25:         pane.add("North", bar); 
26:         pane.add("Center", scroll); 
27:         setContentPane(pane); 
28:         setVisible(true); 
29:     } 
30: 
31:     public static void main(String[] arguments) { 
32:         Tool frame = new Tool(); 
33:     } 
34: } 

The Tool application requires three graphics files that will be used to create the icons on the toolbar: newfile.gif, openfile.gif, and savefile.gif. You can find these files on the book's Web site at http://www.java24hours.com (open the Hour 16 page).

Figure 16.5 and Figure 16.6 show two different screenshots of this application as it runs. The toolbar has been moved from its original location (Figure 16.5) to another edge of the interface (Figure 16.6).

16fig05.gif

Figure 16.5 Using an application with a toolbar.

16fig06.gif

Figure 16.6 Moving a toolbar to a new location.

Compile the application and try it out by moving the toolbar around. You can move a toolbar by clicking its handle and dragging the toolbar to a different edge of the text area. When you release the toolbar, it will be placed along that edge and the text area will move over to make room for it.

Sun Microsystems offers a repository of icon graphics that you can use in your own programs. The three icons used in this hour's workshop are from that collection. To view the graphics, visit the Web page http://java.sun.com/developer/techDocs/hi/repository/.

Share ThisShare This

Informit Network