Browse DevX
Sign up for e-mail newsletters from DevX


Untapped Silverlight Powers: The Interactive Application : Page 4

Silverlight's good for working with animation, graphics, and videos, but did you know it allows you to do things you can't do elsewhere—even with ASP.NET and AJAX? Learn how to harness that power by building an interactive signature capturing application.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Saving to Web Service
You are now ready to send the signature to a web service. For this purpose, use an ASP.NET application.

Author's Note: In this section, you will be using the ASP.NET Futures release. You can download the ASP.NET Futures here.

Using the same project created in the previous section, add a new web site project to the current solution (see Figure 4).

Figure 4. Use the Same Project: Add a new web site project to the current solution.

Select ASP.NET Futures AJAX Web Site and name the project http://localhost/SignatureWebSite.

In the newly created web project, add a new Web Service item to the Web Site project.

In the WebService.vb file, add the following lines in bold:

Imports System.Web Imports System.Web.Services Imports System.Web.Services.Protocols Imports System.Web.Script.Services ' To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. ' <System.Web.Script.Services.ScriptService()> _ <WebService(Namespace:="http://tempuri.org/")> _ <WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _ <Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _ <ScriptService()> _ Public Class WebService Inherits System.Web.Services.WebService ... ... End Class

Define the following two web methods:

<WebMethod()> _ Public Function SaveSignature(ByVal value As String) As Boolean Try My.Computer.FileSystem.WriteAllText( _ Server.MapPath(".") & "\Signature.txt", value, False) Return True Catch ex As Exception Return False End Try End Function <WebMethod()> _ Public Function GetSignature() As String Dim fileContents As String fileContents = My.Computer.FileSystem.ReadAllText( _ Server.MapPath(".") & "\ Signature.txt") Return fileContents End Function

The SaveSignature() function saves the values of the signature into a text file. The GetSignature() function reads the content of the text file and returns the content back to the caller.

In the Signature Silverlight project, add a web reference to the web service you just created. In the Add Web Reference dialog, click the following (see also Figure 5):

  1. Web Services in this solution link
  2. WebService
  3. Add Reference
Figure 5. Add a Web Reference: Click these buttons to add a web reference to the Web service.

In Page.xaml.vb, code the Save button as follows:

'---Save button--- Private Sub btnSave_MouseLeftButtonDown( _ ByVal sender As Object, _ ByVal e As System.Windows.Input.MouseEventArgs) _ Handles btnSave.MouseLeftButtonDown Try Dim ws As New localhost.WebService If ws.SaveSignature(GetSignatureLines) Then txtStatus.Text = "Signature sent to WS!" Else txtStatus.Text = "Error saving to file" End If Catch ex As Exception txtStatus.Text = ex.ToString End Try End Sub

Here, you send the signature to the Web service.

Next, code the Load button as follows:

'---Load button--- Private Sub btnLoad_MouseLeftButtonDown( _ ByVal sender As Object, _ ByVal e As System.Windows.Input.MouseEventArgs) _ Handles btnLoad.MouseLeftButtonDown Try Dim ws As New localhost.WebService DrawSignature(ws.GetSignature) txtStatus.Text = "Signature loaded from WS!" Catch ex As Exception txtStatus.Text = ex.ToString End Try End Sub

Here, you call the web service to retrieve the saved signature. Save the Signature project.

In Solution Explorer, right-click the http://localhost/SignatureWebSite project, and select Add Silverlight Link.

This will cause Visual Studio 2008 to copy the relevant files from the Silverlight project onto the current project. Select Signature and click OK.

When prompted if you would like to enable Silverlight debugging, click Yes. Notice that a new folder named ClientBin is added to the project and the various files copied onto the project.

The copied files form the compiled Silverlight application.

In Default.aspx, add the following code in bold:

<form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <asp:Xaml ID="Xaml1" runat="server" Width="420" Height="226" XamlUrl="~/Page.xaml" /> <div> </div> </form>

Here, you use the new <asp:Xaml> element to host a Silverlight page.

In the Solution Explorer, right-click the http://localhost/SignatureWebSite project and select Set as Startup Project.

Select Default.aspx and then press F5 to test the project. You can now save the signature to the web service as well as load the saved signature from the web service (see Figure 5).

Useful Last Words
You've seen how to build a Silverlight application to capture a user's signature and then send it to a web service. One particular point to note is the use of the new <asp:Xaml> element to host a Silverlight application from within ASP.NET. In addition, the Silverlight application can only send data back to the web service hosted in the same domain as the web page that is hosting it—cross-domain calls are not supported in this release.

Wei-Meng Lee is a Microsoft MVP and founder of Developer Learning Solutions, a technology company specializing in hands-on training on the latest Microsoft technologies. He is an established developer and trainer specializing in .NET and wireless technologies. Wei-Meng speaks regularly at international conferences and has authored and coauthored numerous books on .NET, XML, and wireless technologies. He writes extensively on topics ranging from .NET to Mac OS X. He is also the author of the .NET Compact Framework Pocket Guide, ASP.NET 2.0: A Developer's Notebook (both from O'Reilly Media, Inc.), and Programming Sudoku (Apress). Here is Wei-Meng's blog.
Thanks for your registration, follow us on our social networks to keep up-to-date