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
...
Developing
for
Movable
Type
in
2
Days

• Day
2:
Building
User
Interfaces
  ➡ Introduc<on
to
Movable
Type
Applica<ons
  – M...
IntroducBon
to
MT
Apps
• A
collecBon
of
features
that
manifest
in
a
coherent

  interface.
• Each
has
a
dedicated
.cgi
• W...
Example
Apps
•   Atom
‐
Atom
Publishing
Protocol
•   CMS
‐
the
Main
MT
ApplicaBon
•   XML‐RPC
‐
RESTian
interfaces
•   Fee...
Apps
in
the
Registry
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example...
Developing
for
Movable
Type
in
2
Days

• Day
2:
Building
User
Interfaces
  – IntroducBon
to
Movable
Type
ApplicaBons
  ➡ M...
Menus




        Page

Adding
Menus
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example plugin....
Menu
ProperBes
•   label
•   mode
•   dialog
•   order
•   permission
•   args
•   view


                                ...
Developing
for
Movable
Type
in
2
Days

• Day
2:
Building
User
Interfaces
  – IntroducBon
to
Movable
Type
ApplicaBons
  – M...
CreaBng
a
New
Screen
in
the
App
•   Extending
different
apps
•   Registering
a
“mode”
•   ImplemenBng
a
Handler
•   CreaBng...
Registering
a
Mode
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an example p...
Mode
Handlers
package Example::Plugin;
use strict;

sub plugin {
  return MT->component('Example');
}

sub some_mode {
  m...
CreaBng
a
Template
<mt:setvarblock name=quot;page_titlequot;>This is a page
  title</mt:setvarblock>
<mt:include name=quot...
Including
Custom
Javascript
<mt:setvarblock name=quot;page_titlequot;>This is a page title</
   mt:setvarblock>
<mt:setvar...
Forms
<mt:setvarblock name=quot;page_titlequot;>This is a page title</mt:setvarblock>
<mt:include name=quot;include/header...
Working
with
Variables
<mt:setvarblock name=quot;page_titlequot;>This is a page title</mt:setvarblock>
<mt:include name=qu...
Developing
for
Movable
Type
in
2
Days

• Day
2:
Building
User
Interfaces
  – IntroducBon
to
Movable
Type
ApplicaBons
  – M...
Dialogs




          Page

Dialog
Template
<mt:var name=quot;page_titlequot; value=quot;My Dialog Titlequot;>
<mt:include name=quot;dialog/header.tmp...
Dialog
Bu^ons
 <form ....>
        <!-- insert form fields here -->

 
     <div class=quot;actions-barquot;>

 
         ...
Developing
for
Movable
Type
in
2
Days

• Day
2:
Building
User
Interfaces
  – IntroducBon
to
Movable
Type
ApplicaBons
  – M...
LisBng
Screens




                 Page

LisBng
Template
Stub

   <mt:setvar name=quot;page_titlequot; value=quot;My Listingquot;>

   <mt:setvarblock name=quot;ht...
LisBng
Template

   <mtapp:listing type=quot;mybojectquot;

       default=quot;No my objects could be found.quot;

      ...
LisBng
Handler

   sub list_profileevent {

       my $app = shift;

       my %param = @_;


       # Send the user to th...
LisBng
Handler

   
       # %args is used in case you want to sort or otherwise modify the

   
       # query arguments ...
Developing
for
Movable
Type
in
2
Days

• Day
2:
Building
User
Interfaces
  – IntroducBon
to
Movable
Type
ApplicaBons
  – M...
Transformer
Callbacks




                        Page

Callback
Types
• Transform
the
template’s
source:
  – MT::App::CMS::template_source
• Transform
the
template’s
DOM:
  – MT...
Registering
the
Callback
name: Example Plugin for Movable Type
id: Example
key: Example
description: This plugin is an exa...
Regular
Express
Callback
sub my_xfrm_callback {
  my ($cb, $app, $tmpl) = @_;
  my $slug = <<END_TMPL;
A whole bunch of HT...
Thank
you!

    Byrne
Reese
byrne@sixapart.com



                     Page

Upcoming SlideShare
Loading in...5
×

Hacking Movable Type Training - Day 2

6,819

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,819
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
55
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Hacking Movable Type Training - Day 2

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

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

  3. 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. 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. 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. 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. 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. 8. Menus Page

  9. 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. 10. Menu
ProperBes • label • mode • dialog • order • permission • args • view Page

  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. Dialogs Page

  21. 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. 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. 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. 24. LisBng
Screens Page

  25. 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. 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. 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. 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. 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. 30. Transformer
Callbacks Page

  31. 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. 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. 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. 34. Thank
you! Byrne
Reese byrne@sixapart.com Page

  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×