Your SlideShare is downloading. ×
0
Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training http://www.interfacett....
<ul><li>http://weblogs.asp.net/dwahlin </li></ul>
<ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Gen...
 
<ul><li>The AlbumViewer application relies on the following technologies: </li></ul>
JSON request JSON response Silverlight Client Web Service 2 3 Script Manager 1 ScriptService Attribute Proxy Amazon Servic...
<ul><li>Resources used in AlbumViewer application: </li></ul><ul><ul><li>Silverlight: </li></ul></ul><ul><ul><ul><li>Empty...
<ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Gen...
<ul><li>The AlbumViewer application relies on a parent canvas that defines several objects: </li></ul><ul><ul><li>Album ti...
Album Title TextBlock Albums Canvas Navigation Canvas Album Details Canvas
<ul><li><Canvas Width=&quot;800&quot; Height=&quot;600&quot; Name=&quot;MainCanvas&quot; </li></ul><ul><li>xmlns=&quot;htt...
Exploring the  AlbumViewer Canvas
<ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Gen...
<ul><li>AlbumViewer dynamically generates XAML for each album returned from Amazon service: </li></ul><ul><ul><li>XAML gen...
<ul><li>XAML album template defines canvases with images </li></ul><ul><li>Template contains placeholders that are dynamic...
<ul><li><Canvas Name=' {0} ' Canvas.Left=' {1} ' Canvas.Top=' {2} '> </li></ul><ul><li><Rectangle Name=' {0} _Rect' Stroke...
<ul><li>public static string[] GenerateXaml(Album[] albums) { </li></ul><ul><li>List<string> canvases = new List<string>()...
<ul><li>Dynamic XAML can be added into a Silverlight control using the CreateFromXaml() method: </li></ul>for (var i=0;i<f...
<ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Gen...
<ul><li>AlbumViewer Silverlight control relies on ASP.NET AJAX to access album data </li></ul><ul><li>ASP.NET AJAX ScriptM...
<ul><li>Web Service client-side proxy created using the ScriptManager: </li></ul><asp:ScriptManager ID=&quot;sm&quot; runa...
<ul><li>Client-side proxy object makes asynchronous postback requests to service and updates XAML: </li></ul>function DoAr...
<ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Gen...
<ul><li>Silverlight allows canvas objects to be animated and transformed: </li></ul><ul><ul><li>Skew or rotate an object <...
<ul><li>Objects can be animated using the DoubleAnimation object: </li></ul><Ellipse Height=&quot;200&quot; Width=&quot;20...
<ul><li>Animations can be controlled using JavaScript: </li></ul>function StartStopLoader(start,artistText) { _AlbumDetail...
<ul><li>Image reflections can be created using RenderTransform and ScaleTransform objects: </li></ul><Image Name=&quot;Arr...
Using Animations and Transformations
<ul><li>Silverlight provides a powerful way to display data and media in a rich medium </li></ul><ul><li>JavaScript can be...
Thanks for Attending! Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net http://w...
Upcoming SlideShare
Loading in...5
×

PowerPoint Slides Download

764

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
764
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "PowerPoint Slides Download"

  1. 1. Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net
  2. 2. <ul><li>http://weblogs.asp.net/dwahlin </li></ul>
  3. 3. <ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Generating Dynamic XAML </li></ul><ul><li>Calling Web Services with ASP.NET AJAX </li></ul><ul><li>Working with Animations and Transformations </li></ul><ul><li>Summary </li></ul>
  4. 5. <ul><li>The AlbumViewer application relies on the following technologies: </li></ul>
  5. 6. JSON request JSON response Silverlight Client Web Service 2 3 Script Manager 1 ScriptService Attribute Proxy Amazon Service 4
  6. 7. <ul><li>Resources used in AlbumViewer application: </li></ul><ul><ul><li>Silverlight: </li></ul></ul><ul><ul><ul><li>EmptyTemplate.xaml – Contains main canvas and child objects </li></ul></ul></ul><ul><ul><ul><li>AlbumTemplate.xaml – Album canvas used for each album </li></ul></ul></ul><ul><ul><li>JavaScript: </li></ul></ul><ul><ul><ul><li>Silverlight.js – Microsoft script that loads Silverlight control </li></ul></ul></ul><ul><ul><ul><li>Main.js – Contains client-side functionality </li></ul></ul></ul><ul><ul><li>ASP.NET AJAX </li></ul></ul><ul><ul><ul><li>AlbumViewer.aspx – Hosts Silverlight control, scripts, CSS and AJAX functionality </li></ul></ul></ul><ul><ul><li>Web Services </li></ul></ul><ul><ul><ul><li>AlbumService.asmx – Wrapper service used to call Amazon service </li></ul></ul></ul><ul><ul><ul><li>Amazon.com Web Service – Commerce Service that returns albums </li></ul></ul></ul>
  7. 8. <ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Generating Dynamic XAML </li></ul><ul><li>Calling Web Services with ASP.NET AJAX </li></ul><ul><li>Working with Animations and Transformations </li></ul><ul><li>Summary </li></ul>
  8. 9. <ul><li>The AlbumViewer application relies on a parent canvas that defines several objects: </li></ul><ul><ul><li>Album title TextBlock </li></ul></ul><ul><ul><li>&quot;Loading&quot; message canvas </li></ul></ul><ul><ul><li>Albums canvas </li></ul></ul><ul><ul><li>Navigation controls canvas </li></ul></ul><ul><ul><li>Album details canvas </li></ul></ul>
  9. 10. Album Title TextBlock Albums Canvas Navigation Canvas Album Details Canvas
  10. 11. <ul><li><Canvas Width=&quot;800&quot; Height=&quot;600&quot; Name=&quot;MainCanvas&quot; </li></ul><ul><li>xmlns=&quot;http://schemas.microsoft.com/client/2007&quot;> </li></ul><ul><li><Canvas.Background> </li></ul><ul><li><ImageBrush ImageSource=&quot;Images/NavyBg.jpg&quot; Stretch=&quot;Fill&quot; /> </li></ul><ul><li></Canvas.Background> </li></ul><ul><li><TextBlock Name=&quot;ArtistText&quot; Canvas.Top=&quot;25&quot; Canvas.Left=&quot;25&quot; Foreground=&quot;White&quot; FontFamily=&quot;Arial&quot; FontSize=&quot;32&quot; /> </li></ul><ul><li><Canvas Name=&quot;LoadingCanvas&quot; Canvas.Top=&quot;175&quot; Canvas.Left=&quot;150&quot;> </li></ul><ul><li></Canvas> </li></ul><ul><li><Canvas Name=&quot;AlbumsCanvas&quot;></Canvas> </li></ul><ul><li><Canvas Name=&quot;NavCanvas&quot; Canvas.Top=&quot;375&quot; Canvas.Left=&quot;300&quot; Width=&quot;300&quot; Opacity=&quot;0&quot;> </li></ul><ul><li></Canvas> </li></ul><ul><li><Canvas Name=&quot;AlbumDetailsCanvas&quot; Canvas.Top=&quot;445&quot; Canvas.Left=&quot;15&quot; Opacity=&quot;0&quot;> </li></ul><ul><li></Canvas> </li></ul><ul><li></Canvas> </li></ul>
  11. 12. Exploring the AlbumViewer Canvas
  12. 13. <ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Generating Dynamic XAML </li></ul><ul><li>Calling Web Services with ASP.NET AJAX </li></ul><ul><li>Working with Animations and Transformations </li></ul><ul><li>Summary </li></ul>
  13. 14. <ul><li>AlbumViewer dynamically generates XAML for each album returned from Amazon service: </li></ul><ul><ul><li>XAML generated on server-side and sent to client </li></ul></ul><ul><ul><li>Minimizes JavaScript file size and complexity </li></ul></ul><ul><li>XAML template with placeholders is used as the starting template for each album </li></ul><ul><ul><li>Provides simple maintenance </li></ul></ul><ul><ul><li>Minimizes C#/VB.NET code </li></ul></ul><ul><li>XAML returned to client using JSON messaging </li></ul>
  14. 15. <ul><li>XAML album template defines canvases with images </li></ul><ul><li>Template contains placeholders that are dynamically updated as Amazon.com service returns data </li></ul><ul><li>Completed album XAML is sent back to client Silverlight object for processing </li></ul>
  15. 16. <ul><li><Canvas Name=' {0} ' Canvas.Left=' {1} ' Canvas.Top=' {2} '> </li></ul><ul><li><Rectangle Name=' {0} _Rect' Stroke='Gray' StrokeThickness='2' RadiusX='10' RadiusY='10' Width=' {3} ' Height=' {4} ' Cursor='Hand' MouseEnter='onMouseEnter' MouseLeave='onMouseLeave' </li></ul><ul><li>MouseLeftButtonDown='onLeftMouseButtonDown'> </li></ul><ul><li><Rectangle.Fill> </li></ul><ul><li> <ImageBrush ImageSource=' {6} ' Stretch='Fill' /> </li></ul><ul><li></Rectangle.Fill> </li></ul><ul><li></Rectangle> </li></ul><ul><li>… Reflection Rectangle (omitted for brevity) … </li></ul><ul><li></Canvas> </li></ul>
  16. 17. <ul><li>public static string[] GenerateXaml(Album[] albums) { </li></ul><ul><li>List<string> canvases = new List<string>(); </li></ul><ul><li>....additional code.... </li></ul><ul><li>for (int i = 0; i < albumCount; i++) { </li></ul><ul><li>Album a = albums[i]; </li></ul><ul><li>double angle = i * ((Math.PI * 2) / albumCount); </li></ul><ul><li>double x = (Math.Cos(angle) * radiusX) + centerX; </li></ul><ul><li>double y = (Math.Sin(angle) * radiusY) + centerY; </li></ul><ul><li>double scale = Math.Round((y - perspective) / (centerY + radiusY - perspective),2); </li></ul><ul><li>//Plugin placeholder values in XAML album template </li></ul><ul><li>string canvasXaml = String.Format( File.ReadAllText(albumTemplate) , </li></ul><ul><li>a.ID, x.ToString(CultureInfo.InvariantCulture), </li></ul><ul><li>y.ToString(CultureInfo.InvariantCulture), imageWidth.ToString(CultureInfo.InvariantCulture), </li></ul><ul><li>imageHeight.ToString(CultureInfo.InvariantCulture), </li></ul><ul><li>reflectX, a.ImageUrlMedium, scale.ToString(CultureInfo.InvariantCulture)); </li></ul><ul><li>canvases.Add(canvasXaml); </li></ul><ul><li>} </li></ul><ul><li>return canvases.ToArray(); </li></ul><ul><li>} </li></ul>
  17. 18. <ul><li>Dynamic XAML can be added into a Silverlight control using the CreateFromXaml() method: </li></ul>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; } }
  18. 19. <ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Generating Dynamic XAML </li></ul><ul><li>Calling Web Services with ASP.NET AJAX </li></ul><ul><li>Working with Animations and Transformations </li></ul><ul><li>Summary </li></ul>
  19. 20. <ul><li>AlbumViewer Silverlight control relies on ASP.NET AJAX to access album data </li></ul><ul><li>ASP.NET AJAX ScriptManager generates service proxy </li></ul><ul><li>Local Web Service wraps call to Amazon.com Web Service </li></ul><ul><li>JSON messaging used for request/response messages </li></ul>
  20. 21. <ul><li>Web Service client-side proxy created using the ScriptManager: </li></ul><asp:ScriptManager ID=&quot;sm&quot; runat=&quot;server&quot;> <Services> <asp:ServiceReference Path=&quot;~/WebServices/AlbumService.asmx&quot; /> </Services> <Scripts> <asp:ScriptReference Path=&quot;Scripts/Silverlight.js&quot; /> <asp:ScriptReference Path=&quot;Scripts/Main.js&quot; /> </Scripts> </asp:ScriptManager>
  21. 22. <ul><li>Client-side proxy object makes asynchronous postback requests to service and updates XAML: </li></ul>function DoArtistSearch() { var artistText = $get(&quot;txtArtist&quot;).value; StartStopLoader(true,artistText); InterfaceTraining.AlbumService.AlbumSearch(artistText,&quot;1&quot;, onWSRequestComplete,onWSRequestFail); } function onWSRequestComplete(results) { StartStopLoader(false,&quot;&quot;); RemoveAlbums(); if (results != null && results != 'undefined') { _Albums = results.Albums; UpdateXaml(results.XamlFragments); } }
  22. 23. <ul><li>AlbumViewer Application Overview </li></ul><ul><li>Creating a Silverlight Canvas and Objects </li></ul><ul><li>Generating Dynamic XAML </li></ul><ul><li>Calling Web Services with ASP.NET AJAX </li></ul><ul><li>Working with Animations and Transformations </li></ul><ul><li>Summary </li></ul>
  23. 24. <ul><li>Silverlight allows canvas objects to be animated and transformed: </li></ul><ul><ul><li>Skew or rotate an object </li></ul></ul><ul><ul><li>Move objects to different locations </li></ul></ul><ul><ul><li>Fade objects in and out </li></ul></ul><ul><ul><li>Change an object's color </li></ul></ul><ul><li>Animations are placed inside of a <Storyboard> element </li></ul>
  24. 25. <ul><li>Objects can be animated using the DoubleAnimation object: </li></ul><Ellipse Height=&quot;200&quot; Width=&quot;200&quot; Canvas.Left=&quot;0&quot; Canvas.Top=&quot;0&quot;> <Ellipse.Triggers> <EventTrigger> <BeginStoryboard> <Storyboard Name=&quot;LoadingCanvasAnimation&quot;> <DoubleAnimation Storyboard.TargetName=&quot;loaderImageTransform&quot; Storyboard.TargetProperty=&quot;Angle&quot; From=&quot;0&quot; To=&quot;360&quot; Duration=&quot;0:0:3&quot; RepeatBehavior=&quot;0:0:10&quot; /> </Storyboard> </BeginStoryboard> </EventTrigger> </Ellipse.Triggers> </Ellipse>
  25. 26. <ul><li>Animations can be controlled using JavaScript: </li></ul>function StartStopLoader(start,artistText) { _AlbumDetailsCanvas.Opacity = &quot;0&quot;; _LoadingCanvas.Opacity = (start==true)?&quot;1&quot;:&quot;0&quot;; _LoadingCanvas.children.GetItem(2).Text = artistText; _ArtistText.Text = &quot;&quot;; if (start) { _SLControl.Content.FindName(&quot;LoadingCanvasAnimation&quot;).Begin(); } else { _SLControl.Content.FindName(&quot;LoadingCanvasAnimation&quot;).Stop(); } }
  26. 27. <ul><li>Image reflections can be created using RenderTransform and ScaleTransform objects: </li></ul><Image Name=&quot;ArrowRight_Reflect&quot; Source=&quot;Images/ArrowRight.png&quot; Canvas.Top=&quot;75&quot; Canvas.Left=&quot;150&quot;> <Image.OpacityMask> <LinearGradientBrush StartPoint='0,0' EndPoint='0,1'> <GradientStop Offset='.8' Color='Black'/> <GradientStop Offset='0' Color='Transparent'/> </LinearGradientBrush> </Image.OpacityMask> <Image.RenderTransform> <ScaleTransform ScaleX='1' ScaleY='-.8' CenterX='0' CenterY='0' /> </Image.RenderTransform> </Image>
  27. 28. Using Animations and Transformations
  28. 29. <ul><li>Silverlight provides a powerful way to display data and media in a rich medium </li></ul><ul><li>JavaScript can be used to interact with Silverlight 1.0 canvas objects </li></ul><ul><li>ASP.NET AJAX features can be integrated into Silverlight 1.0 applications </li></ul><ul><li>Animations and transformations can be applied to canvas objects </li></ul>
  29. 30. Thanks for Attending! Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net http://weblogs.asp.net/dwahlin
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×