File Manager is the tool that provides for the presentation and organization of the user's file structure. The basic types of iconic objects displayed in File Manager are files, directories (folders), executables, and actions. These objects are referred to as documents, folders, and applications. File Manager displays the icons in two sizes, called Icon and Small Icon views in the Set View Properties dialog box. Icon is 32x32 pixels and Small Icon is 16x16 pixels. Figure 13-1 shows both icon sizes.

Figure 13-1. File Manager Icons at Sizes 32x32 and 16x16

Documents, folders, and applications are represented by three different shapes. Documents are vertical rectangles meant to look like pieces of paper. Folders are horizontal rectangles with a tab to look like a file folder. Applications can be any shape and use the entire icon square. All objects in File Manager should indicate to the user that they can be manipulated, that is, dragged and dropped.

The Application Manager is similar to File Manager, but its focus is on holding applications rather than documents. All network-accessible applications in the desktop are placed here in containers, called application groups (rather than folders).

Application Manager is like a “network store.” This is the place where the user goes to find the latest applications available on the system. Figure 13-2 shows an example of the Application Manager's group icons.

Figure 13-2. Application Manager Group Icons

Application group icons are like folders in that they represent a collection of objects, in this case related objects. If your application requires support files or includes sample files, you can design your own application group icon that represents where a user can get the related files for your application.

The Front Panel is the control panel for the desktop and usually appears at the bottom of the screen. Front Panel icons provide quick access to the user's most commonly used applications.

The Front Panel also has subpanels of icons that the user can access with the arrow buttons on the Front Panel. The subpanel is an extension of the Front Panel icon. For example, Figure 13-3 shows the Personal Applications subpanel open. The user can add applications to this subpanel by dropping them on the Install drop site. The user can choose to promote icons in the subpanel to the Front Panel via the pop-up menu.

Figure 13-3. Front Panel and Subpanel Icons

Minimized window icons appear on the desktop when a window is minimized. The icon should represent the application that controls the minimized window, as shown in Figure 13-4. These icons are different from the icons used in the Front Panel in that they represent running applications, although they are the same size.

Figure 13-4. Minimized Window Icons

Other graphic elements include button graphics, tool bar graphics, and graphics used as labels. A tool palette in a paint program is an example; a document orientation button (landscape or portrait) in a printer dialog box is another. These are graphics that you create for use in your application and that are not used elsewhere. Figure 13-5 is an example of some other graphic elements (tool bar graphics).

Figure 13-5. Other Graphics

CDE icons use a palette of 22 colors:

These colors are the default colors in the Icon Editor, which is the recommended tool for creating desktop icons. Figure 13-6 shows the Icon Editor and its color palette. This limited palette was chosen to maximize the attractiveness and readability of icons without using an unnecessary number of colors.

If you use more than the 22 icon colors, then your icons may experience color-flashing effects that can make the icon unreadable. The best way to ensure predictability of appearance of your icons is to use only the 22 colors in the desktop palette.

Figure 13-6. Icon Editor Color Palette

It is important to understand the limited role of the dynamic colors. These represent the colors used to display the user interface elements on which your icon appears. If your icon appears in File Manager, File Manager determines what the background color is. If the user changes the color palette in Style Manager, the colors in the user interface change to match, and the background color on which the icons are displayed changes.

In general, dynamic colors have little use in most icons. There are two ways they are used:

Figure 13-7. Dynamic Color Shadows

Design your icon primarily to use the eight static grays; use the eight static colors mostly as accents. The eight static colors are strong and can easily be overused. The static grays allow icons to blend gracefully with the already colorful desktop environment. You can dither the static colors with the static grays to tone the colors down for coverage of larger areas. You can also use the grays to smooth the edges of icons. This is sometimes referred to as “anti-aliasing.”

Do not use dynamic colors in File Manager icons because the appearance of the icon will change when the user changes color palettes. Such a change could be inappropriate as well as unpredictable.

Icons have various graphical styles. The most basic icon consists of a simple black outline. However, as color is added, the style resembles that of a coloring book, with color added within the black lines. This is most effective when done on white backgrounds.

CDE, with its pervasive use of colored and medium-value backgrounds, uses both lighter and darker shades to create fairly realistic images. You are encouraged to explore this style.

Another element of style is the point of view taken in portraying the object. CDE uses a head-on view, as shown in Figure 13-8, usually from slightly above if the object in question is a three-dimensional one, such as a printer. You should use a treatment that gives the icon a slight dimensional quality, as this reinforces the perception that the icon can be dragged and dropped.

Figure 13-8. Examples of Three-Dimensional Icons in CDE

The application icon is the most important icon you will design. This is the place for your product identity, as well as a clear indication to the user of what your application does. The application icon is what the user opens to run your application.

