Using the Editors

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

• Press Shift+click to select and deselect widgets without affecting the selection state of other widgets.

• Press Ctrl+click to select a new widget and make it dominant.

  Note: In character-mode Panther, Shift+click and Ctrl+click are not available. Choose OptionsMultiple Select Mode (default setting). You can then click on multiple widgets; the first widget you select is considered the dominant selection. To change the dominant widget, deselect all widgets and choose the one that should be dominant, then reselect all others.

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

Do either of the following:

• Shift+click to toggle selection for a specific widget in a selection set.

• Click in an empty area of the screen to deselect all widgets.

Using the Widget List

Use the Widget List to:

• Select one or more widgets in the current screen.

• Select invisible widgets in order to access their properties, such as table views and groups.

• Locate widgets that are hidden behind other widgets or are located outside of the screen's viewport.

• Select the screen, report, service component, or frameset (in Panther 4.50 and later) by deselecting any selected widgets.

You can use the Type option menu to only view widgets of one widget 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 widgets have been selected, you gain access to their properties and you can move, copy or delete the selected widgets together.

How to Select Objects Using the Widget List

1. Choose ViewWidget List. The Widget List is displayed.

   The widgets on the current screen are listed in top to bottom and left to right order. The left column lists the widget numbers; the middle column lists the widgets by name (or by field number or contents if the widget is not named); the right column lists the widget type.

   

   Figure 9-1 The Widget List's left column is the widget number; the middle column is the widget name (or field number or contents) 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 option menu to display only widgets with a selected Widget type.
5. In a GUI, click on the Number, Name and Type columns to sort the columns.
6. The Delete key will delete any widgets that are currently selected.

---

Resizing a Widget

You can resize, copy, and move widgets:

• By using the mouse.

• Through the Properties window.

• By using Edit menu commands and toolbar buttons.

  Note: Some selection methods are unique to the platform on which Panther is running.

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:

• Dragging the widget to the desired size.

• Specifying its size in the Properties window as well as defining how much or how little it should grow at runtime if the screen size changes.

• Selecting more than one widget and making all widgets in your selection set the same size.

• Adjusting the widget size to fit its textual content.

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

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.

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.

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.

   • Yes—(default for static labels) Trailing and leading blanks are eliminated from labels, extra space width eliminated from grid widgets, and any previously set Height and Width property values are removed.

     The widget (except for static labels) dynamically resizes at runtime if its content changes.

     If you increase or decrease the number of characters in the widget's Label property, the widget's length adjusts appropriately to fit the content. If you reset both Height and Width properties, the Size to Contents property is ignored.

   • No—(default) The widget's size remains fixed at runtime regardless of its content.

     Note: If you change the Length property (either by setting the property value or by resizing the widget itself) or specify a picture to display on the label, the Size to Contents property is automatically reset to No.

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.

   • Adjust Widths—Resizes the onscreen widths (or visible columns) of the selected widgets to match the onscreen width of the dominant widget.

   • Adjust Heights—Resizes the onscreen heights (or visible rows) of the selected widgets to match the onscreen height of the dominant widget.

   • Both—All widgets in the selection set resize to match the height and width of the dominant widget.

     The widgets in your selection set match the height and/or width of the dominant widget.

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:

• List box

• Grid widget

• Single line (resize horizontally only) and multiline text.

• Horizontal lines (resize horizontally) and Vertical lines (resize vertically).

• Graphs

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

• When a screen is made smaller, Panther preserves any white space margins that exist along the bottom and right side of the screen and applies the screen resize percentage directly to the resizable widgets.

• When stretching or shrinking widgets, Panther first determines the new size of these widgets, and then applies its positioning algorithm to re-orient the remaining widgets around those which have been resized.

• When widgets grow, white space is preserved. The screen's layout is maintained as originally presented, except that certain widgets are bigger.

• If one or more resizable widgets share the same path, Panther preserves their relative widths after a resize. For example, if a screen with a one-inch wide widget next to a two-inch wide widget has its horizontal dimension increased by three inches, the widgets' widths increase to two inches and four inches, respectively. Thus, the widgets maintain the size ratio of 1:2 which existed before the screen was resized.

• When a widget reaches its maximum (or minimum) resize restriction, all other widgets on the screen stop growing (or shrinking). This restriction assures that the resize ratio within resize groups is preserved.

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

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.

