Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training

AlbumViewer Application Overview Creating a Silverlight Canvas and Objects Generating Dynamic XAML Calling Web Services with ASP.NET AJAX Working with Animations and Transformations Summary

The AlbumViewer application relies on the following technologies: Silverlight 1.0 JavaScript ASP.NET AJAX Web Services

Silverlight Client Web Service JSON request JSON response Script Manager 1 1 ScriptService Attribute ScriptService Attribute Proxy Amazon Service 4 4

Resources used in AlbumViewer application: – Silverlight: EmptyTemplate.xaml – Contains main canvas and child objects AlbumTemplate.xaml – Album canvas used for each album – JavaScript: Silverlight.js – Microsoft script that loads Silverlight control Main.js – Contains client-side functionality – ASP.NET AJAX AlbumViewer.aspx – Hosts Silverlight control, scripts, CSS and AJAX functionality – Web Services AlbumService.asmx – Wrapper service used to call Amazon service Amazon.com Web Service – Commerce Service that returns albums

AlbumViewer Application Overview Creating a Silverlight Canvas and Objects Generating Dynamic XAML Calling Web Services with ASP.NET AJAX Working with Animations and Transformations Summary

The AlbumViewer application relies on a parent canvas that defines several objects: – Album title TextBlock – "Loading" message canvas – Albums canvas – Navigation controls canvas – Album details canvas

Album Title TextBlock Albums Canvas Navigation Canvas Album Details Canvas

<Canvas Width="800" Height="600" Name="MainCanvas" xmlns="

Exploring the AlbumViewer Canvas

AlbumViewer Application Overview Creating a Silverlight Canvas and Objects Generating Dynamic XAML Calling Web Services with ASP.NET AJAX Working with Animations and Transformations Summary

AlbumViewer dynamically generates XAML for each album returned from Amazon service: – XAML generated on server-side and sent to client – Minimizes JavaScript file size and complexity XAML template with placeholders is used as the starting template for each album – Provides simple maintenance – Minimizes C#/VB.NET code XAML returned to client using JSON messaging

XAML album template defines canvases with images Template contains placeholders that are dynamically updated as Amazon.com service returns data Completed album XAML is sent back to client Silverlight object for processing

<Rectangle Name='{0}_Rect' Stroke='Gray' StrokeThickness='2' RadiusX='10' RadiusY='10' Width='{3}' Height='{4}' Cursor='Hand' MouseEnter='onMouseEnter' MouseLeave='onMouseLeave' MouseLeftButtonDown='onLeftMouseButtonDown'> … Reflection Rectangle (omitted for brevity) …

public static string[] GenerateXaml(Album[] albums) { List canvases = new List ();....additional code.... for (int i = 0; i < albumCount; i++) { Album a = albums[i]; double angle = i * ((Math.PI * 2) / albumCount); double x = (Math.Cos(angle) * radiusX) + centerX; double y = (Math.Sin(angle) * radiusY) + centerY; double scale = Math.Round((y - perspective) / (centerY + radiusY - perspective),2); //Plugin placeholder values in XAML album template string canvasXaml = String.Format(File.ReadAllText(albumTemplate), a.ID, x.ToString(CultureInfo.InvariantCulture), y.ToString(CultureInfo.InvariantCulture), imageWidth.ToString(CultureInfo.InvariantCulture), imageHeight.ToString(CultureInfo.InvariantCulture), reflectX, a.ImageUrlMedium, scale.ToString(CultureInfo.InvariantCulture)); canvases.Add(canvasXaml); } return canvases.ToArray(); }

Dynamic XAML can be added into a Silverlight control using the CreateFromXaml() method: for (var i=0;i<fragments.length;i++) { try { var newAlbum = _SilverLightControl.Content.CreateFromXaml(fragments[i]); //Add album object into albums canvas _AlbumsCanvas.Children.Add(newAlbum); } catch (e) { _InError = true; }

AlbumViewer Application Overview Creating a Silverlight Canvas and Objects Generating Dynamic XAML Calling Web Services with ASP.NET AJAX Working with Animations and Transformations Summary

AlbumViewer Silverlight control relies on ASP.NET AJAX to access album data ASP.NET AJAX ScriptManager generates service proxy Local Web Service wraps call to Amazon.com Web Service JSON messaging used for request/response messages

Web Service client-side proxy created using the ScriptManager:

Client-side proxy object makes asynchronous postback requests to service and updates XAML: function DoArtistSearch() { var artistText = $get("txtArtist").value; StartStopLoader(true,artistText); InterfaceTraining.AlbumService.AlbumSearch(artistText,"1", onWSRequestComplete,onWSRequestFail); } function onWSRequestComplete(results) { StartStopLoader(false,""); RemoveAlbums(); if (results != null && results != 'undefined') { _Albums = results.Albums; UpdateXaml(results.XamlFragments); }

AlbumViewer Application Overview Creating a Silverlight Canvas and Objects Generating Dynamic XAML Calling Web Services with ASP.NET AJAX Working with Animations and Transformations Summary

Silverlight allows canvas objects to be animated and transformed: – Skew or rotate an object – Move objects to different locations – Fade objects in and out – Change an object's color Animations are placed inside of a element

Objects can be animated using the DoubleAnimation object: <DoubleAnimation Storyboard.TargetName="loaderImageTransform" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:3" RepeatBehavior="0:0:10" />

Animations can be controlled using JavaScript: function StartStopLoader(start,artistText) { _AlbumDetailsCanvas.Opacity = "0"; _LoadingCanvas.Opacity = (start==true)?"1":"0"; _LoadingCanvas.children.GetItem(2).Text = artistText; _ArtistText.Text = ""; if (start) { _SLControl.Content.FindName("LoadingCanvasAnimation").Begin(); } else { _SLControl.Content.FindName("LoadingCanvasAnimation").Stop(); }

Image reflections can be created using RenderTransform and ScaleTransform objects:

Using Animations and Transformations

Silverlight provides a powerful way to display data and media in a rich medium JavaScript can be used to interact with Silverlight 1.0 canvas objects ASP.NET AJAX features can be integrated into Silverlight 1.0 applications Animations and transformations can be applied to canvas objects

Thanks for Attending! Dan Wahlin Interface Technical Training