Building on Movable Type Part 1: A Look Inside Media Manager

When people hear the words “Movable Type" more often than not they think about blogging. This is, of course, absolutely correct, because in its heart Movable Type is first and foremost blogging software. But at its core, Movable Type is so much more than that.

Ben and Mena envisioned Movable Type not just as a piece of blogging software, but as a “Publishing Platform." But what does that mean?

Movable Type provides a number of different mechanisms for developers to extend Movable Type’s functionality in order to create cool new template tags and text filters to control the content published to a blog, callback hooks for data pre- and post-processing, and plugin actions to surface links and functionality deep within the application.

This is the first in a series of articles in which I relate some of my own experiences while building Media Manager, a Movable Type plugin that allows users to manage a queue of books, CDs, DVDs, and virtually anything within Amazon’s product catalog. In the process I will share with you what I have learned about Movable Type’s architecture, tips and tricks on how to integrate with Movable Type more seamlessly, and how you can make the most out of the Movable Type as a software platform.

Tip #1: Borrow from Movable Type’s User Interface

One of the most important things in trying to make a plugin feel like a natural extension of the platform you are building on is to make it look and behave like that platform. You should want your plugin to feel so natural to a user that they stop thinking about your plugin as a “plugin" and instead as “just another part of the app."

The first and most relatively straight forward thing you can do is to borrow its page structure, its class structure, and its stylesheet information. Mimicking Movable Type’s user interface has the advantage of making your application more “usable�? almost instantaneously. Why? Because to some extent usability is judged by how predictable your application is. And, if a user of your application understands intuitively how your application will work, by virtue of having seen and used Movable Type, then Movable Type has already done a lot of the heavy lifting for you.

But from a developer’s stand point, re-using Movable Type’s page structure, javascript classes, and style sheet information, is beneficial because you can save yourself a lot of time by not having to re-invent the wheel. Re-using these features allows you to take advantage of a shared code base that contains many UI tricks and features that are native to the Movable Type platform.

Displaying tabular data is a perfect example of how, with very little effort, you can develop complicated javascript interactions by simply re-using existing CSS classes and javascript functions.

Hacking HTML Tables

Movable Type ships with several style sheets and javascript source files that have been put tested thoroughly to ensure the broadest support for as many platforms and browsers as possible. Known internally as “TypeCore," this set of classes and javascript functions form the foundation on which Movable Type is built. Six Apart engineered TypeCore in such a way to maximize re-use and portability of the code.

I have found that the TypeCore classes are equally useful and valuable to me in developing plugins as they are to the Movable Type development team in building MT.

In Media Manager for example, I just used the same HTML structure and class names, made sure my plugin included the necessary CSS and Javascript files, and presto, my HTML tables instantly had multi-row selection capabilities, shift-select capabilities, cool row highlighting and selection features, alternating background colors, etc. My tables looked, felt like, and behaved like every other table in Movable Type.

To mimic Movable Type’s page structure don’t copy and paste raw HTML. In stead, find the .tmpl file corresponding to the screen you wish to mimic and copy it to your plugin’s local tmpl directory. Then substitute MT’s data with yours. Doing so makes sure all the template tags are retained to maximize the portability of your plugin.

Next Time: Hacking Custom “Display Options�?

In the next post in this series we will begin to dive a little deeper and show how you can repurpose existing Movable Type UI widgets for your own purpose. Specifically we will look at the “Display Options" widget found at the bottom of every Movable Type table and how you can use it to store user preferences of any kind.