<?xml version="1.0" encoding="utf-8"?>
<rss xmlns:xhtml="http://www.w3.org/1999/xhtml" version="2.0">
  <channel>
    <lastBuildDate>Wed, 07 May 2008 00:19:41 GMT</lastBuildDate>
    <copyright>Copyright (c) 2005, Nikhil Kothari</copyright>
    <description>Contains all posts from my weblog.</description>
    <generator>Nikhil's Blog Engine v1.1 (http://www.nikhilk.net)</generator>
    <link>http://www.nikhilk.net/Category.aspx?id=1</link>
    <managingEditor>nikhilk@winisp.net</managingEditor>
    <title>Nikhil Kothari's Weblog</title>
    <webMaster>nikhilk@winisp.net</webMaster>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Yesterday I blogged about using and creating <a href="Silverlight-Behaviors.aspx">behaviors in Silverlight</a>. This post will walk you through an autocomplete behavior that will hopefully furher crystallize the behavior concept.</p>
        <p>To recap, a behavior is simply an object that can be declaratively attached to another component to extend the built in functionality of that component. Typically a behavior will encapsulate some event handling logic. This event handling logic could have been written by the app developer in their code-behind, but moving it into a behavior makes it much more encapsulated and suited for reuse. It has the nice side-effect of making things a bit more designer-friendly by cleaning up the code-behind and turning things into a more XAML-friendly form.</p>
        <p>
          <span style="border: solid 1px #EEEEEE; padding:3px; margin-right: 10px; margin-bottom: 10px; float: left">
            <img src="Content/Posts/SilverlightBehaviors/AutoComplete.png" />
          </span>Remember <a href="http://www.google.com/webhp?complete=1" target="_blank">Google Suggest</a>? That kicked off a spree of auto-complete implementations for use in Ajax apps including the one we did for ASP.NET Ajax (and later in the Ajax Control Toolkit). The AutoComplete behavior is very similar. It can be used to suggest various completions based on the text that a user has entered so far. This behavior allows extending the standard Silverlight TextBox control (as well as the WatermarkTextBox control). This post will cover various scenarios accomodated by the behavior I've put together.</p>
        <p>The screenshot above illustrates the type of experience you can add to any TextBox. You can see and play with a live demo by scrolling toward the end of this post (this requires Silverlight 2). Of course, all of the <a href="Content/Posts/SilverlightBehaviors/SilverlightFX.zip">code</a> is available as well, so you can include this into your own app.</p>
        <p style="clear: both">
          <b>Scenario 1: Basic completion scenario</b>
          <br />
Lets assume I've got a TextBox on a form that allows your user to enter in the name of a city, and I also have a service on the server that accepts a string prefix and returns a set of matching city names as an array of strings (serialized using the JSON format). I'd like to hook the two of them together to improve the user experience of the form, by offering a list of suggestions.</p>
        <p>Here's the most basic use of the AutoComplete behavior in XAML as a way to get started.</p>
        <pre>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #ff0000;">x:Name</span>
          <span style="color: #0000ff;">="cityTextBox"</span>
          <span style="color: #0000ff;">&gt;</span>
          <b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">f:Form.AutoComplete</span>
            <span style="color: #0000ff;">&gt;</span>
          </b>
          <b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">f:AutoComplete</span>
            <span style="color: #ff0000;">ServiceUri</span>
            <span style="color: #0000ff;">="/App_Services/Cities.ashx"</span>
            <span style="color: #0000ff;">/&gt;</span>
          </b>
          <b>
            <span style="color: #0000ff;">&lt;/</span>
            <span style="color: #800000;">f:Form.AutoComplete</span>
            <span style="color: #0000ff;">&gt;</span>
          </b>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #0000ff;">&gt;</span>
        </pre>
        <p>Done... no code required! The AutoComplete instance assigned to the Form.AutoComplete attached property listens the TextBox events and in the background fetches city suggestions, displays a dropdown list with the cities, and allows the user to pick one. The AutoComplete does all sorts of fancy things by default like not fire off a web request per keystroke, cache results etc. As you can see the declarative XAML-based usage model makes the scenario quite simple to implement.</p>
        <break />
        <p>Here's the corresponding server-side code implementing the service in Cities.ashx:</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">class</span> CityCompletionService : CompletionService&lt;<span style="color: #0000ff;">string</span>&gt; {

    <span style="color: #0000ff;">protected</span><span style="color: #0000ff;">override</span> IEnumerable&lt;<span style="color: #0000ff;">string</span>&gt; GetItems(<span style="color: #0000ff;">string</span> prefix) {
        <span style="color: #0000ff;">string</span>[] matchingCities = ...;
        <span style="color: #0000ff;">return</span> matchingCities;
    }
}
</pre>
        <p>
          <b>Scenario 2: Styling the user interface</b>
          <br />
One of the most compelling aspects of XAML and Silverlight is the ability to create compelling user interfaces by restyling and reskinning controls to match the overall look and feel of your application. The AutoComplete behavior supports this by allowing you to specify a template for the dropdown used by the behavior. If I've got some customized look and feel defined in the myCustomListBox style, I can reference it as follows:</p>
        <pre>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #ff0000;">x:Name</span>
          <span style="color: #0000ff;">="cityTextBox"</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:Form.AutoComplete</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:AutoComplete</span>
          <span style="color: #ff0000;">ServiceUri</span>
          <span style="color: #0000ff;">="/App_Services/Cities.ashx"</span>
          <span style="color: #0000ff;">&gt;</span>
          <b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">f:AutoComplete.DropDownTemplate</span>
            <span style="color: #0000ff;">&gt;</span>
          </b>
          <b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">DataTemplate</span>
            <span style="color: #0000ff;">&gt;</span>
          </b>
          <b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">ListBox</span>
            <span style="color: #ff0000;">Style</span>
            <span style="color: #0000ff;">="{StaticResource myCustomListBox}"</span>
            <span style="color: #0000ff;">/&gt;</span>
          </b>
          <b>
            <span style="color: #0000ff;">&lt;/</span>
            <span style="color: #800000;">DataTemplate</span>
            <span style="color: #0000ff;">&gt;</span>
          </b>
          <b>
            <span style="color: #0000ff;">&lt;/</span>
            <span style="color: #800000;">f:AutoComplete.DropDownTemplate</span>
            <span style="color: #0000ff;">&gt;</span>
          </b>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">f:AutoComplete</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">f:Form.AutoComplete</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #0000ff;">&gt;</span>
        </pre>
        <p>
          <b>Scenario 3: Going beyond strings</b>
          <br />
