ch23.htm

linux-unix130.linux.and.unix.ebooks130 linux and unix ebookslinuxLearning Linux - Collection of 12 E

<P>All Widgets of the same type have two data structures with information that describes

their attributes: class and instance. The instance data structure contains information

for a specific Widget on the screen. The class information contains information required

for all Widgets of the class.</P>

<P>Widgets are grouped into several classes. Each class depends on the type of functionality

offered by the Widget. Normally, the internal functions of a Widget are hidden from

the applications programmer (encapsulation). A Widget class shares a set of functions

and data structures for all Widgets in that class. A new Widget class can be derived

from an existing Widget class. The newly derived class can inherit all the data structures

and functions of the parent class. A Widget is created and destroyed during a Motif

program execution.



<DL>

	<DT></DT>

</DL>





<DL>

	<DD>

<HR>

<A NAME="Heading41<FONT COLOR="#000077"><B>NOTE: </B></FONT>The destruction

	of a Widget is a bit more complicated. This topic is discussed in detail in the next

	chapter. 

<HR>



</DL>





<DL>

	<DT></DT>

</DL>





<DL>

	<DD>

<HR>

<A NAME="Heading42<FONT COLOR="#000077"><B>NOTE: </B></FONT>This should sound

	familiar to C++ programmers. True polymorphism is somewhat harder to find in Widgets.

	This is all done in C. For C++ programmers, the class data structure is to the class

	for an object, as the instance data structure is to the instance of an object. 

<HR>



</DL>



<P>A Widget is really a pointer to a data structure when viewed in a debugger. This

data structure is allocated on the creation of a Widget, and it is destroyed when

a Widget is destroyed.</P>

<P>Let's look at a typical application screen to see some Widgets in action. You

will work with a demo application called xmdialogs, shown in Figure 23.6. The Widgets

shown here are described later in this chapter. The xmdialogs application can be

found in the <TT>/usr/bin/X11</TT> directory. If you do not have this application,

you can still learn about working with Widgets by applying these concepts to different

applications.



<DL>

	<DT></DT>

</DL>





<DL>

	<DD>

<HR>

<A NAME="Heading43<FONT COLOR="#000077"><B>NOTE: </B></FONT>Don't worry if

	you can't find this application on your machine. There are plenty of other applications

	just like this one. If you have the Motif 1.2.3 release or later from Metro Link,

	you will have this application in your <TT>/usr/bin/X11</TT> directory. 

<HR>



</DL>



<P>Figure 23.6 shows a menu bar, a file selection list with scrollbars, an option

button, some radio and toggle buttons, some push buttons, some labels, and a text

display box.</P>

<P>The Actions and Help items are shown on the menu bar. By moving the pointer to

either of these items and pressing Button1, you are presented with a menu of options

very similar in operation to the window and root menu.

<H6></H6>

<P><A NAME="Heading44<A HREF="../art/23/23lnx06.jpg"><FONT COLOR="#000077">FIGURE

23.6.</FONT></A><FONT COLOR="#000077"> </FONT><I>The xmdialogs demo application.

<BR>

</I><BR>

Under this menu bar is a list of items in a scrollable list. This Widget is of the

type XmList. The XmList lets you keep a selection of items in a visible list. It

has scrollbars to enable the user to scroll the list if the entire list isn't visible.

A programmer can set the number of items that are visible at one time. If you resize

the window, and if the list box sizes itself proportionately with the window, the

number of visible items in a list might change.</P>

<P>To select an item, move the pointer to the item of your choice and press Button1

once. The item is highlighted in a darker color. Some lists enable you to select

more than one item; others, just one item. In this application, you select only one

type of dialog box. (Figure 23.6 shows the bulletin board item to be the selected

item.)</P>

<P>The scrollbars on the side of the list Widget are of the class XmScrollbar. A

scrollbar is either a horizontal or a vertical rectangle. A raised box, called the

slider box, appears in the rectangle. This slider box moves within the larger rectangle.

The movable space for the slider bar is called the scroll region. The ratio of the

size of the slider bar to the scroll region is proportional to the size of the work

area to the total area being viewed.</P>

<P>The XmSrollBar rectangle has two arrows at each end. The arrows point outward

relative to the rectangle, and in opposite directions. The arrows can be used to

move the slider bar within the scroll region:



<DL>

	<DD><B>1.</B> Move the mouse to the slider bar arrow.<BR>

	<B><BR>

	2. </B>Press and hold down Button1.<BR>

	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>

	<B><BR>

	3. </B>Release Button1.

</DL>



<P>With the following steps, you can also move the slider bar by dragging it with

the mouse:



