Integrating silverlight with asp net ajax and web services
Download
1 / 30

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


  • 66 Views
  • Uploaded on
  • Presentation posted in: General

Integrating Silverlight with ASP.NET AJAX and Web Services. Dan Wahlin Interface Technical Training http://www.interfacett.com http://www.xmlforasp.net. My Blog. http://weblogs.asp.net/dwahlin. Agenda. AlbumViewer Application Overview Creating a Silverlight Canvas and Objects

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha

Download Presentation

Integrating Silverlight with ASP.NET AJAX and Web Services

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Integrating silverlight with asp net ajax and web services
Integrating Silverlight with ASP.NET AJAX and Web Services

Dan Wahlin

Interface Technical Training

http://www.interfacett.com

http://www.xmlforasp.net


My blog
My Blog

http://weblogs.asp.net/dwahlin


Agenda
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



Albumviewer application technologies
AlbumViewer Application Technologies

  • The AlbumViewer application relies on the following technologies:


Albumviewer architecture
AlbumViewer Architecture

2

JSON request

SilverlightClient

ScriptService

Attribute

Proxy

Web Service

ScriptManager

JSON response

1

4

3

AmazonService


Albumview application resources
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


Agenda1
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


Creating the canvas
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


Albumviewer canvas objects
AlbumViewer Canvas Objects

Album Title TextBlock

Albums Canvas

Navigation Canvas

Album Details Canvas


Albumviewer canvas objects xaml
AlbumViewer Canvas Objects XAML

<Canvas Width="800" Height="600" Name="MainCanvas"

xmlns="http://schemas.microsoft.com/client/2007">

<Canvas.Background>

<ImageBrushImageSource="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
Exploring the AlbumViewer Canvas


Agenda2
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


Xaml can be dynamically generated
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


Album xaml template
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


Album xaml template with placeholders
Album XAML Template with Placeholders

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

<ImageBrushImageSource='{6}' Stretch='Fill' />

</Rectangle.Fill>

</Rectangle>

… Reflection Rectangle (omitted for brevity) …

</Canvas>


Plugging values into the xaml template
Plugging Values into the XAML Template

public static string[] GenerateXaml(Album[] albums) {

List<string> canvases = new List<string>();

....additional code....

for (inti = 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();

}


Adding dynamic xaml into silverlight
Adding Dynamic XAML into Silverlight

  • Dynamic XAML can be added into a Silverlight control using the CreateFromXaml() method:

for (vari=0;i<fragments.length;i++) {

try {

varnewAlbum = _SilverLightControl.Content.CreateFromXaml(fragments[i]);

//Add album object into albums canvas

_AlbumsCanvas.Children.Add(newAlbum);

}

catch (e) {

_InError = true;

}

}


Agenda3
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


Calling web services
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


Creating the proxy object
Creating the Proxy Object

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


Using the client side proxy
Using the Client-side Proxy

  • Client-side proxy object makes asynchronous postback requests to service and updates XAML:

function DoArtistSearch() {

varartistText = $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);

}

}


Agenda4
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


Silverlight animations and transformations
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 <Storyboard> element


Animating an ellipse
Animating an Ellipse

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

<DoubleAnimationStoryboard.TargetName="loaderImageTransform"

Storyboard.TargetProperty="Angle" From="0" To="360" Duration="0:0:3" RepeatBehavior="0:0:10" />

</Storyboard>

</BeginStoryboard>

</EventTrigger>

</Ellipse.Triggers>

</Ellipse>


Starting and stopping animations
Starting and Stopping Animations

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

}

}


Creating a reflection with transformations
Creating a Reflection with Transformations

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

<LinearGradientBrushStartPoint='0,0' EndPoint='0,1'>

<GradientStop Offset='.8' Color='Black'/>

<GradientStop Offset='0' Color='Transparent'/>

</LinearGradientBrush>

</Image.OpacityMask>

<Image.RenderTransform>

<ScaleTransformScaleX='1' ScaleY='-.8' CenterX='0' CenterY='0' />

</Image.RenderTransform>

</Image>



Summary
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


Thanks for attending
Thanks for Attending!

Dan Wahlin

Interface Technical Training

http://www.interfacett.com

http://www.xmlforasp.net

http://weblogs.asp.net/dwahlin


ad
  • Login