Developer Blog

Helpful Debug Grid from Bartsidee

Late last year Dutch developer Bartsidee exploded onto the Boxee scene with a popular custom repo delivering some widely used applications. Bart has also been huge on the Boxee Forums helping developers get started on Boxee and providing a lot of tips and tricks. His repository is one of my favorite to watch on GitHub and he just released a simple but helpful grid graphic to help debug your UI layouts in Boxee.

Check it out:

Bart has laid out markers in pixels to help you place your controls on the grid. Super useful to put as a background on your application while you are doing your UI design. Simply drop thing PNG inside your media folder and put it in the background by making it the bottom image control on your UI stack. You can do so with just a few lines of XML:

<control type="image">
   <width>1280</width>
   <height>720</height>
   <texture>debuggrid.png</texture>

Thanks Bart - enjoy!

March 2, 2011 at 11:55 am

The 10 Essentials of Making a Great Boxee App

Jeremy Toeman over at Stage Two just posted a great piece on the 10 essentials of making a great Boxee app. He opens up the list with a personal fave bit of advice for first time Boxee devs:

10 – Avoid Input Fields At All Costs

The Boxee Box comes with a clever remote that includes a full QWERTY keyboard on its reverse. That is awesome. Scratch that, it’s super-awesome. Hopefully you only use it when you should – specifically when you are searching for something, logging into something, or some other highly meaningful purpose. Content for the interactive television is not the same as content for a computer or mobile device. Smart couch surfing should feel like analogue couch surfing- not in the content delivered, but in the manner in which it is accessed. If your App asks the user to “type” every 2 minutes, you might as well be thinking of a computer experience, not a TV one.

Check out the full post over at Stage Two.

September 17, 2010 at 4:55 pm

Hak5 Kickstarts Your Boxee Development

We’re huge fans of Hak5 over at Boxee Engineering and we were all dead excited to see Boxee show up in their segments over the past few weeks. In particular, we loved Jason’s intro to developing on Boxee which has been the best video demonstration of how to develop on Boxee we’ve seen so far.

You can watch the intro below or - better yet - in the Revision3 app on Boxee.

Thanks Jason and Hak5! Keep hacking!

September 7, 2010 at 2:21 pm

Storing User Settings with LocalConfig

A common question from coders new to the Boxee platform is the storage of configuration settings for their users. From display preferences for the user interface to ID/password combos for subscription systems, many of the apps on Boxee need the ability to store these user preferences.

Many developers ask how to easily write files to Boxee’s temporary directory, taking it upon themselves to develop their own file format to store their settings in. However, if your preferences can be stored as key/value pairs, Boxee has a built in class that makes storing settings far easier called LocalConfig.

LocalConfig is the object all Boxee apps can use to store key/value pairs that will persist from user session to user session on the same Boxee install. While these settings will have to be entered (for now at least) in every Boxee install the user logs into, it is an easy way to keep your users from having to input the same data for every session.

Let’s take a look at the LocalConfig object in action with the example storing a username and password combination. The first thing we want to do is store a username and password with our app. We can do this easily first by creating a login button in our main.xml.

<control type="button" id="100">
	<description>Login</description>
	<width>114</width>
	<height>37</height>
	<texturefocus>button-loginfocused.png</texturefocus>
	<texturenofocus>button-login.png</texturenofocus>	
</control>

Once the user clicks “Login,” we want to present the user to input their username and password with Boxee’s built-in keyboard interface. We can accomplish this by adding two ShowDialogKeyboard requests to an onclick event for the login button.

<control type="button" id="100">
	<description>Login</description>
	<width>114</width>
	<height>37</height>
	<texturefocus>button-loginfocused.png</texturefocus>
	<texturenofocus>button-login.png</texturenofocus>	
	<onclick lang="python"><![CDATA[
emailaddress = mc.ShowDialogKeyboard("Email", "", False)
userpassword = mc.ShowDialogKeyboard("Password", "", True)
]]></onclick>
</control>

