java.sun.com > Guidelines Home Page > Java Look and Feel Design Guidelines > Part IV: Backmatter > B: Graphics Repository

B: Graphics Repository

This appendix presents toolbar button and menu item graphics designed specifically for use in Java look and feel applications. The information is based on the Java Look and Feel Graphics Repository, which is available at http://java.sun.com/products/jfc/tsc.

The contents of this appendix are available on the book's companion CD-ROM.

 As a general rule, use 16 x 16 pixel graphics for menu items and 24 x 24 pixel graphics for toolbar buttons.

These professional-quality graphics can save valuable development time and ensure consistent graphics and terminology across Java look and feel applications.

The graphics are organized into six functional groups:

• General
• Navigation
• Text
• Tables
• Media
• Development tools

The repository provides:

• Small and large graphics. The 16 x 16 and 24 x 24 pixel graphics.
• Description. Explanation of the concept underlying each pair of graphics. Use this information to help you decide whether these graphics are appropriate to represent a specific feature of your application. You might use a modified, context-driven version of this explanation to describe the feature in your status bar.
• Name. Title to be used in corresponding menu items or button text. Variables, set off by curly braces, appear in some name fields. If the runtime value of this parameter is available, provide it for users.
• Tool tip. Brief phrase appearing next to the pointer when the pointer is over one of these graphics. Variables, set off by curly braces, appear in some of the tool tip fields. If the runtime value of this parameter is available, provide it for users.
• Keyboard shortcut. Keystroke combination (usually a modifier key and a character key) that activates the related menu item. Attach shortcuts to simple and constantly used features (like Ctrl-X for Cut). Ensure that each shortcut is unique within your application. For more information and guidelines on shortcuts, see Keyboard Shortcuts. For a summary of shortcuts, see Table 8.
• Mnemonic. A mnemonic shows users which key to press (in conjunction with the Alt key) to activate a command or another GUI component. This section suggests appropriate letters to underline (in order of preference) in the related menu item or button. Choose from among the suggested mnemonics to aid consistency. For rules on choosing mnemonics for your toolbar buttons and menu items, see Mnemonics.
• File name. The relative path name for the specified graphic in the Java Archive. The online file name follows this format:

.../toolbarButtonGraphics/groupName/NameSize.gif

All of the graphics reside in the toolbarButtonGraphics folder of the Java Archive. Therefore, the file-name information includes only the groupName subdirectory and NameSize.gif file name. Because the graphics are located in subdirectories, the path information is necessary. For instance, the repository contains two graphics for Stop--one for media transport and one for general use.

• Other notes. Miscellaneous information about the graphics, including cross-references to related graphics or concepts.

 Provide both graphics and text in a toolbar when you deem it appropriate--for instance, to accommodate novice or occasional users and those with poor vision. If you decide to display both button text and graphics, provide a way for end users to indicate their preferences for button text only, graphics only, or button text and graphics.

 You can use the information in this appendix to create Swing actions. For more on Swing actions, see the Java 2 Platform, Standard Edition, v 1.3 API Specification by visiting http://java.sun.com/j2se/1.3/docs/api/javax/swing/Action.html.

General Graphics

This section provides general-purpose graphics that represent:

• Adding objects
• Saving edits or checkpoints
• Stopping tasks or processes
• Adjusting the screen display
• Changing magnification levels
• Specifying preferences and properties
• Printing
• Displaying and retrieving previously visited locations
• Creating and sending electronic mail
• Aligning and justifying objects
• Searching
• Editing objects and data
• Importing and exporting objects
• Providing help and information

Adding Objects

This section contains graphics that represent the addition of an object to an existing set of objects.

Add

Graphics
Description	Adds an object to an existing set of objects
Name	Add {Object Name}
Tool Tip	Add {Object Name}
Mnemonic	A, D
File Name	.../general/Add16.gif .../general/Add24.gif
Other Notes	For more information on the plus symbol in the lower- right corner of the document graphic, see Add Object Indicators.

New

Graphics
Description	Creates a new object
Name	New {Object Name}
Tool Tip	New {Object Name}
Shortcut	Ctrl-N
Mnemonic	N, W
File Name	.../general/New16.gif .../general/New24.gif
Other Notes	For more information on the twinkle symbol on the lower-right corner of the document graphic, see New Object Indicators.

Open

Saving Edits or Checkpoints

The graphics in this section provide representations for saving edits or checkpoints for a specified object or group of objects.

Save

Graphics
Description	Commits all interim edits or checkpoints for an object to a permanent storage area
Name	Save
Tool Tip	Save
Shortcut	Ctrl-S
Mnemonic	S, V
File Name	.../general/Save16.gif .../general/Save24.gif

Save All

