Leveraging layouts

Before we can properly take up screen sizing, we need to understand how visual components are laid out in a WaveMaker application. The layoutBox, of type wm.Layout, is the page's widget container. It is the parent of all the visual components on the page. The layout box is the container into which the widgets of the page go. As such, its properties affect every widget on its page:

First, we have width and height. These both default to using percentage-based sizing at 100%, which means that the app will be of the full width and height of the browser. Percentage layout allows us to specify the size of a widget in terms of the percentage of the space available in that dimension. Let's say both components in a panel are set to 100% width in a left-to-right panel. Each widget would get one half of the available width. That is, each widget would get 100% of the 200% allocated. If one widget was set to 100% and the other 200%, the first would get 1/3 of the available space, 100/300, while the second receives the remaining 2/3 of the available space.

The alternative option is to specify size in pixels. Choose px in the dropdown or simply enter a number ending in px, such as 80px, in the editor. This allows us to specify the exact pixel dimensions of the container. Using pixel-based sizing gives the developer direct control over the size of the widget. Images will always be the same size no matter what the user's screen size is. If the specified size does not fit in the available space, and scrolling is enabled, scrollbars or touch scrolling will be present. Pixel and percentage sizing can be mixed in a single container with good results. For example, a picture may always be 200px while the components sharing the panel share the remainder of the available space.

Next, we have layoutKind. In the top-to-bottom layout, which is the default for layoutBox box, widgets are stacked from top to bottom as they are added to the container. The other value of layoutKind is left-to-right, in which components are stacked within a shared container from the left to the right. With a top-to-bottom layoutBox, if we want to have two widgets next to each horizontally, we'll need to add a container with the left-to-right layout kind within the top-to-bottom container. The Top-to-bottom layoutKind is a good default to most application's layoutBox. As the page grows, it gets taller. Users are accustomed to scrolling down to get to additional content. At the same time, layouts requiring users to scroll both horizontally and vertically are more cumbersome, requiring the user to spend more effort in positioning the window.

Horizontal and vertical alignment dictates how widgets align within the panel. The top setting for verticalAlign works well for most cases. However, for a versatile layout, the center horizontalAlign container works well with tablets and desktops. The CRM Simple example project demonstrates this. The minimum size properties minWidth and minHeight are useful in such situations to ensure things stay large enough to be usable.

Finally, autoScroll will automatically add scrollbars to the panel when needed.