This document provides an overview of building user interfaces for Movable Type applications over two days. Day 2 focuses on menus, new application screens, dialogs, listing screens, and transformer callbacks. Menus can be added to applications via the registry. New screens are created by registering a mode handler and template. Dialogs use a specialized template structure. Listing screens display data in a tabular format using mtapp:listing tags.

1. Hacking Movable Type
Day 2
A guide for developers
Six Apart Ltd.
Page

2. Review
• Day 1: The Basics
– Plugin Structure
– The Registry
– ConfiguraBon DirecBves
– Template Tags
– Objects
– Callbacks
2
Page

3. Developing for Movable Type in 2 Days
• Day 2: Building User Interfaces
➡ Introduc<on to Movable Type Applica<ons
– Menus
– New ApplicaBon Screens
– Dialogs
– LisBng Screens
– Transformer Callbacks
3
Page

4. IntroducBon to MT Apps
• A collecBon of features that manifest in a coherent
interface.
• Each has a dedicated .cgi
• Why?
– Portability
– OpBmizaBon
Page

5. Example Apps
• Atom ‐ Atom Publishing Protocol
• CMS ‐ the Main MT ApplicaBon
• XML‐RPC ‐ RESTian interfaces
• Feeds ‐ AcBvity Feeds
• Search ‐ Blog Side Searching
• Comments ‐ Comment Processing
• More..
Page

6. Apps in the Registry
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example plugin for Movable Type.
version: 1.0
applications:
my_app:
cgi_base:
handler:
methods:
page_actions:
list_actions:
list_filters:
search_apis:
menus:
widgets:
blog_stats_tab:
tags:
import_formats:
Page

7. Developing for Movable Type in 2 Days
• Day 2: Building User Interfaces
– IntroducBon to Movable Type ApplicaBons
➡ Menus
– New ApplicaBon Screens
– Dialogs
– LisBng Screens
– Transformer Callbacks
7
Page

8. Menus
Page

9. Adding Menus
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example plugin.
version: 1.0
applications:
cms:
menus:
create:video:
label: 'Upload Video'
mode: 'video_upload'
order: 301
args:
'_type': quot;blogquot;
permission: 'manage_assets,publish_post'
view: blog
Page

10. Menu ProperBes
• label
• mode
• dialog
• order
• permission
• args
• view
Page

11. Developing for Movable Type in 2 Days
• Day 2: Building User Interfaces
– IntroducBon to Movable Type ApplicaBons
– Menus
➡ New Applica<on Screens
– Dialogs
– LisBng Screens
– Transformer Callbacks
11
Page

12. CreaBng a New Screen in the App
• Extending different apps
• Registering a “mode”
• ImplemenBng a Handler
• CreaBng a template
• Working with Templates
Page

13. Registering a Mode
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example plugin.
version: 1.0
applications:
cms:
methods:
do_something: $Example::Example::Plugin::do_something
Page

14. Mode Handlers
package Example::Plugin;
use strict;
sub plugin {
return MT->component('Example');
}
sub some_mode {
my $app = shift;
my $input = $app->{query}->param('some_form_parameter');
my $plugin = plugin();
my $tmpl = $plugin->load_tmpl('some_template.tmpl');
return $app->build_page( $tmpl );}
}
Page

15. CreaBng a Template
<mt:setvarblock name=quot;page_titlequot;>This is a page
title</mt:setvarblock>
<mt:include name=quot;include/header.tmplquot;>
<p>Hello World!</p>
<mt:include name=quot;include/footer.tmplquot;>
Page

16. Including Custom Javascript
<mt:setvarblock name=quot;page_titlequot;>This is a page title</
mt:setvarblock>
<mt:setvarblock name=quot;html_headquot; append=quot;1quot;>
<script type=quot;text/javascriptquot;>
<!--
function do_something(f) {
alert(quot;Something!quot;);
}
// -->
</script>
</mt:setvarblock>
<mt:include name=quot;include/header.tmplquot;>
Page

