Creating a Dialog

The trick to understanding how dialogs work in Movable Type is in the fact that a dialog is just another web page or mode handled by Movable Type. Like any screen in Movable Type, a dialog is powered by two components: a template that controls the presentation of the dialog, and a handler that controls the data and application logic that makes the dialog perform an action.

Register Your Dialog

Since dialogs are nothing more than a specialized screen in Movable Type, the steps in creating one begin, as always, with registering your mode handler within your config.yaml like so:

name: Example Plugin for Movable Type
id: Example
description: This plugin is an example plugin for Movable Type.
version: 1.0
applications:
    cms:
        methods:
            my_dialog: $Example::Example::Plugin::my_dialog

Your handler then simply loads the template and renders it to the screen. In a moment, you will see a sample template which you can customize to suit your needs. Here is the handler to render your dialog:

sub my_dialog {
    my $app = shift;
    my $plugin = MT->component('Example');
    my $tmpl = $plugin->load_tmpl('dialog.tmpl');
    return $app->build_page( $tmpl );
}

The Dialog Template

Two template modules are made available to dialogs to make styling very simple. The dialog/header.tmpl and dialog/footer.tmpl modules provides the basic Movable Type style chrome for a dialog.

Set the title of the javascript using the page_title variable. Then in between the header.tmpl and footer.tmpl includes, enter any HTML you wish.

Design Consideration: modal dialogs are a fixed width and height and the presence of scroll bars in a dialog is non-optimal. If you require more screen real estate then is alloted by Movable Type, consider turn your modal dialog into a multi-step dialog.

Adding Javascript or CSS to a Dialog

Some dialogs may need additional Javascript or CSS in order to provide functionality that may not be defined by default in the standard dialog header and footer templates. You can however, easily insert your own by appending content to the html_head variable found in the header template as the following sample demonstrates:

<mt:setvarblock name="html_head" append="1">
  <script type="text/javascript">
    <!-- insert javascript here -->
  </script>
  <style>
    <!-- insert CSS here -->
  </style>
</mt:setvarblock>
<mt:include name="dialog/header.tmpl">
<!-- insert your page content here -->
<mt:include name="dialog/footer.tmpl">

Dialog Buttons

If your dialog contains a form, which is often the case, button may be needed in order for the user to advance to the next step in the wizard, or to submit and close the dialog. To insert buttons that are aligned and styled properly at the bottom of the dialog window you will need to encapsulate your buttons with the proper HTML. The following is an excerpt from a template that shows exactly how to style buttons in Movable Type:

<mt:include name="dialog/header.tmpl">
<form ....>
    <!-- insert form fields here -->
    <div class="actions-bar">
        <div class="actions-bar-inner pkg actions">
            <button
                type="button"
                accesskey="s"
                class="primary-button close">Confirm</button>
            <button
                onclick="closeDialog(); return false"
                type="submit"
                class="cancel"
                accesskey="x"
                title="Cancel (x)">Cancel</button>
        </div>
    </div>
</form>
<mt:include name="dialog/footer.tmpl">