»
S
I
D
E
B
A
R
«
New Release – State of the Union LIVE
27 January 2010 by Rob Spectre

The 2010 pipeline of release is swelling with a boatload of tasty Gonzee apps on their way to a television near you, but it’s already been too long since my last new app release.  To that end, I’m happy to report that a new live event app has been published for all Boxee users for tonight’s State of the Union address by President Barack Obama.

This milestone address for this young presidency comes after a rough freshman year of roadblocks and setbacks and a particularly difficult week that saw the Democrats lose the Senate supermajority they’ve enjoyed in this past year. Obama addresses an electorate with diminished hopes and increased skepticism of the efficacy of the federal government.

His first State of the Union needs to change the game and merits the attention of any American concerned about employment, healthcare, and the condition of our country.  This Boxee app delivers reporting recapping Obama’s freshman year as president and will feature the live feed of the State of the Union address as soon as it becomes live.

Check out the app now in Boxee’s App Library.

Boxee Launches New Developer Wiki
15 January 2010 by Rob Spectre

Coming off their *huge* week at the International Consumer Electronics Show in Las Vegas, the folks at Boxee have released a revamped information resource for Boxee developers.  Most of the content was written by Boxee’s own Shawn Rieger who has been serving capably as the developer’s man on the inside and features a host of previously underdocumented features such as:

Shawn has put a lot of work into this documentation and it really shows – huge ups to the Boxee crew for continuing their commitment to the open source development community that has sprung up around this project!

Using The Sidebar In Your Apps
12 January 2010 by Joshua Jonah

Hi my name is Joshua, I am a boxee and all around Python developer who will now be contributing to gonzee.tv. I have a background in web application and social networking development, but I’m also a huge HTPC nut. Boxee is the perfect middle ground. I hope my articles help you out in times of need.

Without further ado…

The sidebar is used in the factory boxee sections. It’s on the side and lets you sort, filter, and otherwise manipulate the list in the factory boxee sections.

Boxee Movies section with sidebar visible</code>

The sidebar would be a great place to put things like preferences, sorting, and less used items within an app. The information is out of the way, but still in a comfortable place that is consistent throughout the boxee interface.

I’ve been wanting to use this in my own apps to really pull the experience together, so I started tearing apart the boxee skins. There are many “classes” and other things in the boxee skin files that you can use in your own apps to save code and increase consistency. I would recommend any developer to take a look.

I’ve recovered the base code required to have the sidebar working on your app:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<control type="group" id="9000">
    <include>BrowseListsAnimation</include> # This is required for some reason.
 
    # Put your main app xml here.
    #
    # For example a list:
    <control type="list" id="600">
        <description>Media items</description>
        <posx>40</posx>
        <posy>160</posy>
        <width>600</width>
        <height>520</height>
        <onleft>8000</onleft> # Notice pushing left activates the sidebar from this list.
        <onright>-</onright>
        <onup>200</onup>
        <ondown>-</ondown>
        <scrolltime>200</scrolltime>
        <pagecontrol>-</pagecontrol>
        <orientation>vertical</orientation>
        <itemlayout width="600" height="60">
            <control type="label">
                <posx>0</posx>
                <posy>0</posy>
                <width>560</width>
                <height>40</height>
                <font>font28</font>
                <align>left</align>
                <label>$INFO[ListItem.Label]</label>
                <textcolor>grey</textcolor>
            </control>
        </itemlayout>
        <focusedlayout width="1280" height="60">
            <control type="label">
                <posx>0</posx>
                <posy>0</posy>
                <width>560</width>
                <height>40</height>
                <font>font28</font>
                <align>left</align>
                <scroll>true</scroll>
                <scrollspeed>30</scrollspeed>
                <label>$INFO[ListItem.Label]</label>
                <textcolor>white</textcolor>
            </control>
        </focusedlayout>
    </control>
</control>
 
<control type="group" id="8000"> # This is the sidebar
    <include>BrowseLeftMenuAnimation</include>   # Required for some reason.
    <include>BrowseLeftMenuBackground</include>  # This includes everything to draw the
                                                 # background of the sidebar
    <control type="grouplist">                   # A grouplist is a good idea so that if
        <include>BrowseLeftMenu</include>        # there's too many controls, it can scroll.
        <control type="label" id="402">
            <include>BrowseLeftMenuTitle</include>      # <- there are some 'classes' I found
            <label>[UPPERCASE]Available Feeds[/UPPERCASE]</label>
        </control>
 
        # Include whatever you want on the sidebar here.
        # Make sure to add "<onright>9000</onright>" to the elements so you can get back to
        # your app.
 
    </control>
