November 20, 2007
Mixing in SilverlightAnthony Lombardo
Enriching the user experience by blending Silverlight into existing AJAX applications
Anthony Lombardo is the lead Technical Evangelist at Infragistics and recipient of the ASP.NET MVP Award from Microsoft. Tony co-runs the Central Jersey .NET Users Group.
Do you remember what a Web application was like in the pre-AJAX era? Even though only a year has passed since the mainstream adoption of AJAX, it's hard to remember or even admit how web applications used to behave. With AJAX becoming more of a standard than a buzz word, Silverlight has taken the place of a redefining web technology.
To many deeply technical developers, AJAX was nothing more than an XMLHTTPRequest. However, to end users, AJAX was fluid interaction with new abilities like auto-complete and animations, creating an experience never before seen through a web browser. Breaking through User Experience (UX) barriers of the past, AJAX turned Web developers into superstars. However, just like DHTML and technologies of the past, the limits of AJAX were quickly reached. To continue to improve user experiences of web application, we must again break through the current barriers, and that's just what Silverlight is poised to do.
At its core Silverlight is nothing more than a browser plug-in. But look beyond the technical details and you will start to understand just how powerful this technology can be. Like its predecessors, Silverlight builds on AJAX rather than replacing it. This key concept is important, because it lets development teams continue to leverage their existing code base rather than having to undergo a complete rewrite. This is particularly useful when you want to decorate an existing HTML element, with a little extra magic. By layering a Silverlight canvas over top of your element you can augment the appearance of the application without having to re-plumb it. There are a couple of important aspects to Silverlight that make this scenario possible including a flexible programming model, and the Windowless property.
Flexible Programming Model
Silverlight integration into a web application begins with the Silverlight host. The host is simply a manifestation of the Silverlight plug-in. The host is responsible for painting the XAML content onto the screen. One of the key benefits of Silverlight, is the ability to code against the XAML markup in many languages including Javascript, JScript, C#, VB, and even Iron Python. The vast language support makes working in your comfort zone a reality. And since you can specify the external code file which will be providing your behaviors and event handlers, you can keep your Silverlight code completely separate from the rest of your project. This is important because it lets you easily add Silverlight functionality to an existing application, without interfering with the existing logic, or opening yourself up to accidental code changes which turn into difficult to find regression bugs.
Adding Silverlight
The Silverlight Host can be added to your page a few different ways. When working with ASP.NET AJAX, your best bet will be to use the new "Xaml" control included in the ASP.NET Futures build. The Xaml control represents the Silverlight host, and has a XamUrl property which is used to specify the path of your Xaml file, as in Example 1. Your markup is then loaded by the host, when the page is displayed in the browser.
<asp:Xaml XamlUrl="default.xaml" runat="server"
CssClass="txtBoxWrapper" Width="120px" Height="20px"
BackColor="transparent" SilverlightBackColor="transparent"
Windowless="true" ClientType="Wrappers.TextBox">
<Scripts>
<asp:ScriptReference Path="default.xaml.js" />
</Scripts>
</asp:Xaml>
Example 1
Attaching a code file for event handling and other behaviors can be done through the scripts collection on the Xaml control. This fits in perfectly with the common programming style of AJAX applications, and lets you create client-side JavaScript controls which represent their server-side counterparts. 
|
 |
|
|||||||||||||||||||||||||||||
|
|
|
