Form Container LayoutsLast Updated: 07/15/2016 Introduced in Verision: 2.0 |
This tutorial demonstrates variety of Form Layouts and Form Container behaviors in the Form Designer.
To overview Form Layouts we navigate to the Designer Folder and click Create Form > Create Form action on the Folder Actions Panel.
Next, we Name our Form and click Create to proceed to the Form Designer.
If we locate Form Configurations, in Layout section we can configure Form Container type. We can choose from Canvas, Grid, Vertical Stack, Horizontal Stack, and Tabs. These containers have different behavior in terms of Form element positioning.
Canvas.
Canvas is a Default Form container. It is specific in the way that designer can quickly position components on the Form. When Form component is being dropped on canvas it will keep its default Size and position. There are additional blue line that help designer to position components.
If the Form grows more than the size of the Designed Form window, scroll bar appears.
Tabs.
If we choose Tabs container for our Form layout, we can create a multi-page Form. If we drop a component on the Tab container, it will occupy the whole size of the Tab.
Grid.
Best practices of Form Design is to create a Form using Grid Layout. With Grid container we can markup our Form in the best manner. Mention, when we drop Form component on the Grid container, it will occupy the size of the cell which it is dropped on.
To create a desirable markup we create Columns and Rows of desirable size in pixels and with desirable behavior.
It is important to understand Resize behavior for the Columns and Rows. Resize types are: Fixed, Grow, and Resize.
Fixed: Column or Row will always have strictly specified size.
Grow: Column or Row can be automatically increased in size. For example, if we have 600×600 Form and only two rows. First row is Fixed 30px and Second row is Grow 30px. Second Row will be automatically resized to 570px. Note: with Grow Resize type Columns or Rows will not automatically decrease in size.
Resize: with this option Column or Row can automatically increase or decrease in size.
To demonstrate resizing behavior we have created 600×600 Form with Grid Layout. We marked the grid up as following. First column 100px Fixed, second column 100px Grow, third column 100px Resize. First row 100px Fixed, second row 100px Grow, third row 100px Resize. In this case sizes for columns and rows are following: 100:100, 150:150, 150:150.
If we decrease the size of our Form to be 250×250, our Grid Layout will be automatically resized according Resize rules. Now sizes for our columns and rows are next: 100:100 (Fixed did not change), 100:100 (Grow cannot be less than specified), 50×50 (Resize, can be changed in both ways).
Vertical and Horizontal Stack.
Vertical and Horizontal Stack Layouts have similar behaviors. If we drop Form components on such type of Container they are “stacked” horizontally or vertically. For this type of container we have additional Layout Configuration. We have several options for Children Size Mode: Scroll, ExpandChildrenThenScroll, FitChildren.
By default, Children Size Mode is Scroll. In this mode if Form components are greater than Form size, scroll bar appears.
If we choose ExpandChildrenThenScroll option, Form components will be spread evenly until Form size exceeded.
Then, scroll bar appears.
With FitChildren option, Form components will be resized to spread evenly on the Form.