17. Forms
<mt:setvarblock name=quot;page_titlequot;>This is a page title</mt:setvarblock>
<mt:include name=quot;include/header.tmplquot;>
<form method=quot;postquot; enctype=quot;multipart/form-dataquot; action=quot;<mt:var name=quot;script_urlquot;>quot;>
<input type=quot;hiddenquot; name=quot;__modequot; value=quot;a_modequot; />
<mt:if name=quot;blog_idquot;>
<input type=quot;hiddenquot; name=quot;blog_idquot; value=quot;<mt:var name=quot;blog_idquot;>quot; />
</mt:if>
<input type=quot;hiddenquot; name=quot;magic_tokenquot; value=quot;<mt:var name=quot;magic_tokenquot;>quot; />
<mtapp:setting
id=quot;some_id_fieldquot;
label=quot;Enter text herequot;
hint=quot;Yay, text.quot;
content_class=quot;field-content-textquot;>
<input type=quot;textquot; name=quot;fooquot; size=quot;30quot; />
</mtapp:setting>
<mt:setvarblock name=quot;action_buttonsquot;>
<button
type=quot;submitquot;
accesskey=quot;squot;
title=quot;Continue (s)quot;
class=quot;primary-buttonquot;>Continue</button>
</mt:setvarblock>
<mt:include name=quot;include/actions_bar.tmplquot; bar_position=quot;bottomquot; hide_pager=quot;1quot; settings_bar=quot;1quot;>
</form>
<mt:include name=quot;include/footer.tmplquot;>
Page

18. Working with Variables
<mt:setvarblock name=quot;page_titlequot;>This is a page title</mt:setvarblock>
<mt:include name=quot;include/header.tmplquot;>
<p>Hello <mt:var name=quot;personquot;>!</p>
<mt:include name=quot;include/footer.tmplquot;>
sub some_mode {
my $app = shift;
my $input = $app->{query}->param('some_form_parameter');
my $plugin = plugin();
my $param = {};
$param->{person} = quot;Byrne”;
my $tmpl = $plugin->load_tmpl('some_template.tmpl');
return $app->build_page( $tmpl, $param );
}
Page

19. Developing for Movable Type in 2 Days
• Day 2: Building User Interfaces
– IntroducBon to Movable Type ApplicaBons
– Menus
– New ApplicaBon Screens
➡ Dialogs
– LisBng Screens
– Transformer Callbacks
19
Page

20. Dialogs
Page

21. Dialog Template
<mt:var name=quot;page_titlequot; value=quot;My Dialog Titlequot;>
<mt:include name=quot;dialog/header.tmplquot;>
<!-- insert your page content here -->
<mt:include name=quot;dialog/footer.tmplquot;>
Page

22. Dialog Bu^ons
<form ....>
<!-- insert form fields here -->
<div class=quot;actions-barquot;>
<div class=quot;actions-bar-inner pkg actionsquot;>
<button
type=quot;buttonquot;
accesskey=quot;squot;
class=quot;primary-button closequot;>Confirm</button>
<button
onclick=quot;closeDialog(); return falsequot;
type=quot;submitquot;
class=quot;cancelquot;
accesskey=quot;xquot;
title=quot;Cancel (x)quot;>Cancel</button>
</div>
</div>
</form>
Page

23. Developing for Movable Type in 2 Days
• Day 2: Building User Interfaces
– IntroducBon to Movable Type ApplicaBons
– Menus
– New ApplicaBon Screens
– Dialogs
➡ Lis<ng Screens
– Transformer Callbacks
23
Page

24. LisBng Screens
Page

25. LisBng Template Stub
<mt:setvar name=quot;page_titlequot; value=quot;My Listingquot;>
<mt:setvarblock name=quot;html_headquot; append=quot;1quot;></mt:setvarblock>
<mt:setvarblock name=quot;system_msgquot;></mt:setvarblock>
<mt:setvarblock name=quot;related_contentquot;></mt:setvarblock>
<mt:setvarblock name=quot;html_body_footerquot;>
<mt:include name=quot;include/display_options.tmplquot;>
</mt:setvarblock>
<mt:setvarblock name=quot;action_buttonsquot;></mt:setvarblock>
<mt:include name=quot;include/header.tmplquot;>
<div class=quot;listing-filterquot;>
<div class=quot;listing-filter-inner inner pkgquot;></div>
</div>
<mtapp:listing id=“my-table-id” type=quot;profileeventquot;
default=quot;No events could be found.quot;
empty_message=quot;No events could be found.quot;>
</mtapp:listing>
<mt:include name=quot;include/footer.tmplquot;>
Page