There are no shape conventions for application icons. They can fill the entire icon bounding box or they can be irregular in shape. It is recommended that your icon appear three-dimensional. Figure 13-9 shows some CDE icons. You can use these icons as templates when designing your own icons.

Figure 13-9. Application Icons That CDE Uses

The application group icon represents the container in which the user finds your application, as well as any other files you may choose to include, such as information or sample files. Design the icon in such a way that the user knows it is a container, such as a folder or box.

The concept that Application Manager uses is that of an icon based on accordion-style folders. This icon is large enough that you can stamp images on the front of it to indicate to the user what kinds of items are inside. Figure 13-10 is an example of application group icons.

Figure 13-10. Application Group Icons

A document icon should help the user understand what kind of data is stored in that document icon and what application is associated with the document. Figure 13-11 shows a number of CDE document icons that you can use as templates when designing your own document icons.

Applications that support multiple file formats need different document icons for the different output formats. Rather than creating a distinctively different graphic for each format, you might use the same graphic for the basic file and add a tag to, or a small label in, the icon to delineate the format.

In the case of the document icon, the basic rectangle of the document is left-aligned in the icon square. If you use the tag approach, place the tag on the right side of the icon, half on and half off the basic icon, but not obliterating the descriptive graphic, as shown in Figure 13-11.

Figure 13-11. Document Icons

The desktop is different from the application spaces you may be familiar with in the following ways:

CDE runs in both color and monochrome modes, so you must create your icons in two formats: XBM (X bitmap) for monochrome and XPM (X pixmap) for color. The Icon Editor saves icon files to both formats.

On the desktop, buttons and palettes can use either the XBM or XPM formats. You should use the XPM format wherever possible for your button, palette, and tool bar graphics.

The XBM file format has only two colors: foreground and background. On the desktop, the foreground color is not fixed, but varies according to the background color. A color scheme with a dark gray background might cause any text or graphics to appear white. However, a color scheme with a light gray background will cause text and graphics to appear black.

Inverting the foreground color may have a strange effect on certain icons. For something simple, like an arrow shape, there is no adverse consequence. But for other images, the negative version created by inverting the foreground color might be illegible and, therefore, unusable. Figure 13-12 shows the consequences of reversing the foreground color in monochrome mode.

Figure 13-12. Monochrome (XBM) Bitmaps with Foreground Reversal Consequences

CDE accommodates three display resolutions: low resolution (640x480 pixels), medium resolution (800x600 pixels), and high resolution (mega-pixel). The size of the Front Panel and some of the icons change automatically, depending on the display resolution. For this reason, your application must provide different icon sizes.

CDE has three icon sizes: 16x16, 32x32, and 48x48, referred to as 16, 32, and 48. (They have suffixes of .t, .m, and .l, respectively.) If your application comes from the PC domain, then the size 16 and 32 icons are familiar sizes. Table 13-2 defines where each size is used.

Table 13-3 lists the icons you need to create for an application. A total of 16 icon files are needed, assuming one of each type and size. Figure 13-13 shows an example set of icons.

Figure 13-13. Minimum Required Set of Icons for Mailer

The basic name for the icon must be no more than seven characters. The size and color suffixes are appended to the name, as shown in Table 13-4.

The suffix .pm is for the XPM format. The suffix .bm is for the XBM format. The suffix _m refers to the mask for the black-and-white icon.

You do not have to provide icons in all these configurations. Table 13-3 lists the required icons. For example, the .s icons are typically used for tool bars, which your application may not have.

Depending on the graphic you use for your icon, the bits may not take up the entire space allocated for the icon. The recommended rules for where the empty space goes in a desktop icon are:

Figure 13-14. Left-Aligned 32x32 Icon with Tag

