6 - Parent

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

Creating a Component

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:

1. Create a new component named MeasurementDisplay

2. Drop two Text objects in the newly-created component

3. Name the first ValueText

4. Name the second UnitsDisplay

Positioning according to a parent

Next we'll make the UnitsDisplay use the ValueText as its parent:

1. Select the UnitsDisplay Text instance

2. Change its Parent to ValueText

3. Change its X Units to Pixels From Right. This makes the text object positioned according to its parent's right edge

4. Change its X to 10 . This means the UnitsDisplay text is 10 units offset from the right edge of its parent ValueText

5. Verify its Y is 0

The ValueText actual width should be based on its contents, so we'll do the following:

1. Select ValueText

2. Change Width Units to Relative to Children

3. Change Width to 0

By setting these values, ValueText is now sized according to its children, which in this case are its letters.

You 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 Width Units page.

Adjusting Colors

Now that we have adjusted the position, size, and parent values on our Text instances, let's modify the color of the UnitsDisplay:

1. Select the UnitsDisplay

2. Change Red to 200

3. Change Green to 150

4. Change Blue to 0

Changing ValueText

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.

Width and Effective Width

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.