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

../_images/ex_basic.png

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.
#------------------------------------------------------------------------------
""" 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!')