• Ctrl+drag your selection to the desired location.

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

• Shift+drag the widget.

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

• Drag and drop the widget to the destination 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

Select a widget. Do either of the following:

• Choose EditCut or the Cut button from the toolbar.

  This places the removed widget in a temporary buffer. You can then paste the widget in the same screen or in another screen. The cut object remains in the buffer until it is overwritten by the next Cut operation.

• Choose EditDelete or press the Delete key.

  The selected widget is not placed in a temporary buffer; it cannot be restored to the screen (except by choosing Undo).

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:

• Using Align and Space commands on the Edit menu or the appropriate Align and Space buttons on the toolbar.

• Specifying coordinates under the Geometry properties in the Properties window.

• Drag widgets to the position on the screen.

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.
   

   • Left—Aligns the left edges of selected widgets with the left edge of the dominant widget. The vertical positions do not change.

   • Center—Aligns the horizontal midpoint of the selected widgets with the horizontal midpoint of the dominant widget. The vertical positions do not change. (Toolbar button is not available.)

   • Right—Aligns the right edges of selected widgets with the right edge of the dominant widget. The vertical positions do not change.

   • Top—Aligns the top edges of selected widgets with the top edge of the dominant widget. The horizontal positions do not change.

   • Middle—Aligns the vertical midpoint of selected widgets with the vertical midpoint of the dominant widget. The horizontal positions do not change. (Toolbar button is not available.)

   • Bottom—Aligns the bottom edge of selected widgets with the bottom edge of the dominant widget. The horizontal positions do not change.

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.

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.

   • Horizontal—Aligns the widget's horizontal anchor point to the nearest horizontal grid coordinate.

   • Vertical—Aligns the widget's vertical anchor point to the nearest vertical grid coordinate (whole number).

   • Both—Aligns the widget's horizontal and vertical anchor points to the nearest grid coordinate (whole number).

     Note: To change a widget's anchor point, under Geometry, set the Horizontal and/or Vertical Anchor properties accordingly (refer to "Controlling a Widget's Position at Runtime").

Choose OptionsSnap To Grid.

• With Snap to Grid on, a widget that you add or position on a screen automatically aligns, using the widget's anchor points, to the nearest vertical and horizontal grid coordinate.

• If Snap to Grid is off, you can place widgets between grid marks under GUI platforms. When you do so, their Start Row and Start Column properties have decimal values, such as 5.35.

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.

   • Horizontal Spacing—Positions widgets evenly between the left and right anchors.

   • Vertical Spacing—Positions widgets evenly between the top and bottom anchors.

     The result of the Space command is an equal amount of horizontal and/or vertical space between the selected widgets.

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.

   • Horizontal—Widgets to the left of the dominant selection reposition to its left. Widgets to the right of the dominant selection reposition to its right. The alignment of the left edges of widgets determine whether they position to the right or left of the dominant widget.

   • Vertical—Widgets above the dominant selection reposition above it. Widgets below the dominant selection reposition below it. The alignment of the top edges of widgets determines whether they position above or below the dominant widget.

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:

• Decrease the value in the Distance field on the Set Custom Spacing dialog.

• Increase the size of the screen and try the custom spacing option again.

• Choose a different dominant widget in your selection set.

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.

• Horizontally—Centers the selected widgets between the left and right screen borders.

• Vertically—Centers the selected widgets between the top and bottom screen borders.

• Both—Centers the selected widgets directly in the middle of the screen; this command positions the widgets horizontally and then vertically. (Not available on the toolbar.)

Controlling a Widget's Position at Runtime

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

• The screen or widget font changes.

• The screen size increases or decreases.

• The screen is ported to another platform.

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:

   • Left—The default setting. If the widget grows, it remains anchored to its starting column, and only grows to the right.

   • Right—If the widget grows, it remains anchored to its ending or rightmost column, and only grows to the left.

   • Center—If the widget grows, it remains anchored at its center axis and grows equally to its left and right.

3. Under Geometry, set the Vertical Anchor property to one of the following:

   • Top—If the widget grows, it remains anchored to its starting row, and only grows downward.

   • Bottom—If the widget grows, it remains anchored in its ending or bottom row, and only grows upward.

   • Middle—The default setting. If the widget grows, it remains anchored at its middle axis, and grows equally upward and downward.

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.