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.
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:
|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.||
|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.||
|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.||
|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.||
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.
|Size||Size controls how the widget's size is set for the each axis. Select from
|Absolute size||Absolute size properties determine the widget's size when its
|Size constraints||Constraint properties set maximum and minimum size constraints when the widget's
|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.||
Use spacing to control the margin and padding of individual widgets.
|Margin||Defines the amount of space between a widget's edges and nearby objects on the page.|
|Padding||Controls the amount of space between a widget's content and its edges.||
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:
||This property controls how the panel arranges widgets that would otherwise be wider than its flow axis.|
||This property controls how the panel arranges widgets along its flow axis.|
||This property controls how the panel arranges widgets along its non-flow axis.|
||This property controls how the panel arranges widgets that wrap, when the
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
width values to incompatible numbers. App Maker doesn't guarantee consistent behavior for conflicting size properties.
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.