<DL>

	<DD><B>1. </B>Move the pointer onto the slider bar.<BR>

	<B><BR>

	2.</B> Press and hold down Button1.<BR>

	<B><BR>

	3.</B> Move the pointer up or down for a vertical scrollbar.<BR>

	Move the pointer left or right for a horizontal scrollbar.<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>

	<B><BR>

	4. </B>Release Button1 when the list area contains the desired viewing data.

</DL>



<P>Now move your cursor to the option button in the resize policy box. When you click

and hold down this button, a menu pops out and presents a list of the types of resize

policies for the dialog box you want to create. You make your selection by moving

the pointer to the desired option and releasing the mouse button. The menu disappears,

and your selection is displayed in the box. In Figure 23.6, as shown previously,

the resize policy is set to <TT>any</TT>.</P>

<P>Note the diamond-shaped buttons and selections below this current menu. This area

lists the four possible selections for the dialog box. Three of the items are shown

in a lighter gray color. This is known as grayed out, meaning that these options

are not valid at the time. The option for the Work Area is enabled, meaning that

it is a valid selection. All four of 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.</P>

<P>Look at the two buttons labeled 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 independent of the other. Do

you see the difference between radio buttons and toggle buttons?</P>

<P>Sometimes a scrollbar is used on each side of a drawing area. This is called a

scrolled window, and it belongs to the XmScrolledWindow class. This Widget can hold

graphics rather than a list of items. The XmScrolledWindow is used primarily to view

large graphics items in a small window, whereas XmList is used to show items for

the user to select from.</P>

<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 user action. Push buttons are used to invoke some sort of action.

When you select file selection dialog from the file selection 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; you should see it for most applications.<BR>

<BR>

<A NAME="Heading45<A HREF="../art/23/23lnx07.jpg"><FONT COLOR="#000077">FIGURE

23.7.</FONT></A><FONT COLOR="#000077"> </FONT><I>A typical file selection dialog

box. <BR>

</I><BR>

To see a more detailed picture of the types of Widgets available within Motif, run

<TT>/usr/bin/X11/periodic</TT>. (See Figure 23.8.) Note that you can remove the menu

item for this application to become a separate application by dragging on the dashed

line. The menu is shown as being torn off in Figure 23.9.

<H6></H6>

<P><A NAME="Heading46<A HREF="../art/23/23lnx08.jpg"><FONT COLOR="#000077">FIGURE

23.8.</FONT></A><FONT COLOR="#000077"> </FONT><I>The Periodic Table of Motif Widgets.</I>

<H6></H6>

<P><A NAME="Heading47<A HREF="../art/23/23lnx09.jpg"><FONT COLOR="#000077">FIGURE

23.9.</FONT></A><FONT COLOR="#000077"> </FONT><I>A tear-off menu that's torn off.</I>

<CENTER>

<H3><A NAME="Heading48<FONT COLOR="#000077">Other Types of Widgets</FONT></H3>

</CENTER>

<P>The Motif toolkit also supplies the following Widgets. Refer to the items in the

periodic table shown in Figure 23.8 to see what most of these Widgets should look

like on-screen. 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.</P>

<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.</P>

<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 Motif Dialog Widgets.</P>

<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 Widget can even store a pixmap graphics image.</P>

<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.</P>

<P>When you press Enter or a pointer on a button, the button has focus. Move the

cursor to a 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 down. 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.</P>

<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-screen.</P>

<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.</P>

<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-A key selected the Actions item,

and Meta-H selected the Help item.</P>

<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.</P>

<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 scrollbar. It does not, however, have the arrow

buttons at each end.</P>

<P>XmScrolledWindow This is a combination of a horizontal scrollbar, a vertical scrollbar,

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.</P>

<P>XmFrame This is a simple Widget used to put a consistent border around one single

Widget. Frames can hold only one Widget at a time.</P>

<P>XmRowColumn This is a general-purpose Widget organizer. The Widget can lay out

its Widget collection in various ways, including the following:</P>

<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.</P>

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

fashion.





<BLOCKQUOTE>

	<P>In conjunction with this, you can specify the width of each column to be that

	of the widest Widget, and you can 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.



</BLOCKQUOTE>



<P>Several other Widgets are 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.

<CENTER>

<H4><A NAME="Heading49<FONT COLOR="#000077">Gadgets</FONT></H4>

</CENTER>

<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.</P>

<P>Gadgets are windowless versions of a Widget. Most Gadgets have the same names

as Widgets but have the string <TT>Gadget</TT> appended to their name. So, XmLabel

has a counterpart called XmLabelGadget.</P>

<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

you can get into by using Gadgets, you might be better off not using them.

<CENTER>

<H3><A NAME="Heading50<FONT COLOR="#000077">Customizing with Resources</FONT></H3>

</CENTER>

<P>Now that you are familiar with Widgets, let's talk about the parameters that affect

them--resources.

<CENTER>