PowerPoint Slides Download
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

PowerPoint Slides Download

on

  • 1,116 views

 

Statistics

Views

Total Views
1,116
Views on SlideShare
1,116
Embed Views
0

Actions

Likes
0
Downloads
17
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

PowerPoint Slides Download 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.
    • 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
  • 4.  
  • 5.
    • The AlbumViewer application relies on the following technologies:
  • 6. JSON request JSON response Silverlight Client Web Service 2 3 Script Manager 1 ScriptService Attribute Proxy Amazon Service 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=&quot;800&quot; Height=&quot;600&quot; Name=&quot;MainCanvas&quot;
    • xmlns=&quot;http://schemas.microsoft.com/client/2007&quot;>
    • <Canvas.Background>
    • <ImageBrush ImageSource=&quot;Images/NavyBg.jpg&quot; Stretch=&quot;Fill&quot; />
    • </Canvas.Background>
    • <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; />
    • <Canvas Name=&quot;LoadingCanvas&quot; Canvas.Top=&quot;175&quot; Canvas.Left=&quot;150&quot;>
    • </Canvas>
    • <Canvas Name=&quot;AlbumsCanvas&quot;></Canvas>
    • <Canvas Name=&quot;NavCanvas&quot; Canvas.Top=&quot;375&quot; Canvas.Left=&quot;300&quot; Width=&quot;300&quot; Opacity=&quot;0&quot;>
    • </Canvas>
    • <Canvas Name=&quot;AlbumDetailsCanvas&quot; Canvas.Top=&quot;445&quot; Canvas.Left=&quot;15&quot; Opacity=&quot;0&quot;>
    • </Canvas>
    • </Canvas>
  • 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.
    • <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>
    • <ImageBrush ImageSource=' {6} ' Stretch='Fill' />
    • </Rectangle.Fill>
    • </Rectangle>
    • … Reflection Rectangle (omitted for brevity) …
    • </Canvas>
  • 17.
    • public static string[] GenerateXaml(Album[] albums) {
    • List<string> canvases = new List<string>();
    • ....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:
    <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>
  • 22.
    • Client-side proxy object makes asynchronous postback requests to service and updates XAML:
    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); } }
  • 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 <Storyboard> element
  • 25.
    • Objects can be animated using the DoubleAnimation object:
    <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>
  • 26.
    • Animations can be controlled using JavaScript:
    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(); } }
  • 27.
    • Image reflections can be created using RenderTransform and ScaleTransform objects:
    <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>
  • 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