Walkthrough: Localizing a Business Application

  • Article

[WCF RIA Services Version 1 Service Pack 2 is compatible with either .NET framework 4 or .NET Framework 4.5, and with either Silverlight 4 or Silverlight 5.]

This walkthrough demonstrates how to add localization support to a WCF RIA Services business application. Today, many business applications need to be used by people in various parts of the world. Silverlight, ASP.NET, and WCF 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 WCF RIA Services documentation require several prerequisite programs, such as Visual Studio 2010 and the Silverlight Runtime and SDK, be installed and configured properly, in addition to WCF RIA Services and the WCF 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 WCF 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 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 RIA Services project in Visual Studio 2010 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.

    RIA_LBA01_EditProject

    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.

    <SupportedCultures>en-US,fr-CA</SupportedCultures>

  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.

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

    RIA_LBA03WebResources

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

  7. 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

  8. 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.

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

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

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

  12. 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)

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

    RIA_LBA04_AddingResxAsLink

    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.

    RIA_LBA05_ClientResources

  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.

    RIA_LBA06_IE_AddLanguageDialog

  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.

    LBA_fr-CA-Maison_homepage

  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