# Basic Example

A basic example of Enaml templates.

This example shows how Enaml templates can be used to define a control “template” and then populate that template with user-defined widgets.

Tip

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

    $ enaml-run basic.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.
    #------------------------------------------------------------------------------
    """ A basic example of Enaml templates.

    This example shows how Enaml templates can be used to define a control
    "template" and then populate that template with user-defined widgets.

    << autodoc-me >>
    """
    from atom.api import Atom, Str

    from enaml.layout.api import vbox, hbox, spacer
    from enaml.widgets.api import Container, PushButton, Html, Window

    template OkCancelPanel(Content):
        """ Create a container with Ok | Cancel buttons.

        The generated panel will contain Ok and Cancel buttons in the
        lower right-hand corner. The panel exposes two button clicked
        events named (appropriately) 'ok_clicked' and 'cancel_clicked'.
        The user provided widget is aliased as 'content'.

        Parameters
        ----------
        Content : widget type
            A widget which will be used as the central content of the
            panel.

        """
        Container:
            alias content
            event ok_clicked
            event cancel_clicked
            constraints = [
                vbox(content, hbox(spacer, ok, cancel))
            ]
            Content: content:
                pass
            PushButton: ok:
                text = 'Ok'
                clicked :: ok_clicked()
            PushButton: cancel:
                text = 'Cancel'
                clicked :: cancel_clicked()

    class SampleModel(Atom):
        """ A sample model which is used to bind data to the content.

        """
        #: The string to display in the content.
        text = Str()

    enamldef SampleContent(Html):
        """ A sample widget used as the content of the button panel.

        """
        attr model: SampleModel
        source = "<h1><center>%s</center></h1>" % model.text

    enamldef Main(Window):
        """ The main application window.

        This window uses a ButtonPanel instantiated with SampleContent
        as the central widget. The click handlers for the panel buttons
        are bound to print a message to the shell.

        """
        title = 'Basic Templates'
        OkCancelPanel(SampleContent): panel:
            panel.padding = 5
            panel.content.model = SampleModel(text='Hello Templates')
            panel.ok_clicked :: print('Ok clicked!')
            panel.cancel_clicked :: print('Cancel clicked!')