Manipulating Controls on the Design Canvas
There are several ways to manipulate controls on the design canvas and modify their appearance and position:
Resizing Controls
To resize a control or a column, click the control to display the resizing handles at the corners and the center of each edge. Drag a handle to resize as needed. If you have multiple controls selected, you can resize the controls at the same time.
Moving Controls
To move a control from one place to another, click the control to display the drag handle in the upper left corner.
Place the cursor over the drag handle and drag the control to a new location using these guidelines:
A vertical red bar appears at the place where the control is dropped.
If the
overlay is visible on the cursor, you cannot drop the control.
If the
overlay is visible on the cursor, you can drop the control.
You cannot drop an input control outside of a Form control. For more information about input controls, see
webMethods CAF Tag Library Reference.
As you drag the control, descriptive hints are displayed to help you determine where to drop it.
Minimizing Controls
As the hierarchy of controls becomes more complex, you can minimize a control to hide all of its child controls. Click the control to display the collapse icon
in the upper left corner, and then click the icon.
To restore the control, click the control to display the restore in the upper right corner of the collapsed control and then click the icon. You can also restore the collapsed control by double-clicking the control.
Editing CSS Values
You can edit CSS (Cascading Style Sheet) values for controls without having to know CSS syntax. On the design canvas, right-click a control and then click Style. The resulting menu offers these choices:
Menu item | Description |
Edit Style | Displays the CSS Style Definition editor. Use this editor to set values for a variety of CSS settings. |
Reset Style | Click to reset the control to default CSS settings. |
Style Classes | Choose a preset CSS style class. This feature requires you to create an external CSS and use an Include Stylesheet control to associate it with the view. For more information about the Include Stylesheet control, see webMethods CAF Tag Library Reference. |
Color | From the menu, choose a color to use for foreground objects. The choices are a subset of colors available in the CSS Style Definition editor. |
Background Color | From the menu, choose a color to use for the background. The choices are a subset of colors available in the CSS Style Definition editor. |
Selecting a Parent or Child Control
With a particular control, you can quickly select its immediate parent control or any of its immediate child controls. Right-click the control, click Select, and then click the parent or child control. That control is now selected in the design canvas.
Showing a View
Occasionally a view is hidden because another view has become active. You can display certain views directly from the design canvas. Right-click a control, click Show, and click the name of the view to display. You can use this technique to display the Properties, Palette, or Outline views.
