»
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
/2009/11/boxee.png
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.

Series Navigation«Building Your First App: Hello WorldBuilding Your First App: The List Container»

  • Trying to find a better code highlighter, but not having much luck. Next installment is a chunky one involving the list container and will be published Saturday morning.

  • Great instructions!

    I'm just catching up, got steps 1-5 done today. Really looking forward to the next post. Hopefully soon, keep 'em coming!

  • Thanks Joe.

    Trying to find a better code highlighter, but not having much luck. Next installment is a chunky one involving the list container and will be published Saturday morning.

  • Cool, can't wait for that. I'm surprised by how straight forward it is (thanks to your tuts, that is).

    For code highlighting I've always used http://alexgorbatchev.com/wiki... Although it may be a bit heavy.

blog comments powered by Disqus
»  Substance: WordPress   »  Style: Ahren Ahimsa
© 2009, all rights reserved.