</control>

Make sure to remove all of the comments before trying this code, the boxee XML parser doesn’t like python comments (#).

This will get you an empty window with a sidebar on the left.

Enjoy.

The Developer’s Recap of the Boxee Beta Launch (Part 1 – Beta!)
11 December 2009 by Rob Spectre

As we were walking up to the Music Hall of Williamsburg after the developer pre-game at Brooklyn Bowl, it was clear the early fear that crossing the river would keep Manhattan Boxee fans away from the beta launch was laughably unwarranted.  The doors had been open for fifteen minutes already and the line around the newly renovated venue was still around the block with still more people showing up in droves.  A crazy mix of dorks, home theatre enthusiasts, entertainment suits, and new media journalists mingled in the frigid Brooklyn air, all equally grateful the wait for the Boxee Beta was almost over and that the weather cooperated for the long wait in line.

By the time I got in, the hall was already bulging – early arrival, as is usually the case with the Boxee community, ended up being crucial.

With a couple days of rest and recovery to organize thoughts from the event that followed, I’ve put together this first person recap of the Boxee Beta launch party from the developer’s perspective.  The evening was pivotal for Boxee the Product, Boxee the Company and Boxee the Community; here are the highlights from this coder to you.

I’ll be talking about the night  in three parts – first the Boxee Beta software, then the Boxee Box and finally the new apps launched, all with some tasty anecdotes from the evening snitched in.

Pure eye candy

Pure eye candy

Believe it or not, the moment the Beta hit the big screen was not accompanied by a riotous cheer by the ravenous audience, but rather a collective gasp of astonishment at the new interface.  The new look for Boxee is a bold, dramatic change from the far more XBMC-like interface that came before it and it slammed the audience like a falling piano.    With a clean new interface, sexy color palette, and simplified navigation, it was like graduation day for Boxee where the software stopped being a social port of Xbox Media Center and came into its own as an open source project aimed for the mainstream consumer.

Here’s the rundown of the hottest sauce for Boxee developers in the Beta release:

1) Content Consolidation

Consistently the biggest problem for Gonzee users has been remembering which application had what content.  The effort to consolidate the navigation for television shows and movies has paid off big with the beta interface, allowing users to search *and* browse all the content Boxee can deliver without having to remember if MacGuyver was in the Crackle app or in Hulu.

Every TV Show that Boxee can view, now in one menu.

Every TV Show that Boxee can view, now in one menu.

The potential for developers is huge, as it puts the content center stage regardless of the application it is in.  We know that a lot of people use Boxee just for Hulu television shows -  Boxee Beta’s content consolidation gives high quality, hilarious independent content greater visibility and another avenue to hook fans than just app install.

2) Huge App Improvements

The App Box has undergone a similar interface change, now giving users a far superior  Boxee app experience.  To install an application in Boxee Alpha, users had to navigate to the App Box, scroll through all 158 apps to find the one they were looking for by thumbnail alone, click to install then navigate back to the Applications menu to actually launch the app.

Global Menu - now apps can be two clicks away from anywhere in the interface.

Global Menu - now apps can be two clicks away from anywhere in the interface.

All that is streamlined in Boxee Beta.  The apps that the user has already installed and the apps they can install are now accessible from within the same menu.  Further, users have three options once they find an app that is interesting: start, add to my apps or add to shortcuts.  “Start” allows the user to immediately launch the app, taking users directly to the app without committing to a full install.  “Add to My Apps” installs the app much like the original Boxee Alpha experience.  Finally, “Add to Shortcuts” adds the app directly to the home navigation screen, letting users keep their favorite apps no more than two clicks away from anywhere in the Boxee interface.

The streamlined application navigation is a very powerful display of commitment by Boxee to the dev community, which bodes extremely well for the future of the software as a real development platform.

3) Queue

It's queue-tastic!

It's queue-tastic!

