Integrating Silverlight with ASP.NET AJAX and Web Services - PowerPoint PPT Presentation

Loading...

PPT – Integrating Silverlight with ASP.NET AJAX and Web Services PowerPoint presentation | free to download - id: 400641-YWUzO



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Integrating Silverlight with ASP.NET AJAX and Web Services

Description:

Title: Integrating Silverlight with ASP.NET AJAX and Web Services Author: Dan Wahlin Last modified by: Dan Wahlin Created Date: 9/13/2007 3:22:31 PM – PowerPoint PPT presentation

Number of Views:29
Avg rating:3.0/5.0
Slides: 31
Provided by: DanWa8
Learn more at: http://www.xmlforasp.net
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Integrating Silverlight with ASP.NET AJAX and Web Services


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
  • ltCanvas Width"800" Height"600"
    Name"MainCanvas"
  • xmlns"http//schemas.microsoft.com/client/2007"
    gt
  • ltCanvas.Backgroundgt
  • ltImageBrush ImageSource"Images/NavyBg.jpg"
    Stretch"Fill" /gt
  • lt/Canvas.Backgroundgt
  • ltTextBlock Name"ArtistText" Canvas.Top"25"
    Canvas.Left"25" Foreground"White"
    FontFamily"Arial" FontSize"32" /gt
  • ltCanvas Name"LoadingCanvas" Canvas.Top"175"
    Canvas.Left"150"gt
  • lt/Canvasgt
  • ltCanvas Name"AlbumsCanvas"gtlt/Canvasgt
  • ltCanvas Name"NavCanvas" Canvas.Top"375"
    Canvas.Left"300" Width"300" Opacity"0"gt
  • lt/Canvasgt
  • ltCanvas Name"AlbumDetailsCanvas"
    Canvas.Top"445" Canvas.Left"15"
    Opacity"0"gt
  • lt/Canvasgt
  • lt/Canvasgt

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
  • ltCanvas Name'0' Canvas.Left'1'
    Canvas.Top'2'gt
  • ltRectangle Name'0_Rect' Stroke'Gray'
    StrokeThickness'2' RadiusX'10' RadiusY'10'
    Width'3' Height'4' Cursor'Hand'
    MouseEnter'onMouseEnter' MouseLeave'onMouseLeave
    '
  • MouseLeftButtonDown'onLeftMouseButtonDown'gt
  • ltRectangle.Fillgt
  • ltImageBrush ImageSource'6'
    Stretch'Fill' /gt
  • lt/Rectangle.Fillgt
  • lt/Rectanglegt
  • Reflection Rectangle (omitted for brevity)
  • lt/Canvasgt

17
Plugging Values into the XAML Template
  • public static string GenerateXaml(Album
    albums)
  • Listltstringgt canvases new Listltstringgt()
  • ....additional code....
  • for (int i 0 i lt albumCount i)
  • Album a albumsi
  • 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.Rea
    dAllText(albumTemplate),
  • a.ID, x.ToString(CultureInfo.Invariant
    Culture),
  • y.ToString(CultureInfo.InvariantCultur
    e), imageWidth.ToString(CultureInfo.Invar
    iantCulture),
  • imageHeight.ToString(CultureInfo.Invar
    iantCulture),
  • 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 (var i0iltfragments.lengthi) try
var newAlbum _SilverLightControl.
Content.CreateFromXaml(fragmentsi)
//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

ltaspScriptManager ID"sm" runat"server"gt
ltServicesgt ltaspServiceReference
Path"/WebServices/AlbumService.asmx" /gt
lt/Servicesgt ltScriptsgt ltaspScriptReference
Path"Scripts/Silverlight.js" /gt
ltaspScriptReference Path"Scripts/Main.js" /gt
lt/Scriptsgt lt/aspScriptManagergt
22
Using the Client-side Proxy
  • Client-side proxy object makes asynchronous
    postback requests to service and updates XAML

function DoArtistSearch() var artistText
get("txtArtist").value StartStopLoader(true,
artistText) InterfaceTraining.AlbumService.Al
bumSearch(artistText,"1", onWSRequestComplete,on
WSRequestFail) function onWSRequestComplete(re
sults) StartStopLoader(false,"")
RemoveAlbums() if (results ! null
results ! 'undefined') _Albums
results.Albums UpdateXaml(results.XamlFra
gments)
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 ltStoryboardgt
    element

25
Animating an Ellipse
  • Objects can be animated using the DoubleAnimation
    object

ltEllipse Height"200" Width"200" Canvas.Left"0"
Canvas.Top"0"gt ltEllipse.Triggersgt
ltEventTriggergt ltBeginStoryboardgt
ltStoryboard Name"LoadingCanvasAnimation"gt
ltDoubleAnimation Storyboard.TargetNam
e"loaderImageTransform"
Storyboard.TargetProperty"Angle" From"0"
To"360" Duration"003"
RepeatBehavior"0010" /gt
lt/Storyboardgt lt/BeginStoryboardgt
lt/EventTriggergt lt/Ellipse.Triggersgt lt/Ellipsegt
26
Starting and Stopping Animations
  • Animations can be controlled using JavaScript

function StartStopLoader(start,artistText)
_AlbumDetailsCanvas.Opacity "0"
_LoadingCanvas.Opacity (starttrue)?"1""0"
_LoadingCanvas.children.GetItem(2).Text
artistText _ArtistText.Text "" if
(start) _SLControl.Content.FindName
("LoadingCanvasAnimation").Begin() else
_SLControl.Content.FindName("LoadingCan
vasAnimation").Stop()
27
Creating a Reflection with Transformations
  • Image reflections can be created using
    RenderTransform and ScaleTransform objects

ltImage Name"ArrowRight_Reflect"
Source"Images/ArrowRight.png" Canvas.Top"75"
Canvas.Left"150"gt ltImage.OpacityMaskgt
ltLinearGradientBrush StartPoint'0,0'
EndPoint'0,1'gt ltGradientStop Offset'.8'
Color'Black'/gt ltGradientStop Offset'0'
Color'Transparent'/gt lt/LinearGradientBrushgt
lt/Image.OpacityMaskgt ltImage.RenderTransformgt
ltScaleTransform ScaleX'1' ScaleY'-.8'
CenterX'0' CenterY'0' /gt lt/Image.RenderTransfo
rmgt lt/Imagegt
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
About PowerShow.com