Overview

To use TPT on your site, you need to do a few things:

1. Pick a template from our template directory.
2. Create a 'recipe' — JavaScript which identifies the content which should be printed.
3. Include your recipe in the head of your page.
4. Create a Print link that invokes the TPT harvesting code using a HP Print button as seen below.

The details of each of these steps are below.

When a user clicks the TPT print button, it invokes your harvesting recipe. The recipe directs TPT to collect portions of your web page, and ignore others. The harvested data is sent to the Tabblo servers, where it is used to prepare thumbnails of possible layouts. The TPT code presents the thumbnails to the user in a pop-up div on your site.

When the user clicks on a layout choice, they are actually visiting a URL on the TPT server to create a full PDF of your page in the chosen layout. The PDF is displayed in a browser window, and the Print dialog is automatically displayed.

Creating your recipe

The harvesting recipe is similar to a print CSS stylesheet: it is a list of what parts of the site to include, and what parts to ignore. A key difference from CSS is that the harvesting recipe assigns content names to the various harvested chunks, so that the layout engine in the TPT server can know what content should go where.

Here's an example of a harvesting recipe, for a blog site. This goes in the head section of your page:

<script>
function __TABBLO_TPT_LOAD() {
    Tabblo.embedded.sites.SettingsObject.preprocess.apply({
        // content definition:
        Content:
        {
            'menu':      { match: 'css', selector: 'td#menu', ignore: true },
            'grouping':  { match: 'css', selector: 'div.head', recurse: true, ignore: true, continueHooks: true },
            'pagetitle': { match: 'css', selector: 'span.headslug' },
            'title':     { match: 'css', selector: 'h3.title' },
            'text':      { match: 'css', selector: '.blog-entry>p, .blog-entry>ul, .blog-entry>ol, .blog-entry>blockquote', outputTagToo: true, ignore: true },
            'logo':      { match: 'css', selector: '#logo img', nodeContentType: 'image' },
            'image':     { match: 'css', selector: '.blog-entry img', nodeContentType: 'image' },
            'date':      { match: 'css', selector: 'div.head p.date' },
            'info':      { match: 'css', selector: 'div.foot span' },
            'copyright': { match: 'css', selector: 'p.copyright' }
        },
        Properties:
        {
            template: 'blog'
        }
    }, []);
}
</script>
<script src="http://h30405.www3.hp.com/edit/tpt/1.0/"></script>

The Content section is a JavaScript object that defines the various types of content on your page. The names (grouping, pagetitle, and so on) are the content names for each type. Each content type describes how it is found with the match values. Usually, match is css, and selector is a CSS selector that chooses the content.

In the example above, the title content type is matched as an <h3> tag with a class of title:

<h3 class='title'>My Amazing Page</h3>

TPT matches content by examining each element on your page in turn. The elements are checked against the matches defined in the Content section. If a match succeeds, the content is added to the list of harvested content.

The name of the content type is arbitrary (except for grouping, see below). The important thing about the name of the content type is that is used to assign content into templates on the server, so you need to understand what content types a template is expecting when you write your recipe.

You can direct TPT to ignore parts of your page. If you add an ignore value of true to your content description (as we have for content type menu above), then the content is ignored. This can be useful to exclude parts of your page that you don't want harvested. Explicitly ignoring large parts of your page can speed up harvesting.

Most content is HTML. When an element is matched by the CSS selector, the content of the element is added to the harvested content. In the title example above, the text "My Amazing Page" would be harvested, without the <h3> tags. If you need the containing tags also, you can add outputTagToo to the content description.

Image content can also be harvested. By adding an 'image' nodeContentType to the content description (as in the logo description above), the src attribute is harvested rather than the content of the tag, which for an <img> tag is empty.

By default, when TPT matches content on your page, it doesn't bother looking within it to find other content to match. Usually, content isn't nested, and this speeds up the harvesting. If you do have content nested within other matched content, you can set recurse to true. This tells TPT to continue searching within the matched content for other content under a different description. In our example above, the blog entry is matched as text content, but the images are nested within the text. Adding recurse:true to the text description lets the image description match even though they are contained within already-matched content.

Harvested content can be grouped together to maintain a repeating structure in the data sent to the TPT server. The specially-named content description grouping defines the match pattern for groups. During harvesting, TPT maintains a group id, a small number used to distinguish between different groups of content. As each element on your page is matched against the content descriptions, if it matches the grouping content type, the group id is incremented. All harvested content carries with it the current value of the group id when it was found.

In our blog example, a <div class='head'> increments the group id, so that each blog entry gets a new group id.

The Properties section of the recipe is where you specify information for the TPT server. Currently, the only defined property is template, which indicates the templates to use when laying out the page on the server.

Templates

For this first beta release, we have a handful of templates available. They use a common set of frequently-used content types:

The Print it! Button

Print it! button library:

Right-click to download a print button

<a href="javascript:Tabblo.embedded.printabulous()">Print</a>

Questions?

Contact us here or visit the TPT Google Group.