<BR>

<P>The XmScrollBar rectangle has two arrows at each end. The arrows point outward relative to the rectangle, and in opposite directions. The arrow keys can be used to move the slider bar within the scroll region.

<BR>

<OL>

<LI>Move the mouse to the slider bar arrow.

<BR>

<BR>

<LI>Click on Button1.

<BR>

<BR>

<LI>The slider bar should move closer to the arrow. The slider moves as close as possible to the arrow being clicked in the scroll area.

<BR>

<BR>

<LI>Release Button1.

<BR>

<BR>

</OL>

<P>Users can also move the slider bar by dragging it with the mouse:

<BR>

<OL>

<LI>Move the pointer on to the slider bar.

<BR>

<BR>

<LI>Press the Button1.

<BR>

<BR>

<LI>Move the pointer up or down for a vertical scroll bar.

<BR>

<BR>

<LI>Move the pointer left or right for a horizontal scroll bar.

<BR>The contents of the work area, as well as the slider bar, scroll with the movement of the pointer. The viewable portion is the work area.

<BR>

<BR>

<LI>Release Button1 when the list area contains the desired viewing data.

<BR>

<BR>

</OL>

<P>Now move your cursor to the selection item of the resize policy button. When you click on this button, you are presented with a pop-up menu of the types of resize policies for the dialog box you want to create. When you press the button, a menu pops out 
and presents you with a list of options. You make the selection with your pointer by moving the pointer to that button and releasing it. The menu disappears, and your selection is displayed in the box. In Figure 23.6, shown previously, the resize policy is 
set to any. This is known as an option button.

<BR>

<P>Note the diamond-shaped buttons and selections below this current menu. This is a list of one of four possible selections for the dialog box. One of the items is shown in a lighter gray color. This is known as grayed out, meaning that the option is a 
not a valid option at the time. The option for the Work Area is disabled. You can select one of the three options. These items are grouped together with a rectangular frame drawn around them. Usually, buttons are grouped together this way in Motif when 
their functionality falls in the same group of actions. The actions are similar to the buttons on a radio: push one button and the rest of the buttons in the row all come up. This is why these are referred to as radio buttons.

<BR>

<P>Look at the two buttons: auto manage and default position. These are toggle buttons for this application. When you select one button, the other is not influenced at all. The functionality provided by each button is completely independent of the other. 
Do you see the difference between radio buttons and toggle buttons?

<BR>

<P>Sometimes a scrollbar is used on each side of a drawing area. This is called a Scrolled Window, and belongs to the XmScrolledWindow class. This Widget can hold graphics instead of a list of items. The XmScrolledWindow is used primarily to view large 
graphic items in a small window, whereas XmList is used to show items for the user to select from.

<BR>

<P>Under the toggle buttons, you see four push buttons. When a push button is pressed, the colors on the border of the button reverse. Also, the color of the pressed rectangle changes to show the user action. Push buttons are used to invoke some sort of 
action. When you select the file selection dialog from the list and press the push button to manage it, the display shown in Figure 23.7 appears. This is the standard file selection box under Motif, and you should see it for most applications.

<BR>

<P><B> <A HREF="tppmsgs/msgs1.htm#138" tppabs="http://202.113.16.101/%7eeb%7e/Red%20Hat%20Linux%20Unleashed/23rhl07.gif">Figure 23.7. A typical File Selection dialog </B><B>box.</A></B>

<BR>

<P>To see a more detailed picture of what types of Widgets are available within Motif, run /usr/bin/X11/periodic. (See Figure 23.8.) Note that the menu item for this application can be removed to become a separate application, by dragging on the dashed 
line. The menu is shown as torn off in Figure 23.9.

<BR>

<P><B><a href="tppmsgs/msgs1.htm#139" tppabs="http://202.113.16.101/%7eeb%7e/Red%20Hat%20Linux%20Unleashed/23rhl08.gif">Figure 23.8. The Periodic Table of Widgets.</A></B>

<BR>

<P><B> <A HREF="23rhl09.gif" tppabs="http://202.113.16.101/%7eeb%7e/Red%20Hat%20Linux%20Unleashed/23rhl09.gif">Figure 23.9. A tear-off menu torn off.</A></B>

<BR>

<BR>

<A NAME="E68E175"></A>

<H3 ALIGN=CENTER>

<CENTER>

<FONT SIZE=5 COLOR="#FF0000"><B>Other Types of Widgets</B></FONT></CENTER></H3>

<BR>

<P>The Motif toolkit also supplies the following Widgets. Please refer to the items in the periodic table in Figure 23.8 to see what each Widget should like on screen.