As a Boxee user, the feature I was most excited to see demonstrated was the new Boxee queue.  Working much like one’s DVR or Netflix queue, the Boxee queue allows users to mark any media into a queue to watch at a later time.  The big revelation with this feature, however, was the fact that the queue will be web-enabled with a Boxee bookmarklet, meaning users will be able to add content to their queue from their non-Boxee computers and mobile devices.

This is another feature that has great potential for the Boxee developer.  “Add to Boxee” buttons for  video services and other content distribution channels?  An iPhone Boxee queue manipulation app?  A Wordpress Widget displaying a user’s Boxee queue on his/her blog?

Similar functionality was available with early Boxee apps like L8R (which I loved), but the full integration makes the experience a lot easier.

This feature could get really cool, really fast.

Next up: The Boxee Box!

Christmas Comes Early For Boxee – New Gonzee Releases
7 December 2009 by Rob Spectre

For the voracious Boxee fans out there, the wait for the Boxee Beta unveiling finally ends tonight in Brooklyn, New York at the Music Hall of Williamsburg.  Christmas is coming a little early for Boxee diehards and Santa was sure to bring some Gonzee gifts in his sleigh.

I’m dead excited to announce today’s Gonzee releases coinciding with the launch of Boxee Beta as we push forward into a new chapter of social, open source development for the living room.  We have four spectacular apps getting some beta love, packed with pantloads of holiday cheer.

Never mind the bollocks -- on to the apps!

1) Man in the Box 1.0

The brilliant office comedy from Break.com is now available on Boxee.  Man in the Box is a hilarious web series featuring the exploits of Greg and his insane set of coworkers suffering in cubicle hell delivered weekly in 3-4 minute shorts.  Like NBC’s The Office, only a tenth of the length and too demented for broadcast television.

Here’s a great taste with Greg’s viral hit “Facebook Abuse.”

2) KidMango 1.4

The very first Boxee app for kids has gotten a holiday brushup with a full Brightcove integration, making the video bigger on your screen, easier to control and faster to load.  KidMango joins Wired and Style.com with full Brightcove support, making it even easier to enjoy KM’s enormous library of children’s telvision.

3) Cliqset 1.5

The first real-time social experience for your living room has exploded on Boxee with a ton of great conversations in the short month since its release.  The crew at Cliqset rarely rest on their laurel, so of course the Cliqset Boxee had to join the rest of their huge releases this weekend.  Here’s the short list of the new features:

  1. Complete Redesign -- The app’s design has been completely redone with a new diesel look for the Boxee Beta -- guaranteed to melt your face.
  2. Notifications -- You can now view and clear your Cliqset notifications directly within Boxee.
  3. Share Videos on Cliqset -- Like what you’re watching and want to share with your crew?  Video chat now let’s you share the video you are watching in Boxee with everyone on Cliqset.
  4. Play Shared Videos -- You can now play the videos your friends share on Cliqset directly in Boxee.
  5. Channels -- The Cliqset app revolutionized the social experience in your living room with its content-aware video chat.  That experience just got even better with Channels that allow you to talk not only with the people who are watching the same video, but also the same TV Show, film genre, director, online video service, or -- even better -- anyone watching anything on Boxee!
  6. New Activities / Video Chat with Video Inlay -- Tired of switching between your activities and your video chat?  By default, the Cliqset Boxee app now let’s you switch between both with an easy tab navigation while viewing your video inlayed on the screen.  Prefer the classic overlaid video chat? Easily access it with the “Video Chat” button at the top of the screen.

4) Boxee Beta Live

Not making it to the Big Apple for the launch tonight?  Well the Boxee crew and I put together a very special app for you.  Tonight’s event can be watched on Boxee with the Boxee Beta Live app now available in the App Box.

For Linux, Mac and AppleTV users in particular there is a special treat, as the folks over at Cliqset are powering a special real-time conversation for the event embedded in the Boxee app.  You can chat anonymously or register on Cliqset right from within the app.

Check out the great posts about it in the media:

Who’s that good looking guy in the screenshot?

Source: Mashable

Source: Mashable

Brooklyn Bowl Pre-Game – Boxee Beta Event Dec. 7th
24 November 2009 by Rob Spectre

After nearly a year of development since the first public version of Boxee got into our early adopting hands, the Boxee developer community has been anxiously awaiting the next milestone for our favorite open source social media center.  At long last, the wait for the beta version of Boxee is soon to be over with an unveiling being held in a little over a week in the (718).