So far the service backing the completion experience has been returning an array of strings. I actually want to use a service that returns something more than just a string (you'll see why in the next step). For example, in this scenario, I want to return an array of CityInfo objects that contain Name, State and ZipCode properties.</p>
        <p>Here is the updated service implementation on the server.</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">class</span> CityInfo {
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> Name { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> State { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> ZipCode { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }
}

<span style="color: #0000ff;">public</span><span style="color: #0000ff;">class</span> CityCompletionService : CompletionService&lt;CityInfo&gt; {

    <span style="color: #0000ff;">protected</span><span style="color: #0000ff;">override</span> IEnumerable&lt;CityInfo&gt; GetItems(<span style="color: #0000ff;">string</span> prefix) {
        CityInfo[] matchingCities = ...;
        <span style="color: #0000ff;">return</span> matchingCities;
    }
}
</pre>
        <p>In order to implement this scenario on the client I need to do a couple of things. First I need to provide a client-side type that the AutoComplete behavior uses to deserialize the JSON into. Next I'll want to customize the ItemTemplate of the ListBox to display the additional fields. Finally, I'll want to handle the Completed event to convert a CityInfo object into text that is used to put into the TextBox once a user selects a particular city.</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">class</span> CityInfo {
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> Name { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> State { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> ZipCode { <span style="color: #0000ff;">get</span>; <span style="color: #0000ff;">set</span>; }
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> Location {
        <span style="color: #0000ff;">get</span> {
            <span style="color: #0000ff;">return</span><span style="color: #006080;">" ("</span> + State + <span style="color: #006080;">", "</span> + ZipCode + <span style="color: #006080;">")"</span>;
        }
    }
}

<span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBox</span><span style="color: #ff0000;">x:Name</span><span style="color: #0000ff;">="cityTextBox"</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">f:Form.AutoComplete</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">f:AutoComplete</span><span style="color: #ff0000;">ServiceUri</span><span style="color: #0000ff;">="/App_Services/Cities.ashx"</span><b><span style="color: #ff0000;">ServiceResultType</span><span style="color: #0000ff;">="CityInfo"</span></b><b><span style="color: #ff0000;">Completed</span><span style="color: #0000ff;">="OnCityCompleted"</span></b><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">f:AutoComplete.DropDownTemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox</span><span style="color: #0000ff;">&gt;</span><b><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ListBox.ItemTemplate</span><span style="color: #0000ff;">&gt;</span></b><b><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span></b><b><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span></b><b><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock</span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="{Binding Name}"</span><span style="color: #0000ff;">/&gt;</span></b><b><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">TextBlock</span><span style="color: #ff0000;">Text</span><span style="color: #0000ff;">="{Binding Location}"</span><span style="color: #0000ff;">/&gt;</span></b><b><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">StackPanel</span><span style="color: #0000ff;">&gt;</span></b><b><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span></b><b><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox.ItemTemplate</span><span style="color: #0000ff;">&gt;</span></b><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ListBox</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">DataTemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">f:AutoComplete.DropDownTemplate</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">f:AutoComplete</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">f:Form.AutoComplete</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">TextBox</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">private</span><span style="color: #0000ff;">void</span> OnCityCompleted(<span style="color: #0000ff;">object</span> sender, AutoCompleteCompletedEventArgs e) {
    <span style="color: #008000;">// This event handler is optional. By default e.SelectedItem.ToString()</span><span style="color: #008000;">// is used by the AutoComplete.</span><b>e.SelectedItem = ((CityInfo)e.SelectedItem).Name;</b>
}
</pre>
        <p>
          <b>Scenario 4: Filling dependent TextBoxes</b>
          <br />
There was a reason to return CityInfo objects instead of simply city names. Lets say my form also has a TextBox for entering ZipCode. If the user selects a city from the auto-complete dropdown, I'd also like to fill the zip code for added convenience.</p>
        <p>I can simply update my Completed event handler above to extract the ZipCode and populate the ZipCode TextBox accordingly.</p>
        <pre>
          <span style="color: #0000ff;">private</span>
          <span style="color: #0000ff;">void</span> OnCityCompleted(<span style="color: #0000ff;">object</span> sender, AutoCompleteCompletedEventArgs e) {
    <b>zipCodeTextBox.Text = ((CityInfo)e.SelectedItem).ZipCode;</b>
    e.SelectedItem = ((CityInfo)e.SelectedItem).Name;
}
</pre>
        <p>
          <b>Scenario 5: Using local computed values</b>
          <br />
So far I've been showing scenarios where the AutoComplete behavior makes a web request to get at the list of the completion items to show in its dropdown. Some times, an app might want to show a list of values computed in client-side logic. Or you may have already loaded data from a web service call, and just want to plug in that data, rather than making a separate call.</p>
        <p>This scenario is implementable by handling the Completing event of the AutoComplete behavior which allows you to either plug in your items, or to suppress the dropdown altogether for the particular prefix text that the user has entered. For example:</p>
        <pre>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #ff0000;">x:Name</span>
          <span style="color: #0000ff;">="cityTextBox"</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:Form.AutoComplete</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:AutoComplete</span>
          <b>
            <span style="color: #ff0000;">Completing</span>
            <span style="color: #0000ff;">="OnCityCompleting"</span>
          </b>
          <span style="color: #0000ff;">/&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">f:Form.AutoComplete</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">private</span>
          <span style="color: #0000ff;">void</span> OnCityCompleting(<span style="color: #0000ff;">object</span> sender, AutoCompleteCompletingEventArgs e) {
    <span style="color: #0000ff;">string</span> prefix = e.Prefix;

    <span style="color: #0000ff;">string</span>[] cities = ...; <span style="color: #008000;">// code to lookup some local data using prefix</span><b>e.SetCompletionItems(cities);</b>
}
</pre>
        <p>
          <b>Live Demo</b>
          <br />
Finally, here is a demo of the AutoComplete behavior. To experiment, type in something "San" in the city TextBox to see a list of cities pop up. Select a city (such as San Francisco) to see both the city and the zip code TextBoxes get filled.</p>
        <p align="center">
          <iframe src="Content/Posts/SilverlightBehaviors/AutoComplete.htm" frameborder="0" style="border: solid 1px #CDCDCD; width: 600px; height:150px">
          </iframe>
        </p>
        <p>
          <b>Yet another behavior... TextFilter</b>
          <br />
Actually, I've slipped in another behavior as well into the mix, just for some more fun. This is the TextFilter behavior that can also be associated with a TextBox to restrict input to say numeric characters.</p>
        <pre>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #ff0000;">x:Name</span>
          <span style="color: #0000ff;">="zipCodeTextBox"</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:Form.Filter</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:TextFilter</span>
          <span style="color: #ff0000;">Filter</span>
          <span style="color: #0000ff;">="Numbers"</span>
          <span style="color: #0000ff;">/&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">f:Form.Filter</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #0000ff;">&gt;</span>
        </pre>
        <p>Hopefully these examples really start making the behavior concept more concrete, and clear.</p>
        <p>You can <a href="Content/Posts/SilverlightBehaviors/SilverlightFX.zip">download the code</a>, which includes the behavior framework, all the behaviors I've written about so far, as well as a sample app that demonstrates using them. Enjoy!</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/silverlight" rel="tag">silverlight</a>  | <a href="http://www.nikhilk.net/tags/prototype" rel="tag">prototype</a>  | <a href="http://www.nikhilk.net/tags/xaml" rel="tag">xaml</a> ]</div>
      </body>
      <category>Silverlight</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=195#Comments</comments>
      <description>An implementation of AutoComplete functionality that you can add to your TextBoxes in XAML... ala Google Suggest and the ASP.NET AutoComplete control extender (built on top of the behavior framework).</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=195</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=195</link>
      <pubDate>Wed, 07 May 2008 00:19:41 GMT</pubDate>
      <title>AutoComplete for Silverlight TextBoxes</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>In the past, I've written about behaviors and control extenders in the context of Ajax and HTML-based UI. This post introduces a similar behavior semantics for Silverlight and XAML-based UI as well.</p>
        <p>The mini-behavior framework I have prototyped allows you to write and use behavior as a combination of a component + an attached property. The framework provides the logic to attach/detach behaviors for behavior authors. The rest of this post demonstrates using and writing a simple behavior based on this framework. Over the next few posts, I'll discuss a few more behaviors as a way to further experiment and demonstrate the behavior concept.</p>
        <p>
          <b>Using the DefaultCommit Behavior</b>
          <br />
Lets say you're implementing a typical form with a TextBox and a search Button. You'll probably want to allow users to press the Enter key after typing in some search keywords to kick off the search rather than force them to click the button explicitly. What you'd normally do is write a couple of event handlers to handle both the Click event from the Button and the KeyDown event from the TextBox (to look for the Enter key) in your code-behind, and trigger the search logic from each of them. This is more complicated and messy than it needs to be.</p>
        <p>Ideally you simply want to handle a single event - the button's Click event. In fact, in HTML forms, this is built in into the notion of a Form with a submit button. However, it isn't so in Silverlight, where a Form concept is baked in. This is where this behavior comes in. Once this behavior is available, I can author the following XAML:</p>
        <pre>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #ff0000;">x:Name</span>
          <span style="color: #0000ff;">="searchTextBox"</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:Form.Commit</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:DefaultCommit</span>
          <span style="color: #ff0000;">ButtonName</span>
          <span style="color: #0000ff;">="searchButton"</span>
          <span style="color: #0000ff;">/&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">f:Form.Commit</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;/</span>
          <span style="color: #800000;">TextBox</span>
          <span style="color: #0000ff;">&gt;</span>
          <span style="color: #0000ff;">&lt;</span>
          <span style="color: #800000;">f:Button</span>
          <span style="color: #ff0000;">x:Name</span>
          <span style="color: #0000ff;">="searchButton"</span>
          <span style="color: #ff0000;">Content</span>
          <span style="color: #0000ff;">="Search"</span>
          <span style="color: #ff0000;">Click</span>
          <span style="color: #0000ff;">="OnSearchButtonClick"</span>
          <span style="color: #0000ff;">/&gt;</span>
        </pre>
        <break />
        <p>Essentially the DefaultCommit behavior is attached to the TextBox using the XAML syntax above. For those new to XAML and Silverlight, f:Form.Commit refers to the Commit attached property offered by the Form class. This is similar to Canvas.Left, which you've probably encountered. The only difference is that the type of the Canvas.Left attached property is a simple double value, whereas the type of the Form.Commit property is a DefaultCommit.</p>
        <p>Underneath the covers, the DefaultCommit behavior does the same thing you'd do in code-behind, but does so in a way that the logic is now encapsulated and is easily reusable. You can instantiate as many of these as you want, especially across multiple forms/pages without duplicating the event handling logic all over.</p>
        <p>Here is a live demo (if you've got Silverlight installed) - simply type in something and press Enter. The app behaves as if you had clicked the button. There is no really search hooked up though.</p>
        <p align="center">
          <iframe src="Content/Posts/SilverlightBehaviors/Search.htm" frameborder="0" style="border: solid 1px #CDCDCD; width: 600px; height:125px">
          </iframe>
        </p>
        <p>You might have noticed the use of &lt;f:Button&gt; instead of a regular Button. Unfortunately, unlike WinForms and HTML buttons, the Silverlight Button control currently doesn't have any way to programmatically invoke the Click event, so I had to add that functionality in a derived class.</p>
        <p>
          <b>Implementing the DefaultCommit Behavior</b>
          <br />
The behavior framework I have put together introduces two classes Behavior and BehaviorManager.</p>
        <p>The first step is to implement a behavior by deriving from the Behavior class. The Behavior class is a generic class, to allow indicating the type of objects that behavior can be associated with.</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">class</span> DefaultCommit : Behavior&lt;TextBox&gt; {
}
</pre>
        <p>The next step is to add any properties exposed by the behavior itself.</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">class</span> DefaultCommit : Behavior&lt;TextBox&gt; {

    <span style="color: #0000ff;">private</span><span style="color: #0000ff;">string</span> _buttonName;
    
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">string</span> ButtonName {
        <span style="color: #0000ff;">get</span> { <span style="color: #0000ff;">return</span> _buttonName; }
        <span style="color: #0000ff;">set</span> { _buttonName = <span style="color: #0000ff;">value</span>; }
    }
}
</pre>
        <p>The behavior base class holds the reference to the associated object as  its AssociatedObject property. It defines a couple of abstract methods to manage the lifetime of a behavior instance: OnAttach, and OnDetach. The derived behavior class implements these to perform associated logic, such as setup and cleanup including subscribing and unsubscribing to events raised by the associated object.</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">class</span> DefaultCommit : Behavior&lt;TextBox&gt; {

    <span style="color: #0000ff;">protected</span><span style="color: #0000ff;">override</span><span style="color: #0000ff;">void</span> OnAttach() {
        AssociatedObject.KeyDown += OnTextBoxKeyDown;
    }
    
    <span style="color: #0000ff;">protected</span><span style="color: #0000ff;">override</span><span style="color: #0000ff;">void</span> OnDetach() {
        AssociatedObject.KeyDown -= OnTextBoxKeyDown;
    }
    
    <span style="color: #0000ff;">private</span><span style="color: #0000ff;">void</span> OnTextBoxKeyDown(<span style="color: #0000ff;">object</span> sender, KeyEventArgs e) {
        <span style="color: #0000ff;">if</span> ((e.Key == Key.Enter) &amp;&amp; (AssociatedObject.Text.Length != 0)) {
            Button button = AssociatedObject.FindName(_buttonName) <span style="color: #0000ff;">as</span> Button;
            <span style="color: #0000ff;">if</span> (button != <span style="color: #0000ff;">null</span>) {
                button.PerformClick();
            }
        }
    }
}
</pre>
        <p>The final step is to define an attached property that can be used to declaratively create an instance of this behavior and have it be associated with a TextBox. This is where the BehaviorManager class will come into play. It provides a set of utility methods that correctly attach/detach behaviors.</p>
        <pre>
          <span style="color: #0000ff;">public</span>
          <span style="color: #0000ff;">static</span>
          <span style="color: #0000ff;">class</span> Form {

    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">static</span><span style="color: #0000ff;">readonly</span> DependencyProperty CommitProperty =
        DependencyProperty.RegisterAttached(<span style="color: #006080;">"Commit"</span>, <span style="color: #0000ff;">typeof</span>(Form), <span style="color: #0000ff;">typeof</span>(DefaultCommit),
            OnCommitPropertyChanged);
    
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">static</span> DefaultCommit GetCommit(TextBox textBox) {
        <span style="color: #0000ff;">return</span> BehaviorManager.GetBehavior&lt;DefaultCommit&gt;(textBox);
    }
    
    <span style="color: #0000ff;">public</span><span style="color: #0000ff;">static</span><span style="color: #0000ff;">void</span> SetCommit(TextBox textBox, DefaultCommit commitBehavior) {
        BehaviorManager.SetBehavior(textBox, commitBehavior);
    }
    
    <span style="color: #0000ff;">private</span><span style="color: #0000ff;">void</span> OnCommitPropertyChanged(DependencyObject o, DependencyPropertyChangedEventArgs e) {
        BehaviorManager.UpdateBehavior(o, CommitProperty,
                                       (DefaultCommit)e.OldValue,
                                       (DefaultCommit)e.NewValue);
    }
}
</pre>
        <p>There you go... writing a basic behavior is quite straightforward.</p>
        <p>
          <b>Concepts and Next Steps</b>
          <br />