26. LisBng Template
<mtapp:listing type=quot;mybojectquot;
default=quot;No my objects could be found.quot;
empty_message=quot;No my objects could be found.quot;>
<mt:if name=quot;__first__quot;>
<thead>
<tr>
<th class=quot;cbquot;><input type=quot;checkboxquot; id=quot;select-all-checkboxquot;
name=quot;id-headquot; value=quot;allquot; class=quot;selectquot; /></th>
<th>Column 1</th>
<th>Column 2</th>
<th>A Date</th>
</tr>
</thead>
<tbody>
</mt:if>
<tr class=quot;<mt:if name=quot;__odd__quot;>odd<mt:else>even</mt:if>quot;>
<td class=quot;cbquot;>
<input type=quot;checkboxquot; name=quot;idquot;
value=quot;<mt:var name=quot;idquot;>quot; class=quot;selectquot; />
</td>
<td><mt:var name=quot;column1quot; remove_html=quot;1quot;></td>
<td><mt:var name=quot;column2quot; remove_html=quot;1quot;></td>
<td><mt:var name=quot;datequot; remove_html=quot;1quot;></td>
</tr>
</mtapp:listing>
Page

27. LisBng Handler
sub list_profileevent {
my $app = shift;
my %param = @_;
# Send the user to the dashboard if no blog ID has been provided.
$app->return_to_dashboard( redirect => 1 ) if $app->param('blog_id');
my %service_styles;
my @service_styles_loop;
# This anonymous subroutine will process each row of data. It takes
# as input the object associated with the current row, and an empty
# hash for the row that should be populated with content from the
# $obj passed to it.
my $code = sub {
my ($obj, $row) = @_;
$row->{'column1'} = $obj->some_property;
$row->{'column2'} = $obj->another_property;
my $ts = $row->{created_on};
$row->{date} = relative_date($ts, time);
};
# %terms is used in case you want to filter the contents of the
# table in someway
my %terms = (
author_id => $app->user->id,
);
Page

28. LisBng Handler
# %args is used in case you want to sort or otherwise modify the
# query arguments of the table
my %args = (
sort => 'created_on',
direction => 'descend',
);
# %params is an addition hash of input parameters into the template
# and can be used to hold an arbitrary set of name/value pairs that
# can be displayed in your template.
my %params = (
some_variable => 'You can do ANYTHING in Movable Type',
);
# Fetch an instance of the current plugin using the plugin's key
my $plugin = MT->component('Example');
# The main work horse of your handler. This will actually conduct
# the query to the database for you, populate all that is necessary
# for the pagination controls and more. The query is filtered and
# controlled using the %terms and %args parameters.
$app->listing({
type => 'myobject', # the ID of the object in the registry
terms => %terms,
args => %args,
listing_screen => 1,
code => $code,
template => $plugin->load_tmpl('my_table.tmpl'),
params => %params,
});
}
Page

29. Developing for Movable Type in 2 Days
• Day 2: Building User Interfaces
– IntroducBon to Movable Type ApplicaBons
– Menus
– New ApplicaBon Screens
– Dialogs
– LisBng Screens
➡ Transformer Callbacks
29
Page

30. Transformer Callbacks
Page

31. Callback Types
• Transform the template’s source:
– MT::App::CMS::template_source
• Transform the template’s DOM:
– MT::App::CMS::template_param
• Transform the template’s output:
– MT::App::CMS::template_output
Page

32. Registering the Callback
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example.
version: 1.0
callbacks:
MT::App::CMS::template_source.edit_entry:
$Example::Example::Plugin::xfrm
Page

33. Regular Express Callback
sub my_xfrm_callback {
my ($cb, $app, $tmpl) = @_;
my $slug = <<END_TMPL;
A whole bunch of HTML here
END_TMPL
$$tmpl =~ s/(<li>Utilitiesn<ul class=quot;subquot;>)/$1$slug/;
}
Page

34. Thank you!
Byrne Reese
byrne@sixapart.com
Page