LabNotes - MIX Online

ASP.NET Charts and ASP.NET MVC – Controller vs. View

Karsten Januszewski — Fri, 05 Mar 2010 15:41:56 GMT

Like Hans’ most recent lab note, this one is about charts. However, my investigations center on a different charting platform: the ASP.NET charting controls. These are shipping as part of .NET 4.0 and are available for download today in .NET 3.5 for free. You can also download VS 2008 tooling support and the ASP.NET and Windows Forms sample projects, which provide more than 200 samples.

It appears that there are two architecture options with the charts and ASP.NET MVC, each with pros and cons.

Option 1 – Render The Chart As A FileContentResult Through A Controller

The first option is to send the chart to the client as a file using the FileContentResult. This methodology is well explained with sample code in the following blog post: http://www.myblogon.net/archive/2009/02/15/21.aspx. It is very clean architecturally and maintains the separations of concerns that is core to the MVC design pattern. Once you have your controller set up, adding the chart is as simple as adding the route to the src attribute of an img tag:

<img src="/Chart/SimpleChart" alt="Sample Chart" />

Of course, that src attribute doesn’t have to be static, but could contain parameters generated dynamically, through MVC routing and/or through querystrings, as in the following:

<img src="<%= Url.RouteUrl("ImageShow",new                 
                {  
                    controller = "Image",                     
                    action = "Index",

                    archive = Model.archive_id,  
                    username = Model.User.screen_name,

                    visualization = ViewData["Visualization"]  
                } )%>?value=<%=ViewData["param"]%>" alt="Chart" />

What’s particularly cool about this methodology is that the page is rendered separately from the images, so you get a kind of asynchronous behavior for free.

However, there are two drawbacks to this methodology.

The first is a biggie: you lose interactivity with the chart as far as tooltips, hotspots, hrefs in the charts, etc. If you only care about serving up an image, option 1 is the way to go. But if you want to take advantage of the interactivity hooks provided by the charts, you’ll need to look into option 2.

The second is that the chart has to be entirely created via code, as opposed to using markup to instantiate the chart. Why is this an issue? Well, it gets into designer/developer workflow. I’d much rather let my designer tweak the settings of the chart layout and style. He’s comfortable with tweaking HTML, CSS and XAML, so working the asp:chart xml is totally within his scope. It means he can mess with settings, hit save, refresh his browser and see his results. But, if the chart is entirely generated in code, he can’t do that, which means a much less fluid workflow.

Option 2 – Render The Chart As An ASP.NET Control In the View

The second option is to render the chart in the view, either inline in the page or via CodeBehind. This is well documented in a sample shown in this article: http://www.codeproject.com/KB/aspnet/MvcChartControlFileResult.aspx. By rendering the chart in the view, both of the drawbacks above are mitigated. You can add interactivity to the chart. Consider the following Page_Loaded event in CodeBehind of a view:

        protected void Page_Load(object sender, EventArgs e)       
        {             
            foreach (DataItem dataItem in ((ChartModel)this.Model).Data)

            {                 
                string x = dataItem.Name;                 
                int y = dataItem.Count;                 
                int ptIdx = this.Chart1.Series[0].Points.AddXY(x, y);                 
                DataPoint pt = this.Chart1.Series[0].Points[ptIdx];                 
                pt.LegendText = x + " (" + y + " )";                 
                pt.LegendUrl = "http://example.com/" + x;                 
                pt.LegendToolTip = "Click to view " + x + "'s page";                 
                pt.ToolTip = "#VALX: #PERCENT";                 
                pt.Label = "";             
             }     
        }

You can see how the controller passes the data to the chart through the model, but the actual databinding happens in the CodeBehind. I found that walking the data and setting each x and y coordinate gives you access to the DataPoint object, which is where you set things like LegendUrl, LegendToolTip and Tooltip – the very interactivity I was referring to. If you look at the HTML generated after the control renders (via IE8’s Developer Tools for example), you’ll see that the ASP.NET map control will create a <map> element withmultiple child <area> elements that correlate with the image.

The styling of the chart all happens in the .aspx page:

<asp:Chart id="Chart1" runat="server" Height="480" Width="640" Palette="BrightPastel" imagetype="Png" BorderlineDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" BorderColor="26, 59, 105">   
    <Titles>   
        <asp:Title Text="Markup and code behind" />   
    </Titles>   
    <legends>   
        <asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>   
    </legends>   
    <borderskin skinstyle="Emboss"></borderskin>   
    <series>   
        <asp:Series Name="Column" BorderColor="180, 26, 59, 105" Legend="Default" ChartType="Pie" IsValueShownAsLabel="false" >   
        </asp:Series>   
    </series>   
    <chartareas>   
        <asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom" >   
            <area3dstyle Rotation="10" perspective="10" Inclination="15" IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle>   
            <axisy linecolor="64, 64, 64, 64">   
                <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />   
                <majorgrid linecolor="64, 64, 64, 64" />   
            </axisy>   
            <axisx linecolor="64, 64, 64, 64">   
                <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />   
                <majorgrid linecolor="64, 64, 64, 64" />   
            </axisx>   
        </asp:ChartArea>   
    </chartareas>   
</asp:Chart>

The big drawback? Well, it bends the rules of ASP.NET MVC. I’m not sure how “evil” this really is though, as both benefits seem to outweigh the bad practice of adding CodeBehind to a view.

Silverlight Toolkit Charting Controls

Hans Hugli — Mon, 01 Mar 2010 17:43:05 GMT

The Problem with Charting Control Styling

Recently, my team needed some basic charting controls for a project we were working on, so I investigated the Silverlight Toolkit charting controls available on CodePlex. We quickly discovered that the Charting control styling was cumbersome in Expression Blend. I ran into the following issues:

The Toolkit runtime DLLs don’t support editing styling templates
The Themes approach that the Silverlight Toolkit employs doesn’t have design time support

If you’re looking to use the Silverlight Toolkit Charting controls, here are a few options for working around these issues.

Getting Ramped Up

I was pointed to a good blog from December 2008 that describes how to style the charting controls. The blog is written well, but dated—I’ll clarify any inaccuracies below.

I installed the Silverlight 3 Toolkit with the installer located on the home page of the CodePlex site. I then fired up Blend 3, created a new Silverlight Web project and added references to the Silverlight toolkit binaries: System.Windows.Controls.Datavisualization.Toolkit.dll and System.Windows.Controls.Toolkit.dll. Then I opened up the Assets panel by clicking the chevron on the left hand menu and chose the Chart control by clicking on it, as shown here:

Once I clicked the Chart control, I then created the control on the designer surface by dragging an area on it. It created a "Column" Bar Chart that showed pre-populated data.

I wanted to create a Pie chart, so I deleted the ColumnSeries node in the “Objects and Timeline” view by selecting it and pressing delete. This left me with an empty chart. I added a PieSeries by dragging one from the Assets panel into the chart control on the design surface; nothing changed visually since the bindings to the data source have not been defined as they were in the default ColumnSeries. I switched to the XAML view in the design window and added bindings to the data source. In order for the PieSeries element to bind to the PointCollection that was created when we created the chart control, I needed to add the following attributes: IndependentValuePath="X" DependentValuePath="Y" ItemsSource="{Binding}"

This is how the XAML fragment for the chart control appears:

<charting:Chart Title="Chart Title">

	<charting:Chart.DataContext>

		<PointCollection>

			<Point>1,10</Point>

			<Point>2,20</Point>

			<Point>3,30</Point>

			<Point>4,40</Point>

		</PointCollection>

	</charting:Chart.DataContext>

	<charting:PieSeries Margin="0" IndependentValuePath="X"
		DependentValuePath="Y" ItemsSource="{Binding}"/>

</charting:Chart>

The chart control can be bound to any data source. In this sample, the PointCollection data is supplied so that the designer will show some basic data on the design surface.

Blocking Issue

The tutorial I was following assumed that the designer had the Toolkit project’s source code in his or her project, rather than just a reference to the runtime binaries. That is to say, if you simply install the Silverlight Toolkit with the MSI file, adding the necessary binary references to your project will not allow the designer to modify the chart styles.

Here’s an image (circled in red) that shows that editing a copy of a template of the current selected item is unavailable.

The Workaround

At the time of this writing I still don’t know why the designer behaves this way with runtime binaries, but the workaround is to have the design solution also contain the source code for the Toolkit charting dependencies. You can download the entire Toolkit source code from the homepage of the CodePlex Silverlight Toolkit project by clicking on the download button, but you don’t need to add all projects to your solution to accomplish the goal.

Begin by deleting the existing references to the Toolkit runtime assemblies. Then add the following projects to your solution: Controls.Data.Toolkit, Controls.DataVisualization.Toolkit, Controls.Input.Toolkit, Controls.Layout.Toolkit, Controls.Theming.Toolkit and Controls.Toolkit. Lastly, add references to all these projects to the project that contains the page you want to create the chart in. Once you’ve added the references, the “Template Editing” option becomes enabled. From there you can modify the templates in the designer. The design surface will update visually as modifications are made.

Now it’s also possible to modify the DataPointStyle templates and the LegendItemStyle templates, which allow fine-grained control over how the data points and legend appear.

Erratum to Pete’s Blog Post

Pete’s blog post makes reference to a type: StylePalette. However, the correct type is Palette. The type’s name was changed after the December 9^th, 2008 release of the Toolkit. At the time of this writing, the version from November 2009 is available.

Additionally, the path to the namespace reference in the XAML has changed from:

xmlns:datavis="clr-namespace:Microsoft.Windows.Controls.DataVisualization;
	assembly=Microsoft.Windows.Controls.DataVisualization"

to:

xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;
	assembly=System.Windows.Controls.DataVisualization.Toolkit"

Themes

In theory, the themes support is very nice, since it’s very easy swap out the themes. However, you can’t author the theme ResourceDictionaries in Blend, since Blend doesn’t allow editing the XAML for a ResourceDictionary directly. As a result, you’ll find yourself jumping into the styling for a chart and manually moving it to a ResourceDictionary. Not the best designer experience.

Summing Up

The Silverlight Toolkit Charting controls work well out of the box, but if you are a designer and would like to restyle them, it will take a bit of work. Here is a link to much more useful information about the Silverlight Toolkit. A developer will have an easier time modifying the styling, but developers are not designers and generally can only take the design so far. Be aware that if you decide to use these charting controls, they aren’t particularly Blend-friendly. Perhaps this will change in the future.

Do you have some designer-friendly charting controls that you can recommend? Silverlight-based or not? Let us know. Leave a comment or if you tweet, follow us on Twitter to learn about new content, opinions and articles.

Incarnate for WordPress Plugin Updated

Karsten Januszewski — Tue, 16 Feb 2010 00:49:59 GMT

We’re excited to announce Incarnate for WordPress version 1.2. Significant work has been done with the plugin to address issues that arose with earlier versions. Because WordPress theming engine’s flexibility, there were number of cases where the plugin didn’t play nicely with WordPress themes. We’ve fixed these issues and the plugin will now work as expected with most themes right out of the box. In fact, we’ve confirmed that Incarnate for WordPress is compatible with the following themes (including the 10 most popular as listed here).

Arclite 2.02
Arjuna X
Atahualpa 3.4.5
Comment Central 1.2.3
Constructor 0.7.7
Cordobo Green Park 2 0.9.502
Dark Wood 1.7
Mystique 1.72
Inanis Glass 1.3.6
LightWord 1.9.6
Luxury Press 1.4
Lysa 1.2
Monochrome 2.7
Multi-Color 1.6
Organic Theme 1.9
P2 1.1.3
Piano Black 1.3
Pixel 2.0.0
WordPress Classic 1.5
WordPress Default 1.6

Incarnate still doesn’t work by default with some themes—sometimes it takes a little manual tweaking. To address this, we’ve improved our instructions and documentation.

One example of a theme that takes additional tweaking is Composito, which TommyLee’s blog, The Spider King uses. In this case, we had to change 2 lines to the comments.php file to get Incarnate working. First, we had to change line 28 of comments.php from this:

  <p class="avt"><img src="<?php gravatar("R", 45, get_bloginfo('template_url')."/images/avatar-replace.png"); ?>" alt="Avatar" /></p>

To this:

  <p class="avt"><?php if(function_exists('incarnate_for_wordpress_insert_avatar')) { incarnate_for_wordpress_insert_avatar($comment); } ?></p>

Second, the following line had to be added at line 62.

  <?php if(function_exists('incarnate_for_wordpress_insert_ui')) { incarnate_for_wordpress_insert_ui(); } ?>

Moving forward, we will document themes which are known to work but require additional tweaks like this. Let us know if you find one.

Incarnate Updates: BlogEngine.NET Support and Service Improvements

Karsten Januszewski — Fri, 05 Feb 2010 20:06:07 GMT

We are excited to announce support for Incarnate in the latest BlogEngine.NET release. In addition, we have made some improvements to the Incarnate service itself. Here’s the scoop:

BlogEngine.NET Support

With the release of BlogEngine.NET 1.6, Incarnate is now supported. We worked with the team behind the project and they added the infrastructure in their engine to support other avatar providers in addition to Gravatar. Now, they have a field that stores an avatar URL in association with each comment, which works for both their XML provider and their SQL provider.

While BlogEngine.NET doesn’t support Incarnate out of the box, adding it is a breeze. It is a simple matter of replacing a single file (/User Controls/CommentView.ascx) and you are good to go. It works across themes. You can download the file here. If you’d like to see an example blog that uses Blog Engine.NET with Incarnate, see http://rhizohm.net/irhetoric. If you have questions or issues getting Incarnate working with your instance of BlogEngine.NET, let us know and we’ll be happy to help. And, hats off to the BlogEngine.NET team on a great release.

Incarnate Service Updates

We made two updates to the Incarnate service itself, which is hosted at http://incarnate.visitmix.com. First, we’ve resolved cases in which the XBoxLive avatar provider returned 404s instead of the default XBoxLive avatar. You’ll no longer see an unattractive “not found” graphic. Second, for people consuming the service directly, the REST API is no longer case sensitive.

We also made several updates to the Windows Azure infrastructure, including changing the actual instance used by Azure. Behind the scenes, we pointed the http://incarnate.visitmix.com url to a different Azure instance using cnames.

HTML5 video tag with H.264 codec

Hans Hugli — Mon, 25 Jan 2010 22:04:09 GMT

Our implementation of the HTML5 video tag has been tested on both Windows and Mac, using IE, Firefox, Safari, and Chrome.

To use it, just add a reference to dlrmedia.js at the top of your page. Visitors to your site will be able to view your H.264 video using the codec that ships with Silverlight.

Here is a sample, using the YouTube recording of Ian Hickson discussing HTML5 features. To try it out, copy/paste this code to a new HTML page, and host it on your local web server.

<!DOCTYPE html>
<html>
<head>
    <script src="http://visitmix.com/dlr/dlr.js" type="text/javascript"></script>
    <script src="http://visitmix.com/dlr/gestaltmedia.js" type="text/javascript"></script>
</head>
<body>
    <video id="video1" width="640" height="480" volume=".7" controls autoplay>
        <source src="http://www.visitmix.com/content/files/HTML5.mp4" type="video/wmv"></source>
    </video>
</body>
</html>

We depend on the H.264 decoder that ships with Silverlight, which is widely deployed and easy to install. It would be equally simple to use Flash instead, and our implementation is not difficult to modify. You are free to use and modify our source code. More details at the Gestalt Widgets page.

Click the thumbnail below to see the video.

Downloading and Parsing IIS Logs from Windows Azure

Karsten Januszewski — Sat, 23 Jan 2010 00:23:46 GMT

In this post, I’ll tell you how to get IIS logs out of Windows Azure and onto your local machine so you can do analysis. I wrote a program called AzureLogFetcher to enable this process.

I have already written about how to get logging and diagnostics working with Windows Azure so that you can access both your IIS logs and diagnostic information. In this post, I’ll show you how to get this information out of Windows Azure and onto your local machine so you can analyze the logs. I’ll also show some of the queries I run against the IIS logs using the most excellent Log Parser tool, a free program from Microsoft.

So, here’s the crux of the problem: you’ve got your website running in Azure. You’ve got Azure transferring the IIS logs across all instances of your site to your Azure storage account. But now, you need to download those logs and do something with them. There are tools out there that allow you to browse and download these files, but this gets laborious and tedious—after all, there’s a new log file written every hour. Using a GUI tool to do the job means you have to manually select the log files and then copy them to your local machine. Wouldn’t it be nice if there were a tool that automatically did this for you?

I took a look and couldn’t find any tools like this. So, I chatted with Ryan Dunn, Windows Azure evangelist extraordinaire. We cooked up Azure Log Fetcher, a command line application that will download all your IIS logs from Azure and delete them from the cloud. You can create a .bat file and set it in task scheduler to run automatically.

Here’s what it looks like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.StorageClient;
using System.Net.Mail;

namespace AzureLogFetch
{
    class Program
    {
        static string smtp = null;
        static string email = null;
        
        static void Main(string[] args)
        {
            if (args.Count() < 3)
            {
                Console.WriteLine("Usage: AzureLogFetch [path to save files] 
			[Azure instance name] [Azure key] [smtp port] 
			[email]");
                Console.WriteLine(@"Note: smtpport and email are optional");
                Console.WriteLine(@"Example w/o email:");
                Console.WriteLine(@"Example: AzureLogFetch g:\logs MyAzure 
			EK247tO8q4aNLA+A==");
                Console.WriteLine(@"Example w/ email: AzureLogFetch g:\logs
			MyAzure EK247tO8q4aNLA+A== smtp.mymail.com me@email.com");
                return;
            }
            string directory = args[0];
            string instance = args[1];
            string key = args[2];

            if (args.Count() > 3)
            {
                smtp = args[3];
                email = args[4];
            }
            var account = new CloudStorageAccount(
        new StorageCredentialsAccountAndKey(
            instance,
            key
            ),
        false
        );

            var client = account.CreateCloudBlobClient();
            var container = client.GetContainerReference("wad-iis-logfiles");

            //note that I pass the BlobRequestOptions of UseFlatBlobListing 
	    //which returns all files regardless 
            //of nesting so that I don't have to walk the directory structure
            foreach (var blob in container.ListBlobs(new 
		BlobRequestOptions() { UseFlatBlobListing = true }))
            {
                CloudBlob b = blob as CloudBlob;
                try
                {
                    b.FetchAttributes();
                    BlobAttributes blobAttributes = b.Attributes;
                    TimeSpan span = DateTime.Now.Subtract
			(blobAttributes.Properties.LastModifiedUtc.ToLocalTime());
                    int compare = TimeSpan.Compare(span, TimeSpan.FromHours(1));
                    //we don't want to download and delete the latest  
		    //log file, because it is incomplete and still being
                    //written to, thus this compare logic
                    if (compare == 1)
                    {
                        b.DownloadToFile(directory + b.Uri.PathAndQuery);
                        b.Delete();
                    }
                }
                catch (Exception e)
                {
                    SendMail(instance + " download of logs failed!!!!", 
			e.Message);
                    return;
                }

            }
            SendMail(instance + " download of logs complete 
		at " + DateTime.Now.ToLongDateString() + " " + 
		DateTime.Now.ToShortTimeString() , "");


        }
        static void SendMail(string subject, string body)
        {
            if (smtp == null || email == null)
            {
                return;
            }
            MailMessage message = new MailMessage();
            SmtpClient smtpClient = new SmtpClient(smtp, 25);
            message.From = new MailAddress(email);
            message.To.Add(new MailAddress(email));
            message.Subject = subject;
            message.Body = body;
            smtpClient.UseDefaultCredentials = true;
            smtpClient.Send(message);

        }
    }
}

There are a few things worth commenting on about this code. First, you’ll notice it requires Microsoft.WindowsAzure and Microsoft.WindowsAzure.StorageClient. These are assemblies that ship with the Windows Azure Tools for Microsoft Visual Studio (November 2009) as part of the Windows Azure SDK. You can find them at %Program Files%\Windows Azure SDK\v1.0\ref.

The crux line (thanks Ryan!) is where I iterate over the log files:

foreach (var blob in container.ListBlobs(new BlobRequestOptions() { UseFlatBlobListing = true }))

The key here is that I pass the UseFlatBlobListing option, which means I don’t have to walk the whole directory structure to get all the logs across all instances. Rather, it returns me everything—which means every log file. This turns out to be handy when I go to download the file here:

b.DownloadToFile(directory + b.Uri.PathAndQuery);

Notice I’m able to preserve the path. This is clutch because, if you are running multiple instances in Azure, you’ll have log files with the same name from different instances (aka u_ex10011916.log), so the files need to be saved in paths unique to their instance.

The other thing I did was to make sure I didn’t download the log file currently being written to. After all, it is a living document; if I were to download it, I might miss some of the logging it did (and thus the comparison logic in the code). After downloading them, I go ahead and blow them away.

I also added some code that enables the program to send an email after either a successful transfer of the logs or a failure.

You can cut/paste/compile this yourself or download the source or the binary here.

Once you have all this IIS log data, what do you do with it? You analyze it, of course. The best tool I’ve found for analyzing IIS logs is the Microsoft Log Parser tool. This is a command line tool that allows you write SQL queries against your log files. The query I find myself returning to again and again is as follows:

logparser -i:IISW3C "SELECT count(*) as hits, cs(referer) INTO referrer.txt FROM *.log WHERE cs-uri-stem not like '%.png' and cs-uri-stem not like '%.gif' group by cs(Referer) order by hits desc" -recurse -o:CSV

This query groups referrers by hits, allowing me to see where my traffic is coming from. This is key for the Incarnate service, since we’re trying to determine who has installed the Incarnate plug-in. Notice that I exclude any .png or .gif files from the query, so I’m only getting hits on the service itself. By passing the O:csv switch, I can easily pull this into Excel and then sum the count column to get my total hits. If you want, you can also have it generate nifty charts for you, like this:

logparser -i:IISW3C "SELECT count(*) as hits, cs(referer) INTO chart.gif FROM *.log WHERE cs-uri-stem not like '%.png' and cs-uri-stem not like '%.gif' group by cs(Referer) order by hits desc" -recurse -o:Chart –chartType:Pie3D

I should note that I got the following error when I tried to generate charts:

Error creating output format "chart": This output format requires a licensed Microsoft Office Chart Web Component to be installed on the local machine.

Turns out I needed to install some Office components which may not be on your system. See this blog post for more.

There are a bunch of great samples that ship with Log Parser. The SDK and their forums are also helpful.

Introducing Incarnate

Karsten Januszewski — Tue, 15 Dec 2009 04:58:00 GMT

We're excited to release Incarnate, a new lab from Mix Online. Included with this lab are a great set of articles that deal with how to design web forms and—a first for Mix Online—how we built a Word Press plug-in for a better experience handling avatars on the web.

So, what exactly is Incarnate? It's a service that you can incorporate into your blog or website that allows your users to associate themselves with an avatar they've already published on the web. Try it out now.

The Genesis of Incarnate

So, what motivated us to build Incarnate? Well, first off, avatars are ubiquitous on the web today. Humans are "visual creatures," and we make associations quickly and assign meaning by processing visual data—especially faces. Using avatars, users can establish a consistent visual identity to associate with their "virtual selves." So, if you run a website, supporting avatars is a good thing.

But, have you ever been to a webpage or blog and looked at the comments and seen an array of “default” avatars next to the comments? Maybe something like this:

Annoying.

Most often, these “default” avatars show up when a user doesn’t actually register an avatar with the website (or with the avatar service that website uses).

Now, have you ever been asked to upload an avatar when trying to register for an website? And you are thinking to yourself, haven’t I uploaded this same avatar to Twitter, MySpace and YouTube already? Can’t I somehow reuse that avatar?

Again, annoying. These were the scenarios that kept us up at night and inspired us to build Incarnate.

I was working with microformats when it hit me: all the big social networking sites support the hCard microformat on their publically available profile pages. And, most support vanity urls, where the username is part of the friendly url. Thus, we could write a service that parsed these profile pages. Then we could present these avatars to users, and let them pick the avatar they want. We’d solve both the problems discussed above: users would be more likely to use an avatar, which would result in fewer “default” avatars and make for better-looking web pages. And, users wouldn’t have to keep re-uploading their avatar to the same services; instead, they could use their social network of choice as an avatar provider.

Why did we call it Incarnate? Well, the word incarnate is closely tied to the word avatar. To incarnate means to give something bodily form. In religions, an avatar is the human incarnation of a deity. So, in order to help manifest avatars on websites, our service was aptly named Incarnate.

Using Incarnate

It's easy to incorporate Incarnate into websites and blogs. If you're using WordPress, you can add the Incarnate WordPress plug into your blog, and users will be able to use the service immediately. If you're using another engine for your website, download the simple sample we put together, which demonstrates how to incorporate Incarnate into an existing website. You may have to write a little code, but it shouldn’t be too bad. (And if you're struggling, don’t hesitate to contact us!)

If you deploy Incarnate to your website, let us know and we'll feature you!

You also have the option of interfacing directly with the Incarnate service. The Incarnate service supports JSON and JSON-P through a very simple REST syntax. You can read about the end points and data structures supported by Incarnate here. And, if you write a user interface using the service or a plug-in that works with Incarnate, let us know so we can feature it.

The Technical Details

Incarnate is a REST-based service that uses people's usernames to find their avatars on the web. It supports JSON with Padding (JSON-P), so it can be called from any domain. It's written in Windows Communication Foundation (WCF) using the REST Starter Kit in combination with the JSON-P encoder that ships as an extensibility sample with the WCF samples.

We have deployed an instance of Incarnate to Windows Azure, so it scales well. This instance is hosted at http://incarnate.visitmix.com. You also have the option of deploying an instance of Incarnate to your own server. You can download the source code here. You’ll see that the Incarnate infrastructure supports a provider model, so new providers can be easily added—as long as they conform to the very simple IProvider interface. So, for example, if someone wanted to make a Flickr provider (Flickr has publicly accessible avatars), they could do so. (If you write a new avatar provider, let us know so we can deploy it to our instance of Incarnate).

Additional documentation about writing a provider is available in the source code to the Incarnate service itself.

Incarnate On Channel9

Check out this interview Tim Aidlin and I did for Channel9 with the venerable Charles Torre about Incarnate.

A Word Press Plug In For Incarnate

Vicky Tamaru — Mon, 14 Dec 2009 20:00:00 GMT

Managing Your Avatars

These days, most people keep profiles on a number of popular sites like Facebook, MySpace, Windows Live, and Twitter. Dealing with all these profiles—and especially their accompanying avatars—can be tricky.

There are a couple of services that make managing avatars easy. One is Gravatar, which makes your avatar available all over the web by taking advantage of the unique email IDs that WordPress uses.

The other is Incarnate, a service that Karsten Januszewski and the Mix Online team built, which searches the web for your avatars based on a handle or email address you use. Simply type in your handle or email address, and it will deliver all the avatars you’ve been using across the most popular social networking sites.

Gravatar is already integrated with WordPress but until recently, Incarnate was not. To fix this, MIX Online asked us to help them build a WordPress plug-in. Below is a summary of how we did it.

But first, a note on WordPress.

What’s WordPress?

WordPress is open-source blog software that's used by a huge number of people across the web. Its open architecture and built-in tools allow you to quickly install plug-ins that make your blog do nearly anything you can think of. It provides a great, ready-to-use experience right out of the box.

A blog and comment engine are at the core of WordPress. The blog offers a nice rich editor and a wide range of posting options. The commenting feature allows blog readers to fill out a small form with their email (kept hidden) as their unique ID.

WordPress provides a whole array of points with which you can integrate plug-ins. You can easily add your own settings pages, widgets, and metadata or add markup, styles, and scripts to the site. If you want to learn more, the WordPress.org site has extensive documentation on the usage of each API call and plug-in function. There is also an active community of developers and contributors in the development forums.

Our Incarnate Plug-in for WordPress

We wanted our plug-in to do two things:

Allow the user to select an avatar from Incarnate.
Display the avatar next to the user’s comment

Selecting an Avatar

To allow the user to select an avatar, we used a tidy AJAX GUI. The user simply enters his or her handle in the box and selects an avatar from the graphic list. WordPress provides a nice hook for the comment form that allows us to add HTML to the page when the comment form is rendered. We used that opportunity to write a quick jQuery script that injects our GUI into the document right at the top of the form.

Once the user selects an avatar, we need to make sure its stored and associated with the content. This process is fairly straightforward and well documented. You simply add an API hook to validate the comment data. We used that validation opportunity to store the avatar URL in a database table for retrieval later.

Displaying the Avatar

As we dove into the docs, we realized we could override a variety of "pluggable" functions in WordPress. One of these was for displaying avatars. Any time an avatar would normally be displayed, we tell it to override with the URL from our own database record!

And just like that, WordPress users can now add great avatars for their comments without having to dig through their files for their favorite headshot. Even better, their avatar is updated dynamically based on the default avatar so that when a better photo comes along, they don’t have to update all across the many WordPress blogs they visit. Users have the flexibility of finding avatars from a wide range of sites—all through the Incarnate service.

Gravatar Preview

But we decided to go one step further. What about users who don't want to pull in their avatar and just want to post? Well, by default, WordPress would seek out their gravatar. After they've posted their comment they would see a gravatar on the page—but they'd never get to preview it. We used the logic built in to WordPress to pull in a nice preview of your gravatar after you've filled out your email address in the standard comment form.

Turning Off Auto-Incarnate

Lastly, we know that there is a huge range of WordPress templates across the internet. Users are adding new ones daily. What happens if they aren't following the WordPress best practices described in the documentation? We offer the blog owner the option of turning off the automatic Incarnate form and give them template tags they can integrate themselves.

Plays Well With Others

We've put together a plug-in that truly plays well with others. It uses the best practices outlined in the WordPress blogs and the latest jQuery and AJAX functionality to provide a seamless user experience—and greatly enhances the commenting experience for WordPress readers.

Adventures With Windows Azure Diagnostics

Karsten Januszewski — Fri, 04 Dec 2009 18:31:16 GMT

I recently took the Azure plunge, in preparation for an upcoming Mix Online Service we will be announcing soon. Things went relatively smoothly, but I hit few gotchas, especially when trying to get diagnostics and logging working. Below is a chronicle of said gotchas, with tips on how to resolve them.

Getting Started

To learn how to use the new diagnostics features in Windows Azure, I’d would recommend checking out the following blog post first. Next, there are some great samples that will help you get started:

1. The tutorial on Channel9 at http://channel9.msdn.com/learn/courses/Azure/Deployment/DeployingApplicationsinWindowsAzure/Exercise-3-Monitoring-Applications-in-Windows-Azure/

2. The Windows Azure SDK sample HelloFabric, which you can find as a vb or c# sample under Program Files\Windows Azure SDK\v1.0\samples-cs\HelloFabric

There was also a great session about diagnostics at PDC that is well worth watching:

However, even with all these resources, I still had some problems getting going, so I wanted to document my experience below.

Creating a Store In the Cloud

You have to explicitly create a store for your diagnostic information in the cloud. This was confusing to me, because you don’t have to set up anything when doing diagnostics in the local development environment—your logs get saved to the file system and your trace messages get saved to SQL Express.

To get your diagnostic information saved to the cloud, you need to create a storage account up at http://windows.azure.com. Note that this is different from SQL Azure. You don’t need to create a SQL Azure database; you need to create a storage account under the Windows Azure tab.

Once you create your storage account, you need to note the access key and then create a new connection string for your diagnostics store. It's tricky to find, but Visual Studio provides a nifty dialog to help you do so. (This is explained extremely well in Exercise three of the tutorial on Channel9 that I mentioned above, so be sure to read it.)

Once you change your connection string, all your diagnostics will be saved to the cloud instead of to local storage, even when you're doing local development. It's easy to flip your connection string back to the development connection string if you like, so you don’t pollute your store with development diagnostics.

Transferring Diagnostics and Logs to the Store

Once you set up your store, you need to change your application to transfer its diagnostics and logs to the store itself (Again, see the tutorial). To do this, first add some code to the constructor of the WebRole or WorkerRole. Then, if you want to log failed requests, update your web.config file. Finally, use System.Diagnostics.Trace.TraceError(), .TraceWarning() or .TraceInformation() if you want to output diagnostics from within your code,

Viewing Diagnostics Information

Seeing the diagnostics information was another problem I ran into. I had a store in the cloud, but couldn't get at the data in the store!

There are APIs that let you get at this data, but you may not want to write code. I found a few tools that helped me get around this: one is http://myazurestorage.com/. It's nifty, but you can’t see blobs, which is how the IIS logs are stored. That's a show stopper for me. The Codeplex project has a slightly better tool, http://azurestorageexplorer.codeplex.com, but it also some issues with dealing with blobs. I finally found http://www.cerebrata.com—a really great tool that's excellent for downloading blobs, as well as reading the diagnostic trace information from my service. Definitely check this tool out! Word on the street is that they will be releasing a new version soon with even more features, making this an essential tool when working with Windows Azure.

Getting Everything to Work

The last problem I had was getting everything to work. Once everything was running in the development environment but saved to the cloud, I upgraded my service to production in Azure. Nothing worked. Ultimately, I deleted and recreated the service. This did the trick. Even in the cloud, sometimes a “reboot” is the only answer.

I’m now set! I can access my IIS logs and get at the diagnostic trace information peppered throughout my code. Nice! Thanks to everyone who helped me up on the active and helpful Windows Azure forums.

Using the HTML5 Video and Audio Tag with Gestalt

Hans Hugli — Thu, 03 Dec 2009 03:55:46 GMT

It's true: Gestalt enables you to implement HTML5 video and audio tags. With just a little bit of JavaScript, Gestalt parses out media tags and injects all the HTML you need to embed a video or audio application. The Gestalt media player is also open source and customizable. Check it out at http://gestalt.codeplex.com.

Cross-Platform Support

Gestalt supports a media player that can play a list of media files in all browsers that support Silverlight—this means IE, Firefox, Chrome and Safari. Extend the Media Player

Since we shipped the media player, I've added support for a button that shows/hides captions and simple 508 support.

All the code + XAML can (but is not required to) reside in a single location, on a different domain than the player. This means that when changes are made to the underlying player code + XAML on the remote server, all players that point to those remote files are automatically updated with the new functionality and UI, which makes for a great web developer experience!

For now, the player code is available on VisitMix.com with a default implementation of the media player. But you can also place and modify your own versions of the code + XAML on your domain, and have all media players that point to your domain's files take on the UI and behavior of your version of the player.

Customize the Media Player for Your Domain

You can change the appearance of the media player by simply modifying the media.xaml file using a text editor or Expression Blend.

You can also add functionality to the Media player. Let’s say, for instance, that you want to create an audio player that plays stations from last.fm. Begin by adding a text field in the media.xaml. Then, add some classes that enable accessing last.fm API’s to the media.py file based on the textbox input—you now have a media player with new functionality.

Encode your Files in one Easy Step

In order for the media.py and media.xaml files to work cross domain, they need to be encoded into a JavaScript file using the conversion tool. This tool simply converts the Python and XAML into a format that can be injected into a remote page.

To get started, type the original name of the file in the filename textbox in the convert tool. For example if it was media.py type “media.py” in the textbox, without the quotes. Click the convert button and paste the resulting JavaScript in the bottom textbox into a file with the same name of the original file, with a .js extension. In the case of media.py, paste the code into a file named media.py.js. Do the same for the media.xaml file.

Once you've converted the files, replace the files of the same name in the DLR directory. Make a request to your media player, and the player with the updated functionality will appear. Note: You'll probably need to clear your cache and restart the browser for the changes to appear.

Again, all the files are available on CodePlex. There are even the beginnings of a last.fm station implementation up there as well.

Side Note

Google’s Chrome browser has an implementation of the audio tag that plays a single audio file. I was unable to replace their player with the Gestalt version, since the Stop method on the player did not seem to work for me.

To prevent audio files from playing simultaneously in their implementation and ours, I found it necessary to disable the Gestalt audio player in the Chrome browser. The shipping version of Chrome does not yet have an implementation of the video tag, so the Gestalt video player works just fine.

Developing with Gestalt

Gestalt brings all the power of the Silverlight programming model to web developers, without requiring an integrated development environment. It's nice to have an IDE when possible, so for Mac users we've provided TextMate bundles with support for Gestalt and XAML off the Gestalt downloads page. For Windows, the Web Platform Installer can install Visual Studio Web Developer Edition, plus the Silverlight tools. (See the tools section of the installer to install VSWDE 2008 and the Silverlight tools. Get it from http://www.silverlight.net/getstarted .

If you create a custom implementation of the Gestalt media player, let us know—we'll link to it or place it in our Library. And if you find Gestalt useful on your site, shout it out and we will add a link. Let us know what you think by leaving a comment. If you tweet, follow us on Twitter to learn about new content, opinions and articles.

JSON-P: An Elegant Hack (And Another Hack: Creating a JSON-P Service with the WCF REST Starter Kit!)

Karsten Januszewski — Mon, 16 Nov 2009 21:30:28 GMT

I'm working on some prototyping for an upcoming Mix Online prototype (a bit recursive, no?). My prototype provides a service with a REST interface, which has a few methods that send data via JSON and XML.

I'm using the WCF REST Starter Kit (http://www.asp.net/downloads/starter-kits/wcf-rest/) to get a REST service up and running quickly, and using the UriTemplate syntax to make my REST service nice and Web 2.0-like. It's working out wonderfully. Check out the Starter Kit and its excellent supporting documentation here: http://msdn.microsoft.com/en-us/library/ee391967.aspx.

The Cross Domain Scripting Problem

The service I'm prototyping will be consumed by other websites via javascript. At first, my architecture required the user to put a reference to my javascript in his or her page, to get around the cross domain scripting problem. This is pretty standard operating procedure, but it isn't ideal—someone who wants to use my script has to load a third-party script from a different server, and take a dependency on me.

In cases where the service provides more than data (say a mapping service like Virtual Earth), there's no way to get around requiring someone using the service to embed the script in their page. But in cases like mine, where the service is just providing data, it's best to allow the client to get at the data without referencing a script. But how? Browsers don’t allow cross domain calls from javascript.

As it turns out, there is a solution: JSON-P. The use of JSON-P allows my service to be called cross-domain without requiring an explicit embedding of a third party script.

What's JSON-P?

JSON-P is a Javascript Object Notation with Padding. What does that mean? Pretty simple, really: When a provider returns its data formatted as JSON-P, the JSON is wrapped with a callback specified by the client.

So, this JSON:

     { ‘name’: ‘Karsten’ }

becomes this JSON-P:

     myCallback( { ‘name’: ‘Karsten’ } );

myCallback gets called by the client when it is passed to the service. What's the point? Well, instead of referencing the third party script at design-time, the client can call the service just as they would call an AJAX service from the existing domain. The result? The client can get at data from a service that is cross domain.

Most javascript libraries support JSON-P, so you don't have to manually do anything—it "just works". With jQuery, you don't even have to provide the callback; you can just add a question mark to the end of the service call, like so:

     callback=?

The callback gets auto-generated and you simply embed your logic in the call, like this:

   $.getJSON("http://example.com/service?callback=?",        
       function(data) { 

        //do something with the data                
      });

Safety Issues

Some folks worry about security holes with JSON-P, but I wonder—is the JSON-P solution really that much different than embedding a script from another URL in your page?

I think not. In fact, you might argue that JSON-P is (marginally) more secure than embedding a third party script in your page, because usually JSON-P is just returning data.

I say marginally because there's nothing stopping the service that's returning the JSON-P from returning malicious code instead of data. So you'd better trust the service, just as you'd better trust any third party script that you embed in your page.

An Elegant Hack?

JSON-P might just be a cross site scripting hack—but it's a very elegant hack that means my service can be called cross domain. And it is becoming increasing popular. Services such as Twitter, YouTube, Digg and a host of other big name services out there offer their data up as JSON-P.

Supporting JSON-P

This all leads me to my prototype, in which I want to support JSON-P. JSON-P isn't supported by default in WCF until .NET 4. But, it turns out there is a very nice sample which supports JSON-P in WCF. Download it here: http://msdn.microsoft.com/en-us/library/cc716898.aspx.

JSON-P and the REST Starter Kit

It turns out that you can use JSON-P in combination with the REST Starter Kit. Here's the signature of a method that combines URITemplate features of the REST Starter Kit with the JSONPBehavior attribute, provided by the WCF JSON-P sample:

    [WebGet(ResponseFormat = WebMessageFormat.Json, 
            UriTemplate = "{userName}?cb={callbackName}")]   
    [OperationContract]
    [JSONPBehavior(callback = "callbackName")]
    public string GetDataJSONCallback(string userName, 
           string callbackName) 

    { 

        return userName + “: I was called by WCF!”; 

    }

What’s going on here? Well, the first attribute, WebGet, specifies that we want to 1) return JSON and 2) that our URITemplate has a path which includes the name of the callback. (Note: Don’t be distracted by the userName parameter; I included that to show how the REST path syntax works.)

The crux is that the variable name of the callback name, in this case callbackName, needs to match between the WebGet attribute, the JSONPBehavior attribute and the signature of the method call itself. If this is the case and all three are the same, magic happens: the service will return its data wrapped in JSONP with the name of the callback specified by the client. Thanks, WCF!

The Trade-off

When you use the JSONPBehavior attribute, you intercept the request and override the WCF MessageEncoder. This means you bypass some of the glue in the REST Starter Kit, so things like caching will no longer work. This is the only "gotcha" with combining the REST Starter Kit and the JSONPBehavior attribute. But for me, the tradeoff is worth it.

To make life more encapsulated, I went ahead and took the four classes from the JSON-P sample (JSONPBehavior.cs, JSONPBindingElement.cs, JSONPBindingExtension.cs and JSONPEncoderFactory.cs) and compiled them into a single .dll which I then referenced in my WCF Service. Hat's off to whoever wrote such a well-encapsulated sample.

Getting Familiar with MVC

Hans Hugli — Wed, 21 Oct 2009 23:37:00 GMT

The Redesign

Guess what? We’re in the early stages of a Mix Online redesign and I’m on point to develop the new site.

Members of my team, always helpful, have told me to take a look at the new Oxite MVC (Model/View/Controller) implementation. Oxite is a layer built on top of ASP.NET MVC that you can use for blog engines, websites, etc.—it even has Content Manage Services (CMS) built in.

I’ve had a limited exposure to the MVC pattern, so I did some research into the benefits of using a MVC architecture over a typical ASP.NET WinForm architecture. Here are some advantages that MVC promises.

Classic ASP.NET-like. Clean semantics in the .aspx files.
Tight control over markup output.
URLs are friendlier for users and Search Engine Optimization with “routing.” For example a URL such as “Wikipedia.org/wiki/model view controller” maps to an actual page that contains information on the “Model View Controller” architecture. This is *much* more meaningful than “www.somesite.com/default.aspx?contentid=1234.”
Frictionless testability - Each component has one responsibility which means they aren't used in multiple places in the application. This makes testing easier.
Improves code maintenance. MVC employs the DRY or “Don’t repeat yourself” principle, so that changes in elements do not affect the rest of the site.
Aids in concurrent development. The MVC framework separates the concerns of the Developer (in the Model and Controller) and Designer (in the View.)
MVC leverages Membership/Profile/Caching/Localization and the other services of ASP.NET that have made it so great.

No WinForms!

ASP.NET MVC does not employ ASP.NET WinForms, which can be limiting because they make final markup output difficult to control. Instead, MVC gives that total control back to the developer. It's also completely extensible, since the majority of the classes made available to the developer are not sealed, and are therefore inheritable.

With this complete control comes the responsibility to do some things “manually.” That said, I think most developers would rather work with a flexible and unimpaired model than be restricted when they need that special something that ASP.NET WinForms is simply not designed for.

Classic ASP?

As mentioned, MVC employs .aspx pages that use a classic ASP syntax. Although classic ASP can make it tricky to do more complex HTTP POSTS, for the most part it solves a lot of a website's basic problems.

As an added bonus, ASP.NET MVC also has features that help solve tougher problems like integrating client side scripts in an elegant way.

Learn More

The Model/View/Controller architecture has been around since 1979, so there’s a lot of information to sift through on the topic. If you're curious:

The Wikipedia description of MVC info is a good place to start, but there's also a lot of ASP.NET MVC-specific info out there: Scott Guthrie's announcement post gives a great overview; this video by Phil Haack is a nice demonstration of the ASP.NET MVC Framework; Brad Abrams' post is an example of MVC applied the Northwind database, also using the Entity Framework.

Have you found nirvana using MVC, or not? Have you found that there are applications that are better suited, or not well suited for MVC? I’m curious and would love to hear. Let us know by leaving a comment. And if you tweet, follow us on Twitter to learn about new content, opinions and articles.

jQuery Love: Microsoft’s CDN Service for Microsoft AJAX Library and jQuery

Karsten Januszewski — Fri, 02 Oct 2009 20:59:57 GMT

jQuery Love: Microsoft’s CDN Service for Microsoft AJAX Library and jQuery

A few weeks back, Microsoft announced a new content delivery network (CDN) that supports hosting for both the Microsoft AJAX libraries and the jQuery library. This is an exciting development and big step toward improving the performance of AJAX applications: by referencing the libraries hosted on the CDN, you can rest assured that users hitting your website will be served a copy of the library from a server local to their location.

The move also highlights Microsoft's commitment to supporting the jQuery library. Not only does the CDN host jQuery 1.3.2, it also hosts the jQuery VSDOC file, which provides intellisense for jQuery from within Visual Studio. (For more on using jQuery with Visual Studio, see http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx.) In addition, the CDN hosts the popular plug-in jQuery.Validate, which makes adding client-side validation to forms very easy.

If it isn’t clear yet, Microsoft—and we at Mix Online —are big fans of jQuery. In fact, we’ll be updating Mix Online itself to use the jQuery from Microsoft’s CDN shortly. And the next versions of Oomph and Glimmer will use the CDN, as will a jQuery-dependent project I’m currently working on (top secret!).

For more about Mix Online’s support for jQuery, check out Glimmer (an interactive designer for jQuery). And for more general info, check out Yehuda Katz's article on The Rise of jQuery and Dave Ward's piece on ASP.NET Developers and jQuery.

You can read more about the new CDN here. Below you'll find the short version—with all the URLs you need to know:

Microsoft Ajax Releases on the CDN:

Microsoft Ajax version 0909 (preview)

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjax.debug.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxAdoNet.debug.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxDataContext.debug.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxTemplates.debug.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxWebForms.js

http://ajax.microsoft.com/ajax/beta/0909/MicrosoftAjaxWebForms.debug.js

jQuery Releases on the CDN:

jQuery version 1.3.2

http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.js

http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js

http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2-vsdoc.js

http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min-vsdoc.js

jQuery Validation Releases on the CDN:

jQuery Validate 1.5.5

http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js

http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.min.js

http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate-vsdoc.js

DLR and JavaScript Interoperability with Gestalt

Hans Hugli — Thu, 27 Aug 2009 16:03:46 GMT

How can I mix the results of a Python script to do or execute a javascript function with Gestalt?

When one of our smart readers asked the question above, we knew we had a challenge on our hands. We accepted the challenge, took a look at the problem--and came up with two samples that show 1) calling a JavaScript function from Python or Ruby and 2) calling a Python or Ruby method from JavaScript. In this article I'll cover Python; the Ruby version is linked below.

Python, Calling JavaScript.

In the context of a Silverlight application, Python runs in an entirely different process than JavaScript. Still, Python can easily call a JavaScript function by using the HtmlPage class in the System.Windows.Browser namespace. Let's say, for example, that we have a JavaScript function named "javascriptFunction," like this:

<script type="text/javascript"> 
   function javascriptFunction(x) {
      alert(x);
   }
</script>

Here, we’ve imported the HtmlPage class into the Python script. This class contains an Invoke method which accepts a string: the name of the JavaScript function we want to call, plus a parameter list. In this snippet we happen to pass a string as our parameter, but we could just as easily pass an object:

<script language="python" type="text/python"> 
from System.Windows.Browser import HtmlPage 
HtmlPage.Window.Invoke("javascriptFunction", "Hello I'm 
   Python!"); 
</script>

What action results from these two fragments of code? As soon as the Python script executes, it makes a call to the JavaScript method and pops an alert box with the parameter that was passed. Very straightforward.

JavaScript, Calling Python.

Calling Python from JavaScript is a little trickier than the other way around, since Python is running in a different process. One solution is to register a JavaScript click event in the Python script so that when an HTML button click fires an event, it is caught in Python. This works--but is limited--since we want JavaScript to call a function that raises an event in Python. As a workaround we might try raising the button click event, but this doesn't successfully trigger the Python-registered event. Back to square one.

The best solution here is to expose the JavaScript function "registerDlrFn" that takes an object as a parameter. In this case, the object we're expecting is an EventHandler, which is assigned to a local variable "DlrFn". Once the variable is assigned, we can simply fire the event by calling it. We wrap the call to fire the event in the function "callDlrFn":

<script type="text/javascript"> 
   function registerDlrFn(fn) { 
      DlrFn = fn; 
   } 
   function callDlrFn(x) { 
      DlrFn(x, null); 
   } 
   callDlrFn ("Hello this is javascript"); 
</script>

We’re not quite done yet, though. For Python to catch the call to the "registerDlrFn" function, we need to use the HtmlPage.Invoke method again. This time we pass an event handler that's cast to HtmlEventArgs, which is bound to "PythonMethod," the method we want to call from JavaScript. Note that when the Python script is executed, the "registerDlrFn" function is invoked immediately. The EventHandler is passed and assigned to "DlrFn" in the JavaScript. Thus, the HTML DOM becomes aware of the EventHandler, making it callable from JavaScript:

<script language="python" type="text/python"> 
from System.Windows.Browser import HtmlPage 
def PythonMethod(s,e): 
   window.Alert(s) 
HtmlPage.Window.Invoke("registerDlrFn", 
   EventHandler[HtmlEventArgs](PythonMethod)) 
</script>

The Lesson?

As you can see, calling Python from JavaScript was less intuitive than the other way around. This same approach applies to Ruby and JavaScript interoperability. You can find a Python sample here, or a Ruby sample here. Remember to right-click if you want to view the source code for the samples!

We appreciate and look forward to your feedback. Please don’t hesitate to leave a comment, and if you twitter, follow us there to hear when we release new content, opinions or articles.

Writing a UserControl in Python

Hans Hugli — Fri, 31 Jul 2009 22:46:35 GMT

While putting together samples for Gestalt, I found that I could save a vast amount of time creating a control’s UI using XAML (XML Application Markup Language) as opposed to spending time to generate it programmatically. It’s not only time consuming creating it in verbose code, but it forces you to spend time getting to understand the nuances of XAML-to-code translation.

Incidentally, in case you are not familiar with Gestalt, it is a javascript that you can add to your web pages, which enables web developers to write rich web applications without the need of an Integrated Development Environment. Now you can write RIA applications using only XAML, and Python or Ruby! Behind the scenes Gestalt uses Silverlight to generate the UI.

I’m going to examine the code for the Advanced Trigonometry sample to see how we employed UserControls to create “Node” objects.

A fairly elegant approach to accomplishing this task is to create a typical XAML file and load it using the .Net XamlParser class. We download the XAML file using the .Net WebClient class, which returns it as a string. In the sample’s initialization we begin the process of creating our “Node” UserControl by first calling:

client = WebClient() 
client.DownloadStringCompleted += NodeLoaded 
client.DownloadStringAsync(Uri("node.xaml", 
     UriKind.Relative))

When the XAML has been downloaded as a string, the NodeLoaded event fires. In the NodeLoaded method the string is cached in the _node variable.

def NodeLoaded(sender, e): 
   global _node 
   _node = e.Result

Before I move on, we need to take a look at the Node class which inherits from UserControl (inside the parens means inheritance in Python) and takes a string, xaml, as a parameter. The CreateObject method calls the XamlReader.Load method. This method accepts a string and generates an object graph. The Content assignment makes the call to the CreateObject method and assigns the generated object graph to the UserControl’s inherent Content property.

class Node(UserControl): 
   def __init__(self, xaml): 
      self.xaml = xaml 
   def CreateObject(value): 
      return XamlReader.Load(value) 
   self.Content = CreateObject(self.xaml)

Now the UserControl can be created. The Main() method calls:

n = Node(_node)

which passes in the Node.xaml contents as a string, and in turn creates a Node instance. To access any of the XAML elements in the XAML they need to be accessed via the Content property, like so:

n.Content.MyXamlElement.MyXamlElementProperty = somevalue

Another very useful thing to know is how the create Python properties in classes, there are many approaches. This is the basic approach I took in the Python 2.6 implementation that the DLR uses. In the class definition you must create two methods and refer to them in a call to the property method. If added to the above Node class, the following fragment would update the node’s Left position when the X property of the node is set, and return its Left position when retrieved.

   ### X property ### 
   def SetX(self, value): 
      self.SetValue(Canvas.LeftProperty, 
         Convert.ToDouble(value)) 
   def GetX(self): 
      return self.GetValue(Canvas.LeftProperty) 
   X = property(GetX, SetX)

Finally, assign the Text property of one of the Node’s XAML elements, and add the created node to a “nodes” Canvas, specified in the main application xaml, like so:

n.Content.display.Text = "I am a node"
nodes.Children.Add(n)

Knowing how to create a UserControl in Python with Gestalt, greatly increases productivity, and you can start putting together some very robust applications now. You should know that these UserControls cannot be directly referenced in any XAML since the XAML would need to contain assembly references to your custom UserControls. Today there is no built in support for this scenario, but to work around this, simply add UserControls to XAML elements programmatically.

Note that this sample depends on being served off a web server since it is utilizing the WebClient and so will not work on the local machine alone. The source to this entire sample (including the XAML files) is available here.

If you have a comment, or if you have an even cleaner approach that eliminates the need for accessing XAML elements via the Content property, please do not hesitate to leave a comment Leave a comment, and if twitter is your thing, follow us.

TreeMaps

Hans Hugli — Thu, 09 Apr 2009 20:29:18 GMT

In working on Descry we wanted to have one of the samples show a TreeMap infographic that displayed some data in an interesting way. Since the elections were occurring right at the time of the Descry launch, Nishant suggested that we show inaugural data in our TreeMap. This TreeMap shows the incidence of occurrence of particular words or phrases grouped in the TreeMap visualization.

When we originally wrote the TreeMap code, I had ported the TreeMap control from a Windows Presentation Foundation sample in the WPF Bag o’ tricks that was a single tiered implementation of a Squarified TreeMap. What is a Squarified TreeMap? Historically TreeMaps tended to sort items ascending by their children’s weights; i.e. items are listed in decreasing order of size, but this leads to the problem of children becoming increasingly thin vertically or horizontally as ever more children are added to a TreeMap, and makes it difficult to get a sense of relative size and also is not very esthetically pleasing. This article written by Jonathan Hodgson explains the problem very clearly and graphically, and it also points to the original research that was done to dramatically improve the effectiveness of the TreeMap to communicate information. I found it to be very interesting, and I wanted to be sure to pass it along.

Though our inaugural sample shows data in a single tier, the TreeMap implementation supports the nesting n-tiers of data; i.e. where TreeMaps contain other TreeMaps, this enables display of tiered or nested data such as a hard drive directory or any kind of data that has a hierarchal tree signature.

Tim Heuer just recently pointed out some very timely financial information that is well suited for a TreeMap control. He was referring to Department of the Treasury funded transactions of the Capital Purchase Program (CPP). The government site shows a U.S. map that displays the sum total of transactions per state on a mouse over and a list of the transactions per state when you click on a particular state.

I need to step back a moment and say that the purpose of a visualization is to answer a question. In the CPP case the question that the author most likely ask was: What is the sum of transactions for a given state? The map infographic answers that question well, but suppose we wanted to ask: Which state is getting most of the money? The map infographic does not answer this well since you would need to literally mouse over every single state to find the largest dollar amount.

One of the ways to answer our new question is to use a TreeMap control since it can give a sense of how large the transactions are for a given state relative to one another. To make this possible the data needs to be grouped by state, and then by institution. The above government site provided a link to the XML source that was used to generate their graphic, so I thought I’d try to quickly put this data into a TreeMap infographic.

I find that getting data into a format that a particular type of visualization such as a TreeMap can consume, is typically the most time consuming part of creating a visualization or infographic. There are two routes, in my mind. Write the visualization control in a smart and generic way so that it can consume many types of data sources, or alternately write it so that it will only accept one type of data source (such as a specific XML format) and put the burden of munging that data into that specific format, on the user. Which one is more useful depends on what arena you come from; for a developer doing XML transforms is not too uncommon, but for someone less technical, a generic control would be more useful. It seems with flexibility comes complexity.

For this case I did the later; I reformatted the XML to allow the TreeMap control to consume the CPP data. The infographic is posted, click on the image to see it.

View the sample, and download the source for this sample here available via the Descry project on CodePlex.

What are your thoughts about creating reusable infographics? What have you found to be effective? Let us know in a comment or you can always contact me, or Subscribe to our twitter feed if you'd like to stay in touch with us.