`
`TDA 1022 (Part 2 of 3)
`CBM of U.S. Pat. No. 7,533,056
`
`
`
`D~
`I CHROtlll I
`
`Figure 8-22. Changing the hue by clicking in the Co/ormap Scale area
`
`The Hue Bar will display a range of hues. (A shorter representation of the same spectrum
`will also be added to the second vertical bar in the Colormap Scale area.) You can select one
`of the hues in the bar to edit in the color area in several ways:
`
`• Click the first pointer button on the color you want in the Hue Bar.
`
`Click the first pointer button on either the up or down arrow (the slider echoes this
`motion). This action causes the color area to display the next shade above or below the
`current shade in the bar. (Press and hold down the pointer button to browse several
`shades.)
`
`• Use the slider in the vertical bar to the right of the arrows to select a hue. See the instruc(cid:173)
`tions for using the xterm scrollbar's "thumb" in Chapter 5.
`
`Note that you don't have to fill the Hue Bar in order to adjust the hue using any of these
`methods. (You can even click on the blank Hue Bar, though this "blind" method is not par(cid:173)
`ticularly desirable.) The color area and the numeric values will be updated to match the
`shade you choose regardless.
`
`If you select a hue by any of the mechanisms in the Hue Bar, you can then adjust the color
`using the Hue Leaf or by the less intuitive method of changing the numeric values.
`
`If you fill the Hue Bar and then try to select a hue from the Colormap Area, there may occa(cid:173)
`sionally be minor problems allocating color cells for the xtici application. In such cases, a
`dialog box will request your input. See "Problems Allocating Color Cells" for more informa(cid:173)
`tion.
`
`Other Clients
`
`255
`
`0280
`
`
`
`Adjusting the Color with the Hue Leaf
`
`The Hue Leaf represents a range of possibilities for the current hue. The hue can vary in
`value (lightness to darkness) and in chroma (the amount of the hue present; also known as
`saturation or intensity)-and within the Hue Leaf, it varies dramatically. For instance, the
`lightest possible shade of any hue is white; the darkest is black. (That is, the spectrum of
`possible values always spans white to black.) The range of chroma or saturation is more reli(cid:173)
`ant on the actual hue. For example, in most cases, a red hue can exist in a wider range of
`intensities than a yellow hue.
`'
`
`The Hue Leaf is always triangular, but the shape of the triangle depends on the possibilities
`of varying the hue. The triangular Hue Leaf is turned on its side, so that the base is actually
`vertical-flush against the left side of the box containing the leaf. The range of value is rep-_.·
`resented along this vertical edge (white is at the top; black at the bottom). The range of
`chroma (saturation) is represented horizontally, with least to most saturation appearing from
`left to right. The Hue Leaf is intended to represent all possible variations of the hue in ques(cid:173)
`tion.
`
`When you first run xtici, the Hue Leaf appears blank and contains a small square dot cursor.
`This cursor marks the place in the leaf that corresponds to the current version of the hue. To
`get a better idea of the range of possibilities for the hue, you can fill the leaf:
`
`1. Display the Options menu by clicking the first pointer button on the menu command box.
`
`2. Click on the Fill Leaf item.
`
`The Hue Leaf will display the range of possibilities for the current hue. Variations between
`shades create a sort of striped or checkerboard pattern.
`
`The Hue Leaf allows you to fine tune the hue in question. Notice the arrow keys beside the
`Value and Chroma labels bordering the leaf. You can adjust the value and chroma by click(cid:173)
`ing on these arrows. For example, you would click on the up arrow next to Value to make the
`hue lighter (white is at the top of the value range). The dot cursor will move up within the
`leaf and the color area and numeric values will be updated to reflect the changes.
`
`Click on the right arrow next to Chroma to get a more intense hue. The dot cursor will move
`to the right within the leaf and the color area and numeric values will be updated to reflect
`the changes.
`
`As an alternative to using the arrow keys, you can use the pointer to move the square dot
`within the leaf. Either click on the shade you want within the leaf or hold down the pointer
`on the dot and drag it within the leaf.
`
`As is the case with the Hue Bar, you don't have to fill the Hue Leaf to adjust the color using
`any of these methods. The color area and the numeric values will be updated regardless.
`
`If you fill the Hue Leaf and then try to select a hue from the Colormap Area, xtici may have
`trouble allocating color cells and a dialog box with be displayed. See "Problems Allocating
`Color Cells" for more information.
`
`256
`
`X Window System User's Guide, Motif Edition
`
`0281
`
`
`
`Selecting and Pasting the Numeric Color Value
`
`Once you have the color you want in the color area, you can select the numeric description of
`that color to paste on the command line, in a resource file, in a color database file, etc. To
`make the color value the PRIMARY text selection:
`
`1. Display the Edit menu by clicking the first pointer button on the menu command box.
`
`2. Click on the Copy Color-> item. A submenu is displayed.
`
`3. Click on the format (color space) you want. The TekHVC and CIE u'v'Y items select por(cid:173)
`table color values; the RGB item selects the non-portable RGB color format.
`
`TekHVC is a good choice. You can then paste the color value by clicking the second pointer
`button. For example, you might enter:
`
`% xbiff -fg
`
`and then click the second button to specify the color (and run the process in the background):
`% xbiff -fg TekHVC:223.93036/72.45283/29.67013 &
`
`On our display, this color value produces a deeper version of the sky blue from our original
`example. If you intend to use a color multiple times, it's a good idea to pair the numeric
`value with a name in an Xcms database.
`
`Note that xtiei handles RGB values in an unusual way. The window displays RGB values in
`decimal notation; however, if you select RGB from the Edit menu, the output is in hexade(cid:173)
`cimal notation! This can be a bit confusing, particularly if you want to place RGB values in
`an RGB or Xcms database. An RGB database requires decimal values; an Xcms database
`recognizes RGB values (among others), but they must be in hexadecimal notation. If you
`have the decimal numbers to input to xtici, the editor can in effect perform the conversion to
`hex; or you can use the UNIX be( 1) utility to convert numbers from one notation to another.
`See Chapter 12 for instructions on using be and on creating color databases.
`
`Working with the Numeric Color Values
`
`We've seen several ways to edit color specifications using xtiei's graphic elements: bars,
`sliders, arrow buttons, etc. When you change a color using one of these methods, the
`numeric values corresponding to the color are updated dynamically. However, you can also
`interact with xtiei by entering numeric values yourself.
`
`Thus far we've only seen the default Hue, Value, and Chroma number displays. (These pro(cid:173)
`vide a number in the portable TekHVC color space.) But remember that xtici can interpret
`and output two additional color spaces: the portable CIE u'v'Y format and the non-portable
`RGB format. You can display the specification for the current color in any of these formats
`by using the Options menu.
`
`1. Display the menu by clicking the first pointer button on the Options command button.
`
`2. Click on the Coordinates-> item. A submenu is displayed revealing two options: RGB
`and CIE u'v'Y.
`
`Other Clients
`
`257
`
`0282
`
`
`
`3. These menu items are toggles between the color space named and the default TekHVC
`color space. Thus, selecting RGB once toggles the decimal values for RED, GREEN, and
`BLUE. Selecting RGB a second time recalls the TekHVC values. Click on the format
`(color space) you want.
`
`Let's consider a couple of ways you might work with xtici using numbers. Keep in mind that
`all of the numeric values are contained in small text windows. Use the editing commands
`described under "The xedit Text Editor" (earlier in this chapter) to change the values.
`
`Suppose you want to edit a color from the standard RGB database. To place that color in the
`xtici color area:
`
`1. Check the RGB decimal values in rgb.txt. (See Chapter 12.)
`
`2. Using the Coordinates submenu of the Options menu, toggle the RGB numeric values.
`
`3. Place the values from rgb.txt in the RED, GREEN, and BLUE text windows to the right of
`the color area.
`
`As soon as you move the pointer out of the text window area, a dialog box will prompt:
`Apply last keyboard input?
`
`If you've entered the correct figures, select OK and the color area will be updated; otherwise,
`Cancel and continue editing.
`
`As another example, say you've created a color using another editor, such as xcoloredit, that
`outputs values in the non-portable RGB format. If you enter the decimal versions of these
`values in the xtici window (as described in the previous example), xtici provides the portable
`color space equivalents.
`
`Problems Allocating Color Cells
`
`Because of the nature of colormaps and the way color cells are allocated, certain problems
`may arise in working with xtici. One is a simple, albeit confusing "technicolor" effect.
`Depending on where the input focus is, applications may appear to swap colors and the shade
`in the xtici color area may not appear accurate. You're liable to get a more precise picture
`when the xtici window has the input focus, however.
`Another potential problem: you may not be able to select a color in one area of the xtici win(cid:173)
`dow if it is being used in another area. If such a conflict arises, a dialog box will inform you.
`For example, say you select a color in the Colormap Area that is also being used in the Hue
`Bar, you may get a dialog to the effect that:
`This color cell is used to fill the Hue Bar.
`Hues will be removed to edit this cell.
`
`The box provides the possible responses OK and Cancel. The safest course of action is to
`click on Cancel and then try to select the hue by another method. Clicking on the shade you
`want in the Hue Bar should work; or you might turn the Hue Bar off (the menu item is a
`toggle) and try to select the color by dragging the Hue Bar slider; or you could enter the
`appropriate numeric values, etc.
`
`258
`
`X Window System User's Guide, Motif Edition
`
`0283
`
`
`
`If you click on OK, the Hue Bar (and possibly the leaf and part of the Colormap Scale area)
`will be blanked out and the colors xtici is displaying will be changed. In such a case, try
`clicking on any visible color in the Colormap Scale area to begin editing again.
`A similar conflict can arise if you select a hue in the Colormap Scale area that is also being
`used in the Hue Leaf:
`This color cell is used to fill the leaf.
`Fill will be removed to edit this cell.
`
`Again, it's a good idea to click on Cancel and then try to select the hue by another method.
`Clicking on the shade you want on the Hue Bar or Leaf should work; or you might tum either
`or both the bar and leaf off (the menu items are toggles) and try to select the color by another
`method.
`Selecting OK will blank out the leaf (and possibly the bar and part of the Colormap Scale
`area) and change the colors the xtici window is displaying. Again, try clicking on any visible
`color in the Colormap Scale area.
`Various other colormap conflicts can arise. Use the dialog boxes-and your own experi(cid:173)
`ence-for guidance.
`
`Quitting xtici
`
`To quit the application, click the first pointer button on the Quit command button-the left-
`most one on the menu bar.
`·
`
`Other Clients
`
`259
`
`0284
`
`
`
`Part Two:
`
`Customizing X
`
`X has been designed to put the user in the driver's seat. Everything from the
`colors and sizes of windows to the contents of mwm menus can be custom(cid:173)
`ized by the user. This part of the book tells you how to reshape X to your
`liking.
`
`Command-line Options
`Setting Resources
`Specifying Color
`Customizing mwm
`Setup Clients
`
`0285
`
`
`
`Working with Motif Applications
`
`This chapter examines some of the features common to applications written
`with the Motif Toolkit.
`
`In This Chapter:
`
`Pointer Button Usage ......................................................................... 265
`The Periodic Table of Motif Widgets ................................................... 266
`Menus ............................................................................................... 267
`Pull-down Menus ........................................................................... 267
`Pop-up Menus ............................................................................... 269
`Option Menus ................................................................................ 269
`Tear-off Menus .............................................................................. 270
`Push Buttons ..................................................................................... 272
`Radio Boxes and Toggle Buttons ....................................................... 274
`The Motif Scrollbar ............................................................................. 276
`Text Windows .................................................................................... 277
`Dialog Boxes ..................................................................................... 279
`Prompt Dialog ................................................................................ 281
`Selection Dialog ............................................................................. 282
`File Selection Dialog ...................................................................... 283
`Selecting a File from the Files Box ............................................... 284
`Choosing a File from another Directory in the Directories Box ...... 284
`Choosing a File from Another Directory on the System ................ 285
`Command Box ............................................................................... 285
`Scale ................................................................................................. 287
`Drag and Drop ................................................................................... 289
`
`..II
`
`0286
`
`
`
`9
`orking with Motif Applications
`
`The Athena widget set provides X Toolkit applications with certain common features, many
`of which have been described in Chapter 8. An application coded using the Motif widget set
`has a slightly different look and feel.
`
`In the remainder of this chapter, we 'lllook at some of the features you're liable to encounter.
`in a Motif application and learn how to use them. Some of these features are provided in a
`slightly different flavor by the Athena widget set; others are unique to Motif.
`
`Many of the sample components we're using are taken from the Motif periodic demo pro(cid:173)
`gram, which is a "periodic table" of the Motif widgets. You can play with periodic to begin
`learning to use many common features of Motif applications. However, since the program
`simply demonstrates the various widgets without actually performing any practical action,
`you'll probably need to use some real applications as well. If you've been running mwm, you
`already know how to use several Motif features.
`
`The following sections mention the comparable Athena widgets where appropriate. Some of
`the Athena widgets are illustrated using the standard MIT clients in Chapters 5, 7, and 8.
`
`Before examining the various Motif features, however, let's consider some basics of using
`the pointer with a Motif application.
`
`Pointer Button Usage
`
`When you're working with an application coded using the Motif toolkit, you can generally
`rely on the pointer buttons to work as follows:
`
`Button one:
`
`Button two:
`
`Referred to in program internals as "BSelect" (for "Button Select"), the
`first button enables you to "select" or activate graphical components. For
`example, you would use the first button to direct focus, to select text, to
`respond to a dialog box, etc.
`
`Referred to as "BTransfer" (for "Button Transfer"), the second button is
`used to "drag" text, graphic images, etc., from one widget and "drop" them
`into· another widget. As we'll see later, this "drag and drop" capability is
`one of the major improvements of Motif 1.2.
`
`Working with Motif Applications
`
`265
`
`0287
`
`
`
`Button three:
`
`Referred to as "BMenu" (for "Button Menu"), the third button is used to
`post pop-up menus. For example, you post the mwm Root Menu by press(cid:173)
`ing and holding the third pointer button on the root window.
`
`Now that you understand the basics of pointer actions, let's consider the various application
`components you're liable to encounter.
`
`The Periodic Table of Motif Widgets
`
`The periodic demo program (pictured in Figure 9-1) provides a compact and comprehensive
`survey of the Motif 1.2 widget set.
`
`Figure 9-1. The periodic table of Motif widgets
`
`Widgets are the building blocks of applications coded using Xt-based toolkits, such as the
`Motif toolkit. From a user's perspective, this definition of "widget" is not particularly signif(cid:173)
`icant. What is significant is that widgets create graphical elements like scrollbars, text win(cid:173)
`dows, and push buttons, which you use to work with an application.
`
`266
`
`X Window System User's Guide, Motif Edition
`
`0288
`
`
`
`Keep in mind that some widgets don't help you do anything. For instance, the Separator
`widget (in the upper-left comer of the periodic table) is simply a divider line, often used
`below menu titles. Other widgets represented in the table are composites: several simpler
`widgets combined for a particular purpose. For example, the FileSelectionBox widget con(cid:173)
`tains two text input fields, two scrollable lists (each also a composite!), and four or more push
`buttons, the sum total of which help you select a file from a directory hierarchy. The file
`selection box is a particularly complicated example. However, in most cases, when you
`know how to use the various components, you can deal with them in any combination.
`
`We mention the names of the various widgets discussed in this chapter, but unless you're
`interested in programming, this sort of classification is probably superfluous. (If you want to
`set resources at the widget level, the names will be more relevant. See Appendix G, Widget
`Resources, for more information.) When you're running an application, it doesn't matter
`what a feature is called-only how it's used. Now let's learn how to use some of the most
`important Motif features. After reading this chapter and playing with a client or two, these
`skills will become intuitive.
`
`Menus
`
`Motif applications may feature three types of menus, the first two of which you have already
`encountered:
`
`• Pull-down menus, such as mwm's Window Menu.
`
`• Pop-up menus, such as mwm's Root Menu.
`
`Option menus.
`
`The following sections describe these three types of menus. Keep in mind that each of these
`menus can also be what is known as a "tear-off' menu: that is, you can choose to post the
`menu and "tear off' an image of it that remains posted (in its own window) until you remove
`it. We'll take a closer look at tear-off menus after considering the three basic menu types.
`
`Pull-down Menus
`
`You display a pull-down menu from a graphical element on an application window. The
`mwm Window Menu is a pull-down, which is displayed from a button in the upper-left comer
`of the frame. More often, though, a pull-down is displayed from a horizontal bar known as a
`menu bar. Figure 9-2 illustrates the menu bar on the periodic window.
`
`Working with Motif Applications
`
`267
`
`0289
`
`
`
`Figure 9-2. PeriorJic menu bar
`
`Each word on the bar is a menu title; you display the m~nu by placing the pointer on its title
`and clicking the first pointer button. The title becomes raised and highlighted by a box, the
`menu is displayed and the first selectable item is also raised and boxed. Figure 9-3 shows
`periodic's File pull-down menu.
`
`Figure 9-3. Periodic File menu
`
`Notice that one letter of each menu item is underlined. As explained in Chapter 4, that letter
`represents a unique abbreviation, or mnemonic, for the menu item, which can be used to
`select the item.
`
`Some menus (such as mwm's Window Menu) may also provide a keyboard shortcut, or accel(cid:173)
`erator, for each item. These shortcuts generally appear in a right-hand column, opposite the
`item labels. An accelerator can be used to invoke the action without displaying the menu at
`all (though they also work while the menu is displayed).
`
`When you've displayed a menu by placing the pointer on the title and clicking the first but(cid:173)
`ton, you can select an item by:
`
`• Placing the pointer on the item and clicking the first button.
`
`• Typing the mnemonic abbreviation for the menu item.
`
`268
`
`X Window System User's Guide, Motif Edition
`
`0290
`
`
`
`Typing the accelerator key combination, if available. (Though these are intended to save
`you the trouble of displaying the menu, they also work when it is displayed.)
`
`• To select the boxed item (the first available for selection), you can alternatively press
`either the Return key or the space bar.
`
`You can also display a menu from a menu bar by placing the pointer on the title and pressing
`the first pointer button. The menu is displayed as long as you continue to hold the pointer
`button down. To select an item, drag the pointer down the menu (each item is highlighted by
`a box in turn), and release the button on the item you want.
`
`Notice the apparant "perforation" below the File menu title. This dotted line indicates that
`the menu has "tear-off' functionality -that is, you can keep the menu displayed in its own
`window and access it whenever you like. We'll discuss tear-off menus a bit later.
`
`Pop-up Menus
`
`The mwm Root Menu is a typical pop-up menu. Depending on the application, you pop up a
`menu by placing the pointer in a particular context (that is, on a particular graphical element)
`and either:
`
`• Pressing and holding the third pointer button.
`displayed.)
`
`(This is how mwm's Root Menu is
`
`Clicking the third pointer button.
`
`When you display a menu by the former method, you make a selection by dragging the
`pointer down the menu and releasing the button on the item you want.
`
`When you display a menu by the latter method, you select an item by clicking on it with
`either the first or third pointer button. You can pop the menu down by clicking either of these
`buttons off the menu.
`
`Keep in mind that pop-up menus generally provide shortcuts for functions that can be per(cid:173)
`formed in other ways. Since there are no labels to indicate that a pop-up menu exists, you'll
`have to rely on the individual program documentation.
`
`Option Menus
`
`You display an option menu from a button that shows the last item chosen-rather than from
`the menu title. You can display an option menu by either:
`
`Clicking the first pointer button on the option menu button.
`
`Pressing and holding the first pointer button down on the option menu button.
`
`The periodic demo provides a dummy "Days of the Week" option menu. Figure 9-4 shows
`the option menu button and the menu itself. (You can always tell an option menu button by
`the small rectangle that decorates it.)
`
`Working with Motif Applications
`
`269
`
`0291
`
`
`
`Figure 9-4. Sample option button and option menu
`
`If you display an option menu by the former method, you can select an item by clicking on it
`with the first pointer button. If you display the menu using the latter method, drag the pointer
`down the menu and release on the item you want or type the mnemonic abbreviation (the
`underlined letter).
`
`When you select an item, the menu disappears and the option menu button then displays your
`selection. To remove an option menu without making a selection, click elsewhere or release
`the pointer off of the menu, as appropriate.
`
`Tear-off Menus
`
`Pull-down, pop-up, and option menus may also be "tear-off' menus, which you can post in
`subwindows that remain on the display until you remove them. This feature is very handy if .
`you use a menu frequently. If a menu is not tom off, it disappears after you select an item.
`
`If a menu can be tom off, it will have a "perforated" line as the first item on the menu.
`Regardless of the menu type, you tear off a menu by clicking or releasing the pointer on this
`dotted line. For example, to tear off a pull-down menu, you could:
`
`1. Post the menu by clicking the first pointer button. In Figure 9-5, we've again posted peri(cid:173)
`odic's File menu. The perforation below the title indicates that the menu can be tom off.
`
`2. To tear the menu off, click the first pointer button on the perforation. Figure 9-6 shows
`the tom off File menu.
`
`270
`
`X Window System User's Guide, Motif Edition
`
`0292
`
`
`
`Figure 9-5. Perforation means you can tear off menu
`
`Figure 9-6. Click on the perforation and the tear-off is displayed
`
`To tear off a pop-up menu:
`
`1. Display thepop-up menu. In many cases, you do this by pressing and holding down the
`third pointer button.
`
`2. Drag the pointer down the menu, highlighting the perforated line.
`
`3. Release the pointer button. The menu is tom off.
`
`Once you tear off a menu, you can work with it much as you would with any application win(cid:173)
`dow, with a few limitations. These limitations are borne out by the File tear-off menu's modi(cid:173)
`fied mwm frame. It has no Minimize or Maximize buttons and no resize handles. The frame
`does offer a Window Menu button. However, if you display the Window Menu from the
`
`Working with Motif Applications
`
`271
`
`0293
`
`
`
`tear-off window, you'll see that it offers only three items: Move, Lower, and Close. Basi(cid:173)
`cally, you can move the tear-off window, lower it in the stack, and remove it-and that's all.
`In Figure 9-7, we've moved the menu out of the way of the periodic application window.
`
`Figure 9-7. Moving a tear-off to a convenient place
`
`There are several ways to remove a tear-off menu. First, direct the input focus to the menu
`and then perform any one of the following actions:
`
`• Press the key that performs the Cancel function (often Escape).
`
`• Double-click the first pointer button on the menu's own Window Menu button.
`
`• Display the menu's Window Menu and select the Close or type its mnemonic abbrevia(cid:173)
`tion, c.
`
`• Use the keyboard accelerator for the Close item, Alt-F4.
`
`Push Buttons
`
`Many Motif applications feature push buttons (PushButton widgets). Commonly, a push but(cid:173)
`ton has a text label corresponding to some function. You invoke the function by clicking the
`first pointer button on the push button widget. Figure 9-8 shows the sample push button from
`the periodic demo.
`
`272
`
`X Window System User's Guide, Motif Edition
`
`0294
`
`
`
`Figure 9-8. Click on a push button to invoke the function
`
`In a real application, clicking on the push button causes some action to occur. Unless James
`Bond has been working on the periodic demo, we can safely assume this button is a dummy!
`However, you can click on it to get an idea what a push button looks like when pressed.
`
`A dialog box always contains one or more push buttons that allow you to respond to the mes(cid:173)
`sage in the box, but push buttons are also used in other applications. Regardless of the appli(cid:173)
`cation, in many cases one push button will be highlighted, generally by outlining. If
`click-to-type focus is in effect, you can push the highlighted push button simply by pressing
`the Return key on your keyboard. To push another button, you must place the pointer on it
`and click the first pointer button. (With pointer focus, you need to click on any choice.)
`
`Note that if you press the first pointer button on a push button and then change your mind
`about invoking the function, there is an escape hatch. Simply move the pointer off the push
`button before you release the pointer button. (The action of releasing the pointer is actually
`what invokes the push button.)
`
`An Athena widget set provides a command button with virtually the same functionality as a
`Motif push button. The most obvious difference is that you must click on an Athena com(cid:173)
`mand button to invoke it. The Return key shortcut only works with a Motif push button
`(click-to-type focus must also be in effect). See "Dialog Boxes and Command Buttons" in
`Chapter 7, Graphics Utilities.
`
`We'll come back to Motif push buttons later, in the discussion of dialog boxes. But before
`moving on, let's take a quick look at another type of button, called a drawn button (Drawn(cid:173)
`Button widget). From a user's perspective, a drawn button is a push button decorated with a
`pixmap rather than a text label. You invoke a drawn button just as you do a push button-by
`clicking the first pointer button on it.* Figure 9-9 shows a drawn button from the periodic
`window. (Note that you can toggle the image on this button on and off using the sample
`ToggleButton widget in the periodic window, which is illustrated in the next section.)
`
`*Push buttons and drawn buttons actually differ from a programming perspective, but a user can expect to interact
`with them in the same way.
`
`Working with Motif Applications
`
`273
`
`0295
`
`
`
`Figure 9-9. A drawn button
`
`The drawn button from the periodic demo is simply illustrative -it does nothing. Generally,
`however, the image on a drawn button will signal its function. If an application uses drawn
`buttons effectively, they can transcend language barriers, as well as enhance the program's
`aesthetics. For example, a button decorated with the image of a paint brush might invoke
`graphics capabilities, a button decorated with the image of a keyboard might open a text edi(cid:173)
`tor, etc.
`
`Note that some applications may dynamically change the image on a drawn button to signal
`some change in the state of the program.
`
`Radio Boxes and Toggle Buttons
`
`A radio box is made up of a column of mutually exclusive choices, each represented by a
`toggle button (ToggleButton widget). Figure 9-10 shows a radio box from the periodic demo
`program.
`
`Figure 9-10. A radio box
`
`The column is a single radio box. Several radio boxes may appear side by side in an applica(cid:173)
`tion. Typically, a radio box contains several diamond-shaped toggle buttons. The radio box
`
`274
`
`X Window System User's Guide, Motif Edition
`
`0296
`
`
`
`from the periodic demo features three buttons, in this case corresponding to-what
`else-three radio stations. You push a toggle button by placing the pointer on the diamond
`symbol (or the corresponding text label) and clicking the first pointer button. The toggle but(cid:173)
`ton becomes darker (appearing as if it's been pressed). Actually, if you examine the button
`closely, the highlighting has just switched from the bottom edge to the top edge of the button.
`In our example, the button next to WFNX is currently selected.
`
`When you first make a selection, the button and the accompanying text label are highlighted
`by a box. When you make another selection in the same or another column (radio box), the
`highlighting box appears around that item (and disappears from the previous one).
`
`Toggles in the same radio box are mutually exclusive. If you select one and then select
`another from the same column, the first one is toggled off. (The button appears to pop
`up-i.e., the highlighting switches back to the bottom edge of the button; also the highlight(cid:173)
`ing box appears around the latest selection.)
`
`In addition to appearing in radio boxes, toggle buttons may also appear in columns known as
`check boxes. In a check box, toggle buttons are not mutually exclusive. You can "check"
`multiple items in the same column by toggling the corresponding buttons (or labels). The
`toggle buttons in a check box appear square-shaped to distinguish a check box from a radio
`box (in which the toggles appear diamond-shaped).
`
`Figure 9-11 shows one such toggle button, the sample from periodic, as it appears both off
`and on. Notice that toggling the button on switches the highlighting from the lower-right
`comer (it appears to be raised) to the upper-left comer (it appears to have been pushed).
`
`Figure 9-11. Lights off, lights on
`
`Note also that toggle buttons are sometimes labeled with graphic images rather than text.
`One image represents "on" and another represents "off."
`
`Working with Motif Applications
`
`275
`
`0297
`
`
`
`The Motif Scrollbar