Raj Kaimal

Implementing Deeplinking in Silverlight

2008-07-09T07:58:00Z

Version: Silverlight 2 Beta 2 / .NET 3.5 SP1

See demo and source code links at the bottom of this post.

The following post is an attempt at implementing deep linking in Silverlight. Deeplinking allows users to use the browser back and forward buttons to switch between different “states” of the application and also allows bookmarking a certain state of the app. It provides a great UX in scenarios like viewing a slide show, paging through a document etc. IMHO, I think deeplinking should be baked into Silverlight by default.

To implement this, we use the System.Web.Extensions assembly in .NET 3.5 SP1 Beta which adds native support for navigating forward and backward through the browser history stack and also allows bookmaking. We will add some custom code to our Silverlight application and host it inside an aspx page so that it can take advantage of the new features of the assembly or more specifically the JavaScript code in this assembly.

As a quick refresher, in the context of an ASP.NET AJAX application, we add new entries to the browser history stack by calling Sys.Application.addHistoryPoint(state, title) where state is a StringDictionary containing the state we wish to store and title is the page title.

The Sys.Application.navigate event is raised anytime the user clicks the browser back or forward button. To restore the state of the page, we subscribe to this event and call e.get_state() inside our event handler. You can read more on this topic here.

The idea here is to have our Silverlight application make a javascript call to addHistoryPoint anytime we wish to store the state of the application in the browser history. We then subscribe to the JavaScript Sys.Application.navigate event and change the state of our application when this event is raised.

We start by creating Silverlight application using Blend 2.5 June 2008 preview or VS 2008. In the App.cs class, we add a helper method for making the call to addHistoryPoint like so (FYI, HtmlPage.Window.Eval method performs the equivalent of making a JavaScript eval method call):

   1: /// <summary>   2: /// Call to Sys.Application.addHistoryPoint   3: /// </summary>   4: public void AddHistoryPoint(string stateKey, string stateValue, string title)   5: {   6:     string addHistoryScript = "Sys.Application.addHistoryPoint({{ {0}:'{1}' }}, '{2}');";   7:     HtmlPage.Window.Eval(string.Format(addHistoryScript, stateKey, stateValue, title));   8: }

The next step is to subscribe to the JavaScript Sys.Application.navigate event from our Silverlight managed code. To make our managed code accessible through javascript, we have to register our class as a scriptable object and then make our method accessible by marking it with the Scriptable attribute, Read more on this topic here.

As shown below, HandleNavigate is marked as a scriptable member which exposes it to JavaScript.

   1: /// <summary>   2: /// Events   3: /// </summary>   4: public event EventHandler<StateEventArgs> Navigate;   5:     6: /// <summary>   7: /// Handler for Sys.Application navigate event   8: /// </summary>   9: [ScriptableMember]  10: public void HandleNavigate(ScriptObject state)  11: {  12:     if (Navigate != null)  13:     {  14:         Navigate(this, new StateEventArgs() { State = state });  15:     }  16: }

