»
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.

New Release: Boxee + Real-Time Social = Win with Cliqset
13 October 2009 by Rob Spectre

I am dead excited to announce the latest Gonzee app, one I think is a real game-changer in the living room.  Cliqset v1.0 is now available in the App Box to bring the first real-time social experience to your living room.

1) What is Cliqset?

Cliqset is a real-time social media service that unifies your many online identities in one gorgeous interface.  TechCrunch has likened the service to “FriendFeed on steroids,” aggregating more social services than anyone else with a strong emphasis on real-time, instant communication.  Mashable called it “FriendFeed Done Right” with support for more of the online social web and a gorgeous interface to boot. I like to think of it more as the first real lifecasting service, finally combining online a rich aggregation of social services delivered instantly.

Real-time conversations in your living room

Real-time conversations in your living room

2) What is the Cliqset Boxee app?

One of Cliqset’s greatest strengths is its rich API, which is leveraged to bring the Cliqset experience to Boxee.  With this Boxee app, users can view and interact with their Cliqset stream in real-time. Users can see all the status posts from all their friends from the comfort of the living room *and* comment on those activities in real-time.  Whether users are on the web or chatting with gTalk or on their iPhones or watching Boxee on their TVs, Cliqset users can browse and comment on each others posts (in – you guessed it – real-time).

3) What is “Video Chat?”

Here’s the real hot sauce.  The Cliqset Boxee app has an interface for content-aware real-time discussion.  You can watch any video – Internet or local – and participate in a Cliqset discussion about it.  Whether it be The Matrix or The Daily Show or any of the killer apps produced by the Boxee dev community, users can chat with everyone else watching the same content in real-time.  In my limited research, it is the very first content-aware television chat ever.

Content-aware real-time conversations

Content-aware real-time conversations

4) How can I break me off a piece of this tasty goodness?

You can install the Cliqset app from the App Box today.  You can register for Cliqset from within the app and get to real-time conversations for your favorite content in seconds.

It is available for Mac, Linux and Apple TV.

You can read more about the app and Cliqset’s killer desktop client here:

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