Page

SixApartLtd.

HackingMovableTypeDay2

Aguidefordevelopers

Page

Review

• Day1:TheBasics– PluginStructure

– TheRegistry

– ConfiguraBonDirecBves

– TemplateTags

– Objects

– Callbacks

2

Page

DevelopingforMovableTypein2Days

• Day2:BuildingUserInterfaces➡ Introduc<ontoMovableTypeApplica<ons

– Menus

– NewApplicaBonScreens

– Dialogs

– LisBngScreens

– TransformerCallbacks

3

Page

IntroducBontoMTApps

• AcollecBonoffeaturesthatmanifestinacoherentinterface.

• Eachhasadedicated.cgi• Why?– Portability– OpBmizaBon

Page

ExampleApps

• Atom‐AtomPublishingProtocol• CMS‐theMainMTApplicaBon• XML‐RPC‐RESTianinterfaces• Feeds‐AcBvityFeeds• Search‐BlogSideSearching• Comments‐CommentProcessing• More..

Page

AppsintheRegistry

name: Example Plugin for Movable Typeid: Examplekey: Exampledescription: This plugin is an example plugin for Movable Type.version: 1.0applications: my_app: cgi_base: handler: methods: page_actions: list_actions: list_filters: search_apis: menus: widgets: blog_stats_tab: tags: import_formats:

Page

DevelopingforMovableTypein2Days

• Day2:BuildingUserInterfaces– IntroducBontoMovableTypeApplicaBons

➡ Menus

– NewApplicaBonScreens

– Dialogs

– LisBngScreens

– TransformerCallbacks

7

Page

Menus

Page

AddingMenus

name: Example Plugin for Movable Typeid: Examplekey: Exampledescription: This plugin is an example plugin. version: 1.0applications: cms: menus: create:video: label: 'Upload Video' mode: 'video_upload' order: 301 args: '_type': "blog" permission: 'manage_assets,publish_post' view: blog

Page

MenuProperBes

• label

• mode

• dialog

• order

• permission

• args

• view

Page

DevelopingforMovableTypein2Days

• Day2:BuildingUserInterfaces– IntroducBontoMovableTypeApplicaBons

– Menus

➡ NewApplica<onScreens

– Dialogs

– LisBngScreens

– TransformerCallbacks

11

Page

CreaBngaNewScreenintheApp

• Extendingdifferentapps

• Registeringa“mode”

• ImplemenBngaHandler

• CreaBngatemplate

• WorkingwithTemplates

Page

RegisteringaMode

name: Example Plugin for Movable Typeid: Examplekey: Exampledescription: This plugin is an example plugin.version: 1.0applications: cms: methods: do_something: $Example::Example::Plugin::do_something

Page

ModeHandlers

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

CreaBngaTemplate

<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

IncludingCustomJavascript

<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

WorkingwithVariables

<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

DevelopingforMovableTypein2Days

• Day2:BuildingUserInterfaces– IntroducBontoMovableTypeApplicaBons

– Menus

– NewApplicaBonScreens

➡ Dialogs

– LisBngScreens

– TransformerCallbacks

19

Page

Dialogs

Page

DialogTemplate

<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

DialogBu^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

DevelopingforMovableTypein2Days

• Day2:BuildingUserInterfaces– IntroducBontoMovableTypeApplicaBons

– Menus

– NewApplicaBonScreens

– Dialogs

➡ Lis<ngScreens

– TransformerCallbacks

23

Page

LisBngScreens

Page

LisBngTemplateStub <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

LisBngTemplate <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

LisBngHandler 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

LisBngHandler # %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

DevelopingforMovableTypein2Days

• Day2:BuildingUserInterfaces– IntroducBontoMovableTypeApplicaBons

– Menus

– NewApplicaBonScreens

– Dialogs

– LisBngScreens

➡ TransformerCallbacks

29

Page

TransformerCallbacks

Page

CallbackTypes

• Transformthetemplate’ssource:–MT::App::CMS::template_source

• Transformthetemplate’sDOM:–MT::App::CMS::template_param

• Transformthetemplate’soutput:–MT::App::CMS::template_output

Page

RegisteringtheCallback

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

RegularExpressCallback

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

Thankyou!

ByrneReesebyrne@sixapart.com