One rough analogy to behaviors is that of extension methods in C# 3.0. Those are at the method level. Behaviors are similar, but are live components. More specifically, a behavior is a component that encapsulates some functionality and can be attached to another component to extend its built-in functionality, without creating a derived class. A couple of example behaviors that can be attached to a TextBox besides the one implemented above include auto-complete and input filtering.</p>
        <p>The fact that behaviors are attached components that implies a composition-like metaphor, offers two advantages whenever derivation is non-essential:
<ul><li>Allows "extending" multiple component types - in the TextBox example, the behaviors can be attached not only to TextBox but also to WatermarkTextBox.</li><li>A single TextBox can be associated with multiple behaviors as needed, rather than requiring the developer to build and use a kitchen-sink style control that has to anticipate every possible feature.</li></ul></p>
        <p>Almost all behaviors handle events and encapsulate a set of event handlers into a reusable component that can then be instanced declaratively. Often this leads to a more declarative style of programming (something I love) and reduced code-behind clutter.</p>
        <p>I chose a simple behavior scenario to introduce the concept. In a future post, I'll demonstrate some more interesting behaviors, including AutoComplete , and some animation scenarios. Stay tuned. Over time, I'll continue to experiment with this. I have some ideas on implementing declarative views that are enabled via this concept.</p>
        <p>I'd love to hear ideas you might have for behaviors that would be useful additions for Silverlight and XAML-based UI, and especially for RIA scenarios.</p>
        <p>You can also <a href="Content/Posts/SilverlightBehaviors/SilverlightFX.zip">download the code</a> which contains the behavior framework, the sample behavior, and a sample app that makes use of them.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/silverlight" rel="tag">silverlight</a>  | <a href="http://www.nikhilk.net/tags/xaml" rel="tag">xaml</a>  | <a href="http://www.nikhilk.net/tags/prototype" rel="tag">prototype</a> ]</div>
      </body>
      <category>Silverlight</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=194#Comments</comments>
      <description>A framework for creating reusable and attachable behaviors in Silverlight, and a sample behavior that demonstrates using and building them... along with all the code.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=194</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=194</link>
      <pubDate>Mon, 05 May 2008 14:46:49 GMT</pubDate>
      <title>Silverlight Behaviors</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
          <img src="http://projects.nikhilk.net/ScriptSharp/Content/Showcase/Mesh.png" style="float: right; margin-left; 10px; margin-bottom: 10px" />
          <a href="http://www.mesh.com" target="_blank">Live Mesh</a> is finally public - it was announced earlier today at the Web 2.0 conference. We’ve had the <i>social graph</i> buzzword bantered around for some time in the context of Facebook. Will <i>mesh</i> become the next one to go around? Check out the <a href="http://dev.live.com/blogs/devlive/archive/2008/04/22/279.aspx" target="_blank">intro post</a>. Live Mesh is all about software + services, and connecting and bringing devices together into your own personal "mesh" enabling them to work in a connected way.</p>
        <p>Ray Ozzie alluded to the Web as the Hub of the social mesh and the device mesh earlier at MIX08. Over on the <a href="http://blogs.msdn.com/livemesh/archive/2008/04/21/live-mesh-as-a-platform.aspx" target="_blank">Live Mesh blog</a>, Mike Zintel alludes to a bunch of concepts around the Live Mesh platform, such as <i>mesh object</i>, and a data synchronization platform. I am particularly excited about the prospect of seeing a new generation of Web apps that leverage the platform in all sorts of interesting ways, not just for local storage, but also synchronized local storage of application data and personal data, and offline execution, as a means to differentiate and cater to new user experiences on the Web. The APIs that emerge around this platform will be something to keep an eye on.</p>
        <p>On another personal note, I am super excited to see and run the Web version of Live Mesh, which simulates a Vista desktop and Explorer folders right within your Web browser for anywhere access to your devices and a data. While it will be interesting to see the user reactions around this UI metaphor in the browser as shown in the screenshot, the Ajax code behind the scenes is pretty much written in <a href="http://projects.nikhilk.net/ScriptSharp">Script#</a> (I've worked with the team for a while), and now that the site is public, I’ve added it to the new <a href="http://projects.nikhilk.net/ScriptSharp/Showcase.aspx">showcase</a> page on my project site.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/mesh" rel="tag">mesh</a>  | <a href="http://www.nikhilk.net/tags/ajax" rel="tag">ajax</a>  | <a href="http://www.nikhilk.net/tags/script#" rel="tag">script#</a> ]</div>
      </body>
      <category>(All)</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=193#Comments</comments>
      <description>Live Mesh announced...</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=193</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=193</link>
      <pubDate>Wed, 23 Apr 2008 05:34:19 GMT</pubDate>
      <title>Live Mesh</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>This is a quick post on the latest release of <a href="http://projects.nikhilk.net/ScriptSharp">Script#</a> (Build 0.5). I'll be following up with subsequent posts with more details on some of the specific feature additions, but here is a list of whats new (besides bug fixes, and improved compiler error reporting):
<ul><li>Support for localization based on .resx files - now you can generate localized script files while using strongly typed resources using .resx tooling available in Visual Studio and other localization tools.</li><li>Support for generating script doc-comments - now XML doc-comments are automatically transformed into ASP.NET Ajax-style doc-comments, which are useful for driving intellisense in Visual Studio, if you're creating script libraries that will be used by others.</li><li>Updated compat layer to abstract browser differences now works for not just Mozilla but also WebKit-based (Safari, iPhone), and Opera browsers.</li><li>Support for creating overloaded APIs, and creating and invoking functions dynamically (these were limitations in the past).</li><li>Support for creating Silverlight 2 plugin instances.</li></ul></p>
        <p>Also, Script# is now on <a href="http://www.codeplex.com/ScriptSharp">CodePlex</a> (actually it has been on there for a month or so, but this is the first release since). The forums associated with the CodePlex project should significantly improve the experience around sending feedback, and having discussions around the technology and using it. Several folks have asked me in the past about open sourcing it. My plan is to eventually have the source out there as the project approaches its v1 status, starting the with the core framework and runtime, and subsequently the compiler itself. Stay tuned on that front for more in the next few months.</p>
        <p>There are a couple of related CodePlex projects to call out:
<ul><li><a href="http://www.codeplex.com/messenger" target="_blank">Messenger Developer Samples</a> - contains MIX08 Messenger samples including how you can use Messenger APIs using Script#</li><li><a href="http://www.codeplex.com/AJAXCodeGeneration" target="_blank">Script# proxy generator</a> - Think wsdl.exe for Script#. A number of you have sent me mail about this feature. This project basically takes care of generating C# proxies for ASP.NET Ajax-enabled Web services.</li></ul></p>
        <p>Finally, I've updated my <a href="http://projects.nikhilk.net/ScriptSharp">project</a> site as well with more introduction to Script#, release notes, and a high-level roadmap. I will also be transitioning the documentation that is currently available in pdf form to the site over time.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/script#" rel="tag">script#</a>  | <a href="http://www.nikhilk.net/tags/ajax" rel="tag">ajax</a>  | <a href="http://www.nikhilk.net/tags/projects" rel="tag">projects</a>  | <a href="http://www.nikhilk.net/tags/codeplex" rel="tag">codeplex</a> ]</div>
      </body>
      <category>Script#</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=192#Comments</comments>
      <description>Some words about the latest release of script#, now on CodePlex, and with support for localization, doc-comments and more.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=192</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=192</link>
      <pubDate>Mon, 21 Apr 2008 21:02:15 GMT</pubDate>
      <title>Script# 0.5 Update and Associated CodePlex Project</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Just over a month ago, at MIX08, I presented a talk on Real-World Ajax. One of the demos I included was an Ajax templating technique to demonstrate separation of presentation and content from behavior to help manage script complexity, and to help facilitate designer/developer workflow.</p>
        <p>The demo was based on early thoughts around what we need to do in this area. What is presented here is still quite simplistic in terms of the range of options it provides to developers. The demo worked well with the audience, and I'd love to hear any feedback people have in this area that can be fed into the design process at this early stage (I alluded to this work in comments to my <a href="Ajax-vs-Silverlight-and-NET.aspx">Ajax vs. Silverlight</a> post).</p>
        <p>Here is my scenario - in my Ajax app, script issues a web request to fetch a list of data, in this case a list of bookmarks, and constructs HTML to visualize the results. This is often implemented as follows:</p>
        <p>
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">div</span>
            <span style="color: #ff0000;">id</span>
            <span style="color: #0000ff;">="bookmarkList"</span>
            <span style="color: #0000ff;">&gt;&lt;/</span>
            <span style="color: #800000;">div</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">script</span>
            <span style="color: #ff0000;">type</span>
            <span style="color: #0000ff;">="text/javascript"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">function</span> fetchBookmarks() { 
    <span style="color: #008000;">// Issue an XMLHTTP request to retrieve user's bookmarks.</span>
}
<span style="color: #0000ff;">function</span> onBookmarksAvailable(bookmarks) {
    <span style="color: #008000;">// Update display using retrieved bookmarks. Each boomark has Url and Title properties.</span><span style="color: #0000ff;">var</span> sb = <span style="color: #0000ff;">new</span> Sys.StringBuilder();
    sb.append(<span style="color: #006080;">"&lt;ul&gt;"</span>);
    <span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = 0; i &lt; bookmarks.length; i++) {
        sb.append(<span style="color: #006080;">"&lt;li&gt;"</span>);
        sb.append(<span style="color: #006080;">"&lt;a href=\""</span>);
        sb.append(bookmarks[i].Url);
        sb.append(<span style="color: #006080;">"\"&gt;"</span>);
        sb.append(bookmarks[i].Title);
        sb.append(<span style="color: #006080;">"&lt;/li&gt;"</span>);
    }
    sb.append(<span style="color: #006080;">"&lt;/ul&gt;"</span>);
    $get(<span style="color: #006080;">'bookmarkList'</span>).innerHTML = sb.toString();
}
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>This works. However, there is a problem. The definition of the UI is now embedded in script. Its hard to design and change it. And its hard to preview it without running the page. The problem is worse if the structure of each item is more complicated than what the sample tries to do.</p>
        <p>Here is where templating comes into the picture. Templates have been super common in server-side frameworks like ASP.NET, and are now popping up in client-side script frameworks, as Ajax apps start becoming more client-centric. With templating the developer or designer can define the structure of an item in regular markup, and the templating engine is then responsible for generating the script equivalent.</p>
        <break />
        <p>In the demo, I wrote a simple template engine, which I can use by to rewrite the script as follows:</p>
        <p>
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">div</span>
            <span style="color: #ff0000;">id</span>
            <span style="color: #0000ff;">="bookmarkList"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">ul</span>
            <span style="color: #ff0000;">id</span>
            <span style="color: #0000ff;">="itemContainer"</span>
            <span style="color: #0000ff;">&gt;&lt;/</span>
            <span style="color: #800000;">ul</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span>
            <span style="color: #800000;">div</span>
            <span style="color: #0000ff;">&gt;</span>
            <b>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">div</span>
              <span style="color: #ff0000;">id</span>
              <span style="color: #0000ff;">="bookmarkTemplate"</span>
              <span style="color: #ff0000;">style</span>
              <span style="color: #0000ff;">="display: none"</span>
              <span style="color: #0000ff;">&gt;</span>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">ul</span>
              <span style="color: #ff0000;">id</span>
              <span style="color: #0000ff;">="itemContainer"</span>
              <span style="color: #0000ff;">&gt;</span>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">li</span>
              <span style="color: #0000ff;">&gt;&lt;</span>
              <span style="color: #800000;">a</span>
              <span style="color: #ff0000;">href</span>
              <span style="color: #0000ff;">="{Url}"</span>
              <span style="color: #0000ff;">&gt;</span>{Title}<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">div</span><span style="color: #0000ff;">&gt;</span></b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">script</span>
            <span style="color: #ff0000;">type</span>
            <span style="color: #0000ff;">="text/javascript"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">function</span> fetchBookmarks() {
    <span style="color: #008000;">// Issue an XMLHTTP request to retrieve user's bookmarks.</span>
}
<span style="color: #0000ff;">function</span> onBookmarksAvailable(bookmarks) {
    <span style="color: #008000;">// Update display using retrieved bookmarks. Each boomark has Url and Title properties.</span><b><span style="color: #0000ff;">var</span> template = <span style="color: #0000ff;">new</span> Templating.Template($get(<span style="color: #006080;">'boomarkTemplate'</span>));</b><span style="color: #0000ff;">var</span> itemContainer = $get(<span style="color: #006080;">'itemContainer'</span>, $get(<span style="color: #006080;">'bookmarkList'</span>));

    <span style="color: #0000ff;">for</span> (<span style="color: #0000ff;">var</span> i = 0; i &lt; bookmarks.length; i++) {
        <b><span style="color: #0000ff;">var</span> item = template.createInstance(bookmarks[i]);</b>
        itemContainer.appendChild(item);
    }
}
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>The interesting lines are in bold. The template is defined using regular XHTML markup representing how items should appear. This can be independently edited/designed and previewed. You simply embed atomic tokens such {Url} etc. into the markup.</p>
        <p>The script is responsible for creating the template, which effectively generates the script equivalent, (this is done once), and then as the script loops over the list of bookmarks, it uses the template to create new instances of the list items and anchors, and adds them into the DOM to generate the display.</p>
        <p>With this we have a client-side templating mechanism. However web development is all about balancing and meeting several requirements (at once). In particular here are some of the things I also want to tackle as a developer.