<BR>

<UL>

<UL>

<P>XmArrowButton This is a directional arrow with a border around it. A programmer can modify the arrow's direction, thickness, and border color by setting the Widget's parameters. Look at the ends of a scrollbar to see two examples of such a Widget.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmDrawnButton A drawn button provides a rectangular area with a border for the programmer. The programmer can size, redraw, or reposition text or graphics within this window. This Widget provides hooks to set parameters for its border appearance, as 
well as to attach functions for accepting user input.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmLabel This is a rectangular box consisting of either text or graphics. It is instantiated, but is also used as a base class for all button Widgets. A label's text can be multiline, multifont, or even multidirectional. In the xmdialogs example, this 
would be the labels Active Dialog and the Motif Dialog Widgets strings.

<BR>

</UL></UL>

<UL>

<UL>

<P>Many features of the labels can be modified. This includes the fonts, foreground and background colors, and alignment (left, center, or right justification); in fact, this can even store a pixmap graphic image.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmPushButton This is a text label or pixmap with a border around it. This Widget accepts keystrokes or mouse button presses. In the smdialogs example, these are the create, destroy, manage, and unmanage buttons. When a button has focus, it draws a heavy 
border around itself.

<BR>

</UL></UL>

<UL>

<UL>

<P>When you press the Enter key or a pointer on a button, the button has focus. Move the cursor to the button. Press a key or button and hold it down. You have armed the button. The color on the button should change, and the border colors should reverse. 
This gives the impression that the button has been pressed inward. When you release the button, the button reverts to its original state. When a mouse button is pressed in this Widget the foreground and background colors of the Widget usually also invert.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmSeparator This is used to create a line between functional sections of a screen. There is really not much that users can do with this Widget except position it on the screen.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmText This is used to create a fully functional multiline text editor on a screen. The user can select text by dragging the mouse from one location to another while Button1 is pressed. Users can also click anywhere on the Widget to mark the insertion 
point. If the text Widget is enabled for user input, the user can type at the insertion point and insert the text into the text Widget.

<BR>

</UL></UL>

<UL>

<UL>

<P>Pull-down menus These are rectangular areas in the window that enable users to select from a number of items. The items are generally laid out in push buttons. Users can select a push button either by moving the mouse to that selection, or by pressing 
Alt-K, in which K is the letter of the alphabet that is underlined in the menu button. In the xmdialogs function, the Meta-F key selected the file item, and Meta-H selected the Help item.

<BR>

</UL></UL>

<UL>

<UL>

<P>Pop-up menus The Motif root window menu is a good example of a pop-up menu. When you press the mouse button, a menu is displayed. You can select an item in the menu by moving the cursor onto the item and pressing Button1.

<BR>

</UL></UL>

<UL>

<UL>

<P>Scale Widgets The scale Widget is used to display the value of a data item between two extremes. It can also be used to accept user input. A scale Widget has a scroll region that is very similar to the scroll bar. However, it does not have the arrow 
buttons at each end.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmScrolledWindow This is a combination of a horizontal scroll bar, a vertical scroll bar, and a drawing area. If the size of the drawing area fits within the window, you can't see the scrollbars. If the size of the drawing area is greater than the 
visible area of the scrolled window, you see the horizontal or vertical scrollbars, or both. You can then use the scrollbars to move the visible portion on top of the drawing area. This is known as panning the window.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmFrame This is a simple Widget used to put a consistent border around one single Widget. Frames can only hold one Widget at a time.

<BR>

</UL></UL>

<UL>

<UL>

<P>XmRowColumn This is a general-purpose Widget organizer. The Widget can layout its Widget collection in a variety of ways, including the following:

<BR>

</UL></UL>

<UL>

<UL>

<P>Row major In this case, all Widgets on this Row Column Widget are stored until one row fills up, and a new row is created when another Widget is added that doesn't fit on this Widget. The creation of a new row is sometimes called wraparound.

<BR>

</UL></UL>

<UL>

<UL>

<P>Column major This is the same as a row major, but it wraps around in a columnar fashion.

<BR>

</UL></UL>

<P>In conjunction with this, you can specify the width of each column to be that of the widest Widget; you can also specify the number of fixed columns, the packing (whether all Widgets should be packed as closely as possible), or that the individual 
Widgets specify their own positions.

<BR>

<P>There are several other Widgets available in the Motif Widget set. You can see the complete listing and their options in The Programmers Reference Manual from the Open Software Foundation.

<BR>

<BR>

<A NAME="E69E291"></A>

<H4 ALIGN=CENTER>

