Building a Form's Layout
  • Updated on 09 May 2013
  • 2 minutes to read
  • Print
  • Dark
    Light

Building a Form's Layout

  • Print
  • Dark
    Light

The form layout defines the visual structure of a form's fields, labels and other components both in the workspace of the Form Designer and in the form when a user views it. The layout can be set when creating a form or can be changed when editing it.The Form Designer includes five standard layouts: Canvas , Grid , Vertical Stack , Horizontal Stack and Tabs .  
To change a form's layout, select the Surface component in the Explorer panel, then select the layout from the Properties panel's Container Type drop-down list.

Example
Creating a form and demonstrate types of form layouts.

To begin, select a project folder and click the Create Form drop down button and the choose the Create From .option.
111.png

Give the form a name and click OK .
112.png

By default, our new form will have the least restrictive layout type - Canvas . The layout type displays in the Properties panel, in the Layout section, in the Container Type drop-down list.
113.png

Forms with the Canvas layout may have their components placed anywhere on the workspace. We locate a component under the Components panel, then drag it to the workspace.

114.png

To change the layout, we expand the Explorer panel at the bottom-right corner of the workspace.
115.png

We select Surface .

116.png

Next, we locate the Layout section in the Properties panel. In the Container Type drop-down list, we select the Grid layout.

117.png

The Grid layout allows us to set guidelines to help with the formatting of our form by resizing each row and column in the grid. Components added to a section of the grid will be automatically set to the size of that section.  Resizing the section will also resize the component, as well as the sections of the grid in the same row or column.

118.png

Note that the components we added to the Canvas layout now appear as one section of the grid.  Containers like Canvas and Grid are themselves components.  By expanding the Container category in the Components pane, we can add any container to any layout.  Further, we can edit any of the components within the Canvas or even the Canvas itself.
We change the layout to Vertical Stack .
The Vertical Stack layout allows us to set components one after another, vertically.  Each added component will automatically be resized to the width of the workspace. We must manually resize the height of a component.

119.png

We change the layout again toHorizontal Stack
The Horizontal Stack layout allows us to set components one after another, horizontally.  Each added component will automatically be resized to the height of the workspace. We must manually resize the width of a component.

120.png

Finally, we change the layout to Tabs .
The Tabs layout allows us to place components on tabs. We click a tab at the top of the workspace to add components to it. To rename a tab, we locate the Layout section in the Properties panel, select a tab from the list and click Edit. We may also add or remove tabs as needed.

121.png

Was this article helpful?