<ul><li><b>Search Engine Optimization</b>: Ideally the page rendered by the server isn't blank from the perspective of the search engine. I demonstrated a solution in my <a href="AjaxSEO.aspx">Ajax and SEO</a> post over year ago.</li><li><b>Optimizing Networking</b>: I don't want to spend one connection downloading a blank page, and then immediately having the script turn around to issue another connection to fetch the first page worth of data.</li><li><b>Reducing Page Load Time</b>: Sending a blank page implies some delay as scripts are downloaded, loaded and data is loaded and processed to show data to the user. This should be avoided if at all possible.</li><li><b>Script-disabled browsers</b>: If targeting an audience that might have script disabled (this is perhaps a shrinking number), then being able to still deliver a degraded but functional experience is nice.</li></ul></p>
        <p>These can be addressed through some form of server-side rendering, sort of how you've been doing using server-side data-bound controls for years. The goal however, in the context of Ajax, is to leverage a single template definition for both server-side and client-side processing. This is where server controls really shine. They allow you to do Ajax better by providing end-to-end solutions.</p>
        <p>I've written an AjaxRepeater server control as part of the prototype. It does server-side data-binding (using the same token format we've seen above), renders the list on the server, but also generates a client-side Repeater control (using the ASP.NET Ajax UI pattern for writing controls). The client-side Repeater control consumes the same template definition, and provides the ability to dynamically add rows on the client, or reset the list of items to be displayed. The sample below illustrates using this control, along with both server-side code and client-side script working against it.</p>
        <p>
          <pre>
            <b>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">n:AjaxRepeater</span>
              <span style="color: #ff0000;">runat</span>
              <span style="color: #0000ff;">="server"</span>
              <span style="color: #ff0000;">id</span>
              <span style="color: #0000ff;">="bookmarkList"</span>
              <span style="color: #0000ff;">&gt;</span>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">ul</span>
              <span style="color: #ff0000;">id</span>
              <span style="color: #0000ff;">="itemContainer"</span>
              <span style="color: #0000ff;">&gt;</span>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">li</span>
              <span style="color: #0000ff;">&gt;&lt;</span>
              <span style="color: #800000;">a</span>
              <span style="color: #ff0000;">href</span>
              <span style="color: #0000ff;">="{Url}"</span>
              <span style="color: #0000ff;">&gt;</span>{Title}<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">n:AjaxRepeater</span><span style="color: #0000ff;">&gt;</span></b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">script</span>
            <span style="color: #ff0000;">runat</span>
            <span style="color: #0000ff;">="server"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">void</span> Page_Load() {
    bookmarkList.DataSource = <span style="color: #0000ff;">new</span> Bookmark[] {
            <span style="color: #0000ff;">new</span> Bookmark { Title=<span style="color: #006080;">"..."</span>, Url=<span style="color: #006080;">"..."</span> }, ...
        };
    bookmarkList.DataBind();
}
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">script</span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/javascript"</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">function</span> addBookmark(title, url) {
    <span style="color: #0000ff;">var</span> bookmark = { Title: title, Url: url };
    $find(<span style="color: #006080;">'bookmarkList'</span>).addDataItem(bookmark);
}
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">script</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>The current implementation is pretty much based on what can be done via String.Format to perform substitutions of tokens in the template with actual data (I used a tweaked version of James' <a href="http://james.newtonking.com/archive/2008/03/29/formatwith-2-0-string-formatting-with-named-variables.aspx" target="_new">FormatWith</a> code). Eventually the hope is to productize this feature, and at that point we'd like you to be able add expressions in the template as well as express conditional segments within the template. For example, one might be able to write this:</p>
        <p>
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">n:AjaxRepeater</span>
            <span style="color: #ff0000;">runat</span>
            <span style="color: #0000ff;">="server"</span>
            <span style="color: #ff0000;">id</span>
            <span style="color: #0000ff;">="bookmarkList"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">ul</span>
            <span style="color: #ff0000;">id</span>
            <span style="color: #0000ff;">="itemContainer"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">li</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">a</span>
            <span style="color: #ff0000;">href</span>
            <span style="color: #0000ff;">="{Url}"</span>
            <span style="color: #ff0000;">class</span>="{ <span style="color: #ff0000;">IsShared</span> ? <span style="color: #0000ff;">'bookmark shared'</span><span style="color: #ff0000;">:</span><span style="color: #0000ff;">'bookmark'</span> }"<span style="color: #0000ff;">&gt;</span>{Title}<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span><span style="color: #008000;">&lt;!--- if (!IsShared) { ---&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">button</span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="button"</span><span style="color: #ff0000;">onclick</span><span style="color: #0000ff;">="..."</span><span style="color: #0000ff;">&gt;</span>Share<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">button</span><span style="color: #0000ff;">&gt;</span><span style="color: #008000;">&lt;!--- } ---&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ul</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">n:AjaxRepeater</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>As we extend the functionality of those templates, it is important to preserve the server-side rendering capabilities. One way to accomplish this is to use the DLR and JavaScript on the server. This can actually be done quite efficiently by doing the script-generation and compilation using the DLR at page parse time, once for the lifetime of the application, in much the same way that regular ASP.NET template markup is parsed and compiled once into a delegate that can be invoked multiple times. For ongoing prototyping at this moment, I am starting to look at JScript.NET, until the DLR is part of the framework.</p>
        <p>One key realization here is that targeting the mainline scenarios that Ajax developers encounter all the time keeps the overall solution simple and elegant for both the developer and the framework. Combining that with the right server-side support makes the solution much more interesting, as it starts to address the end-to-end scenarios with a single set of concepts and a consistent approach.</p>
        <p>I'll reiterate that this is a prototype that I partly demo'd at MIX, and isn't meant to represent exactly what might eventually make it into the product (as we all know, things change as we iterate on ideas, and put together feature plans)... but as I mentioned earlier, if you do have thoughts you'd like to share, then go ahead, and post them below.</p>
        <p>For those who are interested at poking around in the code for either the templating engine (which is really quite small), or the server-side control, you can <a href="Content/Posts/AjaxTemplates/AjaxTemplates.zip">download the prototype</a> as it exists today. If you delve in deeper, you might also notice that the included script was generated using <a href="http://projects.nikhilk.net/ScriptSharp">Script#</a> (as you might have come to expect of me by now) and comes along with the originating C# source as well. If you haven't installed Script#, then simply ignore the 2nd project in the solution when it prompts you. I am hoping to get a client-side templating engine added to Script# as well a little further down the road.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/ajax" rel="tag">ajax</a>  | <a href="http://www.nikhilk.net/tags/asp.net" rel="tag">asp.net</a>  | <a href="http://www.nikhilk.net/tags/prototype" rel="tag">prototype</a> ]</div>
      </body>
      <category>ASP.NET</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=191#Comments</comments>
      <description>This post describes a prototype for an Ajax templating solution, combined with an Ajax-friendly server-side solution that hints at what is coming down the road in ASP.NET Ajax.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=191</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=191</link>
      <pubDate>Sun, 13 Apr 2008 05:44:49 GMT</pubDate>
      <title>Ajax Templates</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>I get the Silverlight vs. Ajax question all the time, whether it is at a conference, over email, or over on discussion forums. In the interest of seeding a broader discussion, and hearing what other people think, I thought this would be an interesting blog post, along with the side benefit of having a ready-made answer the next time the topic comes up.</p>
        <p>There have been a number of blog posts pitching Ajax vs. RIA (whether its Flash or Silverlight) such as this one <a href="http://www.tbray.org/ongoing/When/200x/2008/01/01/Predictions" target="_new">here</a>. Personally, I think Ajax and Silverlight complement each other, and the "vs." is a bit misplaced.  Furthermore, the way I see it, there is a continuum, with a number of sweet spots representing specific classes of applications. This perspective is perhaps directly reflected in the makeup of the UIFX team that I work on at Microsoft - the team is spread across ASP.NET, Ajax, Silverlight and RIA frameworks all at once actively working on cool stuff in each of these areas (i.e. lots to look forward to).</p>
        <p align="center">
          <br />
          <img src="Content/Posts/AjaxSilverlight/AppContinuum.png" alt="User-facing Application Spectrum" />
          <br />
        </p>
        <break />
        <p>
          <b>Reach and Rich</b>
          <br />The diagram represents a spectrum of application development approaches and technologies/platforms with increasing reach on one end, and increasing capabilities on the other. Applications have distinct scenarios and correspondingly gravitate toward a sweet spot. Some apps lie squarely on the left, with the need to first and foremost prioritize universal reach. At the same time,  some apps have experience or functionality as the high order bit, where it is necessary to leverage a more capable platform, even if it means somewhat reduced reach. Still, the best apps will probably be those that leverage multiple front-end options to follow the user, with a common back-end (sort of a <a href="http://www.microsoft.com/presspass/exec/ozzie/04-30-07MIX.mspx" target="_new">software <i>and</i> a service</a> model).</p>
        <p>One thing is sure - users are expecting more, and apps are trying to differentiate by meeting them. For example, the Ajax hype has given way to broad mainstream and pragmatic use of the technology (hence I call the older style of Web apps as "Classic" in the diagram).</p>
        <p>
          <b>RIA Islands</b>
          <br />At the same time, the reality is a number of applications are no longer "pure" Ajax, i.e. just HTML and Script-based. Ajax applications are increasingly relying on plugins such as Silverlight, Google Gears, and Flash to incrementally enrich the experience they can offer (ideally, in a manner such that they gracefully degrade). These plugins let Ajax applications do interesting things like use local storage, access user's files, integrate rich media and vector graphics, background processing etc. Just like ASP.NET server controls make it quite easy to incorporate Ajax functionality, they are also nicely positioned to simplify the "Islands of Silverlight" scenario. Imagine a data-bound server control that renders a Silverlight chart, and degrades to a static image dynamically rendered on the server without requiring the app developer to learn several new technologies. I've spoken on this at recent conferences, and will be blogging more on this end. Wilco blogged about <a href="http://www.wilcob.com/wilco/News/silverlight-interoperability.aspx" target="_new">Silverlight Interop</a> to cover the use of Silverlight to implement HTML code-behind and creating a better file uploader for Ajax apps.</p>
        <p>
          <b>Trends</b>
          <br />The second thing that is also interesting about the diagram are the trends in effect. The reach platform, starting to be referred to as the <a href="http://codinginparadise.org/weblog/2008/04/whats-open-web-and-why-is-it-important.html" target="_new">Open Web</a> by some, is bound to get richer in terms of the execution engine, the presentation stack, and its framework capabilities. HTML 5 promises to improve some core pieces of the browser-based platform, and all the browsers (yes, that includes <a href="http://blogs.msdn.com/ie/archive/2008/03/07/internet-explorer-8-beta-1-for-developers-standards-highlights.aspx" target="_new">IE</a>) are already stepping up to improving the state of the art in their next versions. The interesting question is when we will see ubiquity around the next batch of incremental improvements like the ubiquity of XMLHTTP that fueled the Ajax wave a couple or so years ago. RIA technologies are becoming more ubiquitous, and starting to become a viable or required choice for development in the next generation of Web apps. Over time as what is considered "rich" today gets commoditized by the reach platform, the platforms on the right need to constantly redefine themselves by finding new ways and value offerings in order to differentiate, which always keeps them interesting and in the forefront. It's a constant tug-of-war ... and it doesn't seem like either Ajax or the RIA approach is going to all out win any time soon.</p>
        <p>
          <b>A .NET Theme</b>
          <br />So if you agree, the world isn't Ajax vs. RIA, but is rather Ajax and RIA (and Desktop), and there is room for them to co-exist, the final thing I'll point out is how the Microsoft platform plays out in this space. Clearly, the consistent theme across the board is .NET and managed code, which allows developer skills, as well as in many cases, common code that can be shared and leveraged as apps transition or grow. Ray Ozzie spoke to this when referring to <a href="http://www.microsoft.com/Presspass/exec/ozzie/03-05-08MIX.mspx" target="_new">connected development</a> at MIX 08. We have .NET on the server providing that common backend, .NET on Web/Ajax front with ASP.NET and even . NET-flavored scripting with technologies like <a href="http://projects.nikhilk.net/ScriptSharp">Script#</a>, and of course, .NET on the client with WPF. Silverlight 2 brings .NET to the RIA space. In fact, the simple introduction of managed code into the browser is perhaps one of the most eagerly anticipated feature.</p>
        <p>The fun, and simultaneously challenging thing, is working on the multiple sweet spots along the current application platform spectrum, balancing the feature set, and making sure we have messaging for how they evolve, complement, and differentiate to address specific scenarios at the same time.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/ajax" rel="tag">ajax</a>  | <a href="http://www.nikhilk.net/tags/silverlight" rel="tag">silverlight</a>  | <a href="http://www.nikhilk.net/tags/.net" rel="tag">.net</a>  | <a href="http://www.nikhilk.net/tags/thoughts" rel="tag">thoughts</a> ]</div>
      </body>
      <category>Silverlight</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=190#Comments</comments>
      <description>My thoughts on questions along the lines of Ajax vs. Silverlight, and independent of the debate, how .NET spans the gamut of application development platforms...</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=190</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=190</link>
      <pubDate>Tue, 08 Apr 2008 16:03:06 GMT</pubDate>
      <title>Ajax vs. Silverlight and .NET</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>While developing <a href="http://www.codeplex.com/FacebookNET" target="_blank">Facebook.NET</a>, it was on the back of my mind to create a script library equivalent in script# for client-side only interaction with the Facebook REST API using the existing JSONP interface to their REST service. I didn't do it yet for security reasons, as it would require sending down both the application key and secret to the client (something that existing Flash and Silverlight examples unfortunately and incorrectly show). Instead I opt'd for creating a Facebook Proxy service that allows your client code to talk to facebook via your service in an almost transparent manner. Those of you who have downloaded Facebook.NET can see a sample of this.</p>
        <p>Now Facebook is offering a client-side SDK. Wei Zhu blogged about the <a href="http://developers.facebook.com/news.php?blog=1&amp;story=73" target="_blank">JavaScript Client Library for the Facebook API</a> on the official developer blog last Friday. If you're a Facebook application developer, you'll want to check this out.</p>
        <p>Wei Zhu has been a long-time supporter of Script#, and it makes me super excited to see that the library itself was coded in <a href="http://projects.nikhilk.net/Projects/ScriptSharp.aspx">Script#</a>, and also uses the Script# runtime as part of its implementation. I am sure Script# usage resulted in some substantial productivity gains, and makes me hopeful that this will spike some more interest in the technology. Its also exciting to see the potential for a number of Facebook apps built on top of this. I am hopeful that Facebook will eventually release the .dll version of the script, so other downstream users of Script# will be able to directly reference these APIs in their C# code, without having to create a stub metadata dll</p>
        <p>I also chatted with Wei during the weekend about possible security implications. It looks like they've thought through the implications. Specifically, you only need to publish the API key (which is public anyway), and the client library connects with Facebook to generate a temporary user-session scoped secret using some new services, so you don't have to publish your actual secret. Nice!</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/script#" rel="tag">script#</a>  | <a href="http://www.nikhilk.net/tags/facebook" rel="tag">facebook</a> ]</div>
      </body>
      <category>Script#</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=189#Comments</comments>
      <description>Facebook's latest offering to application developers - a client-side script API, built on Script#!</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=189</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=189</link>
      <pubDate>Mon, 28 Jan 2008 16:28:35 GMT</pubDate>
      <title>Facebook Client Library built on Script#</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>A couple of days back I blogged about some first impressions while skimming through the HTML 5 spec, and I made a note about its length, which partly stems for a whole slew of new tags such as <a href="http://www.w3.org/TR/2008/WD-html5-20080122/#the-dialog" target="_blank">&lt;dialog&gt;</a>, &lt;figure&gt; etc.</p>
        <p>I can certainly see them being useful in creating a somewhat featured vocabulary for creating semantic markup. Here is the example from the draft spec:
