Integrating silverlight with asp net ajax and web services
This presentation is the property of its rightful owner.
Sponsored Links
1 / 30

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


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

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


The albumviewer application

The AlbumViewer Application


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>


Using animations and transformations

Using Animations and Transformations


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


  • Login