# Layout Editor

WorkShop Visual provides a Layout Editor to ease the setting up of Form attachments, and to specify x,y positioning of children for BulletinBoards and DrawingAreas.

The resources associated with the widget being edited are available by selecting Resources from the Edit menu.

The Constraints button in the Widget menu (found on the WorkShop Visual menu bar), provides an alternative way to specify attachments for the brave. This is only available when a child of the form is selected.

As children are placed in a form they take the default attachments, which is to attach the widget to the left of the form and the bottom of the last widget added - that is, they lay themselves out down the left hand side of the form. Attachments to the form are shown by black triangles, pointing at the side of the form to which they are attached. Attachments between widgets are shown as black lines. The direction of the attachment is shown by the line starting inside the source widget, and ending with an arrowhead at the edge of the destination widget.

There are three main ways of specifying attachments in the Layout Editor: by Attachments, by Aligning widgets, and by Distributing widgets. The appropriate page of controls is selected from the option menu.

In the Attachments page there are six modes of operation for the Layout Editor: Move, Resize, Attach, Align, Position and Self. All operations are on the "rubber band" boxes representing the children widgets on the canvas of the Layout Editor. All layout changes are reflected in the design window.

For BulletinBoard and DrawingArea widgets the mode is always Move or Resize. Moving a widget explicitly sets its XmNx and XmNy resources, resizing a widget sets its XmNwidth and XmNheight resources.

Move

This is the initial mode. Pushing mouse button 1 and dragging allows the widget to be positioned where you want it on the form. The act of dragging a widget will remove any attachments from the widget. You can always drag with mouse button 2, irrespective of the current mode of the Layout Editor.

Resize

This mode allows you interactively resize widgets. Push mouse button 1 inside the widget to be resized, and then stretch the bottom and right sides to the required sides. Resizing a widget in a form sets attachments for the bottom and right edges to the opposite sides of the form.

Attach

This mode is used to set up relative attachments. Click just inside the side of the widget to be attached, and drag to just inside the side of the widget to which it is being attached. To attach to the side of the form, drag to just outside the boundary of the form.

To attach None, i.e. remove an attachment, click and drag from just inside the side of a widget to the center of the widget. Align widgets by attaching the side of a widget to the corresponding side of another widget (e.g. left to left).

Attach widgets by attaching one side of a widget to the opposite side of another widget (e.g. top to bottom).

Use Offset to set a distance (in current unit type) between the widgets being attached. If the offset is left blank, the appropriate offset will be determined from the Form's horizontal and vertical spacing resources.

When dragging to the destination widget, the Layout Editor will display the destination arrowhead of the attachment if you were to stop dragging at that point.

You can always Align with Shift mouse button 2, irrespective of the current mode of the Layout Editor.

Align

This is the same as Attach mode, except that the offset is always forced to be an explicit 0.

You can always Align with Control mouse button 2, irrespective of the current mode of the Layout Editor.

Position

This mode allows you to specify a relative position for a widget within a form. For instance to position the left hand side of a widget 30% into the form, enter 30 into the Position field and click on the left hand side of the widget. Now whenever the form is resized, the left hand side of the widget will always be 30% into the form.

A Position attachment is indicated by a hollow circle.

You can always Position with Shift mouse button 3, irrespective of the current mode of the Layout Editor.

Self

The Self mode is similar to Position, but rather than use the value in Offset, the position is taken to be the current relative position of the side of the widget to the rest of the form.

So typically you would drag the widget to where you want it in the form, choose the Self mode, and click on one or two of the sides to record its position - for instance, the left hand and and bottom edges.

Self attachments are shown as solid circles, initially, and then hollow circles when the Form widget is re-selected in the design hierarchy. This reflects the fact that the Self attachment is actually a Position attachment.

You can always use Self with Control mouse button 3, irrespective of the current mode of the Layout Editor.

Align and Distribute

Apart from explicitly setting the attachments between a widget and another widget or the form, you can use the Layout Editor to specify the relationships for a number of widgets. Align and distribute both work by selecting a group of widgets, specifying the way in which the attachments are to be applied, and then pressing the Apply button. To select a widget, simply click on it using mouse button 1. To add to the group of selected widgets click on a widget using Shift mouse button 1. Selected widgets are filled with a different color to unselected widgets. On a colour screen the last selected widget is shown in an additional colour.

When using Align, the widgets selected are aligned with the last widget selected. Use the toggle buttons to choose which edges are aligned.

When using Distribute the space between the widgets most widely distributed is allocated evenly between the other widgets. Use the toggle buttons to choose how the space is to allocated.

When in Attachments mode, Shift mouse button 1 can still be used to denote a selected widget. Click in the background of the form to clear the selection.

Grid

Use the Grid slider to specify the grid size. If the grid size is greater than 1, Move and Resize operations will snap to the nearest grid line.

Reset

A reset function is provided in the Edit menu. This will simply reset the form widget and redraw the Layout Editor.

Zooming

Use zoom in and Zoom out to adjust the scale at which the widgets are drawn.

Undo

To undo an attachment, or set of attachments made by Align or Distribute, simply press the Undo button. The attachments are stacked up, so you can repeatedly undo attachments made to get back to your initial state.

Edge highlights

If the Edge highlights toggle is set on in the View menu, the edge of the widget nearest the pointer is shown extra thick. This indicates which edge will be used if a mouse button is pressed at that point.

Annotation

The widget boxes can be annotated with their widget or class names by setting the appropriate toggle in the View menu.

In Microsoft Windows Mode, the situation is slightly different. There is no Form widget in Microsoft Windows so WorkShop Visual generates the actual size and position of widgets as they are at generate time. Resizing behavior is lost on Microsoft Windows. You should still use the Layout Editor in order to achieve the positioning you require on Microsoft Windows and for the benefit of the Motif version.

HINTS

Self is often more useful than position.

Having set up attachments, try resizing the design window to observe the effect of the attachments.

Use Zoom in and Zoom out to redraw the Form canvas.

Use Zoom in to position or attach widgets that are too small to operate on normally.

If a widget is attached to one side of the form, and you attach the other side of the widget to the other side of the form, the widget will stretch. If the first attachment to the form is broken (dragging from side of widget into the widget), the second attachment will move the widget to the other side of the form rather than stretch it.

Attaching the two sides of a widget to the corresponding two sides of the form can cause the widget to shrink to fit the form, rather than the form expanding to hold the widget.

The Form will sometimes change an attachment you make in order to keep consistency. If you are having trouble with Form layout, try resetting the Form.

NOTES

If the Form widget is cut, the Layout Editor will blank out its canvas, as the widgets are no longer available.

See also:

- Form widget
- Bulletin Board resource panel
- Form Attachments
- Widget Menu
- Microsoft Windows Mode
- About WorkShop Visual