Next we’ll check to make sure the user entered their username and password and, if so, store them in our LocalConfig. We add this code to the login event.

<control type="button" id="100">
	<description>Login</description>
	<width>114</width>
	<height>37</height>
	<texturefocus>button-loginfocused.png</texturefocus>
	<texturenofocus>button-login.png</texturenofocus>	
	<onclick lang="python"><![CDATA[
emailaddress = mc.ShowDialogKeyboard("Email", "", False)
userpassword = mc.ShowDialogKeyboard("Password", "", True)
if emailaddress and userpassword:
	config = mc.GetApp().GetLocalConfig()
	config.SetValue("username", emailaddress)
	config.SetValue("password", userpassword)
	mc.ShowDialogNotification("Credentials stored.")
       # Insert login code here
else:
	mc.ShowDialogNotification("Please enter username and password.")
]]></onclick>
</control>

Now that we have stored the username and password, we want to make sure the app knows this and logs the user every time the application is launched without asking the user for his/her credentials again. With the LocalConfig object, we can check if values exist in an onload event for the window and then take appropriate action if it does.

config = mc.GetApp().GetLocalConfig()
emailaddress = config.GetValue("username")
userpassword = config.GetValue("password")
 
if emailaddress:
	mc.ShowDialogNotification("Logging in...")
        # Insert login code here

Lastly, we would be remiss in our duties as courteous developers if we didn’t also give our users the ability to logout. With the paradigm we’ve set up here using LocalConfig, all we have to do is clear the LocalConfig for the app and the user will not no longer login on app start.

<control type="button" id="101">
	<description>Logout</description>
	<posx>200</posx>
	<posy>0</posy>
	<width>114</width>
	<height>37</height>
	<texturefocus>button-logoutfocused.png</texturefocus>
	<texturenofocus>button-logout.png</texturenofocus>
	<onclick lang="python"><![CDATA[
config = mc.GetApp().GetLocalConfig()
config.ResetAll()	
mc.ShowDialogNotification("Logging out...")
# Insert logout code here
]]></onclick>
</control>

Here’s the complete main.xml as an example. Enjoy!

<?xml version="1.0"?>
<window type="window" id="14000">
<onload lang="python"><![CDATA[
config = mc.GetApp().GetLocalConfig()
emailaddress = config.GetValue("username")
userpassword = config.GetValue("password")
 
if emailaddress:
	mc.ShowDialogNotification("Logging in...")
	# Insert login code here
]]></onload>
	<defaultcontrol always="true">111</defaultcontrol>
	<allowoverlay>no</allowoverlay>
	<controls>
		<control type="group">
			<control type="button" id="100">
				<description>Login</description>
				<width>114</width>
				<height>37</height>
				<texturefocus>button-loginfocused.png</texturefocus>
				<texturenofocus>button-login.png</texturenofocus>	
				<onclick lang="python"><![CDATA[
emailaddress = mc.ShowDialogKeyboard("Email", "", False)
userpassword = mc.ShowDialogKeyboard("Password", "", True)
if emailaddress and userpassword:
	config = mc.GetApp().GetLocalConfig()
	config.SetValue("username", emailaddress)
	config.SetValue("password", userpassword)
	mc.ShowDialogNotification("Credentials stored.")
else:
	mc.ShowDialogNotification("Please enter username and password.")
]]></onclick>
			</control>
			<control type="button" id="101">
				<description>Logout</description>
				<posx>200</posx>
				<posy>0</posy>
				<width>114</width>
				<height>37</height>
				<texturefocus>button-logoutfocused.png</texturefocus>
				<texturenofocus>button-logout.png</texturenofocus>
				<onclick lang="python"><![CDATA[
config = mc.GetApp().GetLocalConfig()
config.ResetAll()	
mc.ShowDialogNotification("Logging out...")
]]></onclick>
			</control>
		</control>
	</controls>
</window>
July 2, 2010 at 4:44 pm