In the code below, we register our class as a scriptable object (Line 13). We also dynamically load a Javascript script block which creates a helper JavaScript function that subscribes to the navigate event. The helper function then makes a call to our silverlight HandleNavigate method (Line 17). The last method in the script block is a call to __navigateHandler which is for restoring the state of the page when the page loads for the first time or through a bookmark.

   1: private void OnStartup(object sender, StartupEventArgs e)   2: {   3:     // Load the main control here   4:     this.RootVisual = new Page();   5:     InitScripts();   6: }   7:     8: /// <summary>   9: /// Register event hander through proxy method  10: /// </summary>  11: private void InitScripts()  12: {  13:     HtmlPage.RegisterScriptableObject("App", this);  14:     string initScript = @"  15:         var __navigateHandler = new Function('obj','args','document.getElementById(\'appId\').content.App.HandleNavigate(args.get_state())');  16:         Sys.Application.add_navigate(__navigateHandler);  17:         __navigateHandler(this, new Sys.HistoryEventArgs(Sys.Application._state));  18:      ";  19:     HtmlPage.Window.Eval(initScript);  20: }

With this in place, we can subscribe to the Navigate event from any class and use the state information to make changes to the state of our application.

   1: App app = (App)Application.Current;   2: app.Navigate += new EventHandler<StateEventArgs>(app_Navigate);

We call the AddHistoryPoint method to store the state of the app when needed as shown below.

   1: App app = (App)Application.Current;   2: string pageTitle = (activeSlideIndex == -1) ? "Home" : "Slide " + activeSlideIndex;   3: app.AddHistoryPoint("index", activeSlideIndex.ToString(), pageTitle);

The last step involved is to create an ASP.NET AJAX application, add a ScriptManager control, set the EnableSecureHistorState to false (so that our URL is human readable) and finally add a Silverlight control with the source set to the xap file.

   1: <asp:ScriptManager ID="ScriptManager1" runat="server" EnableHistory="true" EnableSecureHistoryState="False">   2: </asp:ScriptManager>   3: <div id="slcontent">   4:     <asp:Silverlight ID="appId" runat="server" Source="~/ClientBin/SilverlightHistory.xap"   5:         MinimumVersion="2.0.30523" Width="800" Height="600" BackColor="Black" />   6: </div>

I have a demo app running here hosted at silverlight.live.com. Note that the auto generated URL contains other application specific information which makes it long (I don't have control over this). You won't run into this issue with the sample project below.

Note also that the demo hosted on this site does not work properly in IE7 (works fine in Firefox and Safari(W)). This is because silverlight.live.com does not support including certain javascript files or specifying the markup of the html page. In brief, it has to do with the inability to include an IFRAME in the HTML markup generated. If you wish to see the sample working in IE, you will need to download the sample code and run it.

You can download the sample project here or here (This is experimental beta code - use at your own risk).
Things you can try:

Clicking on the links in the right menu adds history points to the browser stack.
You can use the browser back and forward buttons to walk the stack.
You can bookmark a URL and return to it (example: localhost:9999/SilverlightHistory_Web/Default.aspx#index=2 will load the app with the third slide visible)

Another topic that has been making headlines recently is RIA SEO. Here are three articles on that:

Comments are always welcome.

Loading an XML file in your Silverlight project into memory

2008-07-08T06:36:00Z

Version : Silverlight 2 Beta 2

Reading an XML file in an XAP package can easily be done with the help of a helper class like so:

   1: public static class XmlHelper   2: {   3:     public static XElement LoadDocument(string fileName)   4:     {   5:         //No longer required in Silverlight 2 since   6:         //XmlXapResolver has been added as the default resolver for XmlReader   7:         //ref: http://msdn.microsoft.com/en-us/library/cc189007(vs.95).aspx   8:         //XmlReaderSettings settings = new XmlReaderSettings();   9:         //settings.XmlResolver = new XmlXapResolver();  10:         //XmlReader reader = XmlReader.Create(fileName, settings);  11:    12:         XmlReader reader = XmlReader.Create(fileName);  13:         XElement element = XElement.Load(reader);  14:         return element;  15:     }  16: }

Once you have the XElement object, you are free to manipulate it with LINQ to XML as shown below:

   1: public static List<Slide> LoadSlides()   2: {   3:     XElement element = XmlHelper.LoadDocument("Slides.xml");   4:     var slides = from slide in element.Descendants("Slide")   5:                  select new Slide {   6:                     Title = (string)slide.Element("Title"),   7:                     Text = (string)slide.Element("Text"),   8:                     Image = (string)slide.Element("Image"),   9:                  };  10:     return slides.ToList();  11: }

The method above returns a List<Slide> where the Slide class is defined like so:

   1: public class Slide   2: {   3:     public string Title { get; set; }   4:     public string Text { get; set; }   5:     public string Image { get; set; }   6: }

and the contents of the XML file we are reading is:

   1: <?xml version="1.0" encoding="utf-8"?>   2: <Slides>   3:   <Slide>   4:     <Title>Slide 1</Title>   5:     <Text>Slide 1 Description</Text>   6:     <Image>Slide1.jpg</Image>   7:   </Slide>   8:   <Slide>   9:     <Title>Slide 2</Title>  10:     <Text>Slide 2 Description</Text>  11:     <Image>Slide2.jpg</Image>  12:   </Slide>  13: </Slides>

Note that the XML file should have its BuildAction set to "Content".

A four stroke engine in Silverlight

2008-06-02T07:26:00Z

I decided to try out Expression Blend 2.5 beta by creating a four stroke engine animation. A screen capture is shown below:

You can see a working demo here (Silverlight 2 plugin required)

Here are a few observations while working on this project.

Writing XAML by hand is difficult :-) Expression Blend is your friend.
To export Adobe Illustrator files to XAML, use the free plugin from Mike Swanson. I chose to use AI to create the vector art because I am familiar with AI and it has a lot more features than Expression Design. When importing the XAML into Blend, you might see error messages in Blend about invalid markup as a result of the translation. In most cases these errors can easily be fixed by editing the XAML markup (Blend gives you the line number of the error).
For performing simple custom animations using a timer in your UI thread, use the DispatcherTimer class. The timer raises a Tick event at the end of the specified interval where you can update the UI. Note that the DispatcherTimer is single threaded and does not use the thread pool which could lead to a frozen UI if the Tick event handler takes too long to complete or if the thread is busy doing something else.
To apply multiple transformations to an object, for example a RotateTransform and a ScaleTransform at the same time, use the TransformGroup class.
Expression Blend, AFAIK, does not allow you to edit your C# files. You edit them in VS 2008. Be prepared for a lot of switching back and forth between both applications. In addition, VS 2008 sometimes goes crazy and refuses to show you the XAML preview when you have a complex XAML document. Restarting VS or recompiling the project usually makes the problem go away. Probably because I am using a beta product.
Animations can be created in expression blend using a timeline where you set keyframes that define the start and end points of the transform on an object. I chose, instead, to create the animations in code behind using C# using mathematical equations.

Overall, Expression Blend 2.5 beta was easy to work with. The UI could be improved a lot though. I plan to post feedback on Microsoft Connect soon.

You can download the VS 2008 project here or from the mirror here.

Connection strings in LINQ to SQL classes.

2008-05-21T03:12:00Z

Version : VS 2008 RTW

When you have a team working on a project that contains a LINQ to SQL class (dbml), you might see the following message when trying to add a Table entity or stored procedure in a dbml created by a fellow developer:

The objects you are adding to the designer use a different data connection than the designer is currently using. Do you want to replace the connection used by the designer?

The reason this happens is because the connection string in Server Explorer used to add the new stored procedure is different from what was originally used. In a team environment, this will occur if one developer checks in the dbml using one connection string and another developer checks out the dbml and tries to add a stored procedure or a table using a different connection string. Connection strings generally fall into one of the two shown below for SQL server:

Windows Authentication:

     Data Source=.\sqlexpress;Initial Catalog=northwind;Integrated Security=True
  

SQL Authentication:

    Data Source=.\sqlexpress;Initial Catalog=Northwind;Persist Security Info=True;User ID=northwind_web;Password=**
  

The connection string could easily vary by the type of authentication, the userid/password combination, instance name etc. This could become a source control nightmare with each developer checking in the dbml file with a connection string defined in their "Server Explorer". Therefore it is best, when possible, that all developers use the same connection string defined in "Server Explorer" when working with a dbml file for a given project.

This brings up the question of how to change connection string when the dbml class library is used in an ASP.net website. The solution is create a connection string in web.config with the same name as what is specified in app.config.

To understand why, we have to look at the class library dll. I have a sample project attached at the bottom of this post that contains a class library containing a dbml and the class library being referenced from an ASP.Net project. When the library gets built, a sealed class called Settings is generated internally. Here is the class with the help of reflector:

    [CompilerGenerated, GeneratedCode("Microsoft.VisualStudio.Editors.SettingsDesigner.SettingsSingleFileGenerator", "9.0.0.0")]

    internal sealed class Settings : ApplicationSettingsBase

    {

        // Fields

        private static Settings defaultInstance = ((Settings) SettingsBase.Synchronized(new Settings()));

        // Properties

        public static Settings Default

        {

            get

            {

                return defaultInstance;

            }

        }

        [ApplicationScopedSetting, SpecialSetting(SpecialSetting.ConnectionString), DefaultSettingValue(@"Data Source=.\sqlexpress;Initial Catalog=northwind;Integrated Security=True"), DebuggerNonUserCode]

        public string northwindConnectionString

        {

            get

            {

                return (string) this["northwindConnectionString"];

            }

        }

    }

We see that the northwindConnectionString property has a DefaultSettingValue attribute containing the connection string. When Settings gets loaded at runtime, if it finds the same a connection string with name MyClassLibrary.Properties.Settings.northwindConnectionString in app.config or web.config, it will use that. If it does not find it, it reverts to the DefaultSettingValue. As long as our web.config has the same "name" as what the Settings class is looking for, that will get used in place of the default value.

What about the case where we want one connection string during development and another for production? In web.config, you can specify the configSource attribute in the connectionStrings section. This attribute specifies the fully qualified name and location of an external configuration file that contains the connectionStrings section. During development, you can have configSource point to the connectionString of your test server and when you are ready to deploy to staging or production, you can change the attribute to point to the appropriate external config file. You can also have this done automatically using Web Deployment Projects or MSBuild.

The sample project attached contains a class library with a connection string defined. This class library is used in an ASP.net website project containing a connection string in web.config with the same "name" as what was used in the class library thereby "overriding" the class library connection string value. The website project also has a configSource defined in web.config pointing to an external configuration file ConnectionStrings_Test.config. When deploying to production, the configSource will be set to point to ConnectionStrings_Prod.config which contains the production server connection string.

Comments are welcome. Thanks!

LinqDataSource exceptions

2008-02-01T02:05:00Z

Prerequisite: LinqDataSource & SqlDataSource Master/Details

When working with the LinqDataSource, you may get the exceptions listed below.

1. Operator '==' incompatible with operand types 'Int32' and 'Object'

The exception occurs because anytime a ControlParameter in the WhereParameters collection (IDictionary<string, object>) is null, it gets treated as type Object causing the LINQ dynamic expression parser comparison to fail. Consider the code snippet below:

     
    <asp:LinqDataSource ID="LinqDataSource2" runat="server" ContextTypeName="DataClassesDataContext"
    
        Select="new (OrderID, ProductID, UnitPrice, Quantity, Discount, Order)" TableName="Order_Details"
    
        Where="OrderID == @OrderID">
    
        <WhereParameters>
    
            <asp:ControlParameter ControlID="GridView1" Name="OrderID" PropertyName="SelectedValue"
    
                Type="Int32" />
    
        </WhereParameters>
    
    </asp:LinqDataSource>

This is part of the classic Master/Details scenario where the LinqDataSource fetches the Order Details based on the OrderID selected in the GridView1.

When the page loads the first time, the OrderID ControlParameter is equal to GridView1.SelectedValue. GridView1.SelectedValue is null since no record has been selected in the GridView1 yet. Unfortunately, the LinqDataSource still attempts to fetch the data. The Linq expression parser treats the null parameter as type Object and the comparison fails because it was expecting type Int32.

What we need here is a way to prevent the Select from occurring when any parameter is null. The LinqDataSource, unlike the SqlDataSource, for some reason, does not have a CancelSelectOnNullParameter property. This property when set to true, will cancel the select when any parameter in the SelectParameters collection is null.

We can implement this by handling the Selecting event of the LinqDataSource and call the Cancel method when any WhereParameter is null like so:

    
    protected void LinqDataSource2_Selecting(object sender, LinqDataSourceSelectEventArgs e)
    
    {
    
        foreach (KeyValuePair<string, object> kvp in e.WhereParameters)
    
        {
    
            if (kvp.Value == null)
    
            {
    
                e.Cancel = true;
    
                return;
    
            }
    
        }
    
    }

2. Operator '==' incompatible with operand types 'Guid' and 'String'

This exception occurs in cases where a parameter in the WhereParameters collection is of type Guid.

    
    <asp:LinqDataSource ID="LinqDataSource2" runat="server" 
    
        ContextTypeName="DataClassesDataContext" 
    
        Select="new (DummyID, FirstName, LastName)" TableName="DummyTables" 
    
        Where="DummyID == @DummyID" onselecting="LinqDataSource2_Selecting">
    
        <WhereParameters>
    
            <asp:ControlParameter ControlID="GridView1" Name="DummyID" 
    
                PropertyName="SelectedValue" Type="Object" />
    
        </WhereParameters>
    
    </asp:LinqDataSource>

In the snippet above, you can see that the GridView1.SelectedValue is defined as a WhereParameter for the LinqDataSource. DummyID is the primary key of the data in GridView1 and is of type Guid. In the ControlParameter, its Type is set to Object because Guid is not available in the TypeCode enum. Unfortunately, this results in the linq expression parser treating the value as type String causing the comparison to fail.

According to the Dynamic Expression API, a flavor of which is used by the LinqDataSource internally, we can perform explicit conversions using the syntax type(expr) where type is a type name optionally followed by ? and expr is an expression. The expression language defines the following primitive types:

Object Boolean Char String SByte Byte
Int16 UInt16 Int32 UInt32 Int64 UInt64
Decimal Single Double DateTime TimeSpan Guid

The primitive types correspond to the similarly named types in the System namespace of the .NET Framework Base Class Library. You can also use the nullable form of a value type by writing a ? after the type name (ex: Where="Foo = Int32?(@Foo)").

Therefore, we can rewrite our where clause like so which gets rid of the exception.

    
    <asp:LinqDataSource ID="LinqDataSource2" runat="server" 
    
        ContextTypeName="DataClassesDataContext" 
    
        Select="new (DummyID, FirstName, LastName)" TableName="DummyTables" 
    
        Where="DummyID == Guid(@DummyID)" onselecting="LinqDataSource2_Selecting">
    
        <WhereParameters>
    
            <asp:ControlParameter ControlID="GridView1" Name="DummyID" 
    
                PropertyName="SelectedValue" Type="Object" />
    
        </WhereParameters>
    
    </asp:LinqDataSource>

IMO, both these exceptions and a couple of others could probably be avoided if the LinqDataSource had a CancelSelectOnNullParameter and if the TypeCode enum had included the primitive types listed above and nullable value types.

Comments are always welcome!

The .NET Framework 3.5 Commonly Used Types and Namespaces poster

2007-11-04T04:39:00Z

Paul Andrew has posted a link to the .NET framework 3.5 commonly Used Types and Namespaces poster - cool stuff!

Download it here.

Daniel Moth also has a good older post on the .NET 3.5 bits

Classic Menu UI in Office 2007

2007-10-10T04:28:11Z

So my 65 year old neighbor called me yesterday because he was frustrated with the Office 2007 Ribbon on his brand new machine...

After googling around, I found a great add-in for Office 2007 by Patrick Schmid called the RibbonCustomizer. It comes in two versions - the free Starter Edition and the Professional edition. Both versions, in addition to customizing the Ribbon, give you a "Classic UI" tab which emulate the Office 2003 menus and toolbars.

As you can see from the screen captures, it does not replace the Ribbon UI but adds onto it, which, IMHO, lets the user work with a familiar UI and allows them to slowly transition into the new UI.

For a core product like the Office Suite, Microsoft should have provided this ability by default.

My neighbor couldn't be happier...

.NET Framework Libraries Source Code - License - MS-RL

2007-10-03T18:17:00Z

When I first read Scott's post, I missed the Microsoft Reference License (Ms-RL) which the .net Framework libraries is released under.

The key thing to remember is this:

"Reference use" means use of the software within your company as a reference, in read only form, for the sole purposes of debugging your products, maintaining your products, or enhancing the interoperability of your products with the software, and specifically excludes the right to distribute the software outside of your company.

.NET Framework Libraries Source Code

2007-10-03T16:50:00Z

Scott just announced that his team will be releasing the souce code to the .NET base class libraries, ASP.net, Windows Forms and WPF!

The big advantage to this is that when you are stepping through the code, you no longer see the horrible "[External Code]' in your call stack. You are taken right to the source code! This really really helps in understanding how the internals of the classes work.

Wonder what I am going to do with reflector...hmm...

Read more at Scotts' blog

PS: The source code is being released under Ms-RL which means that I can view but I'm not allowed to copy and paste the source code.

SQL 2005 - Maximum number of characters displayed in each column

2007-09-27T17:52:00Z

This setting in Microsoft SQL server management studio, which has a default setting of 256 characters, caused me to waste almost half an hour yesterday. I was looking in the wrong places trying to troubleshoot my stored procedure and wondering why my data was being truncated. There is no indication in management studio that the text was being truncated either.

To increase the maximum value, open SQL Server management studio and go to

Tools » Options » Query Results » Results to Text » Maximum number of characters displayed in each column

Note also that there is a "Maximum Characters Retrieved" section under "Results to Grid" section too.