Walkthrough: Localizing a Business Application

[ This document was written for WCF Services Version 1 Service Pack 2 and might not be up to date Please see Release Notes or Changelog for a list of changes since WCF RIA Services ]

This walkthrough demonstrates how to add localization support to a Open Ria Services business application. Today, many business applications need to be used by people in various parts of the world. Silverlight, ASP.NET, and Open Ria Services include support for applications localized for a particular culture or locale. In this walkthrough, you will write an application that can load user interface strings written in either English or Canadian French, depending on the value of the language setting in the browser.

RIA_Walkthrough_Loc_01

This walkthrough covers the following tasks:

• Configuring the client project to support specific languages.

• Localizing resources.

• Configuring the test page to use localized resources.

• Configuring Internet Explorer to load a localized page.

• Adding support for bi-directional languages.

Prerequisites

This and the other walkthroughs presented in the Open Ria Services documentation require several prerequisite programs, such as Visual Studio and the Silverlight Runtime and SDK, be installed and configured properly, in addition to Open Ria Services and the Open Ria Services Toolkit. They also require installing and configuring SQL Server 2008 R2 Express with Advanced Services and installing the AdventureWorks OLTP and LT database.

Detailed instructions for the satisfaction of each of these prerequisites are provided by the topics within the Prerequisites for Open Ria Services node. Follow the instructions provided there before proceeding with this walkthrough to ensure that you encounter as few problems as possible when working through this Open Ria Services walkthroughs.

Configuring the Client Project

The following procedure shows how to specify supported languages in the client project file.

To configure the client project

1. Create a new Open Ria Services project in Visual Studio by selecting File, New, and then Project.

   The New Project dialog box appears.

2. Select the Silverlight Business Application template from Silverlight group of the Installed Templates and name the new project LocalizedBusinessApp.

3. In Solution Explorer, right-click the client project (LocalizedBusinessApp), and then click Unload Project.

4. Right-click the client project again and then click Edit LocalizedBusinessApp.vbproj or Edit LocalizedBusinessApp.csproj.

   

   The project file opens in the designer.

5. Find the SupportedCultures element and add the culture code for French (Canada) [fr-CA]. Use either a comma or a semi-colon to delimit the culture codes.

   en-US,fr-CA

6. Save and close the project file.

7. In Solution Explorer, right-click the client project and then click Reload Project.

   The project is reloaded into Solution Explorer.

Localizing Resources

Adding support to your application for an additional language involves essentially, creating copies of existing resource files, renaming the copied files, and then translating the strings in the newly copied resource files. The following procedures show how to localize the resources in the server and client projects.

To localize server resources

1. In the Solution Explorer, in the server project (LocalizedBusinessApp.Web), expand the Resources folder.

2. Right-click the RegistrationDataResources.resx file and then click Copy.

3. Right-click the Resources folder and then click Paste.

4. Rename Copy of RegistrationDataResources.resx to RegistrationDataResources.fr-CA.resx.

[!NOTE] The culture code must be included in the file name to correctly establish that the resource belongs to that culture.

1. Similarly, copy the ValidationErrorResources.resx file and rename it to ValidationErrorResources.fr-CA.resx.

   
2. Double-click RegistrationDataResources.fr-CA.resx to open it in the Resource Designer.

3. Replace the English values and comments with French equivalents, as shown in the following table.

   The Comment strings are typically used for tool tips.

   Name	Value	Comment
   EmailLabel	E-mail
   FriendlyNameDescription	Comment voulez-vous que votre nom être affiché dans l'application?
   FriendlyNameLabel	Nom amical
   PasswordConfirmationLabel	Confirmer le mot de passe
   PasswordDescription	Le mot de passe doit être 7 caractères longs et doit contenir au moins un caractère spécial par exemple @ ou #	Changer ceci si vous changez votre longueur de mot de passe et les politiques de force
   PasswordLabel	Mot de passe
   SecurityAnswerLabel	Réponse de sécurité
   SecurityQuestionLabel	Question de sécurité
   UserNameLabel	Nom de l'utilisateur
4. Save and close the file.

[!TIP] This walkthrough does not localize all of the strings. To complete the localization for the server resources, you would also localize ValidationErrorResources.fr-CA.resx.

1. In the client project, expand the Web folder and then expand Resources.

2. Right-click the Resources folder, click Add, and then click Existing Item.

