Java >
Guidelines Home Page >  Java Look and Feel Design Guidelines
>
Part I: Overview
>
1: The Java Look and Feel
>
Visual Tour of the Java Look and Feel
  Previous Next Contents/Index/Search


Visual Tour of the Java Look and Feel

The Java look and feel implements widely understood interface elements (windows, icons, menus, and pointers) and works in the same way on any operating system that supports the JFC. The visual tour in this section shows off two JFC applications with the Java look and feel: MetalEdit and Retirement Savings Calculator. MetalEdit is a standalone, text-editing application; Retirement Savings Calculator is an applet displayed in a browser window.

The following figure shows a Microsoft Windows desktop with MetalEdit and Retirement Savings Calculator (a Java applet). MetalEdit has a menu bar and toolbar as well as a text-editing area. As an applet, Retirement Savings Calculator is displayed inside a web browser within an HTML page. Other Microsoft Windows applications are also present; some are represented by minimized windows.

Although the windows of many applications can be open on the desktop, only one can be the active window. In the figure, MetalEdit is the active window (indicated by the color of the title bar), whereas the Netscape Navigator TM browser, which contains Retirement Savings Calculator, is inactive.

Figure 4   Typical Desktop With Applications on the Microsoft Windows Platform

 

Typical Desktop on Microsoft Windows

MetalEdit Application

This section uses the MetalEdit application to illustrate some of the most important visual characteristics of the Java look and feel, including its windows, menus, toolbars, editor panes, dialog boxes, and alert boxes.

Example Windows

The windows in Java look and feel applications use the borders, title bars, and window controls of the platform they are running on. For instance, the MetalEdit document window shown in Figure 4 is running on a Microsoft Windows desktop and uses the standard Microsoft window frame and title bar.

