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

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

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

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

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

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

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

Menus
Page

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': \"blog\"
permission: 'manage_assets,publish_post'
view: blog
Page

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

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

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

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

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

CreaBng a Template
<mt:setvarblock name=\"page_title\">This is a page
title</mt:setvarblock>
<mt:include name=\"include/header.tmpl\">
<p>Hello World!</p>
<mt:include name=\"include/footer.tmpl\">
Page

Including Custom Javascript
<mt:setvarblock name=\"page_title\">This is a page title</
mt:setvarblock>
<mt:setvarblock name=\"html_head\" append=\"1\">
<script type=\"text/javascript\">
<!--
function do_something(f) {
alert(\"Something!\");
}
// -->
</script>
</mt:setvarblock>
<mt:include name=\"include/header.tmpl\">
Page

Forms
<mt:setvarblock name=\"page_title\">This is a page title</mt:setvarblock>
<mt:include name=\"include/header.tmpl\">
<form method=\"post\" enctype=\"multipart/form-data\" action=\"<mt:var name=\"script_url\">\">
<input type=\"hidden\" name=\"__mode\" value=\"a_mode\" />
<mt:if name=\"blog_id\">
<input type=\"hidden\" name=\"blog_id\" value=\"<mt:var name=\"blog_id\">\" />
</mt:if>
<input type=\"hidden\" name=\"magic_token\" value=\"<mt:var name=\"magic_token\">\" />
<mtapp:setting
id=\"some_id_field\"
label=\"Enter text here\"
hint=\"Yay, text.\"
content_class=\"field-content-text\">
<input type=\"text\" name=\"foo\" size=\"30\" />
</mtapp:setting>
<mt:setvarblock name=\"action_buttons\">
<button
type=\"submit\"
accesskey=\"s\"
title=\"Continue (s)\"
class=\"primary-button\">Continue</button>
</mt:setvarblock>
<mt:include name=\"include/actions_bar.tmpl\" bar_position=\"bottom\" hide_pager=\"1\" settings_bar=\"1\">
</form>
<mt:include name=\"include/footer.tmpl\">
Page

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

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

Dialogs
Page

Dialog Template
<mt:var name=\"page_title\" value=\"My Dialog Title\">
<mt:include name=\"dialog/header.tmpl\">
<!-- insert your page content here -->
<mt:include name=\"dialog/footer.tmpl\">
Page

Dialog Bu^ons
<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>
Page

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

LisBng Screens
Page

LisBng Template Stub
<mt:setvar name=\"page_title\" value=\"My Listing\">
<mt:setvarblock name=\"html_head\" append=\"1\"></mt:setvarblock>
<mt:setvarblock name=\"system_msg\"></mt:setvarblock>
<mt:setvarblock name=\"related_content\"></mt:setvarblock>
<mt:setvarblock name=\"html_body_footer\">
<mt:include name=\"include/display_options.tmpl\">
</mt:setvarblock>
<mt:setvarblock name=\"action_buttons\"></mt:setvarblock>
<mt:include name=\"include/header.tmpl\">
<div class=\"listing-filter\">
<div class=\"listing-filter-inner inner pkg\"></div>
</div>
<mtapp:listing id=“my-table-id” type=\"profileevent\"
default=\"No events could be found.\"
empty_message=\"No events could be found.\">
</mtapp:listing>
<mt:include name=\"include/footer.tmpl\">
Page

LisBng Template
<mtapp:listing type=\"myboject\"
default=\"No my objects could be found.\"
empty_message=\"No my objects could be found.\">
<mt:if name=\"__first__\">
<thead>
<tr>
<th class=\"cb\"><input type=\"checkbox\" id=\"select-all-checkbox\"
name=\"id-head\" value=\"all\" class=\"select\" /></th>
<th>Column 1</th>
<th>Column 2</th>
<th>A Date</th>
</tr>
</thead>
<tbody>
</mt:if>
<tr class=\"<mt:if name=\"__odd__\">odd<mt:else>even</mt:if>\">
<td class=\"cb\">
<input type=\"checkbox\" name=\"id\"
value=\"<mt:var name=\"id\">\" class=\"select\" />
</td>
<td><mt:var name=\"column1\" remove_html=\"1\"></td>
<td><mt:var name=\"column2\" remove_html=\"1\"></td>
<td><mt:var name=\"date\" remove_html=\"1\"></td>
</tr>
</mtapp:listing>
Page

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

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

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

Transformer Callbacks
Page

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

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

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>Utilities\\n<ul class=\\\"sub\\\">)/$1$slug/;
}
Page

Thank you!
Byrne Reese
byrne@sixapart.com
Page