Centered Grid Example

An example of how to express constraints with respect to helpers attributes

The layour in this example illustrates how to access and use the attributes of helpers to complex layouts. All helpers expose the same attributes (left, right, top, bottom, width, height, h_center, v_center) as any widget.

Tip

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

$ enaml-run centered_grid.enaml

Screenshot

Example Enaml Code

#------------------------------------------------------------------------------
# Copyright (c) 2013, 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 of how to express constraints with respect to helpers attributes

The layour in this example illustrates how to access and use the attributes of
helpers to complex layouts. All helpers expose the same attributes (left,
right, top, bottom, width, height, h_center, v_center) as any widget.

<< autodoc-me >>
"""
from enaml.layout.api import grid, hbox, spacer, align
from enaml.widgets.api import Window, Container, Label, PushButton


enamldef Main(Window):
    Container:
        layout_constraints => ():
            g = grid((lbl_a, lbl_b, lbl_c),
                        (lbl_d, lbl_e, lbl_f),
                        (lbl_g, lbl_g, lbl_g),
                        (btn_1, btn_2, btn_3))
            constraints = [hbox(spacer,g, spacer) ,
                           align('h_center', g, contents_h_center)
            ]
            return constraints
        Label: lbl_a:
            text = "Label A"
        Label: lbl_b:
            text = "Label B"
        Label: lbl_c:
            text = "Label C"
        Label: lbl_d:
            text = "Label D"
        Label: lbl_e:
            text = "Label E"
        Label: lbl_f:
            text = "Label F"
        Label: lbl_g:
            text = "Label G"
        PushButton: btn_1:
            text = "Button 1"
        PushButton: btn_2:
            text = "Button 2"
        PushButton: btn_3:
            text = "Button 3"