What better borough than Brooklyn for the next big release of the subversive TV software and what better place that the venerable chapel for rock and roll, the Music Hall of WIlliamsburg?  The word from the Boxee crew is that  RSVPs for the beta launch have already passed 1,000 with ten days yet to go.  No doubt it is going to be the best holiday party in open source and I’ll be there in full Gonzee effect looking for fellow devs and Boxee lovers.

You coming to New York for the Boxee beta launch?  We’re getting together for a little developer grip-and-grin before the Boxee event at the best happy hour to be had in the (718), the Brooklyn Bowl.  Near the L line and just a couple blocks up from the Music Hall of Williamsburg, we’ll meet for a pint, some appetizers and a few frames of the dorkest, kludgiest bowling imaginable before heading in to scope the latest news from the Boxee crew.

Check out Brooklyn Bowl here.   RSVP for the Boxee event here.

See you in Brooklyn!

NYC-BETA-Unveiling-09

The Complete Guide To Building Your First Boxee App
14 November 2009 by Rob Spectre

Here’s a quick table of contents for the gonzee.tv complete guide to building your first Boxee app.

  1. Designing Your Skin
  2. Breaking Down The Controls
  3. Creating the Skeleton
  4. Hello World
  5. Finishing the Graphics
  6. The List Container
  7. The Metadata Box
  8. Animation
  9. Release It!
Building Your First App – Release It!
13 November 2009 by Rob Spectre
This entry is part 9 of 9 in the series Building Your First App

At long last, we are at the final step of building your first Boxee application – release!  After designing, coding and debugging our app we’re ready to release it in the wild by submitting it to Boxee for inclusion in the App Box.

The App Box is similar to the iTunes App Store developers are familiar with for the iPhone.  It is the default repository for all Boxee software, all fully tested and confirmed to work on the platforms for which it is submitted.  The submission process, however, is far less intrusive than Apple’s and ultimately produces the highest quality experience for the Boxee community of 700,000 users.   Plus the submission process gets your app tested on hardware profiles you likely don’t have access to – a huge plus to guarantee your app looks good on all the devices running Boxee.

Let’s get started submitting the app we just built.

1) Make an App Thumbnail

The app thumbnail is what users see in the App Box as the icon to install your app.  Naturally, our app thumbnail should concisely represent what kind of content the app contains and should attract users to install it. The thumbnail should be 200×200 and placed in the Internet accessible location we defined in the <em>thumb</em> element of our <em>descriptor.xml</em>.

The standard background for a Boxee App thumbnail

If you would like to conform to the look of the rest of the App Box (always a good idea), you can use this black image as a background.

1) Zip up the app

All Boxee repositories distribute apps through zip files.  In order to speed up the review of your app, you can zip up your app so that it is ready to go for the quality assurance folks who will be putting your app through the paces. First we navigate to the <em>apps</em> directory in your local Boxee UserData folder and identify the folder containing our app – it should be the same as the <em>userid</em> we defined in our <em>descriptor.xml</em>.

Then zip the file with the convention <em>appid-version.zip</em>.  For example, if we were submitting Auto-Tune The News for the App Box, we would name our zip file <em>autotunethenews-1.0.zip</em>.

Note: Be sure to remove the <test-app> element from your descriptor.xml before submitting!

2) Sign up for Boxee JIRA

Before sending your zip file to Boxee for consideration, you need to sign up for an account in Boxee’s bug management software.  This will allow Boxee to get a hold of you in the event of any problems as well as use JIRA to submit your app.  You can sign up at http://jira.boxee.tv.

3) Follow the Application Submission Process

Once you’ve signed up on JIRA, you’re ready to start Boxee’s Application Submission Process.  Just hop on the developer wiki page linked here and you’re on your way!

When submitting your app to the Boxee App Box, expect that it will take 3-4 business days for your app to get checked by Boxee QA.  With over a dozen apps in the App Box, it is a process with which I have gained intimate familiarity and can offer a few tips to make your submission sail.

  • Debug Your App - Make sure you click on every button and every video in your app at least once.  Boxee QA will definitely be doing the same and you can save yourself (and them) a cycle of iteration by doing it yourself.
  • 1280×720 – Be sure you are always developing in a windowed Boxee client.  This will make Boxee default to 720p, which will ensure your app looks the best on all screens.  You can window your Boxee client by pressing the “\” key after you start.
  • 480i - Make sure your video is at least 480i quality.  If it’s not good enough for TV, it’s not good enough for Boxee.