In Figure 5, the contents of the document window (menu bar, toolbar, and editor pane) use the Java look and feel. However, the window borders, title bars, and window controls have a platform-specific appearance.

 Click here to view the corresponding code for Figure 5 (also available on the book's companion CD-ROM).

Figure 5   Exploded Document Window on Three Platforms

 

Window on Three Platforms

Example Menus

The menu bar, which is the horizontal strip under the window title, displays the titles of application menus, called "drop-down menus." Drop-down menus provide access to an application's primary functions. They also enable users to survey the features of the application by looking at the menu items. Chapter 9 contains discussions of drop-down menus, submenus, and contextual menus and provides guidelines for the creation of menus and menu items for your application.

Figure 6   Example Menu Bar

 

Menu Bar

The menu items in Figure 7 (which shows the contents of the Edit and Format menus from the MetalEdit menu bar) are divided into logical groupings by menu separators (in the flush 3D style). For instance, in the Edit menu, the Cut, Copy, and Paste commands, which are related to the clipboard, are separated from Undo and Redo commands, which respectively reverse or restore changes in the document. For more information, see Typical Edit Menu. Titles of menus that are activated are highlighted in blue in the default Java look and feel theme.

 Click here to view the corresponding code for Figure 7 (also available on the book's companion CD-ROM).

Figure 7   Example Drop-down Menus

 

Drop-down Menus

Keyboard shortcuts offer an alternative to using the mouse to choose a menu item. For instance, to copy a selection, users can press Control-C. For details, see Keyboard Shortcuts.

Mnemonics provide yet another way to access menu items. For instance, to view the contents of the Edit menu, users press Alt-E. Once the Edit menu has keyboard focus, users can press C (or Alt-C) to copy a selection. These alternatives are designated by underlining the "E" in Edit and the "C" in Copy. For details, see Mnemonics.

The menus shown in Figure 7 illustrate two commonly used menu titles, menu items, and menu item arrangements for Java look and feel applications. For details, see Drop-down Menus and Menu Items.

Example Toolbar

A toolbar displays command and toggle buttons that offer immediate access to the functions of many menu items.

In Figure 8, the MetalEdit toolbar is divided into four areas for functions relating to file management, editing, font styles, and alignment. Note the flush 3D style of the command and toggle buttons and the textured drag area to the left of the toolbar. For details, see Toolbars. For a collection of toolbar buttons designed using the Java look and feel guidelines, see Appendix B.

 Click here to view the corresponding code for Figure 8 (also available on the book's companion CD-ROM).

Figure 8   Example Toolbar

 

Toolbar

Example Editor Pane

The document text in the following figure is displayed in an editor pane with a styled text editor plug-in kit, which is embedded in a scroll pane. (Note the use of the drag texture in the scroll box.) For more on styled text editor plug-in kits, see Editor Panes. For details on scroll panes, see Scroll Panes.

Figure 9   Example Editor Pane

 

Editor Pane

Example Dialog Boxes

In the Java look and feel, dialog boxes use the borders and title bars of the platform they are running on. However, the dialog box contents have the Java look and feel. Chapter 8 describes dialog boxes in the Java look and feel and contains recommendations for their use.

Figure 10 shows a preferences dialog box with the title bars, borders, and window controls of several platforms. The dialog box enables users to specify options in the MetalEdit application. Noneditable combo boxes are used to select ruler units and a font. Text fields are used to specify the margins. An editable combo box enables users to specify font size. Radio buttons and checkboxes are used to set other preferences. Clicking the Browse command button displays a file chooser in which users can select a stationery folder.

Note the flush 3D borders of the combo boxes, text fields, radio buttons, checkboxes, and command buttons. Labels use the primary 1 color, one of eight colors in the default Java look and feel theme. (For more, see Colors.) For a thorough treatment of basic controls (including combo boxes, radio buttons, checkboxes, and command buttons), see Chapter 10. For a detailed discussion of text fields and labels, see Chapter 11.

MetalEdit provides mnemonics and keyboard navigation and activation sequences for each of the interactive controls in the preferences dialog box. The dialog box in Figure 10 illustrates two ways to create a mnemonic: directly in a component, indicated by an underlined letter in the component text, or in a label associated with the component, indicated by an underlined letter in the label.

 Click here to view the corresponding code for Figure 10 (also available on the book's companion CD-ROM).

Figure 10   Example Dialog Boxes on Microsoft Windows, Macintosh, and CDE Platforms

 

Dialog Boxes on Three Platforms

Example Alert Boxes

The alert boxes in a Java look and feel application use the borders, title bars, and window controls of the platform they are running on. However, the symbols, messages, and command buttons supplied by the JFC use the Java look and feel. (You provide the actual message and specify the number of command buttons and the button text. The JFC provides layouts for the symbol, the message, and the command buttons.)

In Figure 11, MetalEdit's warning box asks users if they would like to save changes when they try to close a window that has unsaved changes. Of the three command buttons in the alert box, the default command button is Save. The Don't Save button closes the window without saving changes. The Cancel button closes the dialog box but leaves the unsaved document open. For details, see Alert Boxes.

 Click here to view the corresponding code for Figure 11 (also available on the book's companion CD-ROM).

Figure 11   Example Alert Boxes on CDE, Microsoft Windows, and Macintosh Platforms

 

Alert Boxes on Three Platforms

Retirement Savings Calculator Applet

The sample applet shown in Figure 12, Retirement Savings Calculator, is part of a web page displayed in the Netscape Navigator browser.

This human resources applet enables employees of a fictitious company to determine their contributions to a retirement savings plan. To make it easy for all employees to access information on their retirement savings, the company provides the applet in a web page. (Note the boundaries of the applet. The HTML page also includes a banner in the GIF format as well as an HTML header with the title of the page.) All of the JFC components use the Java look and feel. However, the browser, its menu bar, toolbar, and scrollbars all use the platform's native look and feel (Microsoft Windows, in this case).

 Click here to view the corresponding code for Figure 12 (also available on the book's companion CD-ROM).

Figure 12   Applet on an HTML Page in a Browser

 

Applet on HTML Page

The applet obtains an employee's current retirement savings contribution and other salary data from a database and fills a table with the relevant data. The employee can drag a slider to specify a salary contribution and click a radio button to specify whether new contributions go to a money market, bond, or stock market fund. A row of command buttons offers a choice of whether to save changes, reset the salary contribution and fund contributed to, or display help.

Using the employee's input and databases, the applet calculates the employee's weekly and yearly gross salary, tax withholding, other deductions, retirement savings contribution, net paycheck, and the company's matching funds. Results are displayed in a table. Finally, the employee can type an assumed appreciation rate in an editable text field to see accumulated future savings or instruct the applet to use the nine-month fund history to project savings in the chart at the bottom of the applet.

 Click here to view the corresponding code for Figure 13 (also available on the book's companion CD-ROM).

Figure 13   Retirement Savings Calculator Applet

 

Retirement Savings Calculator

For more information on the components used in this applet, see Text Fields, Sliders, Radio Buttons, Command Buttons, and Tables.


Java Look and Feel Design Guidelines, second edition.
Copyright 2001. Sun Microsystems, Inc. All Rights Reserved.
Previous Next Contents/Index/Search
Left Curve
Java SDKs and Tools
Right Curve
Left Curve
Java Resources
Right Curve
JavaOne Banner Java 8 banner (182)