Integrating Web Services with SDE

In my earlier article title Using the .NET Compact Framework, we saw how to use the Smart Device Extensions project to create an application that can execute on devices operating on the Pocket PC operating system. Although the article explained some of the core concepts about developing for smart devices, an application on the device becomes useful when it can access data from the enterprise. For example, if you are developing an application that allows a sales representative to collect orders during his field visits, the application will be really useful, when the sales representative can download the list of products from a web service or upload the list of sales calls to the central application via a web service.

In this article, we will see how to integrate web services with a smart device application. The process of integration with a web service is very similar to that of a normal .NET application integrating with a web service. This shows the true power of the .NET Compact Framework in providing the same paradigm between various applications for different platforms.

Calculator Web Service

The web service that we are going to build for this article is a simple calculator web service. This service will provide two operations to the user.

• A facility to add two numbers.
• A facility to subtract two numbers.

Both these web services take integers as input and return an integer as output. A product web service will be more complicated and might return more complex data types (like a DataSet). But this example helps to just illustrate the concept. Start Visual Studio .NET and create an ASP.NET web service project (called Calculator). The following is the code for the web service.

<Webmethod(Description:="Add operation of the calculator.")> _
Public Function Add(ByVal number1 As Integer, ByVal number2 As Integer) As Integer

' Simply add the two numbers and return the result back
Return (number1 + number2)
End Function

<Webmethod(Description:="Subract operation of the calculator.")> _
Public Function Subtract(ByVal number1 As Integer, ByVal number2 As Integer) As Integer

' Simply subtract the two numbers and return the result back
Return (number1 - number2)
End Function
End Sub

Note that I've not put in the designer generated code. Save the code. Its important that we test the web service so that it functions the way we want. Execute the project and you should now see the web service description file as shown in the following figure.

Let us test one operation of our web service (called Add). To do this, click on the Add link. You should now see the web site asking you for two inputs as shown in the following figure.

There is more to the above screen, but I've just pasted the required output. Now, we can enter some sample input and then click on the Invoke button. This will show the output from the web service as shown in the following figure.

The above diagram shows the output when you enter an input of 10 and 12.

Ok, now our service is working fine and we are all set to integrate it with our smart device application.

Developing the SDE Application

Let's now develop the consumer for this calculator application. In Visual Studio .NET, select a new Smart Device Application project. Let's call it CalculatorConsumer as shown in the following figure.

After you decide on the project name, Visual Studio presents you with a device profile screen. A device profile allows you to target a specific smart device. For our application, we will target a Pocket PC and develop and Windows application on the same. This is shown in the following figure.

At this stage Visual Studio .NET presents the design surface for the project. Before we start designing our screen, let's create a reference to our web service. For this, right-click on the Reference node and choose Add Web Reference. You will now see the web reference dialog box. In this, enter the URL to our web service (for example: http://yourComputer/Calculator/Calculator.asmx). The dialog box will now show the WSDL for the service. Let's give a name to this service (called CalcService). This is shown in the following figure.

Click on the Add Reference button to enable Visual Studio to generate all the proxy classes for communicating with actual service. Ok, let's design the form. The following figure shows a simple schematic of the form that I have designed for the calculator.

The following table shows the various controls placed in the form and the name that we have given for the same.

Control Type	Control Name	Control Value
Label	lblOperation	Operation.
Combo Box	cboOperation	Clear the caption and add two values Add and Subtract.
Label	lblNumber1	Number 1.
Text Box	txtNumber1	Clear the text value.
Label	lblNumber2	Number 2.
Text Box	txtNumber2	Clear the text value.
Button	btnCompute	Compute.
Multi-Line Text Box	txtResult	Clear the text value.
Form	frmCalculator	Calculator (text property)

Ok, we have designed the core of the form. Now, we need to add some code to the Compute button, which will process the input and display the result. Here is the code the click event of the Compute button. 

If (txtNumber1.Text = "" Or txtNumber2.Text = "" Or IsNothing(cboOperation.SelectedItem)) Then
MessageBox.Show("Both inputs and an operation must be provided for the calculator.", _"Error", MessageBoxButtons.OK, MessageBoxIcon.Exclamation, MessageBoxDefaultButton.Button1)
Else

' Create a reference to the web service
Dim oCalcService As CalcService.Calculator
oCalcService = New CalcService.Calculator

' Decide the operation to perform based on what was selected in the
' combo box
Select Case cboOperation.SelectedItem.ToString()
Case "Add"
txtResult.Text = oCalcService.Add(txtNumber1.Text, txtNumber2.Text)
Case "Subtract"
txtResult.Text = oCalcService.Subtract(txtNumber1.Text, txtNumber2.Text)
End Select
End If

The code is quite simple and in fact looks very similar to a normal .NET application. We do some basic error handling and if there are no errors, we create a reference to the web service and then invoke the Add or the Subtract method on the service. That's all there is to it!!! Let's execute the application now. When you execute the application, Visual Studio presents you with a dialog box about the deployment options. Since we are going to deploy to an emulator, choose the emulator option as shown in the following figure.

After the application is deployed (along with the .NET Framework), the application is automatically launched. Before we test the application, it is good to see if the web service is reachable by the emulator. To do this, we need to stop the application. For this, you can use the Settings option and use the Running Programs tab as shown in the following figure.

Click on the Stop button to stop the selected application. After the application is stopped (you will also see Visual Studio .NET stop the program, which is OK), you can open the Internet Explorer application in the device and type in the URL for your web service. If everything is fine, you will see the same WSDL description file as shown in the following figure.

You can now close the Internet Explorer window and then run the application again, by navigating to the Program Files folder using the File Explorer application. When you execute the application, you see the following output. Play around with the inputs and check out our basic error handling too!!

 

When you are done, you can close the emulator and return back to Visual Studio. For other tips on how to debug emulator issues, refer to my article here Well, that was a whirlwind tour about integrating a web service, but in real-world applications, you will probably have the web service connect to a SQL Server and fetch more complex data, but the principle is the same.

Conclusion

In this article we saw a very simple example of integrating a web service with a smart device application. The method is very simple and similar to the way a normal .NET application integrates with a web service.