<pre>
&lt;dialog&gt;
  &lt;dt&gt;Costello
  &lt;dd&gt;Look, you gotta first baseman?
  &lt;dt&gt;Abbott
  &lt;dd&gt;Certainly.
  ...
&lt;/dialog&gt;
</pre></p>
        <p>Ignoring the problem about this being invalid xml (Strange! Why doesn't the HTML 5 require valid XML?), I think there are a couple of issues I see with this approach overall.</p>
        <p>First this introduces a new tag, which isn't going to be available in all browsers any time soon. So I wonder whether if developers are likely to use the new tag, or will they just continue to use the &lt;dl&gt; tag or other appropriate existing tags.</p>
        <p>Second, as it stands, it doesn't really address a meaningful conversation scenario where it might be useful to identify the participants, time stamps etc. There are numerous examples of conversations in a general sense across the web - every blog post's comment stream is a conversation of sorts. Facebook's Wall-To-Wall feature is a conversation. A saved chat transcript is a conversation. The &lt;dialog&gt; tag doesn't really capture the common pieces of information that are typically represented in all these conversations.</p>
        <p>Finally, the number of interesting semantics is huge; the number of possible tags is small... so you fundamentally need a way to define semantics and layer them on basic tags, at some point or the other.</p>
        <p>
          <span style="float: left; margin-right: 10px; margin-bottom: 10px; padding: 3px; background-color: white; border: solid 1px silver">
            <a href="http://www.amazon.com/exec/obidos/ASIN/1590598148/nikhilkothari-20" target="_blank" style="text-decoration: none; border: none">
              <img src="http://ecx.images-amazon.com/images/I/21A3vV7PCQL.jpg" border="0" />
            </a>
          </span>During the holidays, I was reading about microformats to understand a bit more about the concepts and patterns at play. So immediately when I saw the &lt;dialog&gt; tag, I began wondering, isn't any value in describing the semantics of a conversation, already achievable today using some sort of microformats-based approach? My own definition of microformats is basically a set of patterns using existing HTML tags to convey semantic data and metadata embedded in your page content. The <a href="http://microformats.org/about/" target="_blank">microformats.org</a> site describes them as a set of simple, open data formats built upon existing and widely adopted standards. See that page for more about what they are and aren't, as well as other related content.</p>
        <p>There isn't an hConversation or hDialog type of microformat agreed upon right now. But here is a rough sketch of how you might use microformats approach to get not only a working visualization supported by all browsers today, but at the same time, embed additional semantics. To clarify, this isn't some approved conversation microformat, but me being creative and mocking one up while writing this post. Who knows... something might even come out of this. :-)</p>
        <break />
        <p style="clear: both">
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">ol</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="<b>hConversation</b>"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">li</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="<b>message</b>"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">span</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="<b>participant</b>"</span>
            <span style="color: #0000ff;">&gt;</span>Nikhil<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="<b>messagecontent</b>"</span><span style="color: #0000ff;">&gt;</span>...<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
  ...
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>You can now leverage common microformats patterns. For example, you can include time-stamps using the <a href="http://microformats.org/wiki/datetime-design-pattern" target="_blank">datetime pattern</a>... so you get:</p>
        <p>
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">ol</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="hConversation"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">li</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="message"</span>
            <span style="color: #0000ff;">&gt;</span>
            <b>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">abbr</span>
              <span style="color: #ff0000;">class</span>
              <span style="color: #0000ff;">="dt"</span>
              <span style="color: #ff0000;">title</span>
              <span style="color: #0000ff;">="2008-01-25T10:00:00"</span>
              <span style="color: #0000ff;">&gt;</span>25th January, 2008<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">abbr</span><span style="color: #0000ff;">&gt;</span></b>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">span</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="participant"</span>
            <span style="color: #0000ff;">&gt;</span>Nikhil<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="messagecontent"</span><span style="color: #0000ff;">&gt;</span>...<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
  ...
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>Furthermore you could compose microformats as if they were building blocks. For example, you might want to identify the participants, and use the existing hCard microformat.</p>
        <p>
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">ol</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">li</span>
            <span style="color: #ff0000;">id</span>
            <span style="color: #0000ff;">="participant1"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">span</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="<b>vcard</b>"</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">a</span>
            <span style="color: #ff0000;">class</span>
            <span style="color: #0000ff;">="fn name url"</span>
            <span style="color: #ff0000;">href</span>
            <span style="color: #0000ff;">="http://www.nikhilk.net"</span>
            <span style="color: #0000ff;">&gt;</span>Nikhil<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
  ...
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">ol</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="hConversation"</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">li</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="message"</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">abbr</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="dt"</span><span style="color: #ff0000;">title</span><span style="color: #0000ff;">="2008-01-25T10:00:00"</span><span style="color: #0000ff;">&gt;</span>25th January, 2008<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">abbr</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="participant <b>vcard</b>"</span><span style="color: #0000ff;">&gt;&lt;</span><span style="color: #800000;">a</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="<b>include</b>"</span><span style="color: #ff0000;">href</span><span style="color: #0000ff;">="#participant1"</span><span style="color: #0000ff;">&gt;</span>Nikhil<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">a</span><span style="color: #0000ff;">&gt;&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;</span><span style="color: #800000;">span</span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="messagecontent"</span><span style="color: #0000ff;">&gt;</span>...<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">span</span><span style="color: #0000ff;">&gt;</span><span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">li</span><span style="color: #0000ff;">&gt;</span>
  ...