Graphics
Description	Commits all interim changes of a group of objects to a permanent storage area
Name	Save All
Tool Tip	Save All
Mnemonic	A, S, V, L
File Name	.../general/SaveAll16.gif .../general/SaveAll24.gif

Save As

Graphics
Description	Saves the object being edited to a different, permanent storage area
Name	Save As
Tool Tip	Save As
Mnemonic	A, S, V
File Name	.../general/SaveAs16.gif .../general/SaveAs24.gif

Stopping a Task

The graphic in this section represents stopping an action or a process. Compare this section to Stop, which is for media transport processes.

Stop

Graphics
Description	Halts the execution of a task
Name	Stop {Action or Process}
Tool Tip	Stop {Action or Process}
Mnemonic	S, T, P
File Name	.../general/Stop16.gif .../general/Stop24.gif
Other Notes	The Stop feature should be available only when there is an activity to halt.

Updating the Screen Display

This section provides graphics to represent updating the screen display with new data.

Refresh

Graphics
Description	Updates screen display with new data
Name	Refresh {Object Name}
Tool Tip	Refresh {Object Name}
Mnemonic	R, F, S, H
File Name	.../general/Refresh16.gif .../general/Refresh24.gif

Changing Magnification Levels

This section provides graphics to represent changing the magnification level used to view an object.

Zoom

Graphics
Description	Changes the magnification level used to view an object
Name	Zoom
Tool Tip	Zoom
Mnemonic	Z, M
File Name	.../general/Zoom16.gif .../general/Zoom24.gif

Zoom In

Graphics
Description	Increases the magnification level used (to view the details of an object)
Name	Zoom In
Tool Tip	Zoom In
Mnemonic	I, Z, N, M
File Name	.../general/ZoomIn16.gif .../general/ZoomIn24.gif

Zoom Out

Graphics
Description	Decreases the magnification level used (to view more of an object)
Name	Zoom Out
Tool Tip	Zoom Out
Mnemonic	O, Z, T, M
File Name	.../general/ZoomOut16.gif .../general/ZoomOut24.gif

Specifying Preferences and Properties

This section provides graphics to represent the display of:

• Global attributes of the current application that might be set by users (preferences)
• Local characteristics of a selected object that might be specified by users (properties)

Preferences

Graphics
Description	Displays global attributes of the current application that might be set by users
Name	Preferences
Tool Tip	Preferences
Mnemonic	P, R, F
File Name	.../general/Preferences16.gif .../general/Preferences24.gif
Other Notes	See Properties Indicators.

Properties

Graphics
Description	Displays local characteristics of a selected object that might be edited by users
Name	Properties
Tool Tip	Properties
Mnemonic	P, R, T, S
File Name	.../general/Properties16.gif .../general/Properties24.gif
Other Notes	See Properties Indicators.

Printing

This section provides graphics that represent operations such as page setup, printing, and print previews.

Page Setup

Graphics
Description	Enables users to specify properties for the current print job
Name	Page Setup
Tool Tip	Page Setup
Mnemonic	G, S, P
File Name	.../general/PageSetup16.gif .../general/PageSetup24.gif
Other Notes	See Properties Indicators. Page setup properties might include printer selection, paper orientation, size, and so forth.

Print

Graphics
Description	Sends an object or set of objects to be printed
Name	Print
Tool Tip	Print
Shortcut	Ctrl-P
Mnemonic	P, R, N
File Name	.../general/Print16.gif .../general/Print24.gif

Print Preview

Graphics
Description	Provides a preliminary representation of the output that would be generated by the Print menu item
Name	Print Preview
Tool Tip	Print Preview
Mnemonic	R, P, V, W
File Name	.../general/PrintPreview16.gif .../general/PrintPreview24.gif

Displaying and Retrieving Previously Visited Locations

This section provides graphics that represent bookmarks and history files.

A bookmark is a saved URL (uniform resource locator) for a web page that has been added to a list of saved URLs. When users view a particular web site and want to return to it subsequently, they can create a bookmark for the site.

On the other hand, a history file displays a list of previously visited locations (or opened files).

Bookmarks

Graphics
Description	Displays a list of documents marked for later retrieval
Name	Bookmarks
Tool Tip	Bookmarks
Mnemonic	B, K, M, R
File Name	.../general/Bookmarks16.gif .../general/Bookmarks24.gif

History

Graphics
Description	Displays a list of previously visited locations (or opened files)
Name	History
Tool Tip	History
Mnemonic	H, S, T, Y
File Name	.../general/History16.gif .../general/History24.gif

Creating and Sending Electronic Mail

This section provides graphics that represent the creation and sending of electronic mail messages.

Compose Mail

