1. Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net

2. http://weblogs.asp.net/dwahlin

3. 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

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

6. Silverlight Client Web Service JSON request JSON response 2 2 3 3 Script Manager 1 1 ScriptService Attribute ScriptService Attribute Proxy Amazon Service 4 4

7. 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

8. 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

9. 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

10. Album Title TextBlock Albums Canvas Navigation Canvas Album Details Canvas

11. <Canvas Width="800" Height="600" Name="MainCanvas" xmlns="http://schemas.microsoft.com/client/2007">

12. Exploring the AlbumViewer Canvas

13. 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

14. 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

15. 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

16. <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) …

17. 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(); }

18. 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; }

19. 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

20. 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

21. Web Service client-side proxy created using the ScriptManager:

22. 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); }

23. 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

24. 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

25. 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" />

26. 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(); }

27. Image reflections can be created using RenderTransform and ScaleTransform objects:

28. Using Animations and Transformations

29. 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

30. Thanks for Attending! Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net http://weblogs.asp.net/dwahlin