Finally, there is one last step:

4) Tell people!

Be sure to post on the forums, your own blog and, if you would do me the courtesy, here on gonzee.tv to let the world know that you just published your first Boxee app!  Cable packages only get a few new channels a year – Boxee gets dozens of new apps a month.

Get on Twitter, Facebook, Cliqset, and every corner of the Internet to let them know you’re tired of television and ready to change the living room with your first Boxee app.

Building Your First App: Animation
12 November 2009 by Rob Spectre
This entry is part 8 of 9 in the series Building Your First App

We’re almost there with the penultimate step in building your first Boxee application. In the last installment, we finished the construction of the application by finishing the metadata box. In this step, we’ll do our last round of polish before we’re ready for the best step of all – release!

Animation is the crucial last polish that can really make your application shine and is super easy to add. For our app, we are going to add a nice theater-light style fade in for the active elements of our interface while the application loads. This can be accomplished by applying an animation element to our list container and metadata box. Let’s take a look at what that element looks like:

1
2
3
<animation type="Conditional" condition="Window.IsVisible(DialogProgress.xml)">
   <effect type="fade" start="100" end="20" time="200"/>
</animation>

In this element we are doing two things – setting a condition and setting an effect. The condition is set with the animation element telling Boxee to render the animation when certain criteria are met. In this case, we are defining the condition as the visibility of Boxee’s default “loading clock” animation.

We then define what kind of animation with the effect element. Here we put the attributes of how we would like this animation to behave.

type
There are many animation effects available within Boxee; the type attribute defines which one we want. As mentioned before, we are using a “fade” animation for our first app.

start / end
The start and end attributes have deceiving names for their function in a fade animation. For this effect, start and end are the values we are setting for opacity at the beginning and end of the animation. So if we input the values “100″ and “20,” we are telling Boxee to render a fade effect that changes the interface object’s opacity from 100% (fully solid) to 20% (nearly transparent).

time
The time attribute defines the interval of the animation in milliseconds. With “200″ as our value, we are telling Boxee to fade the interface object from 100% to 20% in 0.2 seconds.

With our animation element defined, we need to just add it to the controls we wish to fade. Adding an animation is as simple as including the animation element to the control we wish to animate. First we’ll start with the image control that provides the background of the list container.

1
2
3
4
5
6
7
8
9
10
<control type="image">
	<animation type="Conditional" condition="Window.IsVisible(DialogProgress.xml)">
	   <effect type="fade" start="100" end="20" time="200"/>
	</animation>
	<posx>60</posx>
	<posy>230</posy>
	<width>502</width>
	<height>416</height>
	<texture>list.png</texture>
</control>

Now when we start our application, we can see that while Boxee loads our RSS feed, the list container background does a neat theater fade. To give the entire app that same polished look we will need to add the effect also to the metadata box’s image control, the list container, and the group control containing our metadata objects.

