| Comments

I’ve received a few emails about updated code for the Scott Guthrie MIX09 keynote demo referred to as “bouncing plane” Silverlight demo.  A screenshot of this demo is seen here to refresh your memory:

Bouncing plane Silverlight demo

There really isn’t anything ‘new’ about this demo code for SL3, other than being recompiled.  Perhaps the only real change is to accommodate the new requirement that pixel shaders are resources of the project.  You’ll see the Effect1.cs code file where the constructor code for the shaders uses:

   1: pixelShader = new PixelShader();
   2: pixelShader.UriSource = new Uri("/BouncingPlane;component/ShaderBytecode/Ripple.fx.ps", UriKind.Relative);

If you are writing shaders, I’d refer you to my post talking which has some Visual Studio code snippets and item templates so you can say Add New Item…Silverlight Pixel Shader and get the appropriate stub code already there for you!

Here’s the Visual Studio project for Silverlight 3 for the bouncing plane demonstration: BouncingPlane_SL3.zip.

UPDATE: Hosting a demo of it (minus the video, so you'll get an error if you choose video) here: Bouncing Plane Silverlight Demo.

| Comments

I’ll be joining Dan Wahlin and Rob Bagby on 18 May in Phoenix for a Best of MIX event.  I’ll be presenting Silverlight 3 and building data-driven line-of-business applications.  All demo, all tech, all Visual Studio as my presentation tool :-).

Come out and join us for the event!

Best of MIX Agenda

Monday, May 18, 2009
1:00 PM - 5:00 PM
Wells Fargo Conference Center
100 West Washington Street, MAC S4101-017
Phoenix Arizona 85003

What’s New in Silverlight 3?

Are you interested in building business-focused Rich Internet Applications (RIAs)?  Would you like to take advantage of 3D in the browser, but assume it is too hard?  Have you wanted to take a Silverlight application offline?  Then this session is for you.  We will explore and illustrate the new features of Silverlight 3, including the following:

· Support for perspective 3D

· Offline Support

· .NET RIA Services which simplifies the traditional n-tier application pattern by bringing together the ASP.NET and Silverlight platforms

Building Web Applications with Windows Azure

This session will begin with a brief overview of Azure and discuss some of the announcements made at MIX.  We will then illustrate through demo how to build a Windows Azure application from the ground up.  We will illustrate how to consume Azure Table Storage, how to host services, web pages and Silverlight components, as well as how to deploy your solution to the cloud.

MVC 1.0 vs ASP.Net Webforms

Have you heard about the new ASP.NET MVC  framework from Microsoft and wondered what it was all about? Are you curious whether this replaces ASP.Net Web Forms?  In this session you will learn how to use the model-view-controller (MVC) pattern to take advantage of your favorite .NET Framework language for writing business logic in a way that is de-coupled from the views of the data.  In addition, we will talk about the pros and cons of both MVC and Web Forms, how to determine the best choice for a specific project, various techniques and patterns used to build MVC applications vs. Web Forms applications, and the implications for using each approach.

Register for the Event

| Comments

Last week I was wanting to do something on my site sort of a ‘breaking news’ style banner that would span the entire site width but only when I wanted it too – based on a cookie or something else.  And I didn’t want to do something server side, because I was sick of doing stuff like that.

Not having played with jQuery, I thought I’d take a dive.  Prior to MIX09, I’d been testing something that the MIXOnline team had been toying with, which has just been released: Glimmer.  Glimmer is described as a jQuery Interactive Design Tool.  A helper for those like me who know nothing about it.  Sure, jQuery has a ton of resources, and my Twitter peeps came through helping me navigate some of the things that aren’t glaringly obvious for noobs like me :-).

But Glimmer got me started, and I think that’s the point.  I had an overall HTML structure already and had the div element that I wanted to work with in jQuery – my goal was to animate it in a ‘breaking news’ sort of manner (or at least what’s in my head when I think of that concept).  I opened up my HTML in Glimmer and went to work.  I simply added the action (the function I wanted to trigger), then pointed it to the element to target.  Here’s what my simple Glimmer UI action setup looked like:

Glimmer UI