<span style="color: #0000ff;">&lt;/</span><span style="color: #800000;">ol</span><span style="color: #0000ff;">&gt;</span></pre>
        </p>
        <p>The example above also shows linking to a <a href="http://microformats.org/wiki/hcard" target="_blank">hCard</a>, rather than embedding it inline in the conversation, using the <a href="http://microformats.org/wiki/include-pattern" target="_blank">include pattern</a>. The hCard microformat itself allows for various bits of information to be specified about the identity it corresponds to.</p>
        <p>Over the years, I've increasingly become a fan of <a href="AtlasStructuralMarkup.aspx">semantic markup</a> as the basis for attaching presentation and behavior, achieving <a href="AjaxSEO.aspx">SEO</a> etc. especially since starting work on ASP.NET Ajax. It is certainly interesting to think about how to convey the semantics of the data contained within a page rendering. Ultimately the success of these microformats is gated to whether they are broadly applicable, are standardized, as well as whether things like search engines or browser addins allow you to extract the semantics and do something interesting with them, to make it worth your while to put them in there. Sort of a chicken and egg problem here.</p>
        <p>But to come full circle to HTML 5, personally I think it would be great to see new tags in HTML when they equate to new capabilities, features and user experiences in the browser (eg. the &lt;video&gt; tag or &lt;input type="date" /&gt;), rather than simply higher level tags designed to convey semantics. In other words, I would argue: address the biggest limitations of HTML first with an HTML 5 Core spec.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/html" rel="tag">html</a>  | <a href="http://www.nikhilk.net/tags/w3c" rel="tag">w3c</a>  | <a href="http://www.nikhilk.net/tags/microformats" rel="tag">microformats</a> ]</div>
      </body>
      <category>(All)</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=188#Comments</comments>
      <description>A followup post on my HTML 5 thoughts: specifically how some of the new concepts can be implemented today using microformats.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=188</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=188</link>
      <pubDate>Sat, 26 Jan 2008 01:37:01 GMT</pubDate>
      <title>HTML 5, the Dialog Tag, and Microformats</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>I was reading through the <a href="http://www.w3.org/TR/2008/WD-html5-20080122/" target="_blank">HTML 5 draft</a> (actually glancing … since it goes on and on). If you're looking for a summary, I think the <a href="http://www.w3.org/TR/html5-diff/" target="_blank">HTML 5 Differences</a> draft is more useful. As I read through the list and the TOC, I  had a few different reactions.</p>
        <p>There are definitely some bits of goodness in it, albeit a few years delayed, and those additions will realistically only become available and dependable still more years down the road. Its great to see the &lt;input&gt; tag finally grow up to support common semantic data types such as date, time, url, email etc. It is also good to see HTML incorporate media scenarios by adding the &lt;video&gt; and &lt;audio&gt; elements as part of the tag soup. Other useful additions that I think will go a long way are better and standard support for application scenarios such as managing navigation history, local storage, drag/drop, drawing and content editing. There is definitely lots of possibility, esp. when combined with the latest CSS capabilities.</p>
        <p>The spec is long! And I wonder if it should even be called the HTML 5 spec. It looks like it wants to be an end-all spec for the browser platform, and even speaks to socket connections and peer-to-peer connections. However, at the same time it doesn't speak to other foundational UI and presentation features such as animation, or data-binding. Instead it adds a whole bunch of new tags like &lt;dialog&gt; which to me seem less critical at this point in time (I'll blog about this some more ... <a href="HTML5-Dialog-Microformats.aspx">see here</a>).</p>
        <p>The spec doesn't seem speak to extensibility either. To me this is a key feature, and personally near-and-dear, having worked on the platforms side of software for so long. Back in May of '06, I listed my <a href="Entry.aspx?id=120">wish list</a> for the browser platform... and one of the bigger items on my list was getting DOM fundamentals right. Specifically, I would have loved to see the HTML 5 spec address extensibility of the tag set and rationalize things like <a href="http://msdn2.microsoft.com/en-us/library/ms531018(VS.85).aspx" target="_blank">HTC behaviors</a> and <a href="http://developer.mozilla.org/en/docs/XBL:XBL_1.0_Reference" target="_blank">XBL bindings</a>. We now have built in media tags, but what if I want a &lt;slideshow&gt; tag? It simply doesn't address encapsulation of behavior, composition, layout extensibility, and ability to define new object models.</p>
        <p>Its over-encompassing nature, especially beyond HTML in a strict sense, also makes me wonder if there shouldn't be a much more trimmed down HTML 5 Core spec. I'd love to see something that has a chance of being realistically and fully implemented in the foreseeable future.</p>
        <p>In the meantime, it looks like browser plugins such as Silverlight will continue to be an important part of the RIA platform, by bringing not only consistency in APIs and capabilities across browsers, but also by nailing some of the fundamentals.</p>
        <p>What are your thoughts? Or your rants? :-)</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/html" rel="tag">html</a>  | <a href="http://www.nikhilk.net/tags/thoughts" rel="tag">thoughts</a>  | <a href="http://www.nikhilk.net/tags/w3c" rel="tag">w3c</a> ]</div>
      </body>
      <category>(All)</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=187#Comments</comments>
      <description>Just some thoughts, and perhaps some ranting around the HTML 5 spec...</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=187</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=187</link>
      <pubDate>Thu, 24 Jan 2008 01:53:43 GMT</pubDate>
      <title>HTML 5 Thoughts</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Over the weekend I released the next version of <a href="http://www.codeplex.com/FacebookNET" target="_blank">Facebook.NET</a> over on the CodePlex project site.</p>
        <p>If you've built a Facebook application using my framework, you'll definitely want to check out this build. Facebook has deprecated the setFBML API as it currently exists (read about this on the <a href="http://developers.facebook.com/news.php?blog=1&amp;story=61" target="_blank">developer blog</a>), and I can't think of any application that isn't affected by this. To summarize the old signature, now marked obsolete, was effectively:
<pre>
    SetFbml(string userID, string fbmlMarkup)
</pre>
and the new signature has the FBML markup broken out into separate parameters:
<pre>
    SetFbml(string userID, string profileMarkup, string actionsMarkup);
    SetFbml(string userID, string profileMarkup, string actionsMarkup, string mobileMarkup)
</pre>
This actually makes constructing the FBML a bit more cleaner, as it keeps the different logical bits of markup separate. Facebook.NET has contained support for the new updated SetFbml API for a while now, but its now packaged as part of the 0.3 release. The old API goes out of service on the 17th, at which point I'll update the framework to completely remove the obsoleted API as well.</p>
        <p>I love the fact that Facebook is able to announce changes to the API or mark things as deprecated when they need to, give some time to developers to allow them to catch up, and then actually go ahead and flip the switch to actually make the change. Relating this to the .NET Framework APIs and personal experience with the process, its certainly a luxury when if you can afford to do that. It certainly speaks to something about the dynamic nature of the Web, and the need for developers creating mashups or using services to keep up!</p>
        <p>There are several other changes including several bug fixes that have been packaged up into this release, that you can read about on the project's page. These were also available in source code form during the past month.
<ul><li>The big one is support for creating applications for Facebook Pages. Facebook introduced the Page/Fan-of concept sometime back, which allow the page creator to add applications. Facebook.NET supports these applications. As an aside, there is a page for <a href="http://www.facebook.com/profile.php?id=6291561657" target="_blank">ASP.NET</a> if you're on Facebook, and you'd like to declare yourself as a fan :-)</li><li>Various other APIs are now covered. These include detecting application permissions, storing application preferences, etc.</li><li>I've added a sample that demonstrates using Facebook.NET for creating desktop applications to complement the samples for the regular FBML/IFrame application styles.</li></ul></p>
        <p>I'll be creating a show case of applications using Facebook.NET soon. I know of a few, but if you'd like to submit your application to show up on the list, feel free to list it down here in the comments.</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/facebook" rel="tag">facebook</a>  | <a href="http://www.nikhilk.net/tags/facebook.net" rel="tag">facebook.net</a>  | <a href="http://www.nikhilk.net/tags/codeplex" rel="tag">codeplex</a>  | <a href="http://www.nikhilk.net/tags/" rel="tag"></a> ]</div>
      </body>
      <category>Facebook</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=186#Comments</comments>
      <description>A quick update on the release of Facebook.NET 0.3 with support for new and changing Facebook APIs...</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=186</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=186</link>
      <pubDate>Mon, 14 Jan 2008 07:53:02 GMT</pubDate>
      <title>Facebook.NET Update</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Just a quick heads up - I posted the latest release of script# - version 0.4.5.0... you can check it out and download it from my <a href="http://projects.nikhilk.net/Projects/ScriptSharp.aspx">projects site</a>.</p>
        <p>This build introduces support for installing project and file templates into VS 2008. However, it continues to works with VS 2005 and .NET 2.0. It also has a number of fixes, esp. in the minimization logic that is used to compact release builds. Finally it introduces one small compiler-driven optimizations: constant inlining - so if you've got consts, they're inlined at compile time in release builds. There are many more optimizations a compiler can do - this is just a start. For a full list of changes, you can see the associated readme documentation.</p>
        <p>
          <span style="float: left; margin-right: 10px; margin-bottom: 10px">
            <img src="http://www.coveo.com/en/Products/RichMedia_sml.png" />
          </span>Its always fun talking to folks using the technology building real solutions.</p>
        <p>Recently, I chatted with the guys at <a href="http://www.coveo.com/en/Products/CAVSScreenShots.aspx" target="_blank">Coveo</a> who have built a Sharepoint plugin to do media search, and present the results using Silverlight 1.0 - they implemented their media player and client experience (shown in the image on the left) in script#. You can follow the link to see a live demo.</p>
        <p>Martin, if you're reading this, you should find this build useful - it has a number of fixes for things you encountered, along with fixes for various issues reported by others on the script# bug list.</p>
        <p style="clear: both">
        </p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/script#" rel="tag">script#</a>  | <a href="http://www.nikhilk.net/tags/projects" rel="tag">projects</a> ]</div>
      </body>
      <category>Script#</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=185#Comments</comments>
      <description>A quick post announcing version 0.4.5.0 of script# which is now available for download - adding support for VS 2008, along with a number of fixes and some enhancements.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=185</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=185</link>
      <pubDate>Fri, 21 Dec 2007 22:47:14 GMT</pubDate>
      <title>Script# Update</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>
          <span style="padding: 3px; border: solid 1px silver; float: right; margin-left: 10px; margin-bottom: 10px">
            <iframe src="http://www.nikhilk.net/Apps/SlideShow/SlideShow.htm" style="width: 480px; height: 360px" frameborder="0">
            </iframe>
          </span>At MIX07 earlier this year, I demonstrated a basic slide show control for one of my Silverlight talks (I tend to squeeze in at least one demo around the photos scenario... invariably).</p>
        <p>The folks at Vertigo Software have recently put together a pretty full-featured interactive slide show control, with some cool transition effects, called <a href="http://www.vertigo.com/slideshow.aspx" target="_blank">Slide.Show</a>, built on script and Silverlight 1.0. They have also created a project on <a href="http://www.codeplex.com/SlideShow" target="_blank">CodePlex</a> to keep it open and going forward, and also serve as a good example of some of the things you can do with Silverlight today.</p>
        <p>I gave the control a whirl with a sampling of some of my photos. It is pretty straightforward to set up, and still offers a high degree of customization capabilities. I just had to tweak a few settings... just for heart's content. For the rest of my photos, head over to my <a href="Photos.aspx">photo gallery</a>.</p>
        <p>I have already started developing a small wish list for some features as I played with it, that I'd like to see added, but wish it was implemented in c# and converted to script using <a href="http://projects.nikhilk.net/Projects/ScriptSharp.aspx">script#</a> - I'd be much more inclined to tinker around if it was.</p>
        <p style="clear: both">
        </p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/silverlight" rel="tag">silverlight</a>  | <a href="http://www.nikhilk.net/tags/photography" rel="tag">photography</a>  | <a href="http://www.nikhilk.net/tags/codeplex" rel="tag">codeplex</a> ]</div>
      </body>
      <category>Silverlight</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=184#Comments</comments>
      <description>Slide.Show - A very nice (and open source) implementation of a photo slide show experience built using Silverlight 1.0 and script.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=184</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=184</link>
      <pubDate>Fri, 14 Dec 2007 04:39:25 GMT</pubDate>
      <title>Silverlight-powered Slide Show</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>Theres a lot of exciting and new technology to check out with the <a href="http://www.asp.net/downloads/3.5-extensions/" target="_blank">ASP.NET 3.5 Extensions</a> released just yesterday... MVC, Silverlight controls, more Ajax stuff, dynamic data controls, Astoria, and lots of interesting blog posts and samples to check out.</p>
        <p>
          <span style="padding: 3px; border: solid 1px silver; float: left; margin-right: 10px; margin-bottom: 10px">
            <a href="http://www.youtube.com/watch?v=I6IQ_FOCE6I" target="_blank" style="text-decoration: none; border: none">
              <img src="Content/Posts/Web20Bubble/Web20Bubble.png" border="0" />
            </a>
          </span>If you're looking for a quick break, or some Monday humor, check out this short video on YouTube titled "<a href="http://www.youtube.com/watch?v=I6IQ_FOCE6I" target="_blank">Here Comes Another Bubble</a>"... a totally hilarious take on the web 2.0 craze, the blogging craze, the social networking craze and other fun takes at the world today.</p>
        <p style="font-size: 8pt">Update, 12/11: Looks like the video was taken down and is no longer available - it was funny while it lasted. Oh well...<br />
