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

PowerPoint Slides Download

on

  • 1,081 views

 

Statistics

Views

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

Actions

Likes
0
Downloads
16
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 PowerPoint Slides Download Presentation Transcript

  • Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net
    • http://weblogs.asp.net/dwahlin
    • 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
  •  
    • The AlbumViewer application relies on the following technologies:
  • JSON request JSON response Silverlight Client Web Service 2 3 Script Manager 1 ScriptService Attribute Proxy Amazon Service 4
    • 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
    • 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
    • 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
  • Album Title TextBlock Albums Canvas Navigation Canvas Album Details Canvas
    • <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>
  • Exploring the AlbumViewer Canvas
    • 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
    • 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
    • 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
    • <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>
    • 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();
    • }
    • 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; } }
    • 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
    • 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
    • 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>
    • 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); } }
    • 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
    • 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
    • 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>
    • 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(); } }
    • 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>
  • Using Animations and Transformations
    • 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
  • Thanks for Attending! Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net http://weblogs.asp.net/dwahlin