Designer 10.7 | webMethods CAF and OpenUI Development | Views in the Composite Application Framework | Using the Design Canvas | Manipulating Controls on the Design Canvas
 
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 The Drop Invalid icon overlay is visible on the cursor, you cannot drop the control.
*If the The Drop Valid icon 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 following table lists the available CSS options:
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.