6 - Parent
Last updated
Was this helpful?
Last updated
Was this helpful?
Introduction
The Components tutorial shows how Text and ColoredRectangle instances can be sized and positioned according to the Button that they are a part of. Instances can use other instances as their parents. Gum does not place a limit to the depth of the parent/child hierarchy, enabling flexible and responsive layouts through.
Parent/child relationships are useful for
Automatically adjusting margins and backgrounds
Word-wrapping text relative to a parent
Stacking objects on top of each other or side by side
Placing objects next to other objects which are dynamically sized
Creating tables and other complicated layout objects
For this example we'll create a Component for displaying distance. This component has two Text instances:
ValueText - the Text instance responsible for displaying the value for the distance. For example "100".
UnitsDisplay - the Text instance responsible for displaying the units for the distance. For example "km" for kilometers.
The two Text instances will have different colors so that ValueText stands out.
To create our component:
Create a new component named MeasurementDisplay
Drop two Text objects in the newly-created component
Name the first ValueText
Name the second UnitsDisplay
Next we'll make the UnitsDisplay use the ValueText as its parent:
Select the UnitsDisplay Text instance
Change its Parent to ValueText
Change its X Units to Pixels From Right. This makes the text object positioned according to its parent's right edge
Change its X to 10 . This means the UnitsDisplay text is 10 units offset from the right edge of its parent ValueText
Verify its Y is 0
The ValueText actual width should be based on its contents, so we'll do the following:
Select ValueText
Change Width Units to Relative to Children
Change Width to 0
By setting these values, ValueText is now sized according to its children, which in this case are its letters.
Now that we have adjusted the position, size, and parent values on our Text instances, let's modify the color of the UnitsDisplay:
Select the UnitsDisplay
Change Red to 200
Change Green to 150
Change Blue to 0
Now that we have set up a parent/child relationship between ValueText and UnitsDisplay, UnitsDisplay automatically adjusts its position in response to changes in ValueText. Any change on ValueText resulting in the right-side of the parent changing automatically adjusts the position of UnitsDisplay.
For example, if we change the Text property on ValueText, it grows or shrinks in response.
As mentioned above, changing the Text property causes ValueText to grow or shrink. However, regardless of its size, the Width property is still set to 0.
The Width variable is used in combination with its Width Units to calculate an effective width. In this case, the effective width is determined by the Text property on ValueText. It's important to note that all Gum objects have effective values for x, y, width, and height, all of which are determined by their respective units values.
Children always depend on their parents' effective values rather than their explicitly set values. Gum helps us visualize the effective values when we mouse over one of the resize handles on the selected object. For example, the following image shows the Width, Width Units, and effective width values of our ValueText.
Width and Width Units set to size ValueText according to its contained Text variableYou may have noticed that UnitsDisplay is also a child of the ValueText. However, since UnitsDisplay is explicitly positioned outside of the bounds of its parent ValueText, then ValueText ignores this child when calculating its own Width. For a detailed discussion of Width Units and whether children are ignored, see the page.
Width is 0, Width Units is Relative To Children, effective width is 65
