Building Your First App: Designing the Skin
28 October 2009 by Rob Spectre
This entry is part 1 of 9 in the series Building Your First App

The Boxee family grows every month as more and more developers discover how easy it is to get started developing on this social platform for the living room.  Using tools such as Yahoo Pipes and popular scripting libraries for generating feeds, developers can go from zero to a published app in no time using Boxee’s default skin.  Just plug in a RSS feed that conforms to the Boxee spec and Boxee “just works.”

But where Boxee really shines as a development platform is with full skin apps.  A lot of Boxee RSS app developers are intimidated by the Boxee API, believing a strong Python background is necessary to build a full skin app.  However, this is just not the case.  Boxee apps can be as simple or as complex as the individual developer needs them to be with many applications requiring no Python application logic whatsoever to work well.  The XML-driven GUI available for Boxee developers gives you everything you need to take your RSS feed and provide a rich, compelling living room interface.

If you can make an RSS feed, you can make a Boxee skin app.

Last month, I got to work with prolific Boxee developer jendabom on building her first skin app for Boxee.  Together, we were able to take one of her RSS apps (Storyline) and make a full skin with a few emails and a couple afternoons worth of work .  From that correspondence, we’ve developed this series taking you step-by-step through building your first skin app.

The way I attack a new app is first designing the interface in my favorite graphic design suite.  I use GIMP myself (as it is FOSS), but if you have access to something more professional like Photoshop or Paintshop Pro that would be good too.

The goal of this step is to layout the interface you are looking for in individual layers that can then be cut out into individual graphics elements that you will make into Boxee app controls.

Here are a few tips:

  • Set your canvas size to 720p (1280×720).  This will ensure your skin looks good on a variety of displays.
  • We can start by choosing between two basic interface options – List and Panel. An example of a “List” interface would be Auto-Tune The News or The Philip DeFranco Show.  An example of a “Panel” interface would be AL TV or KidMango.  Adjust your UI design to fit each paradigm appropriately.
  • Text over multi-color images == bad.  Try to avoid this pet peeve of Boxee QA.

Here’s an example of what jendabom came up with for Storyline:


Adding Animation to an External Control
12 August 2009 by Rob Spectre

One of the elements I liked most in building the UI for AL TV was the drawer animation coming from under each thumbnail to provide the label of the ListItem. That UI mechanic is present all over the Boxee application and using it leaves more screen real estate to fit in a greater number of thumbnails.

Show me your drawers.

Show me your drawers.

The implementation was easy – two “slide” animations on the label and a background image for the ListItem in the panel container.

<animation effect="slide" start="0,-100" center="auto" time="200">Focus</animation>
<animation effect="slide" end="0,-100" center="auto" time="200">Unfocus</animation>

zOMG! Those thumbnails totally drop their drawers when you focus on them now.

Having opposite elements for Focus and Unfocus, the drawer slides cleanly out and back in as a ListItem receives and loses focus. When starting out developing my new Associated Press app, I knew I wanted to leverage a similar mechanic, but was unsure if it would fit with the app’s feel. The target length of experience, breadth of content, and probably userbase for each app probably didn’t share much on the Venn Diagram.

Making a news app look like a music video app wouldn’t please many users, after all, and the AP content lent itself to more of a scrolling ticker list design, a la Auto-Tune The News.


Youkilis suspended?! But why?

A panel, album-cover like navigation was totally out for the AP experience, which I envisioned being brief, daily and ubersimple. Only one thumbnail visible from 30 feet away and text bigger than Jesus. A drawer would be great for the meta information like publish date and description, but those would be located in a label external to the list container. Without performing the animation within the list container, how would I be able to get the drawer effect I was looking for? The answer is the “condition” attribute. Just as the value of the animation elements used in AL TV were the conditions we desired – Focus and Unfocus – so to can we set arbitrary conditions using the Boxee API. Consider the following XML:

<animation effect="slide" start="0,-105" center="auto" time="200" condition="Control.HasFocus(111)">Conditional</animation>
<animation effect="slide" end="0,-105" center="auto" time="200" condition="!Control.HasFocus(111)">Conditional</animation>

Instead of the value of the animation element being our desired behavior, we instead choose “Conditional” and then use the condition attribute.

Ah.  With focus we can see the metadata, which tells us he was suspended for punching out a douchebag from the Detroit Tigers.  Well done drawer animation and well done Youkilis.

Ah. With focus we can see the metadata, which tells us he was suspended for punching out a douchebag from the Detroit Tigers. Well done drawer animation and well done Youkilis.

In this case, we use the Boxee API to determine if our list container does or does not have focus. If it does, pull out the drawer with the metadata. If it does not, slide that back up cleanly as the user clicks on other things. This simple animation did much for the professional, clean design of the app, except the slide would always happen before the list container was finished parsing the RSS feed. To prevent this, we can use the visible element to make sure it plays nicely and waits until the RSS is finished loading.


This same attribute can be leveraged for all kinds of zooms, fades, and rotates to killer effect, limited only by your imagination in terms of the use cases. GetWindow, ActivateWindow, IsPaused and many other methods can trigger animations that would be useful to the user. You can see this tip in action with the Associated Press app, soon to be published in the App Box.

»  Substance: WordPress   »  Style: Ahren Ahimsa
© 2009, all rights reserved.