Integrating Silverlight with ASP.NET AJAX for Dynamic Web Applications

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

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

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

4. The AlbumViewer Application

5. AlbumViewer Application Technologies • The AlbumViewer application relies on the following technologies:

6. AlbumViewer Architecture 2 JSON request SilverlightClient ScriptService Attribute Proxy Web Service ScriptManager JSON response 1 4 3 AmazonService

7. AlbumView Application Resources • 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. Agenda • 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. Creating the Canvas • 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. AlbumViewer Canvas Objects Album Title TextBlock Albums Canvas Navigation Canvas Album Details Canvas

11. AlbumViewer Canvas Objects XAML <Canvas Width="800" Height="600" Name="MainCanvas" xmlns="http://schemas.microsoft.com/client/2007"> <Canvas.Background> <ImageBrushImageSource="Images/NavyBg.jpg" Stretch="Fill" /> </Canvas.Background> <TextBlock Name="ArtistText" Canvas.Top="25" Canvas.Left="25" Foreground="White" FontFamily="Arial" FontSize="32" /> <Canvas Name="LoadingCanvas" Canvas.Top="175" Canvas.Left="150"> </Canvas> <Canvas Name="AlbumsCanvas"></Canvas> <Canvas Name="NavCanvas" Canvas.Top="375" Canvas.Left="300" Width="300" Opacity="0"> </Canvas> <Canvas Name="AlbumDetailsCanvas" Canvas.Top="445" Canvas.Left="15" Opacity="0"> </Canvas> </Canvas>

12. Exploring the AlbumViewer Canvas

13. Agenda • 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. XAML Can Be Dynamically Generated • 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. Album XAML Template • 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. Album XAML Template with Placeholders <Canvas Name='{0}' Canvas.Left='{1}' Canvas.Top='{2}'> <Rectangle Name='{0}_Rect' Stroke='Gray' StrokeThickness='2' RadiusX='10' RadiusY='10' Width='{3}' Height='{4}' Cursor='Hand' MouseEnter='onMouseEnter' MouseLeave='onMouseLeave' MouseLeftButtonDown='onLeftMouseButtonDown'> <Rectangle.Fill> <ImageBrushImageSource='{6}' Stretch='Fill' /> </Rectangle.Fill> </Rectangle> … Reflection Rectangle (omitted for brevity) … </Canvas>

17. Plugging Values into the XAML Template public static string[] GenerateXaml(Album[] albums) { List<string> canvases = new List<string>(); ....additional code.... for (inti = 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. Adding Dynamic XAML into Silverlight • Dynamic XAML can be added into a Silverlight control using the CreateFromXaml() method: for (vari=0;i<fragments.length;i++) { try { varnewAlbum = _SilverLightControl.Content.CreateFromXaml(fragments[i]); //Add album object into albums canvas _AlbumsCanvas.Children.Add(newAlbum); } catch (e) { _InError = true; } }

19. Agenda • 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. Calling Web Services • 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. Creating the Proxy Object • Web Service client-side proxy created using the ScriptManager: <asp:ScriptManager ID="sm" runat="server"> <Services> <asp:ServiceReference Path="~/WebServices/AlbumService.asmx" /> </Services> <Scripts> <asp:ScriptReference Path="Scripts/Silverlight.js" /> <asp:ScriptReference Path="Scripts/Main.js" /> </Scripts> </asp:ScriptManager>

22. Using the Client-side Proxy • Client-side proxy object makes asynchronous postback requests to service and updates XAML: function DoArtistSearch() { varartistText = $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. Agenda • 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 Animations and Transformations • 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 <Storyboard> element

25. Animating an Ellipse • Objects can be animated using the DoubleAnimation object: <Ellipse Height="200" Width="200" Canvas.Left="0" Canvas.Top="0"> <Ellipse.Triggers> <EventTrigger> <BeginStoryboard> <Storyboard Name="LoadingCanvasAnimation"> <DoubleAnimationStoryboard.TargetName="loaderImageTransform" Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:3" RepeatBehavior="0:0:10" /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse>

26. Starting and Stopping Animations • 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. Creating a Reflection with Transformations • Image reflections can be created using RenderTransform and ScaleTransform objects: <Image Name="ArrowRight_Reflect" Source="Images/ArrowRight.png" Canvas.Top="75" Canvas.Left="150"> <Image.OpacityMask> <LinearGradientBrushStartPoint='0,0' EndPoint='0,1'> <GradientStop Offset='.8' Color='Black'/> <GradientStop Offset='0' Color='Transparent'/> </LinearGradientBrush> </Image.OpacityMask> <Image.RenderTransform> <ScaleTransformScaleX='1' ScaleY='-.8' CenterX='0' CenterY='0' /> </Image.RenderTransform> </Image>

28. Using Animations and Transformations

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