Graphics
Description	Creates a new electronic mail message
Name	Compose Mail
Tool Tip	Compose Mail
Mnemonic	M, L, C
File Name	.../general/ComposeMail16.gif .../general/ComposeMail24.gif

Send Mail

Graphics
Description	Sends the specified electronic mail message
Name	Send Mail
Tool Tip	Send Mail
Mnemonic	S, M, L, N
File Name	.../general/SendMail16.gif .../general/SendMail24.gif

Aligning Objects

This section contains graphics that represent the alignment of objects. Compare these graphics with the graphics in Justifying Objects.

Do not use these graphics for textual objects. Instead use the graphics described in Text Alignment and Justification.

Align Bottom

Graphics
Description	Positions an object so that it lines up with the lower horizontal edge of its container
Name	Align Bottom {Object Name}
Tool Tip	Align Bottom {Object Name}
Mnemonic	B, T, M
File Name	.../general/AlignBottom16.gif .../general/AlignBottom24.gif

Align Center

Graphics
Description	Positions an object so that it is in the middle of its container along both horizontal and vertical axes
Name	Align Center {Object Name}
Tool Tip	Align Center {Object Name}
Shortcut	Ctrl-E
Mnemonic	C, N, T, R
File Name	.../general/AlignCenter16.gif .../general/AlignCenter24.gif
Other Notes	Do not use these graphics for textual objects; see Align Center.

Align Left

Graphics
Description	Positions an object to line up with the leading vertical edge of its container
Name	Align Left {Object Name}
Tool Tip	Align Left {Object Name}
Shortcut	Ctrl-L
Mnemonic	L, F, T
File Name	.../general/AlignLeft16.gif .../general/AlignLeft24.gif
Other Notes	Do not use these graphics for textual objects; see Align Left.

Align Right

Graphics
Description	Positions an object to line up with the trailing vertical edge of its container
Name	Align Right {Object Name}
Tool Tip	Align Right {Object Name}
Shortcut	Ctrl-R
Mnemonic	R, G, H, T
File Name	.../general/AlignRight16.gif .../general/AlignRight24.gif
Other Notes	Do not use these graphics for textual objects; see Align Right.

Align Top

Graphics
Description	Positions an object to line up with the upper horizontal edge of its container
Name	Align Top {Object Name}
Tool Tip	Align Top {Object Name}
Mnemonic	T, P
File Name	.../general/AlignTop16.gif .../general/AlignTop24.gif

Justifying Objects

This section provides graphics to represent the justification of objects. Compare these graphics to those described in Text Alignment and Justification.

Horizontally Justify

Graphics
Description	Positions an object so that it fills the middle of its container evenly all the way to either vertical edge
Name	Horizontally Justify {Object Name}
Tool Tip	Horizontally Justify {Object Name}
Mnemonic	H, R, Z
File Name	.../general/AlignJustifyHorizontal16.gif .../general/AlignJustifyHorizontal24.gif
Other Notes	Do not use these graphics for textual objects; see Justify.

Vertically Justify

Graphics
Description	Positions an object to fill the middle of its container evenly all the way to either horizontal edge
Name	Vertically Justify {Object Name}
Tool Tip	Vertically Justify {Object Name}
Mnemonic	V, R, T
File Name	.../general/AlignJustifyVertical16.gif .../general/AlignJustifyVertical24.gif
Other Notes	Do not use these graphics for textual objects; see Justify.

Searching

This section provides graphics that represent search operations ranging from simple find-and-replace features within a document or a web page to a more comprehensive search feature with a scope as broad as one or more web sites or the entire World Wide Web.

Find In

Graphics
Description	Displays a window that enables the user to specify criteria to search for a specified object
Name	Find In {Scope}
Tool Tip	Find In {Scope}
Shortcut	Ctrl-F
Mnemonic	F, N, D
File Name	.../general/Find16.gif .../general/Find24.gif
Other Notes	Compare to Search. Find is used within an object (such as a document), whereas Search is used for more extensive operations across objects (for instance, multiple documents within a folder).

Find Again

Graphics
Description	Searches for the next instance of the object specified by the previous Find In command
Name	Find Again {Object Name}
Tool Tip	Find Again {Object Name}
Shortcut	Ctrl-G
Mnemonic	A, G, N
File Name	.../general/FindAgain16.gif .../general/FindAgain24.gif
Other Notes	Compare to Find In and Search.

Replace

Graphics
Description	Substitutes one object for another
Name	Replace
Tool Tip	Replace
Shortcut	Ctrl-H
Mnemonic	R, P, L, C
File Name	.../general/Replace16.gif .../general/Replace24.gif

Search

Graphics
Description	Searches for a specified object
Name	Search {Object Name} {in Scope}
Tool Tip	Search {Object Name} {in Scope}
Mnemonic	S, R, C, H
File Name	.../general/Search16.gif .../general/Search24.gif
Other Notes	Compare to Find In.

