Using the Editors


Chapter 9 . Manipulating Widgets

The chapter describes some basic procedures needed for widgets in the Editor.


Selecting a Widget

You must select a widget or widgets to set properties at the widget-level. A selected widget is displayed with a changed border—on GUI platforms small, black boxes, or grab handles are displayed; in character mode, the widget is surrounded by square brackets ([ ]). A selected grid widget member is displayed in reverse video from unselected members.

When more than one widget is selected, the first one you select is considered the dominant selection; all other widgets in the selection set are indicated with hollow boxes in GUIs and curly braces ({ }) in character mode. The position and size of the dominant widget determines how the other widgets in your selection set will align or resize.

Note: If you are using Panther in character mode without a mouse, refer to Appendix A, "Keyboard Interface," for details on using the keyboard to manipulate widgets and navigate in the Editor.

Using a Mouse

You can select widgets in the following ways:

Mouse Click

Click on a widget with the mouse. Only one widget can be selected using this method. All previously selected widgets on the screen are deselected.

(For selecting grid widgets and their members, refer to "Manipulating a Grid Widget and Grid Members."

How to Select Multiple Widgets

Rubberbanding

With the mouse button pressed, drag a bounding box, also known as a rubberband, around the desired widgets. This method allows you to select contiguous widgets. Any widgets that fall within the rubberband boundary are selected. Only one widget in the selection set is dominant.

Press Ctrl+click on any widget in your selection set to make that widget the dominant selection.

Shift+rubberband to toggle the selection state of all widgets within the bounding box. Ctrl+rubberband to select any widgets that are not already selected; this does not change the dominant selection.

Deselecting Widgets

How to Deselect Widgets

Do either of the following:

Using the Widget List

Use the Widget list to:

You can use the Type option menu to only view widgets of one wieget type. In a GUI, you can click on the Name and Column labels to change the sort of the widget list.

You cannot move widgets in the Widget list window; however, once the object is selected, you gain access to its properties and can manipulate the object.

How to Select Objects Using the Widget List
  1. Choose ViewWidget List. The Widgets list is displayed.

    All widgets on the current screen are listed in field number order. The left column lists the widget numbers; the middle column lists the widgets by name (or by field number if you have not assigned a name); the right column lists the widget type.

    Figure 9-1 The Widgets list's left columm is the widget numbers; the middle column is the widget name (or field number) and the right column is the type.

  2. Scroll through the list of widgets by using the scroll bar or the Up and Down arrow keys.
  3. Select a widget by clicking on it in the Name column; Shift+click to select contiguous widgets and Ctrl+click to select and deselect noncontiguous widgets.
  4. Use the Type opion menu to display widgets with a selected Widget type.
  5. In a GUI, click on the Number, Name and Type columns to sort the columns.

Resizing a Widget

You can resize, copy, and move widgets:

If you are using Panther in character mode without a mouse, refer to Appendix A, "Keyboard Interface," for details on using the keyboard to manipulate widgets and navigate in the screen editor.

You can resize and control the size of a widget by:

Use the method that works best for your immediate requirements.

If the size of the widget is inherited from a repository widget, Panther reminds you that inheritance for that Geometry property will be removed. You can choose to either change the size or retain the inherited size. Refer to "Controlling Inheritance" for details.

Defining a Widget's Size

A widget's horizontal dimension (with the exception of scales, lines, and boxes) is defined by its Length property setting. This value defines the amount of data, in columns, that the widget can display on the screen. Its vertical dimension is defined by the number of onscreen occurrences and the size of the font that the widget uses.

Height and Width properties define a widget's physical size. And, a widget's length is not necessarily dependent on its width specification. So, you can have a widget appear wider than the actual amount of data it will display.

Default-sized widgets do not have Height and Width specifications. When you resize a widget, Panther automatically applies values to these properties.

Dragging to Size

How to Resize a Widget
  1. Select the widget.
  2. Position the mouse pointer on one of the widget's grab handles (or brackets) and drag it until the widget is the size you want.
  3. Release the mouse button.

Specifying a Size

To resize one or more widgets to a specific size, use the Properties window:

Select the widget or widgets that you want to resize. Under Geometry, enter a value (default is grid units) in the Height and/or Width properties. Refer to Table 9-1 for a list of valid units of measurement.

For example, 5c means five characters wide, 5 (without a unit of measure) denotes five grid units.

The width and/or height of the selected widgets adjusts according to your specification.

Table 9-1 Units of measurement for sizing and positioning widgets

Unit Use Description

characters

c

Based on the widget's font size (average character width and height). A setting of 5c means five average-size characters in the widget's font, while grid units specify average-size screen font. Characters and grid units are the most portable units of measure, since they are sensitive to the font in use. For GUIs, you can specify whole numbers plus fractions (such as 5.5c).

grid units

g

The default unit of measure and the only valid specification for character mode. A grid unit is based on the average character size of the screen font. A setting of 5 or 5g means five standard grid cells. Grid units and characters are the most portable units of measure, since they are sensitive to the font in use. For GUIs, you can specify whole numbers plus fractions (such as 4.25).

inches

in

Specifies size or position in inches.

millimeters

mm

Specifies size or position in millimeters.

pixels

p

Must be specified in whole numbers. These measurements depend upon screen resolution.

How to Size a Widget To Fit Its Content
  1. Select the widget (applies to widgets that have a label: static and dynamic labels, push buttons, radio buttons, check boxes, and toggle buttons).
  2. Under Geometry, set the Size to Contents property appropriately.

Unifying Widget Size

You can resize all widgets in your selection set to be the same size by using the Size command; adjust both the width and height of the widgets.

How to Uniformly Size Widgets
  1. Select the widgets that you want to resize.
  2. Determine and indicate the dominant widget—that is, select the widget that all other widgets will match in size.

  3. Choose EditSize and the directional dimension or the appropriate Size button on the toolbar.

Controlling a Widget's Size at Runtime

Only in GUIs does Panther provide properties for certain widgets which allow them to grow and shrink proportionally when the user resizes the screen at runtime. The following widget types can be configured to resize:

The screen's Resizeable property (under Geometry) must be set to Yes to allow widgets to resize.

Note: The Resizeable property is supported only in GUIs.

How to Define the Vertical Resizing Behavior for Capable Widgets
  1. Under Geometry, set the Auto Vert Resize property to Yes. Additional vertical resize subproperties are displayed.
  2. (Optional) Specify the maximum size to which this widget can grow vertically by setting the Max Size (vert_max_size) property.
  3. (Optional) Specify the minimum size to which this widget can shrink vertically by setting the Min Size (vert_min_size) property.

For valid units of measurement, refer to Table 9-1.

How to Define the Horizontal Resizing Behavior for Capable Widgets
  1. Under Geometry, set the Auto Horiz Resize property to Yes. Additional horizontal resize subproperties are displayed.
  2. (Optional) Specify the maximum size to which the widget can grow horizontally by setting the Max Size (horiz_max_size) property.
  3. (Optional) Specify the minimum size to which the widget can shrink horizontally by setting the Min Size (horiz_min_size) property.

For valid units of measurement, refer to Table 9-1.

General Rules for Resizing at Runtime

This section explains how the auto-resize properties affect behavior at runtime. Review the following rules when designing your screen; they will help you take advantage of Panther's automatic resizing capability. In addition, if you find that Panther's built-in resize capability does not satisfy a specific requirement, you can attach a custom resize function via the screen's Resize Function property.

When configuring Panther for your desired resize behavior, think in terms of each resizable widget forming a path across the screen. The path occupies the area that the widget would take up if it were resized horizontally to its maximum in either direction. If one or more resizable widgets share the same Starting Row, Height, and Vertical Anchor, then these widgets share the same path. If widgets with either Horiz or Vert Auto Resize property set have an overlapping, but non-identical path, then the widgets cannot resize.

Resize Processing Rules for Panther's Built-in Resize Capability


Moving and Copying Widgets

Alternative methods for moving and copying widgets in character mode are also described here, since character mode Panther is unable to take advantage of Shift+click and Ctrl+click to move and copy objects.

When you move or copy a widget, its properties and all other pertinent information go with it, including its inheritance.

Within a Screen

How to Move a Widget Within a Screen

  1. Position the mouse pointer anywhere on the widget, except on a grab handle or bracket.
  2. Drag the widget to the desired location on the screen.

How to Copy a Widget Within a Screen

Alternatively and in character mode:

  1. Select the widget.
  2. Choose EditCopy (or the Copy button from the toolbar).
  3. Then choose EditPaste (or the Paste button).

The copied widget is pasted down and to the right of the original widget by one grid unit.

Note: In character mode, if you are in Multiple Select Mode, remember both the source and copied widgets are selected and it is difficult to carry out an operation without affecting both widgets—in other words, both widgets will move together.

From Screen to Screen

How to Move a Widget From One Screen To Another

Alternatively and in character mode:

  1. Select the widget
  2. Choose EditCut (or the Cut button on the toolbar).
  3. Bring focus to the destination screen
  4. Choose EditPaste (or the Paste button).

The widget is pasted in the same location in the destination screen as it was in the source screen. If another widget is in the destination location, the widget is positioned down and to the right by one grid unit.

How to Copy a Widget To Another Screen

To and From a Repository

You can add a widget to your application screen by dragging (copying) a named widget from a repository entry, and thereby inherit properties from a single source.

You can also do the reverse operation: copy named widgets from your application screen to a repository entry. The original widgets become the children and are automatically defined to inherit from the copied widgets in the repository.

The inheritance relationship between parent objects in the repository and their child objects can be retained, thus ensuring that standards are established and that changes in repositories are propagated to your application appropriately. Refer to "Controlling Inheritance" for more information on repositories and inheritance.

Deleting Widgets

How to Delete or Remove a Widget

Select a widget. Do either of the following:


Arranging Widgets

You can arrange widgets along vertical and horizontal axes; you can align or space them in relation to one another or arrange them at specific positions on the screen. You can do this by:

Aligning Widgets

When you arrange widgets on your screen using the Align command, the dominant widget remains fixed, and the other widgets in your selection set align with it. The Align command doesn't change the size of the widgets.

How to Align Widgets with Each Other

  1. Select two or more widgets on a screen.
  2. Determine the dominant widget—that is, select the widget that all other selected widgets should align with.
  3. Choose EditAlign and the orientation or the appropriate Align button on the toolbar.

How to Align Widgets to an Absolute Position or Coordinate

  1. Select the widgets that you want to align.

    In the Properties window, three question marks are displayed in the Start Row and Start Column properties (under Geometry) if the selected widgets are not already aligned on the same coordinate.

  2. Under Geometry, enter a value and unit of measurement in the Start Row and/or Start Column property. Refer to Table 9-1 for a list of valid units of measurement.

    Changing the Start Row aligns the top edges of selected widgets on the specified unit; changing the Start Column aligns the left edges of the widgets on the specified unit.

  3. Choose OK.

    The selected widgets, including the dominant selection, align accordingly on the specified coordinate.

How to Position a Widget on a Grid Coordinate

  1. If the screen grid is not displayed, choose OptionsGrid (or the Grid button on the toolbar) to toggle the screen grid display on.
  2. Select the widget or widgets.
  3. Choose EditGrid Align and the position:

    Note: The Grid Align command is dependent on the screen grid display.

How to Force All Widget Placement on a Grid Coordinate

Choose OptionsSnap To Grid.

In a character environment, all objects are aligned to a grid coordinate, so the Start Row and Start Column properties will have whole number values.

Spacing Widgets

By using the Space command, you can position widgets on your screen so that there is an equal amount of space between the widgets in your selection set. You can let Panther automatically space the widgets evenly, or you can explicitly set the distance between widgets.

How to Create Automatic Spacing

To create an equal amount of space between widgets:

  1. Select three or more widgets.

    The widgets that are outermost in your selection set—that is, the left- and right-most, or top- and bottom-most—are designated as left and right anchors, or top and bottom anchors, respectively. The anchors do not move when you use the Space command; the other widgets in the selection set adjust positions within the anchors' boundaries.

  2. Choose EditSpace and an orientation or choose the appropriate Space button on the toolbar.

How to Create Custom Spacing

To specify an absolute amount of space between widgets in a selection set:

  1. Select two or more widgets on a screen.
  2. Determine the dominant selection—the dominant widget is the anchor and does not move.
  3. Choose EditSpaceCustom. The Set Custom Spacing dialog box opens.
  4. Enter the amount of space required between the widgets in the Distance field. Refer to Table 9-1 for a list of valid units of measurement.
  5. Select a directional dimension.
  6. Choose OK.

If there is insufficient space to arrange the widgets using the specified value, a message is displayed. You might correct the problem by trying any of the following:

Centering Widgets

The Center command treats multiple widgets as a set, and, therefore, their orientation to one another is not changed.

How to Center Widgets on a Screen

Select one or more widgets. Choose EditCenter and an orientation, or choose the appropriate Center button on the toolbar.


Controlling a Widget's Position at Runtime

You can control where a widget is repositioned at runtime in the event that:

By default, a widget is positioned along its left edge and vertically along its middle axis. The anchor properties also determine how the widget retains its alignment to other widgets on the screen.

How to Set a Widget's Position in Relation to Other Widgets

  1. Select the widget or widgets.
  2. Under Geometry, set the Horizontal Anchor property to one of the following:
  3. Under Geometry, set the Vertical Anchor property to one of the following:

Alignment and anchoring go hand-in-hand. Left-aligned widgets that have a Horizontal Anchor of Left remain left-aligned. The same is true for all other similar combinations (e.g., right-align and right anchor). If you align widgets by choosing EditAlign, Panther automatically sets the appropriate Anchor property position.

In addition, if you align widgets to a grid coordinate by choosing EditGrid Align, widgets align at their anchor specification along the nearest grid coordinate (refer to "How to Position a Widget on a Grid Coordinate" for more information).


Undoing Actions

Panther keeps track of editing and formatting changes that you make on each open screen. If you inadvertently move a widget or change your mind, you can usually reverse the last several (10 by default) actions you took, including setting changes you make via the Properties window. You can also change the number of undo levels for your authoring environment.

Multiple actions are undone or redone in sequence. However, there are some actions that you can't undo, such as saving a screen or selecting widgets.

How to Undo an Action

Choose EditUndo or the Undo button on the toolbar to reverse the last action. The Undo menu option identifies the last action that can be reversed.

How to Redo an Action

Choose EditRedo or the Redo button on the toolbar to redo the last canceled action. The Redo menu option identifies the last action that can be redone.

How to Set the Number of Undo Levels

  1. Choose OptionsUndo Levels. The Configure Undo Levels dialog box opens.
  2. Enter a number from 0 to 99 to define the number of levels that can be undone and redone for each screen.
  3. Choose OK. This setting takes effect immediately.