»
S
I
D
E
B
A
R
«
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.

Building In-Window Navigation
21 August 2009 by Rob Spectre

This week I had a client with a navigation requirement that can be frustrating for a lot of Boxee developers.  The application was for KidMango, an online video service chockful with excellent high quality children’s content like Care Bears, Where in the World is Carmen Sandiego? and Dennis the Menace.  Their service categorizes their extensive library in four age groups, so a natural requirement of their Boxee app to provide users with the ability of using those groups as navigation options.

Kid-friendly navigation ftw!

Kid-friendly navigation ftw!

One option would be to create entirely different windows for each age group for four xml files total.  But this is not 1994 and we’re not using FrontPage; this option is entirely too unwieldy to maintain.  We could leverage the API and use SetContentURL in an onclick event for each button, but some of these age groups have as many as 50 series in their RSS feeds.  Navigating on Boxee systems with poor hardware would lead to a very jerky experience; we definitely need a loading dialog.

So, for this unique use case I came up with this approach for In-Window navigation.  It satisfies our need to keep our code maintainable, while providing a strong experience for all hardware profiles.  Consider the following code attached to a button control:

<onclick lang="python"><![CDATA[
import mc
params = mc.Parameters()
params['title'] = "KidMango Kids"
params['link'] = "rss://apps.gonzee.tv/kidmango/series.php?channel=kids&pages=3"
mc.GetApp().ActivateWindow(14000, params)
]]></onclick>

Obviously assuming we’ve loaded the mc library already, what we’re doing here is giving each button two parameters – a title and a feed.  We then reactivate the existing window to trigger the Progress Dialog and load our container with the new feed.  Now we need to set up our list container to accept the data we send it:

<content type="url" url="App.Param(link)">

This method looks for the link parameter to connect the list container with a feed.  But, with this approach, it means that the initial state of the app will be blank – no good for sure.  We can solve this by attaching an onload event to the window that queues up the list container with the default feed:

<onload lang="python"><![CDATA[
import mc
params = mc.GetApp().GetLaunchedWindowParameters()
if (len(params) == 0):
mc.GetWindow(14000).GetList(111).SetContentURL("rss://apps.gonzee.tv/kidmango/series.php?channel=home&pages=5")
]]></onload>

And viola!  Junk hardware friendly in-window navigation. For this tip in action, install the KidMango app available soon in the App Box.

Boxee Shortcut Keys / Hot Keys
13 August 2009 by Rob Spectre

After scouring Boxee documentation and the message boards for 20 minutes, I finally was able to string together a comprehensive list of Boxee shortcut keys.

For the edification of other Boxee users and developers, that list is reprinted here:

Avid KeyboardMenus and Navigation

esc – back
-/+ – volume up/down
\ – window/full screen mode toggle
a – library status
h – home screen (refresh when already in home)
Arrow keys – up, down, left, right

Video Player

“P” – Play
“Q” – Queue
“I” – Info
“S” – Suspend/Exit Screen
“X” – Stops the currently playing media
“F” – Fast Forward (hit multiple times to go faster)
“R” – Rewind (hit multiple times to go faster)
“<- -> arrows” – Seek back, forward
“.” (period) – Next
“,” (comma) – Previous
‘{‘ – Move 10 secs back
‘}’ – Move 10 secs fwd
Space – Pause/Play
Backspace – Parent Directory

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