3. Navigate to the LocalizedBusinessApp.Web\Resources folder.

4. Press CTRL+click to select the following files:

   • RegistrationDataResources.fr-CA.resx

   • RegistrationDataResources.fr-CA.Designer.vb (or .cs)

   • ValidationErrorResources.fr-CA.resx

   • ValidationErrorResources.fr-CA.Designer.vb (or .cs)

5. Click the down arrow on the Add button and then click Add As Link.

   

   The localized files are added as links in the client project.

To localize client resources

1. In the client project, expand the Assets folder and then expand Resources.

2. Create a copy of ApplicationStrings.resx and rename it to ApplicationStrings.fr-CA.resx.

3. Create a copy of ErrorResources.resx and rename it to ErrorResources.fr-CA.resx.

4. Create a copy of SecurityQuestions.resx and rename it to SecurityQuestions.fr-CA.resx.

   
5. Open ApplicationStrings.fr-CA.resx in the Resource Designer.

6. Replace the English values and comments with French equivalents, as follows:

   Name	Value	Comment
   AboutPageTitle	De
   AlreadyRegisteredLabel	Déjà inscrit?
   ApplicationName	Nom d'application
   BackToLoginButton	De retour à la Connexion
   BusyIndicatorLoadingUser	Application d'initialisation. ...	Ce message est affiché pendant l'initialisation d'application
   BusyIndicatorLoggingIn	Connecter...	Affiché pendant LoginOperation
   BusyIndicatorRegisteringUser	Soumettre Enregistrement...	Affiché pendant que l'enregistrement est traité par le serveur
   CancelButton	Annuler
   HomePageTitle	Maison
   LoginButton	connexion
   LoginWindowTitle	Connexion
   LogOffButton	sortie du système
   NotRegisteredYetLabel	Pas inscrit pourtant?
   OKButton	Bien
   RegisterNowButton	Enregistrer maintenant
   RegistrationFormHeader	S'il vous plaît compléter tous les champs obligatoires pour créer votre compte
   RegistrationWindowTitle	Registre
   RememberMeLabel	Garder m'a signé dans
   WelcomeMessage	Accueil {0}	{0} = User.DisplayName propriété
7. Save and close the file.

[!TIP] To complete the localization for the client resources, you would also localize ErrorResources.fr-CA.resx and SecurityQuestions.fr-CA.resx.

Configuring the Test Page

The following procedure shows how to specify culture information in the test page.

To configure TestPage.aspx

1. In the server project, open LocalizedBusinessAppTestPage.aspx in Source view.

2. In the root element, add Culture and UICulture attributes that have a value of "auto":

   <%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>

   <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>

3. Save the file.

Configuring Internet Explorer

The client application is now ready to show either of its two different versions. To view the Canadian French version, you must configure your Web browser to use Canadian French as its default language. The following procedure describes how to configure Internet Explorer.

To configure Internet Explorer

1. Press F5 to run the solution.

   The application starts in Internet Explorer. Unless the language preference in Internet Explorer is already set to French Canada, the strings appear in English.

2. Click the Tools menu and then click Internet Options.

   The Internet Options dialog box appears.

3. On the General tab, click Languages.

   The Language Preference dialog box appears.

4. Click Add.

   The Add Language dialog box appears.

   
5. Select French (Canada) [fr-CA] and then click OK.

6. In the Language Preferences dialog box, move the French language to the top of the list.

7. Click OK two times to close the dialog boxes.

8. Refresh the page.

   The pages should now appear in French.

   
9. Click the connexion link.

   Notice that the Login dialog box is in French.

Adding Support for Bi-Directional Languages

To add support for a bi-directional language to a Silverlight Business Application, you would follow the previous steps, substituting the locale code shown for the bi-directional language of your choice. In addition, you would need to specify the flow direction, as shown in the following procedure.

To add support for bi-directional languages

1. In each resource file that contains bi-directional language strings, add a new row with a Name of FlowDirection and a Value of RightToLeft.

2. In the root element of each XAML window that you want to implement bi-directional language, add a FlowDirection attribute.

3. Bind the FlowDirection attribute value to the value added to the resource file, as shown in the following example.

   FlowDirection="{Binding Path=ApplicationStrings.FlowDirection, Source={StaticResource ResourceWrapper}}"

See Also

Other Resources

Localizing Silverlight-based Applications

ASP.NET Globalization and Localization