<CENTER>

<FONT SIZE=4 COLOR="#FF0000"><B>Gadgets</B></FONT></CENTER></H4>

<BR>

<P>Motif Widgets create a window in X Window. A complex Motif application can create several X windows very quickly. Each window uses X resources in the server, and many windows can slow your overall system performance.

<BR>

<P>Gadgets are windowless versions of a Widget. Most Gadgets have the same names as Widgets, but have the string Gadget appended to their name. So, XmLabel has an XmLabelGadget counterpart.

<BR>

<P>Gadgets do not have all the features of Widgets. For example, Gadgets share the foreground and background colors of their parent. Also, some Gadgets actually turn out to be slower than the Widgets they are trying to replace. Given the troubles that you 
can get into by using Gadgets, you may be better off not using them.

<BR>

<BR>

<A NAME="E68E176"></A>

<H3 ALIGN=CENTER>

<CENTER>

<FONT SIZE=5 COLOR="#FF0000"><B>Customizing with Resources</B></FONT></CENTER></H3>

<BR>

<P>Now that you are familiar with Widgets, let's talk about the parameters that affect them&#151;resources.

<BR>

<BR>

<A NAME="E69E292"></A>

<H4 ALIGN=CENTER>

<CENTER>

<FONT SIZE=4 COLOR="#FF0000"><B>What Are Resources?</B></FONT></CENTER></H4>

<BR>

<P>As you saw in the previous sections, you can customize some aspects of an application from the command line prompt. X enables you to modify the aspects of an existing application every time a client runs that application. X does this by setting control 
variables for that client. These control variables are called resources and have a value associated with them.

<BR>

<P>For example, consider the case of an xterm. An xterm's resources are its font size, its pointer shape, the foreground color for all displayed text, its background color, and so on. These are only a few of the resources for an xterm. Most of these 
resources exist as predefined defaults for all the common clients in a system.

<BR>

<P>You can specify resources on an application-specific basis, or for all applications on your system. These resources are normally stored in an ASCII file called .Xresources, in your home directory.

<BR>

<P>This file affects only those applications that you run. This file normally contains only those options that you would like to customize over those values that are set in system files.

<BR>

<P>You can always override the defaults specified in the system-wide file with defaults in your .Xresources file. In turn, your command line options for a single client override those in the .Xresources file. Keep in mind, however, that the command line 
default applies only to a specific client. The .Xresources default setting becomes the default for all your clients.

<BR>

<P>Also, remember that the command line operations override any default resources set in a file. Normally, you set how you want your application to look under normal circumstances, and then override the changes via command line options.

<BR>

<BLOCKQUOTE>

<BLOCKQUOTE>

<HR ALIGN=CENTER>

<BR>

<NOTE>In some systems, the .Xresources file can also be called .Xdefaults.</NOTE>

<BR>

<HR ALIGN=CENTER>

</BLOCKQUOTE></BLOCKQUOTE>

<P>To make your resource specifications available to all clients, use the X resource database manager program, xrdb. This stores the resources directly on the server and makes the resource available to all clients on the system. This step takes some care 
because your change will affect all your clients, regardless of what platform they are running on.

<BR>

<BR>

<A NAME="E68E177"></A>

<H3 ALIGN=CENTER>

<CENTER>

<FONT SIZE=5 COLOR="#FF0000"><B>Defining Resources</B></FONT></CENTER></H3>

<BR>

<P>A resource definition file is basically a line-by-line list of all the resources in the file. Each line consists of two entries: one for the resource type, and the other for the value for the resource. The two entries are colon-separated.

<BR>

<P>The simplest syntax for a resource definition is as follows:

<BR>

<BR>

<PRE>

<FONT COLOR="#000080">client*variable: value</FONT></PRE>

<P>client is the name of the client. The variable for that client is set to the value. Note that the colon follows the variable without any spaces.

<BR>

<P>Let's look at the resource declaration for an xterm client.

<BR>

<PRE>

<FONT COLOR="#000080">XTerm*foreground: white

XTerm*background: blue

XTerm*font: 10x20

...</FONT></PRE>

<P>If you do not already have an .Xdefaults file, you can create one yourself with a text editor.

<BR>

<P>The values can be Boolean, numeric, or string. Values can be specified for Widgets in an application as well. For example, if you want to set the background color for all PushButtons in an application, myWorld, you set the following resource:

<BR>

<PRE>

<FONT COLOR="#000080">myWorld*PushButton.background: red

myWorld*background: blue</FONT></PRE>

<P>Note that the asterisk represents the Widgets in between the actual myWorld application and all PushButtons