Editing Objects and Data

The graphics in this section represent common editing features such as copying, cutting, pasting, undoing, and redoing.

Copy

Graphics
Description	Duplicates the selected object and makes it available to be pasted elsewhere
Name	Copy
Tool Tip	Copy
Shortcut	Ctrl-C
Mnemonic	C, P, Y
File Name	.../general/Copy16.gif .../general/Copy24.gif

Cut

Graphics
Description	Removes the selected object from its current location and makes it available to be pasted elsewhere
Name	Cut
Tool Tip	Cut
Shortcut	Ctrl-X
Mnemonic	T, C
File Name	.../general/Cut16.gif .../general/Cut24.gif
Other Notes	See also Delete and Remove.

Delete

Graphics
Description	Removes the selected object from its current location
Name	Delete
Tool Tip	Delete
Shortcut	Delete
Mnemonic	D, L, T
File Name	.../general/Delete16.gif .../general/Delete24.gif
Other Notes	See also Remove and Cut.

Remove

Graphics
Description	Removes the selected item from its current context
Name	Remove
Tool Tip	Remove
Mnemonic	R, M, V
File Name	.../general/Remove16.gif .../general/Remove24.gif
Other Notes	See also Delete and Cut.

Paste

Graphics
Description	Inserts an object or data previously placed in a temporary holding area
Name	Paste
Tool Tip	Paste
Shortcut	Ctrl-V
Mnemonic	P, S, T
File Name	.../general/Paste16.gif .../general/Paste24.gif
Other Notes	The object or data is usually placed in the temporary holding area by the Cut or Copy command. Compare to Copy and Cut.

Edit

Graphics
Description	Enables users to modify the selected object
Name	Edit
Tool Tip	Edit
Mnemonic	E, D, T
File Name	.../general/Edit16.gif .../general/Edit24.gif

Undo

Graphics
Description	Reverses the last transaction
Name	Undo {Action}
Tool Tip	Undo {Action}
Shortcut	Ctrl-Z
Mnemonic	U, N, D
File Name	.../general/Undo16.gif .../general/Undo24.gif

Redo

Graphics
Description	Reverses the effect of the last undone transaction
Name	Redo {Action}
Tool Tip	Redo {Action}
Shortcut	Ctrl-Y
Mnemonic	R, D
File Name	.../general/Redo16.gif .../general/Redo24.gif.

Importing and Exporting Objects

The graphics in this section represent the importing and exporting of objects. To import involves bringing objects or data (for example, documents created in another application, text files, and graphics files) into your application. To export means to save an object or data in a format other than your application's native format.

Import

Graphics
Description	Opens an object or data that is in a format other than the application's native format
Name	Import
Tool Tip	Import
Mnemonic	I, M, P, T
File Name	.../general/Import16.gif .../general/Import24.gif

Export

Graphics
Description	Saves an object or data in a format other than the application's native format
Name	Export
Tool Tip	Export
Mnemonic	X, E, P, T
File Name	.../general/Export16.gif .../general/Export24.gif

Providing Help and Information

This section contains graphics that represent standard and contextual help, information about an object or a task, About boxes, and tips of the day.

Help

Graphics
Description	Provides instructions and information to aid users in completing tasks
Name	Help
Tool Tip	Help
Shortcut	F1
Mnemonic	H, L, P
File Name	.../general/Help16.gif .../general/Help24.gif
Other Notes	As a general rule, help provides a system for browsing, searching, viewing, and reading information. It has more options than contextual help but might require activity that is tangential to the user's task.

Contextual Help

Graphics
Description	Displays information to users based on their working location in a piece of software
Name	Contextual Help
Tool Tip	Contextual Help
Shortcut	Shift-F1
Mnemonic	C, T, X, H
File Name	.../general/ContextualHelp16.gif .../general/ContextualHelp24.gif
Other Notes	Compare to the previous section.

Information

Graphics
Description	Displays information about an object or task
Name	Information
Tool Tip	Information
Mnemonic	I, N, F, O
File Name	.../general/Information16.gif .../general/Information24.gif

About

Graphics
Description	Provides information about the application as a whole
Name	About {Application Name}
Tool Tip	About {Application Name}
Mnemonic	A, B, T
File Name	.../general/About16.gif .../general/About24.gif
Other Notes	For more information on About boxes, see Designing About Boxes.

Tip of the Day

Graphics
Description	Provides a short hint about a feature of the application
Name	Tip of the Day
Tool Tip	Tip of the Day
Mnemonic	T, D, P
File Name	.../general/TipOfTheDay16.gif .../general/TipOfTheDay24.gif

Java Look and Feel Design Guidelines, second edition. Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.