»
S
I
D
E
B
A
R
«
Building Your First App: Finishing The Graphics
5 November 2009 by Rob Spectre
This entry is part 5 of 9 in the series Building Your First App

In our last installment, we successfully got our app installed and running – though it is only displaying our background.  We have two more graphic assets that we need to position in our app before we can get to building the interactive controls of our application.

The two assets we have left are the blue background boxes for the list container and the metadata box we pulled out of our original design.  This is easily accomplished by placing one image control for each graphic in the group we created in the last step.

First, let’s look at what we have to work with from last time:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0"?>
   <window type="window" id="14000">
   <defaultcontrol always="true">100</defaultcontrol>
   <allowoverlay>no</allowoverlay>
   <controls>
      <control type="group">
          <control type="image">
             <posx>0</posx>
             <posy>0</posy>
             <width>1280</width>
             <height>720</height>
             <texture>bg.png</texture>
          </control>
      </control>
   </controls>
</window>

An important rule to remember when placing your graphics is that Boxee renders controls sequentially. This means if you want a graphic to appear on top of another graphic (as we want with our list container box over our app background), we must place one after the other in the file. Thus, we add the image control after our bg.png in the same group control:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0"?>
   <window type="window" id="14000">
   <defaultcontrol always="true">100</defaultcontrol>
   <allowoverlay>no</allowoverlay>
   <controls>
      <control type="group">
          <control type="image">
             <posx>0</posx>
             <posy>0</posy>
             <width>1280</width>
             <height>720</height>
             <texture>bg.png</texture>
          </control>
          <control type="image">
             <posx>60</posx>
             <posy>230</posy>
             <width>502</width>
             <height>416</height>
             <texture>list.png</texture>
         </control>
      </control>
   </controls>
</window>

With our list graphic in place, adding the metadata box graphic is just as easy. Just add it after the list container graphic:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version="1.0"?>
   <window type="window" id="14000">
   <defaultcontrol always="true">100</defaultcontrol>
   <allowoverlay>no</allowoverlay>
   <controls>
      <control type="group">
          <control type="image">
             <posx>0</posx>
             <posy>0</posy>
             <width>1280</width>
             <height>720</height>
             <texture>bg.png</texture>
          </control>
          <control type="image">
             <posx>60</posx>
             <posy>230</posy>
             <width>502</width>
             <height>416</height>
             <texture>list.png</texture>
         </control>
         <control type="image">
             <posx>630</posx>
             <posy>255</posy>
             <width>574</width>
             <height>355</height>
             <texture>details.png</texture>
          </control>
      </control>
   </controls>
</window>

Now, the next time we open our app in Boxee, we will see our original design faithfully reproduced within Boxee!

For more information on the possibilities of the image control, check out Boxee’s developer documentation.

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:

StoryLineOnline

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