Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training .

Integrating Silverlight with ASP.NET AJAX and Web Services

Dan Wahlin

Interface Technical Traininghttp://www.interfacett.comhttp://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:

SilverlightClient

Web Service

JSON requestJSON request

JSON responseJSON response

2

3

ScriptManager

1

ScriptService

AttributeProxy

AmazonService

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


• 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="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>

Exploring the AlbumViewer Canvas


• 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 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="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>

• 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);

}

}

• 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="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>

• 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();

}

}

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

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 WahlinInterface Technical Traininghttp://www.interfacett.comhttp://www.xmlforasp.net

http://weblogs.asp.net/dwahlin

Integrating Silverlight with ASP.NET AJAX and Web Services Dan Wahlin Interface Technical Training .

Documents