Time for a new Windows Phone tutorial! Today we'll create a simple mobile translator using Bing web services. Our program will load all the available languages and the user will select the desired ones. This tutorial is supposed to be an introduction to using SOAP services, too. I promise that the next one will be about REST services and Google API.
If you wanna try out the Translator immediately, just download the source code. Continue reading to understand what's going on...
So, let's begin! Launch Visual Studio and create a new Windows Phone 7 portrait application. I named it WindowsPhoneBingTranslate. The user interface is far from complicated. We only need two list boxes (for language selection), two text boxes (for input and output text) and a button (for translation). You may come up with way different ideas, but the following XAML will do the job:
Each language has two properties: A name (such as "English", "French", "Greek", etc) and a unique code (such as "en", "fr", "el" respectively). An object containing both properties is necessary, so create the following class and place it in a Language.cs file:
The user needs to see the language name only - and not the code. So, when retrieving the appropriate data, only the Name property will be displayed in the UI. Modify the DataTemplate of the list boxes to achieve this:
Moving on to the code-behind .cs file, it's useful to create three placeholders:
It's time to make some calls to Bing Translate API now. Navigate to Solution Explorer and right click the "References" folder. Select "Add service reference" and type http://api.microsofttranslator.com/V2/Soap.svc into the Address field. Press "Go" to add the reference and have a look at its methods. They seem pretty straightforward, but they are a little bit tricky to use:
SOAP services, like the one we just imported, use XML to transfer their data. This XML is not directly visible because it is encapsulated (according to WSDL) and exposed to us as simple methods! That's the only thing you need to know about SOAP for now ;-).
How do we access these methods? Well, firstly import the reference to the code-behind file:
Importing the proper reference gives access to LanguageServiceClient class. LanguageServiceClient is a proxy which exposes all the supported Bing methods.
Silverlight uses asynchronous web method invocation. Consequently, the results of each method invocation will be handled separately. Here are the events defined:
You can define the above event handlers right in MainPage's constructor. GetLanguagesForTranslateCompleted method is called after MainPage finishes loading.
The method retrieves a list of all the available language codes. It also calls GetLanguageNamesAsync, which returns all the corresponding language names! Here they are:
But wait! What is this APP_ID parameter??? Don't worry... It is just a string containing a required unique Bing application identifier. You have to download one from Bing Developer Center (it's free). After clarifying this, let's have a look at LoadLanguages method...
Quite easy. It simply creates the proper Language objects and binds them to the list boxes.
Finally, the most important part: Translation! Double click on the UI's button and navigate to its event handler. Find the selected language names, get the corresponding language codes and call TranslateAsync.
TranslateAsync calls Bing, translates the text and, when completed, assigns the translated text to the output text box:
Here you are! Download the source code and enjoy.
Powered by Zimbra