I clicked save and it created a JavaScript file for me with the completed code:

   1: jQuery(function($) {
   3: function loadBreakingNews(event)
   4: {
   5:      $("#info").css("top","-50px");
   6:     $("#info").animate({"top":0}, 894, "easeOutBounce", null);
   7: }
   9: loadBreakingNews();
  11: });

Sure, to you jQuery pros, this looks simple, but this tool helped me quickly use a design-time tool to generate this without previous knowledge of jQuery.  Now, I’ve learned a few things about jQuery since my first incarnation – all of which took 2 seconds with Glimmer.  I decided I wanted to use the built-in “slideDown” feature in jQuery.  Some things like this aren’t supported in Glimmer yet, but simple things are…and quite frankly, the combination of Y position animation and an easing function accomplished the same goal.

I made a few hand-modifications to fit my needs (checking for cookies to trigger the banner, etc), but Glimmer got me started right away figuring things out quickly…it was awesome.  I think it comes with a free ShamWow as well, I’m not sure, but I swear Karsten told me that. :-)  Check out Glimmer today if you are new (or even seasoned) to jQuery.  There is a plugin model I haven’t explored, but check out the Glimmer project site for more information.

Next maybe I should explore working with jQuery and Silverlight as I know there is more to jQuery than animations and I think it would make a helpful library for the HTML interop layer.

| Comments

If you are like any other developer, including me, you probably disregard most warnings and are usually the same type that keeps clicking next when installing things without paying attention to detail.  That’s okay I do it too.

In the release of Silverlight 3 Beta, we noted that this is a developer release and that no “Go Live” licensing was going to be available for this release.  What this means is that we don’t recommend putting things in production as we’ve not exposed or wired up the end-user runtime for Silverlight 3.  The only way people can view Silverlight 3 content during this Beta phase is by having one of the versions of the developer runtime for either Windows or Mac installed.  We’ve not integrated the end-user upgrade/install into the template for now.  So what does this mean to you when you put a sample out for people to see in your organization or perhaps if you have a preview of a product or something and users visit this application.  Here’s a few scenarios for you – keeping in mind the information below is related to the application being build in Silverlight 3: No Silverlight installed, Silverlight 3 installed, Silverlight 1/2 installed and a note about the plugin MIME type.

Scenario: No Silverlight Installed

If the user has no previous version of Silverlight installed at all, they’ll be presented with whatever your default “not installed” experience is.  If you’ve don nothing to customize this, shame on you :-).  The default Visual Studio templates will simply provide you with a static image.  That link in the templates links to a “coming soon” page which describes the situation.  You can view that page here: Silverlight 3 coming soon page.  If the user installs one of the developer runtimes then they’d be able to review your application.

NOTE: People with Silverlight 3 Developer runtimes cannot “upgrade” to an end-user runtime.  This means that if an end-user (non-developer) installs the developer runtime, then when Silvelright 3 releases they will have to manually uninstall the developer runtime to get the update of the released runtime.  If you’re a developer, you probably don’t care and future developer runtimes can install on top of other developer runtimes.  This is one of the driving reasons for no Go Live support at this time.

You should inform your viewers of your beta sample of the scenario and what they may have to do in the future.

Scenario: Silverlight 3 developer runtime installed

If the user has the correct version of the Silverlight 3 runtime as defined by your application, then they will be able to view your application.  You define the minimum version of the runtime required when you instantiate the plugin using the minRuntimeVersion parameter.  This might look like:

   1: <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
   2:     <param name="minRuntimeVersion" value="3.0.40307.0" />
   3:     ...
   4: </object>

If the user has the minimum you specified, all should be well.

Scenario: Silverlight installed (any released version)

Ah, this is the tricky one.  If the user has any released version of Silverlight (1.0 or 2), the experience they see at your beta sample will be driven off of two properties as you instantiate the plugin: minRuntimeVersion and autoUpgrade.  Let’s look at what will happen and assume that the user has Silverlight 2 installed.

minRuntimeVersion=”3.0.40307.0” and autoUpgrade=”true” – if you do nothing else, the user will see this:

Silverlight default auto upgrade