There is no size 48 requirement for the document or application group icons because neither are expected to be used for a minimized window icon (you use the tool's icon instead) or in the Front Panel. A user might, however, promote one of these icons to the Front Panel.

The icons that appear by default in the Front Panel have a slightly different appearance from File Manager icons. These icons cannot be dragged and dropped and are thus given a more permanent look by appearing to be etched into the surface.

You do not have to provide size 48 icons with an etched appearance. Since you cannot determine if and when your icons will be used in the Front Panel, you should not design specifically for this usage; instead, design for File Manager usage, which is more common.

When designing your application and an associated tool bar, consider the following guidelines:

You typically use the following Motif components when constructing a tool bar:

You should provide the Close, Move, Lower, and Minimize choices as the minimum set of capabilities in primary windows. Provide Resize and Maximize choices as appropriate. Design your secondary windows so that resizing and maximizing are neither necessary nor appropriate. Most secondary windows should include only the Close, Move, and Lower choices. In extraordinary cases, you may provide the Resize and Maximize choices in a secondary window. Do not provide the Minimize choice in secondary windows (they are minimized with the associated primary window).

Windows that have a Close or Exit choice need to support the window management protocol for Close if there is a window menu. In the case of dialog boxes, the Close item on the window menu corresponds to the Cancel choice or dialog box dismissal with no further action taken.

The drag icon consists of three parts:

Figure 13-18 shows these parts.

Figure 13-18. Parts of a Drag Icon

State Indicator

The state indicator is a positioning pointer combined with a valid or invalid drop zone indicator. The valid state indicator should resemble an arrow pointer with a hot spot so the user can position the cursor in a predictable manner. The invalid state indicator, a cannot pointer, appears when the user is over an invalid drop zone. Figure 13-19 shows an example of an invalid state indicator.

Figure 13-19. Invalid State Indicator

Operation Indicator

The operation indicator gives the user feedback on what operation is occurring during the drag. Figure 13-20 shows the copy and link feedback. Because most drags are move operations, an operation indicator is added to the drag icon only for copy or link operations.

Figure 13-20. Operation Indicator

Source Indicator

The source indicator is a representation of the selection (or the item being dragged). It comes in several versions, depending upon whether the selection represents single or multiple items and what kind of item the selection represents. Figure 13-21 shows examples of source indicator drag icons.

Figure 13-21. Source Indicator

The hot spot for text drag icons is located on the top left corner (1,1). The hot spot for single and multiple drag icons is located at the top left pixel of the invalid icon (3,3). CDE has tuned each drag icon to increase user accuracy at targeting and positioning.

You are responsible for supplying a graphic to be used in the drag icon in your application. This graphic is usually one of the icons already supplied with the application, such as the 32x32 icons that File Manager uses to represent documents. The graphic used depends on what is being dragged.

In cases where the user does not select an icon to start a drag, it is still appropriate to show a relevant graphic in the drag icon, especially if that graphic will be used by the destination application upon the drop. For example, in Calendar Appointment Editor, the user can select an appointment from the scrolling list, which does not show icons. An appointment icon is used as part of the drag icon. If the appointment were dropped on File Manager, File Manager would display the appointment, using the same graphic.

In CDE three operations are associated with the drag icon. These operations are explained in “Parts of a Drag Icon”. The drag icon has alternate graphics that indicate to the user when the operation is a copy or link. The default operation, move, requires no alternate icon graphics.

There are three types of draggable objects in CDE:

Each application has its own objects that can be dragged and dropped. For example, Calendar uses appointments, Mailer uses mail messages, and File Manager uses folders and files.

The folder and file icons in File Manager exist as separate entities in the underlying file system and are, therefore, treated as files when dragged and dropped. However, Calendar appointments and Mailer messages do not exist as separate entities in the file system. When a user drags these objects they are treated as buffers.

Text selections fall into a different category because selecting a piece of text is different than selecting an icon. The user selects a range of text in a document window; the text does not represent the whole document — only a piece of a document. Rarely does a user see the piece of text as a distinct object and the user does not expect a piece of text to behave like an icon when dropped. For this reason, the drag-and-drop model for text mirrors the cut, copy, and paste operations available from the Edit menu.

There are two actions that can occur when an object is dropped: insert or load.

The insert action inserts the dropped object into the destination, adding it to the current data in the application or document. The object is inserted when a user schedules an appointment, prints a document, attaches a document, pastes text, or appends a mail message. Such an action is a move or copy operation, depending on the destination and the user. The user might decide to copy a piece of selected text as opposed to moving it. The drag icon should indicate whether the operation is a copy or move.

The load action operates the same as if the user had chosen Open from the File menu, selected a file, and clicked the Open button. The dropped object gets loaded into the application. The user can edit it and save changes back to the original file. Load works only with files at this time, not with buffers or text. The user should see the copy drag icon when dragging an object over a drop zone that supports the load action.

Load works with buffers; however, buffers are loaded as read-only.

When designing drag-and-drop operations for an application, you must understand how Motif decides which operation executes when the source and destination of a drag and drop do not match.

For each drag source, an application advertises which drag-and-drop operations are possible and on what destinations the drag source can be dropped. For each drag destination, the application advertises the possible sources and the types of operations. If a source and its destination have two or more operations in common, Motif follows a specific order to determine which operation to use. That order is move, copy, link. The application cannot change the operation that is accepted based on the type of item being dragged.

For example, application A might allow an element to be moved or copied. Application B might allow the destination to accept a copy or link. The intersection in this example is copy. If the destination in application B accepts move or copy, then the source is moved because the move operation comes first in the operation order.

In this example, the user could override the move operation by holding down a modifier key, for example Ctrl, to make the operation a copy. This will work if the copy operation is in the common set of operations. If the copy operation is not in the common set, then the drag becomes an invalid drag.

The only time you may have to consider matching operations is when you have a destination that accepts moves but functions better with copies. In that case, the destination should accept only copies because accepting a copy broadens the scope of acceptable drops. In most cases where a move is accepted, a copy would work just as well. Remember that move is implemented as a copy followed by a delete.

In CDE, items in a scrolling list are text objects by default. They can be buffer objects, but they cannot be both text and buffer objects. For example, the Calendar Appointment Editor has a scrolling list of appointments that the user can select and drag. When dragging an appointment, the user is manipulating a buffer and the drag icon shows an appointment icon as the source indicator (see Figure 13-22). A Mailer container window has a list of mail messages in the upper portion of the window. Users can select and drag one or more messages from this list. These messages are actually buffers and the drag icon shows a mail message as the source indicator. If multiple mail messages are dragged, then the drag icon shows the multiple source indicator.

Figure 13-22. Scrolling List with a Draggable Item

If your application uses a scrolling list to show mail message headers or to list other kinds of objects, then you need to integrate dragging with an extended selection model, as in the Mailer application.

Sometimes the user needs to be able to drag from inside a dialog box. For example, in the Calendar Appointment Editor there are a series of text fields on the left side where the user enters information about an appointment. Allowing drags from this area lets the user drag text from the appointment description.

The recommended method for indicating that the user can drag something is to include a draggable icon graphic in the dialog box. This icon graphic must be the same icon that represents data in File Manager. In Calendar, the appointment icon is shown just as it would appear in File Manager (see Figure 13-23), with a label under it. This is the same icon that the drag icon source indicator uses. Place the icon graphic in the dialog box adjacent to the information to be dragged. The upper right corner of the dialog box or window is the default position, but you can change it for your application. In Calendar Appointment Editor, the icon is placed near the main text field to indicate that you can drag the text fields.

Figure 13-23. Calendar Appointment Editor Dialog Box

In some applications, you might want to allow the user to drag an entire document or file. For example, in Icon Editor, you might want to allow the user to drag the file for an icon currently in the editor. You should incorporate a draggable icon graphic in the window of your application to indicate that the user can drag the document or file. In the case of Icon Editor, you can use one of the icons for displaying the contents of the icon file. Follow the guidelines for icons used in dialog boxes. For example, the icon should:

The Front Panel is a collection of controls and other functions that provide the user with easy and fast access to the operating system. As a consequence, its drag-and-drop behaviors are heavily dependent upon the context of the destination. For example, if the destination is a printer, then the system should print it. If the destination is a subpanel, then the system should install it in the subpanel. Most applications will not vary in behavior quite as broadly as the Front Panel.

File Manager for CDE allows the user to drop an icon on the desktop, where it becomes a reference. Within File Manager windows, File Manager allows dropping onto icons other than folders and action icons. For example, dropping a mail message icon onto a mail container icon appends the mail message.

When mail messages or calendar appointments, or other buffers, are dragged from the source application and dropped onto File Manager, they must be named. The underlying API supports a name field for the item being dragged. You should use this name as the name of the buffer. Create names that are consistent with the application from which it came. If there is no appropriate name, as in dropping a text selection in File Manager, name the resulting file “unnamed.” If there is a name conflict, display a dialog box and ask the user to rename the dropped file.

CDE does not support the concept of a specific control or graphical target used only for drops. Any control in the human interface that has selectable items can be dropped upon and should provide drop-zone feedback. This includes data panes, scrolling lists, and text-entry fields. The operation that takes place upon the drop should be consistent with the user's expectations for that application type.

Show attachments as icons where they are attached. These icons are the same icons as those used in File Manager and other places in CDE. The basic rule is that if the same icon is used in File Manager as in an attachment, then you should make every effort to ensure that the two behave the same in every situation.

There are three levels of functionality for attached documents:

The goal is to provide level 3 functionality whenever possible. If you cannot provide this level, then degrade the attachment's level of functionality in the steps shown. This section assumes you are providing level 3 functionality.

If a document provides significantly different functionality as an attachment from that provided as a File Manager icon, then provide a different icon for the attachment to clearly indicate to the user the difference in functionality.

The user should be able to open an attachment, edit it, and save the changes back to the attachment. If the attachment cannot do this, then do not provide the Open action in the Actions portion of the menu when that attachment is selected and do not allow double-clicking to open the attachment.

"Invitation" is an executable attachment. Do you want to Run it?
Buttons: Run, Cancel, Help