Tetris Part II — A Titanium Fan-boy is Born

Posted by on May 13th, 2009.

I have to say that I really never expected to be writing part II of the last tetris blog post which was not at all about writing a tetris app and totally about the power of LISP macros. In a similar vein, this post is not at all about writing a tetris app and totally about the power and great user experience of Appcelerator Titanium. So please don’t be distracted by the tiny shiny shapes falling delicately, so delicately.

Using Titanium is a bit like building an Adobe AIR application except that you’re not building on top of a closed/proprietary technology stack. At Brierwood Design, one of our core values is to prefer open standards and technologies whenever possible. Titanium fits the bill perfectly. Out-of-the-box, you’re creating rich desktop application using standard toolkits like jQuery, mootools, and Dojo. In addition, you have access to many desktop components (like the filesystem, system tray, etc) via Appcelerator Entourage.

From my perspective, here are some of the major highlights when working within the Titanium framework:

  • I get to stay in my native emacs and/or Textmate environment for writing code.
  • I can test and debug my application in a regular browser window, whether Safari or Firefox (assuming I’m not using the desktop capabilities).
  • The development tools are very simple and stay out of the way.
  • The test deployment environment has the webkit debugging tools available.
  • The developer community was very helpful and well-informed. The Titanium development environment comes with a built-in IRC chat window. You can see the devel guys answering all my silly questions in the screenshow below.

Titanium Developer
Uploaded with plasq‘s Skitch!

SVG Tetris

My dream of just dropping my monolithic XHTML file containing the HTML, SVG, and javascript code into Titanium and hitting deploy was just that… a dream. However, I’m quite sure that in most cases, it would be that simple.

I ran into a couple minor issues. The biggest one involved all the ad-hoc funkiness which surrounds how browsers decide on the content-type for a file and hence how it is interpreted. For Safari, the two most reliable methods I use to get the content-type set properly are:

  • naming the file .xhtml and then opening is directly from the file system
  • serving the file from a web server and setting the content-type to "application/xhtml+xml"

None of this worked for me in the Titanium app. I also tried various DocType settings and adding <meta> tags in the header. No dice. In the end, I had to workaround this issue. One of the Titanium developers thought they might need to make a lower level core modification to support this functionality.

My workaround was to use the <embed> tag for the SVG document which is quick and easy:

<embed id="embed" src="board.svg" width="310" height="510" type="image/svg+xml" name="board"></embed>

The consequence of this move is that it broke my scripting hooks that connected the Start, Pause, and New buttons in the HTML document to the Javascript functions in the SVG document. Fortunately, there were only three functions that connect these pieces together, so was able to pass these functions up from the embedded SVG document. First, I defined an onload function for the SVG document:

<svg onload="loader()">

In the onload function, I connected the appropriate routines to variables in the top-level window:

function loader(evt) {
  top.SVGstartGame      = startGame;
  top.SVGpauseGame      = pauseGame;
  top.SVGnewGame    = newGame;
  document.addEventListener('keypress', keypress, true);

In the top-level HTML, the functions are then made available:

<input onclick="window.SVGstartGame();" type="button" value="Start"/>
<input onclick="window.SVGpauseGame();" type="button" value="Pause"/>
<input onclick="window.SVGnewGame();" type="button" value="New"/>

A quick screen shot of the application is shown below. All told, even with the troubles, I had the application built, working, and deployed in around 2 hours. Not too shabby.

SVG Tetris
Uploaded with plasq‘s Skitch!

If you want to give it a try, it is available on Mac, Windows, and Linux and you can download it here. There are a couple annoying issues that I didn’t sort out. For example, I’m not handling focus properly for the embedded SVG document, so after you click Start, you need to click on the Tetris game board to ensure key events are routed properly.

Another issue that I experienced (and you may too) is that you cannot run the application out of the DMG file on OSX. This is a known issue. Instead, just drag the application to your desktop or wherever, and have fun!

I’ll probably post this code on bitbucket or github if anybody is interested.

Posted in Reid van Melle | Tagged in ,, | Print | Email