Here’s our final main.xml now fully animated:

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<?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">
             <animation type="Conditional" condition="Window.IsVisible(DialogProgress.xml)">
	         <effect type="fade" start="100" end="20" time="200"/>
	     </animation>
             <posx>60</posx>
             <posy>230</posy>
             <width>502</width>
             <height>416</height>
             <texture>list.png</texture>
         </control>
         <control type="image">
             <animation type="Conditional" condition="Window.IsVisible(DialogProgress.xml)">
	         <effect type="fade" start="100" end="20" time="200"/>
	     </animation>
             <posx>630</posx>
             <posy>255</posy>
             <width>574</width>
             <height>355</height>
             <texture>details.png</texture>
          </control>
          <control type="list" id="100">
           <animation type="Conditional" condition="Window.IsVisible(DialogProgress.xml)">
	       <effect type="fade" start="100" end="20" time="200"/>
	   </animation>
	   <posx>60</posx>
	   <posy>230</posy>
	   <width>502</width>
	   <height>416</height>
	   <orientation>vertical</orientation>
	   <itemlayout width="502" height="65">
	    <control type="label">
		<posx>0</posx>
		<posy>0</posy>
		<width>502</width>
		<height>62</height>
		<font>font40</font>
		<align>left</align>
		<aligny>center</aligny>
		<label>$INFO[ListItem.Label]</label>
		<textcolor>white</textcolor>
	    </control>
	    </itemlayout>
	    <focusedlayout width="502" height="65">
	       <control type="image">
		   <posx>0</posx>
		   <posy>0</posy>
		   <width>502</width>
		   <height>65</height>
		   <texture>white.png</texture>
		   <colordiffuse>DD171717</colordiffuse>
	       </control>
	       <control type="label">
		   <visible>!Control.HasFocus(100)</visible>
		   <posx>0</posx>
		   <posy>0</posy>
		   <width>502</width>
		   <height>62</height>
		   <font>font40</font>
		   <align>left</align>
		   <aligny>center</aligny>
		   <label>$INFO[ListItem.Label]</label>
		   <textcolor>white</textcolor>
		   <selectedcolor>DD171717</selectedcolor>
	       </control>
	       <control type="label">
		   <visible>!Control.HasFocus(100)</visible>   
		   <posx>0</posx>
		   <posy>0</posy>
		   <width>502</width>
		   <height>62</height>
		   <font>font40</font>
		   <align>left</align>
		   <aligny>center</aligny>
		   <label>$INFO[ListItem.Label]</label>
		   <textcolor>white</textcolor>
		   <selectedcolor>DD171717</selectedcolor>
		   <scroll>true</scroll>
		   <scrollspeed>30</scrollspeed>
	       </control>
	    </focusedlayout>
	    <content type="url" url="rss://yourdomain.com/yourfeed.rss">
	    </content>
	</control>
        <control type="group">
           <animation type="Conditional" condition="Window.IsVisible(DialogProgress.xml)">
	      <effect type="fade" start="100" end="20" time="200"/>
           </animation>
           <control type="image">
              <visible>true</visible>
              <posx>635</posx>
              <posy>265</posy>
              <width>560</width>
              <height>230</height>
              <texture>$INFO[Container(100).ListItem.Thumb]</texture>
           </control>
           <control type="label">
              <visible>true</visible>
              <posx>635</posx>
              <posy>500</posy>
              <width>560</width>
              <height>115</height>
              <font>light23</font>
              <align>left</align>
              <aligny>center</aligny>
              <label>[B]Description:[/B] $INFO[Container(100).ListItem.property(description)]</label>
              <background>grey</background>
              <textcolor>white</textcolor>
              <wrapmultiline>true</wrapmultiline>
           </control>
         </control>
      </control>
   </controls>
</window>

For more information on animating your Boxee app, refer to this excellent guide for Xbox Media Center.

Only one step left – release!

Building Your First App: The Metadata Box
9 November 2009 by Rob Spectre
This entry is part 7 of 9 in the series Building Your First App

In our last installment we turned a significant corner with the construction of our list container. Now we can finish up the interface creation on our first app by creating the metadata box. The metadata box is the interface object next to the list container that displays to the user more information about the item they have selected in the list container. Examples of metadata boxes can be seen in the screenshots for AL TV and Associated Press. Typically they include a thumbnail of the video selected and some helpful information like a description.

To get started, we’re going to abstract this interface from the rest of the application by creating a new group control.

1
2
<control type="group">
</control>

By putting the metadata box in a separate group, it makes future maintenance much easier by keeps parts of the interface logically separate as we continue to develop the app. Inside that group control, we place our first interface element – the video thumbnail.

1
2
3
4
5
6
7
8
9
10
<control type="group">
  <control type="image">
    <visible>true</visible>
    <posx>635</posx>
    <posy>265</posy>
    <width>560</width>
    <height>230</height>
    <texture>$INFO[Container(100).ListItem.Thumb]</texture>
  </control>
</control>

You’ll notice that the thumbnail image control looks much like the many other image controls we’ve created so far with one significant difference in the element. Instead of a static file name, we have a dynamic INFO tag that leverages the Boxee API. We can break down the INFO tag into two parts.

Container(100)
This part of the tag tells the image to get its texture from the list container with id “111″.

ListItem.Thumb
This part of the tag tells the image to look for the thumbnail for the ListItem currently selected in the list container referenced in the first part of the tag.