Update, 12/18: The video is back... links restored. I think the video should have been titled as Here Comes Another Bubble <b>2.0</b> (not 1.1) :-)</p>
        <p style="clear: both">
        </p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/humor" rel="tag">humor</a>  | <a href="http://www.nikhilk.net/tags/web2.0" rel="tag">web2.0</a> ]</div>
      </body>
      <category>(All)</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=183#Comments</comments>
      <description>YouTube video on Bubble 2.0 - a hilarious take on web 2.0 and related industry trends... makes for a good quick break.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=183</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=183</link>
      <pubDate>Tue, 11 Dec 2007 02:30:33 GMT</pubDate>
      <title>Hilarious Bubble 2.0 Video</title>
    </item>
    <item>
      <body xmlns="http://www.w3.org/1999/xhtml">
        <p>I had an email exchange with a couple of folks about fixing the form's action attribute as rendered by asp.net that gets in the way of URL rewriting, by rendering out an action attribute pointing to the rewritten URL rather than the prettier original URL as shown on the browser's address bar when the page is initially browsed. I've brought this up for fixing in the past. I know, it is unfortunate that it is still not fixed. I am going to try again, and maybe it'll happen in the next SP... fingers crossed.</p>
        <p>In the mean time I thought I'd post my solution here as well. I know various techniques have been blogged about before. I have seen various approaches that I don't quite like personally. For instance I've seen solutions based on control adapters and derived HtmlTextWriter implementations (these suffer from perf overhead of using control adapters, or from having to inspect every attribute rendered out). I have also seen some solutions involving response filtering, and that gets pretty expensive as well.</p>
        <p>The solution I use on my own site is a derived form control that renders out a bit of script to essentially rewrite the form's action attribute back to the original URL on the client. Here is my implementation, which also adds support for partial rendering scenarios enabled through the use of ScriptManager, if you're using ASP.NET Ajax:</p>
        <p>
          <pre>
            <span style="color: #0000ff;">public</span>
            <span style="color: #0000ff;">class</span> Form : HtmlForm {
    <span style="color: #0000ff;">private</span><span style="color: #0000ff;">const</span><span style="color: #0000ff;">string</span> FormActionScript =
<span style="color: #006080;">@"document.getElementById('{0}').action = window.location.href;
"</span>;

    <span style="color: #0000ff;">private</span><span style="color: #0000ff;">const</span><span style="color: #0000ff;">string</span> AjaxFormActionScript =
<span style="color: #006080;">@"Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function() {{
  document.getElementById('{0}').action = window.location.href;
}});
"</span>;

    <span style="color: #0000ff;">protected</span><span style="color: #0000ff;">override</span><span style="color: #0000ff;">void</span> OnPreRender(EventArgs e) {
        <span style="color: #0000ff;">base</span>.OnPreRender(e);

        StringBuilder sb = <span style="color: #0000ff;">new</span> StringBuilder();
        sb.AppendFormat(FormActionScript, ClientID);

        ScriptManager scriptManager = ScriptManager.GetCurrent(Page);
        <span style="color: #0000ff;">if</span> ((scriptManager != <span style="color: #0000ff;">null</span>) &amp;&amp; scriptManager.SupportsPartialRendering) {
            sb.AppendFormat(AjaxFormActionScript, ClientID);
        }

        Page.ClientScript.RegisterStartupScript(<span style="color: #0000ff;">typeof</span>(Form), String.Empty,
                                                sb.ToString(),
                                                <span style="color: #008000;">/* addScriptTags */</span><span style="color: #0000ff;">true</span>);
    }
}
</pre>
        </p>
        <p>The issue generally cited with this approach is that every page has to be touched, which is pretty painful, and every new page has to use a non-standard &lt;form&gt; tag. Additionally, I would have to implement a custom designer to associate with my derived form control to allow natural editing its contents on the design surface. However, there is a simple solution to both of these issues: I can use the tag mapping feature in ASP.NET to map all occurrences of the HtmlForm control with my derived Form control. Thereafter, as the parser encounters any existing &lt;form&gt; tag, it automatically uses my derived type instead without requiring the developer to make the change explicitly. This makes the approach less intrusive, and quite a bit more natural. All code that accessed the control still thinks its a Form tag.</p>
        <p>Specifically, I just need to add this entry in web.config:</p>
        <p>
          <pre>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">system.web</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">pages</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;</span>
            <span style="color: #800000;">tagMapping</span>
            <span style="color: #0000ff;">&gt;</span>
            <b>
              <span style="color: #0000ff;">&lt;</span>
              <span style="color: #800000;">add</span>
              <span style="color: #ff0000;">tagType</span>
              <span style="color: #0000ff;">="System.Web.UI.HtmlControls.HtmlForm"</span>
            </b>
            <b>
              <span style="color: #ff0000;">mappedTagType</span>
              <span style="color: #0000ff;">="Site.Form"</span>
              <span style="color: #0000ff;">/&gt;</span>
            </b>
            <span style="color: #0000ff;">&lt;/</span>
            <span style="color: #800000;">tagMapping</span>
            <span style="color: #0000ff;">&gt;</span>
            <span style="color: #0000ff;">&lt;/</span>
            <span style="color: #800000;">pages</span>
            <span style="color: #0000ff;">&gt;</span>
          </pre>
        </p>
        <p>The <a href="http://msdn2.microsoft.com/en-us/library/ms164641.aspx" target="_blank">tag mapping functionality</a> is a mechanism to instruct the parser to subtitute a different derived type implementation whenever it encounters the type being mapped. It was originally invented as part of the WebPart framework so as to allow the ASP.NET WebPartManager to be mapped to the derived Sharepoint WebPartManager implementation without having to change individual pages. However, it is quite powerful and generally applicable.</p>
        <p>Tag mapping is one of the esoteric features that comes in handy every once in a while. :-)</p>
        <div class="Tags">
          <br />[ Tags: <a href="http://www.nikhilk.net/tags/asp.net" rel="tag">asp.net</a> ]</div>
      </body>
      <category>ASP.NET</category>
      <comments>http://www.nikhilk.net/Entry.aspx?id=182#Comments</comments>
      <description>This post describes using tag mapping and a derived form control to fix URL rewriting in asp.net pages.</description>
      <guid isPermaLink="true">http://www.nikhilk.net/Entry.aspx?id=182</guid>
      <link>http://www.nikhilk.net/Entry.aspx?id=182</link>
      <pubDate>Sun, 09 Dec 2007 02:59:00 GMT</pubDate>
      <title>Using Tag Mapping to Fix the Form Control for URL Rewriting</title>
    </item>
  </channel>
</rss>