Integrating Silverlight with ASP.NET AJAX.ppt

Integrating Silverlight with ASP.NET

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

5. •The AlbumViewer application relies on the
following technologies:

6. Silverlight
Client
Web Service
JSON requestJSON request
JSON responseJSON response
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="800" Height="600" Name="MainCanvas"
xmlns="http://schemas.microsoft.com/client/2007">
<Canvas.Background>
<ImageBrush ImageSource="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. •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="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. •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.AlbumSearch(artistText,"1",
onWSRequestComplete,onWSRequestFail);
}
function onWSRequestComplete(results) {
StartStopLoader(false,"");
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="200" Width="200" Canvas.Left="0" Canvas.Top="0">
<Ellipse.Triggers>
<EventTrigger>
<BeginStoryboard>
<Storyboard Name="LoadingCanvasAnimation">
<DoubleAnimation
Storyboard.TargetName="loaderImageTransform"
Storyboard.TargetProperty="Angle" From="0" To="360"
Duration="0:0:3" RepeatBehavior="0:0:10" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>

26. •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. •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>
<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