Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hacking Movable Type Training - Day 2

7,560 views

Published on

Published in: Technology
  • Be the first to comment

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


×