This is bad on a few levels.  First because it isn’t a customized experience, it is the default.  Second because the “install” link will take them to the latest released runtime – which they already have most likely.  What happens?  The user feels like they are in and endless loop of Visit Site –> prompted to upgrade –> seemingly install –> visit site –> prompted to upgrade –> repeat.  This will frustrate your beta visitor and confuse you :-). 

You should always customize the user experience for the end user.  For beta, here’s what I recommend doing to ensure they aren’t confused with the goals being the following:

  • Detect if the user needs to upgrade to see your beta sample
  • Inform them of the situation and that your sample is beta
  • Direct them to the coming soon information page for Silverlight 3

Here’s what you need to do.  Ensure that your application (object tag) is within some type of HTML container, like a div and give that an appropriate ID.  In your plugin instantiation you’ll want to add 3 parameters like this:

   1: <div id="silverlightControlHost">
   2:     <object data="data:application/x-silverlight-2," type="application/x-silverlight-2">
   3:         <param name="minRuntimeVersion" value="3.0.40307.0" />
   4:         <param name="autoUpgrade" value="false" />
   5:         <param name="onerror" value="pluginError" />
   6:         ... other param values as required ...
   7:     </object>
   8: </div>

The minRuntimeVersion specifies the version required for your application, which for Silverlight 3 beta is 3.0.40307.0.  The second is to turn autoUpgrade to false.  This prevents the default experience.  The third is to add an error handler as since autoUpgrade is now false it will throw an error saying that the required version isn’t installed.  In your error function you would want to do something like this:

   1: function pluginError(sender, args) {
   2:     if (args.ErrorCode == 8001) {
   3:         var msg = "This sample application was built with Silverlight 3 Beta.\n";
   4:         msg += "You currently have Silverlight installed, but not the version required to view this sample.\n\n";
   5:         msg += "For more information about Silverlight 3, please visit: \n";
   6:         msg += "<a href=\"http://go.microsoft.com/fwlink/?LinkID=141205\">Silverlight 3 Coming Soon</a>.";
   8:         var hostContainer = document.getElementById("silverlightControlHost");
   9:         hostContainer.innerHTML = msg;
  10:     }
  11:     else {
  12:         // handle other plugin errors here
  13:     }
  14: }

The error code of 8001 means that an upgrade is required.  Since we know we have a beta app and we know that the user has some version of Silverlight installed, but not the beta version.  Replace the container inner content with some HTML explaining that your application is a sample application and direct them to the coming soon page for more information.  This way your users aren’t sent in an endless loop, get confused, and hate you.

Why isn’t the <object> type attribute “application/x-silverlight-3”?

A common misconception is that the data and type attributes on the plugin object directly correlate to the runtime version of the plugin you are using.  This is not true.  Just because you have a Silverlight 3 application does not mean you need to change it to type=”application/x-silverlight-3” and in fact you’ll have problems if you do!  These attributes refer to the plugin MIME type and not the runtime version.  You would still use application/x-silverlight-2 for a Silverlight application (in fact you could use x-silverlight if you wanted to handle edge cases of Silverlight 1.0).


Beta software is fun and confusing.  It’s fun for us developers because we’re technically astute, understand what beta means, and are probably accustomed to working with others’ beta software all the time.  For end users, it can be confusing because they see things/links/articles and want to check it out, but may not have the required software.  As developers we can do things to help our beta visitors understand the scenario much clearer and do our job to inform.

So if you are showing Silverlight 3 beta samples, please take an extra moment to follow this guidance and trap the upgrade error code and handle it with information to inform the user.

Hope this helps!

| Comments

One of the great things about the Silverlight team is that usually in the home stretch most of the feature samples of numerous ‘hello world’ type examples start shaping into creative ideas to demonstrate various features. 

Slidentity by Mike Harsh (screenshot)One such example is a full Silverlight 3 application that Mike Harsh created to actually demonstrate various features and it is what he used to present his session talk as well.  He currently calls it Slidentity and it demonstrates:

  • Various skinned control usage
  • Perspective 3D (when you view the slide show)
  • Open/Save data
  • Out-of-browser execution
  • User input
  • Navigation framework

It’s a creative “sample” that is actually very functional for the intended use.  Mike’s making the code available for use, so check it out on his blog: Slidentity by Mike Harsh.