Page Layout

While it's possible to create a page by simply dragging and dropping widgets, layout properties can significantly speed your design. They offer immediate, precise control over your widgets' size and position.

The layout property

Panel widgets have a layout property in their main property group that defines how they arrange their child widgets. The property has three possible values:

• Fixed: arranges child widgets in relation to the edges of the panel.
• Horizontal: arranges child widgets next to each other, in a horizontal line.
• Vertical: arranges child widgets on top of and beneath each other, in a vertical line.

The fixed option positions children absolutely, in reference to their parent panel. The horizontal and vertical options arrange widgets relatively, to the left and right or top and bottom of other widgets in the panel. You can think of relatively-positioned widgets as flowing with the widgets around them. In fact, widgets positioned this way are said to be in flow.

Note: For convenience the widget palette offers three different panel options, one for each layout type. The underlying panel is the same, but each comes with a different layout option selected by default.

Layout properties

All widgets have a Layout property group that determines their size and position. The content of the Layout group changes based on the layout property of a widget's parent panel.

Fixed panel Layout properties

Widgets in fixed panels have Layout properties that set their size and position relative to the edges of the panel. The exact properties displayed vary based on the widget's type and your selections, but they all fall into four basic types:

Type	Description	Properties
Position	Position properties determine how far away a widget should be from the parent widget's edges. The check boxes next to position properties disable them. If you disable the last property on an axis, App Maker automatically enables the opposite property.	top, bottom, left, right
Absolute size	Absolute size properties determine the widget's size, unless the corresponding automatic size property is enabled. The check boxes next to size properties disable them. If you disable an absolute size property, the widget's size is instead determined by that axis's position properties.	width, height
Automatic size	Automatic size properties scale a widget's size automatically based on its content. This property is only available for some widget types, and only if you haven't disabled the corresponding absolute size property.	autoWidth, autoHeight
Size constraints	Size constraint properties set maximum and minimum size constraints on automatically sized and disabled absolute size axes. Enter a value to set the widget's smallest or largest allowed size for a dimension.	minWidth, maxWidth, minHeight, maxHeight

Note: If you disable a widget's absolute size properties in a fixed panel, it can change size relative to the panel. If the containing panel is the canvas, the widget's size shrinks and grows with the user's browser window.

Flow panel Layout properties

Widgets in vertical and horizontal panels also have Layout properties that control their size and position, though the options for controlling position are much more limited than in fixed panels. Flow panel properties are arranged in two columns: horizontal and vertical. Each column controls its respective axis.

Type	Description	Properties
Size	Size controls how the widget's size is set for the each axis. Select from fixed, fit to content, and fill parent.	size
Absolute size	Absolute size properties determine the widget's size when its size properties are fixed.	width, height
Size constraints	Constraint properties set maximum and minimum size constraints when the widget's size properties are fit to content or fill parent.	minWidth, maxWidth, minHeight, maxHeight
Alignment	Alignment controls the position of the non-flowing axis of the panel. It determines the widget's vertical alignment in horizontal panels and its horizontal alignment in vertical ones.	align

Spacing

Use spacing to control the margin and padding of individual widgets.

Type	Description	Properties
Margin	Defines the amount of space between a widget's edges and nearby objects on the page.	margin top, margin bottom, margin left, margin right
Padding	Controls the amount of space between a widget's content and its edges.	padding top, padding bottom, padding left, padding right

Flow properties

Unlike fixed panels, most widget positioning in flow panels happens at the panel level. To position in-flow widgets, use the properties in the parent panel's Flow group:

Property	Description
wrap	This property controls how the panel arranges widgets that would otherwise be wider than its flow axis.
justify	This property controls how the panel arranges widgets along its flow axis.
alignChidren	This property controls how the panel arranges widgets along its non-flow axis.
wrapAlign	This property controls how the panel arranges widgets that wrap, when the wrap property is enabled.

Size properties

The Size property group lists all of the size properties from the Layout group as regular properties. This lets you data bind the properties to dynamically alter their values. The properties in this group are all editable simultaneously, allowing you to potentially set conflicting values. For example, you could set the left, right, and width values to incompatible numbers. App Maker doesn't guarantee consistent behavior for conflicting size properties.

Outline

The Outline tab to the right of the canvas lets you lock or hide widgets. Locked widgets are unselectable on the canvas, preventing you from accidentally moving them. Hidden widgets aren't rendered on the canvas, allowing you to interact with widgets that would otherwise be beneath them. Hidden widgets still display in your app's run time. To reposition or edit a widget that's locked or hidden, select its name from the Outline.