# Find Replace Example

An example demonstrating the layout for a find-replace dialog.

To make the buttons look nice, weak constraints are set requesting that the adjacent buttons have the same width after satisfying all of the other constraints. The left border of the Fields should be aligned. The width taken up by the buttons is controlled by the lower row since the PushButton labels “Replace” and “Replace & Find” take up more space than “Find” and “Find Next”. The lower row’s buttons are not equal widths, because that would take up a bunch of extra space, but the top row’s buttons do expand equally to take up the available space.

Tip

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

    $ enaml-run find_replace.enaml

## Screenshot

## Example Enaml Code

    #------------------------------------------------------------------------------
    # Copyright (c) 2013-2025, 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 demonstrating the layout for a find-replace dialog.

    To make the buttons look nice, weak constraints are set requesting that
    the adjacent buttons have the same width after satisfying all of the
    other constraints. The left border of the Fields should be aligned. The
    width taken up by the buttons is controlled by the lower row since the
    PushButton labels "Replace" and "Replace & Find" take up more space than
    "Find" and "Find Next". The lower row's buttons are not equal widths,
    because that would take up a bunch of extra space, but the top row's
    buttons do expand equally to take up the available space.

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

    enamldef Main(Window):
        title = "Find & Replace"
        Container:
            constraints = [
                vbox(
                    hbox(find, find_next, find_field),
                    hbox(replace, replace_and_find, replace_field),
                ),

                # Setup the alignment of the left of the two fields
                align('left', find_field, replace_field),

                # Setup the vertical aligment of each row of controls
                align('v_center', find, find_next, find_field),
                align('v_center', replace, replace_and_find, replace_field),

                # Setup the weak width constraints of each control
                (find.width == find_next.width) | 'weak',
                (replace.width == replace_and_find.width) | 'weak',
            ]
            PushButton: find:
                text = "Find"
            PushButton: find_next:
                text = "Find Next"
            PushButton: replace:
                text = "Replace"
            PushButton: replace_and_find:
                text = "Replace && Find"
            Field: find_field:
                pass
            Field: replace_field:
                pass