VerticalLayoutData: add "indent" property

[kevinfoley]

Say that we are building a settings form. Such forms are often staggered, with sub-items indented further than their parent items:

Here, the two checkboxes are indented because they fall under the "Connection" section, and the two numeric steppers are indented further because they are only available when their respective checkbox is checked.

Such a simple layout requires a lot of tedious boilerplate in Feathers:

<f:layout>
        <f:AnchorLayout />
</f:layout>

<f:Label id="lblSectionHeading" text="Connection" styleName="{Label.ALTERNATE_STYLE_NAME_HEADING}">
	<f:layoutData>
		<f:AnchorLayoutData top="10" left="10" />
	</f:layoutData>
</f:Label>
<f:Check id="cbLimit" label="Limit Maximum Connections" >
	<f:layoutData>
		<f:AnchorLayoutData top="10" left="20" topAnchorDisplayObject="{lblSectionHeading}" />
	</f:layoutData>
</f:Check>
<f:NumericStepper id="nsLimit" minimum="1" maximum="10" step="1" value="1" isEnabled="{cbLimit.isSelected}">
	<f:layoutData>
		<f:AnchorLayoutData top="10" left="40" topAnchorDisplayObject="{cbLimit}" />
	</f:layoutData>
</f:NumericStepper>
<f:Check id="cbDisconnect" label="Disconnect after hours idle" >
	<f:layoutData>
		<f:AnchorLayoutData top="10" left="20" topAnchorDisplayObject="{nsLimit}" />
	</f:layoutData>
</f:Check>
<f:NumericStepper id="nsDisconnect" minimum="1" maximum="24" step="1" value="1" isEnabled="{cbDisconnect.isSelected}">
	<f:layoutData>
		<f:AnchorLayoutData top="10" left="40" topAnchorDisplayObject="{cbDisconnect}" />
	</f:layoutData>
</f:NumericStepper>

Using this approach, we have to update the "topAnchorDisplayObject" every time we add new controls or change the order of existing controls.

It would be much simpler to build such a form if VerticalLayoutData had an indent property:

<f:layout>
        <f:VerticalLayout gap="10"/>
</f:layout>

<f:Label id="lblSectionHeading" text="Connection" styleName="{Label.ALTERNATE_STYLE_NAME_HEADING}" />
<f:Check id="cbLimit" label="Limit Maximum Connections" >
	<f:layoutData>
		<f:VerticalLayoutData indent="20"/>
	</f:layoutData>
</f:Check>
<f:NumericStepper id="nsLimit" minimum="1" maximum="10" step="1" value="1" isEnabled="{cbLimit.isSelected}">
	<f:layoutData>
		<f:VerticalLayoutData indent="20"/>
	</f:layoutData>
</f:NumericStepper>
<f:Check id="cbDisconnect" label="Disconnect after hours idle" >
	<f:layoutData>
		<f:VerticalLayoutData indent="20"/>
	</f:layoutData>
</f:Check>
<f:NumericStepper id="nsDisconnect" minimum="1" maximum="24" step="1" value="1" isEnabled="{cbDisconnect.isSelected}">
	<f:layoutData>
		<f:VerticalLayoutData indent="20"/>
	</f:layoutData>
</f:NumericStepper>

[joshtynjala]

You could wrap the items that you want to indent in containers like this:

<f:LayoutGroup>
	<f:Check id="cbLimit" label="Limit Maximum Connections" x="20"/>
</f:LayoutGroup>
<f:LayoutGroup>
	<f:NumericStepper id="nsLimit" minimum="1" maximum="10" step="1" value="1" isEnabled="{cbLimit.isSelected}" x="40"/>
</f:LayoutGroup>

Alternatively, you could display them in a List, and use multiple item renderer types. Each could have different paddingLeft values.