1 / 30

Integrating Silverlight with ASP.NET AJAX and Web Services

Integrating Silverlight with ASP.NET AJAX and Web Services. Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net. My Blog. http://weblogs.asp.net/dwahlin. Agenda. AlbumViewer Application Overview Creating a Silverlight Canvas and Objects

templeton-luka
Download Presentation

Integrating Silverlight with ASP.NET AJAX and Web Services

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related