Web services allow us to “outsource” application functionality to an existing external system that was previously implemented before. Rather than writing functionality from scratch, we can use a web service to reduce cost, coding time and increase the reliability of our software. Since Windows Phone 7 will be hot off the stores in the Philippines soon, here’s a sneak peek into creating a simple language translation app in WP 7 using Microsoft Translate. Disclaimer: Knowledge in C# Programming Language is a prerequisite.
To create the app, you need to have Visual Studio 2010 Express which can be downloaded here together with the other WP 7 dev tools. But if you already have a standard VS 2010 installation, that will suffice. I will be using VS 2010 throughout this article.
First step is of course to open Visual Studio 2010/Express for Windows Phone IDE and then click File > New Project.
Choose “Silverlight for Windows Phone” in the Templates and then name the Project as “Translator” then click OK.
Upon creating a new Project, you should see two views namely the design and the code views. The design view shows the layout of the application you are creating while the code view shows the XAML markup associated with the layout. Don’t worry about XAML codes because we won’t care about it for this tutorial.
To make our app look like a real app, we should edit the design view. You can do this by clicking, dragging and moving components from the Toolbox (Ctrl+W,X). It is also good if you edit the title box of the application to the appropriate name first. In this case, replace the Text attribute of “page name” to “Translator”.
Since, I would like to make my app to be simple and intuitive I will just add two Text Boxes (which contains the untranslated and translated text) and a translate button. After you dragged and dropped the 2 TextBoxes and the Button, clear the Text attribute of the TextBoxes and change the Content attribute of the Button to “Translate”. See picture below:
By default, the components that you have added have default names but for readability purposes, we shall change their names to “fromTextBox”, “toTextBox” and “translateButton” for the two text boxes and the button respectively. (See highlighted text in the picture below)
It is also good to uncheck the IsReadOnly attribute of toTextBox since we should not be able to modify the translated text. Now that we are done with the aesthetics, we will now deal with the backend of our application.
In order to use a Bing Web Service, you need to acquire an App ID for your App. Don’t worry because you can get one for free, all you have to do is go to www.bing.com/developers and sign in using your Live ID. You should be able to see something similar to the picture below:
Just fill in the fields required and you will be given you App ID in an instant. Copy your App ID since you will be needing this for the actual application code. After obtaining your App ID, go to the Solution Explorer (Ctrl+W,S) > Right click the Translator project > Add Service Reference.
On the address bar enter the text: http://api.microsofttranslator.com/V2/Soap.svc. Click ‘Go’ and name the service as ‘LanguageService’. This will add the service API of Microsoft Translate to your project. To be able to send data to the service, we must implement a service client in our C# code behind. Do this by opening the .cs file of the page and define a field named client (see below).
In the constructor of your class, add the code below in order to add an event handler when the service client finishes its communication with the web service (finishes translating).
This is needed because the translation routine is an asynchronous call which means that its results will return after an indefinite period of time. While the service client is translating the text, the app can continue its normal execution and gets interrupted only after the translation is done. Note that we haven’t defined a method client_TranslateCompleted but don’t worry because all it does is update the text of toTextBox. The parameter, args contain information about the event that occurred. Invoking args.Result will return a string which represents the translated text.
Lastly, in order to trigger the client to translate text, an event handler must be registered to translateButton. You can do this by double clicking translateButton in the Design view (this will automatically generate the event handler translateButton_Click) and just supply the appropriate logic inside it. What the code below does is it makes the client invoke the translate routine by passing four string arguments which represent your App ID, the text to be translated, the language code to be translated from and the language code to be translated to respectively. The language code “en” means English while “es” means Spanish. In short, out app converts text from English to Spanish.
After doing all of these steps, save your work then press F5 to test the app. It should work assuming you followed the instructions correctly! BTW you could press the Pause-Break key on your keyboard to be able to use your keyboard for typing in the WP 7 emulator instead of clicking the virtual keypad one by one.
Arjona, R. (2010, August). Windows Phone 7 and the Cloud – An Introduction. MSDN Magazine.
–Jay Saringan, Microsoft Student Partner, Ateneo de Manila University
About the contributor: