Google Chrome OS

http://www.wired.com/gadgetlab/2009/07/five-things-googles-chrome-os-will-do-for-your-netbook/

But will I be able to play games on it?

Integrating Google Analytics with your Silverlight Streaming application

No dice. Can’t be done. Here’s why.

To track an action you need to invoke the trackPage() function defined in ga.js. The function must be invoked from the same domain registered in your Google Analytics account, in my case that’s “andrewmyhre.com”. So in order to track events from my Silverlight app I need to call up to the parent frame and invoke a function to track the event. Unfortunately, because my Silverlight application is running on an entirely different domain (something like “silverlight.services.live.com”) the browser throws a “Permission denied” error when I try to invoke parent.trackPage().

There is no way around this. That behaviour is by design, in order to prevent cross-site scripting attacks.

So I’ve moved the Silverlight and media files to my hosting account where I can load everything under my own domain. That’s cool because I have 1gb of space there and the total media payload is around 500mb. It’s also a real shame, it was cool to be using a new beta service like Silverlight Streaming, but unfortunately event tracking is a deal breaker for me.

Maybe there are some coders out there who know how to get around this, or maybe the Silverlight Streaming team have a workaround… I can’t really see it happening though. Shame.

On the bright side though, the videos seem to be streaming much more quickly now!

Design Your Experience

So I deployed a personal website last week which I was quite happy with at the time but over the last few days I’ve thought of some features I wanted to add. I wanted visitors to be able to do a couple of things when they view my website:

• pause and skip the music (not everyone likes minimal-tech-dub)
• choose which videos are in rotation
• i also want the UI not to get in the way when not in use

So I added an options panel. It presents you with a pause/play button and a skip button to control the music. Most people, including myself, hate it when websites play music and you can’t stop it so here’s the option. I used the WebDings font for the button icons which I copied from my windows folder into my solution and embedded it.

Further below in the options panel you have a list of checkboxes which determine what kinds of videos are circulating in the pool that can be selected to play. Uncheck the ‘cows’ tag to any videos everything featuring cows, for instance. I use System.Linq methods to regenerate the pool on each click, like so:

if (c.IsChecked.HasValue && c.IsChecked.Value)

{

tagSet = tagSet.Union(new string[] { tb.Text }).ToArray();

}

else

{

tagSet = (from t in tagSet where !t.Equals(tb.Text) select t).ToArray();

}

string[] tagSet = new string[10];
if (c.IsChecked.HasValue && c.IsChecked.Value)
{
    tagSet = tagSet.Union(new string[] { tag }).ToArray();
}
else
{
    tagSet = (from t in tagSet where !t.Equals(tag) select t).ToArray();
}

In the above snippet, tagSet is my collection of active tags, it’s just a string array as I’ve indicated with the declaration on the first line. The first logic branch is adding the selected tag to the array using a Union() and the second logic branch removes it by performing a select where not equal. I wonder if this is awfully inefficient.

Finally at the very bottom of the options panel there are some blurry lines which now and then shrink and expand. These are gauges which indicate the current buffering and download progress of the videos. If you look closely you can see four distinct lines. The 1st and 3rd lines indicate buffering progress while the 2nd and 4th lines indicate download progress.

What’s actually happening behind the scenes is that while one video is playing another one is silently buffering. Once the background video source is ready to play and the timing is right a cross-fade transition will occur. As soon as the transition is completed the video source that was previously in the foreground begins buffering the next video in the pool, and so on the so forth. I can see what’s happening by switching into my diagnostics view:

I’m reasonably happy with the way that the options panel slides out smoothly to meet the mouse cursor as you move it towards the left-hand side of the screen, and retracts discretely in the same way. I’ve wanted to experiment with this method of revealing/hiding UI for a while and I like this as a prototype. I’m not a designer though so I’m pretty sure the whole thing could be much slicker.

One more thing I’ve added is a little ‘loading’ note with initial buffering gauges. There are two separate white bars which indicate the loading process – these are for source A and source B which I load both of initially before video starts. Sometimes however (actually, quite frequently) Silverlight is loading a cached video, so it doesn’t need to buffer in which case Silverlight reports a buffering progress of 0.0. This isn’t the desired behaviour in my case, because it means I have to set up some hacks to detect this case and show a full buffering gauge instead. From my point of view this is a bug.

Silverlight Streaming and Google Analytics

I can’t seem to find a way to implement page/event tracking from Silverlight using Google Analytics when hosted using Silverlight Streaming. The usual solution to do this with with a regular Silverlight app is to reference the Google Analytics ga.js script and call HtmlPage.Window.Invoke() from Silverlight. But a difficulty arises because that javascript is executed in the context of the Silverlight application, which (in my case at least) is inside an iframe, and therefore can’t use the ga.js script.

One of the features available with creating a Silverlight Streaming application is to include javascript files with your Silverlight app so that you can use them from Silverlight, but ga.js isn’t my script so I can’t do that. Unless I downloaded the obfuscated version using Firebug or something… but… ugh!

I’m sure there will be some combination of HtmlPage.Window.Parent.Parent.Whatever I can use to do what I want to do, but I’m already into my second glass of wine for the evening and my brains starting to go on holiday. Any UK devs just waking up want to tackle this problem?

I guess you could simulate the issue yourself by adding a new .html page to your standard Silverlight hosting website containing an iframe with loads the Silverlight test page. In fact that’s how I’ll start tackling it tomorrow.

For now, I’m going to call it a night.

I see I’m getting a little bit of new traffic/twitter follows which I guess I can attribute to my new website… not because I think it’s brilliant but because there aren’t many actual cases of websites making use of Silverlight Streaming, so the Silverlight enthusiasts on Twitter seem to be retweeting. Maybe I’m wrong but if I’m right, thanks everyone, and please provide feedback about what I’ve made. I’ll be really pleased to hear from you.

Providing custom ‘no-Silverlight’ UI using Silverlight Streaming

When building and hosting your own Silverlight application it’s pretty simple to provide whatever custom UI you want when a user doesn’t have a required version of Silverlight installed. Refer to Tim Heuer’s article on the subject: http://timheuer.com/blog/archive/2008/03/25/creating-a-great-silverlight-deployment-experience.aspx.

When using Silverlight Streaming, however, it’s not that simple. The two methods provided for embedding your Silverlight application don’t provide a neat space to put your own HTML so you can’t easily ‘own’ the experience.  In my case I used the iFrame solution because I couldn’t get the other method to work straight away.

What I did to get around this was to download the latest Silverlight.js from here: http://code.msdn.microsoft.com/silverlightjs, and the latest JQuery from here: http://docs.jquery.com/Downloading_jQuery#Current_Release.

Reference both scripts from your web page and then add the following script:

$(document).ready(function() {

if (Silverlight.isInstalled(’2.0.30226.2′) == true) {

showSilverlight();

}

else {

showCopy();

}

});

$(document).ready(function() {
    if (Silverlight.isInstalled('2.0.30226.2') == true) {
        showSilverlight(); // function to display the iframe & hide the default copy
    }
    else {
        showCopy(); // function to hide the iframe & show the default copy
    }
});

And that’s it!

Note: there’s a comment on the silverlight.js download page that the script links to an older version of the silverlight player. It seems to be correct but even when I updated my script file I still got the ‘older version of Silverlight’ message when using Chrome. Also I don’t know yet whether the experience works on a Mac – if anyone can let me know I’d really appreciate it!

Giving Silverlight Streaming a go

I’ve been in New Zealand since April undergoing the arduous process of changing my visa to a UK work permit. That’s another story but what’s important is that I wanted to capture some of the scenery on video while I was here, and I figured a cool way to present it would be in a Silverlight application on a website. I didn’t have a personal website yet, so I decided to create http://www.andrewmyhre.com.

A couple of weeks and 3 roadtrips later, I’ve got some footage and a Silverlight application. I cut the video up using VirtualDub and encoded it into .wmv using Expression Encoder, which I’m very impressed with. The video and music are a combined total of around 300mb, and while my current hosts offer a minimum 1gb storage space on their hosting server I wanted to try something new. At first I figured Azure would be good to have a go at, but while I was googling Silverlight hosting I came across this: Silverlight Streaming.

Silverlight Streaming is currently in free public beta, and the basic deal is this: register yourself an application account, upload your silverlight application (XAP will do) in a .zip file and any media assets it needs and you’re given a script you can plonk into a web page to present the Silverlight app. They provide up to 10gb storage and they won’t charge you for bandwidth use – sweet!

It took me a couple of attempts to work the thing out, because the documentation seems little vague. I’ll enumerate some of the idiosyncracies I’ve come across.

The way the service works, which took me a little while to work out, is that it hosts your Silverlight XAP file and any media assets it needs. It doesn’t host the website your Silverlight is contained in. It’s up to you to create your website on another web host and reference the Silverlight app. Furthermore you can’t reference the XAP as you would regularly using an <object> tag or the Silverlight .Net control, because all of the files in your Silverlight Streaming account are only accessible from the Silverlight Streaming servers. You’ll just get access denied errors if you try. So the Silverlight Streaming website provides a couple of ways to embed your Silverlight using JavaScript or an iframe, which from my point of view is fine. The HTML for both methods is provided on the page for your application (browse to Manage Applications and select the appropriate application on the next page).

Deploying your application is straight forward when you know how. Create a standard Silverlight project and build it. Now browse to the /ClientBin folder and zip the .xap file. This is the file you upload as the ‘application package’ file. You can optionally include a manifest.xml file which specifies some metadata about your .xap – stuff like Silverlight version, desired width/height and some other guff. Pretty clear why it needs to be specified but including it in your zip file is optional as you can create one manually in the Silverlight Streaming application manager.

When I built my Silverlight website I added the video files to a /Video folder within the host website, and I wanted the same structure in the hosted Silverlight Streaming application. Well it’s not that simple, because Silverlight Streaming doesn’t provide you with a nice RESTful file system API. It’s more like you are given a bucket for your application, and whatever you include in your Zip file gets placed in that bucket in the structure provided.

So I was able to create my structure by including all of the video files within the Zip in a /Video subfolder BUT the Zip file was ~300Mb, so what happens when I want to update the XAP file? I have to update the Zip file and re-upload the whole thing, which on my connection is a 2+ hour operation. This is because every time you upload an application package your whole application bucket is cleared and replaced with the contents of your Zip. So this is not the ideal method for uploading media. Fortunately, there is another method, detailed below, which works for videos. Unfortunately, other types of media, like mp3, wma, jpg etc MUST be uploaded in this way.

An alternative to including the media in the Zip file is to use the Manage Videos function in your Streaming account. Here you can upload individual video files one-by-one into their own seperate little buckets. It’s a matter of clicking Upload Video, Browse for the file on your hard-drive, click the Upload button. You’ll get a nice little progress bar to tell you how the upload is progressing. Once you’ve uploaded your videos, each one is given a unique URL which will be something like http://silverlight.services.live.com/[accountnumber]/[videoname]/video.wmv. This makes it pretty easy to reference the videos from within your silverlight application.

In my case, I have around 100 videos all numbered sequentially. In my silverlight application there’s a For loop which generates the array of filenames to access, so the above pattern works nicely.

I have a couple of little issues with the management interface so far. The nice thing about the application package upload process is that it takes the contents of a Zip file and extracts them to a bucket with the file structure intact. Nice! But why can’t I do this with videos? Or on the other hand, why do I have to upload the entire Zip again when I just update one file? Why can’t I have the option to UPDATE my files, i.e: overwrite anything existing and leave anything else on the server untouched? I either have to spend all day uploading each video one-by-one, or wait all day for a gigantic Zip file to upload. Guys, please, do something about this.

The other issue is regarding non-WMV file formats. While I’m free to upload video files to the service, what about other formats like mp3 and wma? My application is video clips with a seperate audio soundtrack, which I want to keep separate. The audio files are in WMA format there’s about 200Mb of them. But the only way to upload anything other than WMV is to include it in the application package Zip file! WHY?? To get around this issue I used Microsoft Expression Encoder to encode them as WMV with a blank video track – which added about 50% to the total file size. I then uploaded them individually just like all the other videos. I’m not at all happy with the situation but there’s currently nothing I can do about it, I just have to spend hours and hours uploading these things.

So it’s a mixed bag. YAY for free media hosting, that’s awesome. All they need to do is allow for uploading a single Zip with all your videos in it seperately from the application package, OR allow foran application package UPDATE option which preserves files on the server where they’re not included in the zip. Also if they added the same upload progress bar we get for videos to the application package upload, that’d be tops. My website should be online in a few days, once I’ve finished uploading everything. *sigh*

The Windows Hosts File Just Saved My Skin

I had an issue today where a virtual machine couldn’t connect to our team foundation server. I had connected the client machine to the VPN, could ping by IP but not by hostname. I suspect it was to do with the fact that my VM is not part of the AD. I didn’t want to connect it to the AD because keeping a VM off the domain saves headaches. So after a few moments trying to think of a workaround I remembered the Windows Hosts file. I added an entry to map the IP for the TFS server to the domain name it should have and – voila – my visual studio solution was able to connect as normal. I’ve never ever used that file to do anything useful before, so this was a first.

Alt.Net Beers #7 was a good time

Thanks to everyone who attended Alt.Net Beers #7 and made it such a fun, interesting night. I hope everyone learned a whole heap about DDD – I know I did.

Create a list in a SharePoint site programmatically

Creating a list programmatically might be handy when you need to do this in a web part or, if you’re in the situation I was in today, you need to create a list where the template is not available on the Create page.

In my case I had a Collaboration site but I needed to create a Discussion Board – impossible using the SharePoint UI. How to get around this?

The first solution that occurred to me, and what I assumed I HAD to do, was to create a custom site definition. I had no idea how to go about doing this so this was a daunting prospect. But it occurred to me that, ultimately, I’ll only need to do this one time, maybe twice, and my users will never do this. So why go to all that trouble when the purpose of a site definition is to create a repeatable story for your end users? All I needed was a one shot hack.

So I remembered the SharePoint object model, and wrote an app. This app takes three arguments – Site URL, List Name, List Template ID. I used it to create a new discussion board in my site, it’s repeatable enough for my purposes, and it took me 5 minutes to write.

The code is provided below, but I want to hit home the point of this post – SharePoint is not as difficult as you think. There is always a simple way to do what you want to do. The difficulty is remembering to think outside the UI. I used to think that where SharePoint build was concerned I’d have to get used to telling customers ‘No’ but, as it turns out, that’s not that case at all.

CreateList.exe Source

1 using System;

2 using System.Collections.Generic;

3 using System.Linq;

4 using System.Text;

5 using Microsoft.SharePoint;

6

7 namespace CreateList

8 {

9 class Program

10 {

11 static void Main(string[] args)

12 {

13 if (args.Length == 0)

14 {

15 PrintListTemplates();

16 return;

17 }

18

19 bool validArgs = true;

20 if (!Uri.IsWellFormedUriString(args[0], UriKind.Absolute))

21 {

22 Console.WriteLine(“Arg 0 must be an absolute Sharepoint site URL e.g: http://mysite.com”);

23 validArgs = false;

24 }

25

26 int templateId=0;

27 if (!int.TryParse(args[2], out templateId))

28 {

29 Console.WriteLine(“Arg 2 must be a valid list template id from the following list:”);

30 validArgs = false;

31 PrintListTemplates();

32 }

33 if (!validArgs)

34 {

35 Console.WriteLine(“Invoke with no arguments to get a list of available SharePoint List templates”);

36 return;

37 }

38

39

40 Uri siteUrl = new Uri(args[0]);

41 string listName = args[1];

42

43 AddListToSite(siteUrl, listName, templateId);

44 }

45

46 private static void AddListToSite(Uri siteUrl, string listName, int SPListTemplateTypeId)

47 {

48 using (SPSite site = new SPSite(string.Format(“{0}”, siteUrl)))

49 {

50 SPWeb web = site.OpenWeb();

51 Guid listGuid = web.Lists.Add(listName, “”, (SPListTemplateType)SPListTemplateTypeId);

52 SPList list = web.Lists.GetList(listGuid, true);

53 }

54 }

55

56 private static void PrintListTemplates()

57 {

58 string[] typeNames = System.Enum.GetNames(typeof(SPListTemplateType));

59 Array typeValues = System.Enum.GetValues(typeof(SPListTemplateType));

60

61 int j = 0;

62

63 foreach (int i in typeValues)

64 {

65 Console.WriteLine(typeNames[j++].ToString() + ” “ + i.ToString());

66 }

67 }

68 }

69 }

The Sharepoint Development Experience Part 2

In this article I’m going to explain the process of setting up a new Sharepoint solution project. The purpose of creating a Sharepoint solution is that it provides the most friction-free method of deploying and managing your custom Sharepoint code. The alternative method of deploying your custom assemblies is quite manual, it involves dropping your assemblies into the GAC on the server and modifying the web.config to allow your new custom web parts to be used by Sharepoint. It also means that when you build an updated assembly you have to manually delete the old one from the GAC and replace it. The trouble with this method is that you’re setting yourself up for pain in the form of manually maintaining your GAC which, trust me, isn’t worth it. If you screw something up you could potentially completely break your Sharepoint sites and if you don’t have the right assembly to hand you have no way to fix them again.

So anyway, moving on, let me show you the right way. This is process will seem pretty long, and I suppose it is, but you only have to do this once per project. It’s about as involved as setting up a continuous integration process.

So in this example I wanted to write a web part that would let me display a Flash movie in a page. The web part is very simple, so the purpose here is to demonstrate how I create the solution and package it up unto a ‘Sharepoint Solution Package’ so that Sharepoint can manage deployment and retraction of the assemblies for me.

1) I begin with an empty class library project.

2) The first thing I’m going to do is create three folders: ‘lib’ for reference assemblies, ‘WebParts’ for my web part classes,  and ‘Packaging’ for package information files which Sharepoint will take heed of.

3) I need to reference the Microsoft.Sharepoint.dll in order to inherit my web part classes from the WebPart class. I can find this living on a Sharepoint server in the c:\program files\common files\microsoft shared\web server extensions\12\bin folder. I’m just going to copy that file into the /lib folder inside my project:

4) I’m also going to throw log4net in there just because I’m bound to want to use it. I add a reference to both assemblies:

5) And I go ahead and create my web part. There are loads of tutorials out there for creating web parts and that’s not the focus of this article so I’m going to gloss over it, except to say all I’ve done here is inherit from System.Web.UI.WebControls.WebParts.WebPart and overridden the Render() method:

6) Okay, now we need to add two files to the /Packaging folder: manifest.xml and package.ddf. Manifest.xml is there to describe what your package is supposed to for Sharepoint – what files to add to the server, what to do with your assemblies and what controls you want to be marked as ’safe’. It looks something like this:

<?xml version=“1.0“ encoding=“utf-8“ ?>

<Solution SolutionId=“[generated guid]“

xmlns=“http://schemas.microsoft.com/sharepoint/“>

 

<Assemblies>

<Assembly DeploymentTarget=“GlobalAssemblyCache“ Location=“[assembly name].dll“>

<SafeControls>

<SafeControl Assembly=“[assembly name], Version=1.0.0.0, Culture=neutral, PublicKeyToken=[public key token]“

Namespace=“[web parts namespace]“

TypeName=“*“

Safe=“True“ />

</SafeControls>

</Assembly>

<Assembly DeploymentTarget=“GlobalAssemblyCache“ Location=“log4net.dll“ />

</Assemblies>

</Solution>

The assembly name and namespace you’ll plug in yourself, the key token is obviously where you paste your assembly’s PKT, and the GUID you can just generate yourself. We’ll generate the public key token in the next step.

7) The other file is package.ddf. We need this file because a Sharepoint Solution Package file is actually a MS Cabinet file, so we use makecab.exe to create it. The package.ddf file is the script for makecab.exe to know what files to package up, where to put them in the archive, and some other meta data about it. Here’s what the contents of my package.ddf file looks like:

.OPTION EXPLICIT ; Generate errors

.Set DiskDirectoryTemplate=CDROM

.Set CompressionType=MSZIP

.Set UniqueFiles=”ON”

.Set Cabinet=on

.Set DiskDirectory1=Package

 

;Manifest

..\..\Packaging\Manifest.xml manifest.xml

 

; Assemblies

TequilaSharepointTools.dll TequilaSharepointTools.dll

..\..\lib\log4net.dll log4net.dll

So now I have the two files in my Visual Studio project:

Now the next thing I need is to generate a public key token for my assembly, and in order to do that we need to sign the assembly. That’s really straight forward and again there are tutorials all over the place for that. Just in case here are a couple of shots:

9) Cool, now to get the public key token you can just build the assembly and drop it into your GAC, then right-click on it and view the Properties. The public key token is there. OR you can follow this genius little walkthrough to add a custom external tool to Visual Studio to discover it automatically. That’s what I did so this is what the result looked like:

Now go back and paste the key token into your manifest.xml.

10) The last piece of setting up our project is adding a post-build step to run makecab.exe and generate our Sharepoint Solution Package. Open the properties for your class library project and select the Build Events tab. In the space for post-build paste the following command:

makecab.exe /f ..\..\Packaging\Package.ddf /D CabinetNameTemplate=[YourSolutionName].wsp

Substitute [YourSolutionName] for the name of your solution, mine is TequilaSharepointTools.wsp

11) Build the solution and browse to the output folder (probably /bin/debug). You should see a new folder in there called Package. Inside there’ll be a .wsp file:

12) The .wsp file is actually a cabinet file. You can prove this by changing the extension to .cab and opening the file in a program like WinRAR:

13) Now we’re ready to deploy to Sharepoint. Copy the file to your Sharepoint server and open a terminal window on the server. You’re going to run stsadm.exe which lives in the c:\program files\common files\microsoft shared\web server extensions\12\bin folder on the server. You need to run a couple of commands on it so to save yourself some sanity you should modify the path environment variable first:

path=%path%;c:\program files\common files\microsoft shared\web server extensions\12\bin

Now the first command is to add the solution to Sharepoint:

stsadm -o addsolution -filename TequilaSharepointTools.wsp

And finally, to deploy the solution to a particular Sharepoint site:

stsadm -o deploysolution -name TequilaSharepointTools.wsp -url http://lon-dean-dev3:9003 -immediate -allowgacdeployment

14) My Flash web part is now deployed to my Sharepoint site, but before I can use it I just have to do one quick thing, which is add it to the web part library. In your Sharepoint site browse to the Site Settings page and click the Web Parts link:

In the web parts gallery click the New link:

Scroll down the web part list until you find your web part. Click the checkbox…

… and scroll back up to click the Populate Gallery button.

Finally you can now add your web part to a page!

Woot. That’s the hard work done. Now that you’ve done this it’s only a hop, skip and a jump to integrate it with continuous integration, and your development experience will be nice and simple.