You are reading a MIX Online Opinion. In which we speak our minds. Hans Hugli Meet Hans Arrow

Lab Notes

2Comment Retweet

Gestalt Xbox Gamercard Widget

Apr 7, 2010 In Development By Hans Hugli

At MIX10, I presented a session on the Gestalt Widgets we built to showcase Gestalt’s ability to run robust Rich Internet Applications. One widget we implemented was the Gestalt Xbox Gamercard Widget, which was inspired by Adam Kinney’s Gamercard Silverlight application.

While we were releasing the Gestalt Widget pack, Duncan MacKenzie’s web service was temporarily down, so we were unable to ship all the widgets together. Now that the service is back up, I wanted to get the Gestalt Xbox Gamercard Widget out into the wild—since it’s a great example of a widget that consumes a web service.

This particular widget was reverse engineered from the original sample Adam created using the tool Reflector. Reflector lets you examine .NET code in applications that aren’t obfuscated. This app made porting the app a snap.

This widget shows a few new concepts that differ from the other widgets:

  • Calling a REST-ful web service
  • Bringing a namespace into scope
  • Interaction between the DOM and Python code
  • A simple method for theming the application

WebService Calls

The widget uses the WebClient class to make calls to the web service and an XmlReader to parse the XML that’s returned. The reader is implemented in an order-agnostic way, so the implementation won’t break when the order of the XML nodes and attributes change. When created, the XboxInfo class consumes the XML stream and creates an object graph created from the XML information.

Importing a namespace

In order to be able to call into methods or change properties of classes defined in external Python (or Ruby) files, just import that namespace by adding an import statement with the name of the Python file you wish to import (in our case, "gamercard"). Importing that namespace automatically executes code and makes any created classes available for manipulation. You can call the LoadTheme method, for example:

<script type="application/python" class="gamercard">
import System
import gamercard
gamercard.LoadTheme("classic")
</script>

DOM/Python Interaction

The widget accepts input from a HTML textbox and a dropdown. In order to make this possible, it was necessary to hook the onclick event from the "Go" button in the Python script.

The following Python fragment is located inside a script tag directly in the HTML page:

def OnClick(s,e):
   # do something
document.refresh.AttachEvent("onclick",System.EventHandler[System.Windows.Browser.HtmlEventArgs](OnClick))

Since DOM access is available from Ruby (or Python in this case) we can access the values of the textbox and dropdown and pass in those values to the LoadTheme and LoadUser methods. It’s also possible to call Python or Ruby methods directly from JavaScript, but I’ll save that for another post.

gamercard.LoadTheme(document.gamertag_theme.value)
gamercard.LoadUser(document.gamertag_name.value)

Theming the application

This application uses a simple but effective method for updating look and feel. It simply loads up a text file that contains color information, URLs and size information in a comma-delimited file that’s applied when loaded. We could have loaded a ResourceDictionary instead, but for this application it was much quicker to use a brute force method for applying style information.

The full source for this sample is located here. This is just another example of the ease and power of Gestalt. The best part about it is that you don’t need to have a development environment to build Gestalt applications—the Dynamic Language Runtime reports exceptions directly in the web page, which guides developers as they work with the code.

Follow the Conversation

2 comments so far. You should leave one, too.

Rob Miller Rob Miller said on Apr 22, 2010

I liked your site.

jonah said on Jun 22, 2011

hay