Form Layout

The Form Layout section explains how to lay out gadgets on a form. It assumes familiarity with the Form Concepts section, and that you have read the section Defining a Form.

A form is more than just a collection of gadgets. It is a collection of gadgets which combine together to achieve one or more specific application tasks in a more organized and intuitive way.

Many forms consist of a set of Frame gadgets, each of which acts as a container for functionally related gadgets that perform a sub-task of the form. This is a hierarchical concept because containers can own other containers.

Laying out a form can be broken down into laying out the containers at each level in the hierarchy, and then laying out the gadgets of each container, as in, defining and placing each gadget in its container.

We recommend the following layout guidelines, which have proven successful. They also act as a good-form-layout checklist.

All the special terms used below are defined later in this section.

• The layout for complex dynamic forms can be difficult to get right, so the simpler the code, the easier it is to adjust. We recommend restricting the form definition section to layout commands only. Use the constructor method of the form for all other details, for example, tooltip setting, value setting, callback setting.

• It is rarely necessary to set the width and height for a container (Form or Frame), because it will automatically expand as you add gadgets to it.

• Bear in mind that the order of your gadget definitions determines the navigation order of gadgets in the form when the TAB key is used.

• Use variable spaced text layout mode VarChars. This gives more accurate layout resulting in smaller forms. For gadgets with displayed tags, it removes the need to use TagWidth, unless specific alignment of a set of gadgets is required. It also avoids the need to specify 'width' for buttons, toggles, and radio-buttons, unless specific alignment is required. ('Layout Form' uses VarChars by default.)

• For each container, place gadgets using AUTO PLACEMENT, from left to right using PATH RIGHT, or top to bottom using PATH DOWN, or a convenient combination of both.

• Use PATH DOWN with VDIST 0.2 to avoid the repeated use of 'at xmin ymax+0.2'.

• Use PATH RIGHT with HDIST 0.5 avoids the repeated use of 'at xmax + 0.5 ymin'.

• Minimize the use of literal values for width and height by using relative layout, which makes it easier to adjust the form later. For example:

  frame .page2 Panel at xmin.page1 width.page1 anchor all

    view .picture AREA width to max.page1 height 5 dock fill

     CURSOR crosshair

     INMODE CREATE _DragPick TYPE 'PICK

   exit

  exit

• For complex resizable forms, it is often easier to design the static layout correctly first, and then introduce resizing by adding the form keyword RESIZE or DOCK, and adding ANCHOR attributes to the gadgets.

• Remember that the default value of ANCHOR for a gadget is 'Top + Left' so no need to say anything if this is all you need.

• Remember to use the 'FORM - SIZE' construct to right (or bottom) align a gadget to the edge of a (dynamic) form without increasing its width (or height). For example:

  button .ok 'OK' at xmax form-size anchor bottom + right OK

• Remember to use the '.gadget-SIZE' construct to right (or bottom) align a gadget to the edge of a (dynamic) frame without increasing its width (or height). For example:

  button .nextPage linklabel 'Next' at xmax gadget-size ymin anchor bottom + right

• Remember to use Tabbed Page frames or Foldup Panel frames for forms with multiple gadget sets, rather than overlaid frames with selection by visibility control. It is both easier to code and less unpredictable.