Linear Relations Example

An example which demonstrates linear relational constraints.

This example shows how one may define a constraint as a linear relation of some other constraint. In this example, the horizontal position and width of a PushButton depends up the width of the Container, and the vertical position of another PushButton depends upon the width of the other PushButton.

This is a contrieved example, but serves to demonstrate the feature.

Tip

To see this example in action, download it from linear_relations and run:

$ enaml-run linear_relations.enaml

Screenshot

Example Enaml Code

#------------------------------------------------------------------------------
# Copyright (c) 2013-2024, Nucleic Development Team.
#
# Distributed under the terms of the Modified BSD License.
#
# The full license is in the file LICENSE, distributed with this software.
#------------------------------------------------------------------------------
""" An example which demonstrates linear relational constraints.

This example shows how one may define a constraint as a linear relation
of some other constraint. In this example, the horizontal position and
width of a `PushButton` depends up the width of the `Container`, and the
vertical position of another `PushButton` depends upon the width of the
other `PushButton`.

This is a contrieved example, but serves to demonstrate the feature.

<< autodoc-me >>
"""
from enaml.widgets.api import Window, Container, PushButton


enamldef Main(Window):
    Container:
        constraints = [
            # Pin the first push button to the top contents anchor.
            pb1.top == contents_top,

            # Relate the left side of the push button to the width
            # of the container.
            pb1.left == 0.3 * width,

            # Relate the width of the push button to the width of
            # the container
            pb1.width == 0.5 * width,

            # Pin the second push button to the left contents anchor.
            pb2.left == contents_left,

            # Relate the top of the push button to width of the first
            # push button.
            pb2.top == 0.3 * pb1.width + 10
        ]
        PushButton: pb1:
            text = 'Horizontal'
        PushButton: pb2:
            text = 'Long Name Foo'