This small example highlights one advantage of developing on Boxee – all controls can reference each other within the context of an app. We will do this again to add some description data underneath the thumbnail we just created using a label control.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<control type="group">
  <control type="image">
    <visible>true</visible>
    <posx>635</posx>
    <posy>265</posy>
    <width>560</width>
    <height>230</height>
    <texture>$INFO[Container(100).ListItem.Thumb]</texture>
  </control>
  <control type="label">
    <visible>true</visible>
    <posx>635</posx>
    <posy>500</posy>
    <width>560</width>
    <height>115</height>
    <font>light23</font>
    <align>left</align>
    <aligny>center</aligny>
    <label>[B]Description:[/B] $INFO[Container(100).ListItem.property(description)]</label>
    <background>grey</background>
    <textcolor>white</textcolor>
    <wrapmultiline>true</wrapmultiline>
  </control>
</control>

The label control is similar to an image control with positional and dimensional elements, a content element (with label instead of texture), and some additional formatting element (e.g. align, font, textcolor). The important bit we need to pay attention to is the label element’s INFO tag.

Like our thumbnail, it references the list container we built in the last step but instead of getting the ListItem’s thumbnail, it gets the ListItem description. Why does it use “property” instead of just appending the name of the ListItem element? A longstanding bug in the Boxee API requires the developer to use “property(description)” instead of “Description” to ensure more consistent performance.

For more information on all the things you can do with label controls, refer to the Boxee developer docs.

And just like that, our metadata box is created. All that’s left is to drop it into our existing main.xml and adjust the position and dimensions to fit our content correctly.

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<?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 type="list" id="100">
	   <posx>60</posx>
	   <posy>230</posy>
	   <width>502</width>
	   <height>416</height>
	   <orientation>vertical</orientation>
	   <itemlayout width="502" height="65">
	    <control type="label">
		<posx>0</posx>
		<posy>0</posy>
		<width>502</width>
		<height>62</height>
		<font>font40</font>
		<align>left</align>
		<aligny>center</aligny>
		<label>$INFO[ListItem.Label]</label>
		<textcolor>white</textcolor>
	    </control>
	    </itemlayout>
	    <focusedlayout width="502" height="65">
	       <control type="image">
		   <posx>0</posx>
		   <posy>0</posy>
		   <width>502</width>
		   <height>65</height>
		   <texture>white.png</texture>
		   <colordiffuse>DD171717</colordiffuse>
	       </control>
	       <control type="label">
		   <visible>!Control.HasFocus(100)</visible>
		   <posx>0</posx>
		   <posy>0</posy>
		   <width>502</width>
		   <height>62</height>
		   <font>font40</font>
		   <align>left</align>
		   <aligny>center</aligny>
		   <label>$INFO[ListItem.Label]</label>
		   <textcolor>white</textcolor>
		   <selectedcolor>DD171717</selectedcolor>
	       </control>
	       <control type="label">
		   <visible>!Control.HasFocus(100)</visible>   
		   <posx>0</posx>
		   <posy>0</posy>
		   <width>502</width>
		   <height>62</height>
		   <font>font40</font>
		   <align>left</align>
		   <aligny>center</aligny>
		   <label>$INFO[ListItem.Label]</label>
		   <textcolor>white</textcolor>
		   <selectedcolor>DD171717</selectedcolor>
		   <scroll>true</scroll>
		   <scrollspeed>30</scrollspeed>
	       </control>
	    </focusedlayout>
	    <content type="url" url="rss://yourdomain.com/yourfeed.rss">
	    </content>
	</control>
        <control type="group">
           <control type="image">
              <visible>true</visible>
              <posx>635</posx>
              <posy>265</posy>
              <width>560</width>
              <height>230</height>
              <texture>$INFO[Container(100).ListItem.Thumb]</texture>
           </control>
           <control type="label">
              <visible>true</visible>
              <posx>635</posx>
              <posy>500</posy>
              <width>560</width>
              <height>115</height>
              <font>light23</font>
              <align>left</align>
              <aligny>center</aligny>
              <label>[B]Description:[/B] $INFO[Container(100).ListItem.property(description)]</label>
              <background>grey</background>
              <textcolor>white</textcolor>
              <wrapmultiline>true</wrapmultiline>
           </control>
         </control>
      </control>
   </controls>
</window>

And thus concludes the basic construction of our first app – we only have two more steps to go!

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