This got me thinking about how I might duplicate that technique in Silverlight 2. I figured that the first step was to figure out a simple way communicate between two distinct Silverlight object which exists on the same page.  For this example I am going to have one SL object contain a series of Buttons, while the other SL object contains a single TextBlock.

In the image above the red box I refer to as slObject1, where the blue box I refer to as slObject2.  Both of these <objects> have unique id’s and point to their own respective Silverlight Project and both have been placed in a single html file. 

In this example my slObject1 will be executing a Javascript function, which in turn will be calling an internal function inside of slObject2.  To do this I simply add a reference to the “System.Windows.Browser” namespace and call the Invoke method of the Window object.  here is what my button click handler looks like. 

Once I have this defined I can now go back into my default.html file and define this Javascript function.  The function finds the appropriate html object and calls the internal function in slObject2. 

To create my “UpdateTextBlock function I need to add a few things to the slObject2 project.  First I have to go into my App.xaml.cs file and enter the following in my Application_Startup handler.  “HtmlPage.RegisterScriptableObject("Page", page);”  This registers a managed object for scriptable access by JavaScript code.  Once registered I can create my methods as follows.

That is all there is to it.  Now that I have the ability to communicate between the two SL object I can go after a more complicated implementation.

Code: SLObjects.zip

As our company delves deeper into creating applications for the Facebook platform, we have realized that analysis of users behavior is extremely important. It is no secret that very few companies have mastered how to create a success Facebook application. Those that have seen moderate success do one thing consistently, they all leverage the social graph, but outside of that there is no clear blue print to success. Using techniques such as user tracking we can begin to tune the way a Facebook applications evolves as a way to change its presentation based on the behaviors of its users.

Integrating analytics into a canvas view it is pretty simple, slap in some Google analytics and you can begin to monitor and tune user traffic. The profile view is much more challenging. In the profile view an applications FBML and images are cached and delivered from a Facebook server. Using traditional Google analytics in the profile is not possible. I hope someday Facebook will show us how many users view and interact with a users profile, but until then we need some way to track a users interaction with our application. Back in October Facebook gave developers the ability to do some restricted Javascript and Ajax. With these two features, we can begin to track what links a user click and how those clicks relate to a users interaction with the canvas view. The following snip of FBJS will post a small JSON array to a external location, which in turn will asynchronously store that data for later analysis.

1
2
3
4
5
6
7
8
9
10
11
12

<script><!--
    var uid = '111111';
    function track(a, pid, method) {
        // ajax query
        var ajax = new Ajax();
        ajax.responseType = Ajax.RAW;
        ajax.requireLogin = false;
        var queryParams = { "pid" : pid, "method" : method, "uid": uid, "source": "profile"};
        ajax.post("http://url.com/tracker.ashx", queryParams);
	return true;
    }
//--></script>

To enable this tracking we must add the following callback attached to that elements onclick event. In our example we are attaching tracking to a link which provides an external vendors affiliate link for a series of consumer products.

One caveat, this approach only works correctly in Firefox if your <a> target is set to blank. If you need to use the same window, the only approach I have found is to use the anchor that is passed into the track method combined with the ajax.ondone callback to set the document.setLocation to the anchors href.

1
2
3
4
5
6

ajax.ondone = function() {
var href = a.getHref();
   if (href.length > 1) {
      document.setLocation(a.getHref());
   }
}

1

<a href="http://www.amazon.com" onclick="track(this,12345,'buy');" class="buy" target="_blank">BUY</a>

On the back end we have a page that is waiting for this specific Ajax post, and will return a 1 for success and a 0 for failure. It is extremely important to keep this tracking as efficient as possible. Facebook Ajax has a <10 second maximum timeout on all requests. In our design, the storing of the data is done using a asynchronous thread that queues up the incoming requests in hoped to avoid Facebook having to wait for us to store the data correctly.