GroupLayout

[Updownquark]

Parent:

• layout constraints on groups

Children:

• h-group or v-group
• align and cross-align
• All size attributes

Use an algorithm to harmonize all the constraints

E.g. to create a UI like this:

|---------------------------------------|
|         Enter Your Information        |
|    Name:[                            ]|
|     DOB:[Month        \/][DD][YYYY \/]|
|  Height:[                       ] m   |
|  Weight:[                       ] lbs.|
|---------------------------------------|

the QML would look like this:

<block layout="group-layout" direction="down">
    <label align="center">Enter Your Information</label>
    <group align="justify" direction="right">
        <group direction="down">
            <label h-group="name" align="trailing">Name:</label>
            <label h-group="dob" align="trailing">DOB:</label>
            <label h-group="height" align="trailing">Height:</label>
            <label h-group="weight" align="trailing">Weight:</label>
        </group>
        <group direction="down">
            <text-field h-group="name" value="selected.name" />
            <group h-group="dob" direction="right" align="justify">
                <select values="constants.months" selected="selected.dobMonth" />
                <text-field value="selected.dobDay" />
                <select value="constants.dobYears" selected="selected.dobYear" />
            </group>
            <group h-group="height" direction="right" align="justify">
                <spinner value="selected.height" />
                <label v-group="unit">m</label>
            </group>
            <group h-group="weight" direction="right" align="justify">
                <spinner value="selected.weight" />
                <label v-group="unit">lbs.</label>
            </group>
        </group>
    </group>
</block>

[Updownquark]

group elements:

• Would throw an error if specified outside of a group-layout context.
• Would return a max value preferred size so the SizeNeedsChangedEvent would bubble up to the element specifying the layout