Developing Themes for Bowtie Chapter 1: What's in a Theme?

What’s in a Theme?

Bowtie themes are created using a set of files bundled into a package. On Mac OS X, packages are special folders that are treated like a single file. The most common example of a package is an application, but some Pages and Keynote documents are also saved as packages (among many other file formats). You can tell if a file’s a package (and see what’s inside it) by right-clicking on it, and choosing “Show Package Contents” (if it exists).

Note: for the sake of simplicity, throughout this book I use the phrase “right-click” whenever I mean a secondary click. Obviously, for right-handed users of two-button mice, this is a right-click. For systems with a one-button mouse or no connected mouse, this will typically be a Control-click. You should know your own system well enough to know what this instruction means.

Bowtie themes are identified using the “.bowtie” extension, and usually contain a number of HTML, JavaScript, and CSS files, and a handful of images. All themes contain at least an Info.plist file, which gives Bowtie some basic information about the theme, and a main HTML file, which represents the bulk of the theme.

Themes for Bowtie are authored in HTML, JavaScript, and CSS: if you know how to make websites, you already know how to develop Bowtie themes. The main part of a Bowtie controller is a transparent window that loads the content of your theme, and is commonly referred to as the Bowlet. The Bowlet renders content using WebKit, the rendering engine that powers the Safari web browser. For this reason, your themes will look identical in Bowtie and Safari on a given computer. If a user has a newer version of Safari with a newer version of WebKit, that version of WebKit will be used in Bowtie.

When you create a theme, you start by creating a main HTML file. This is the file that Bowtie will display in the Bowlet (you’ll specify the name of this file in your Info.plist file). Bowtie communicates with your theme using JavaScript: it calls functions that you define when special events occur, like the track changes, the artwork needs updating, or the playback state (playing, paused, stopped) changes. You can communicate with Bowtie using JavaScript as well: Bowtie exposes a number of objects with functions that you can call to control it, like play/pause or skip tracks, get information on the current track, and change the current track’s rating.

Beyond hooking your theme up with its special JavaScript instructions, developing a theme is no different from developing a website. You can include any number of images, stylesheets, and other miscellaneous files you like. When you’re done, all you need to do is zip up your theme package, and distribute it to other users.