Silverlight Localization Using a Custom Silverlight Web Part

Hands-On Lab

Silverlight Localization using a Custom Silverlight Web Part

Lab version: 1.0.0

Last updated: 3/31/2011

Contents

Overview 3

Exercise 1: Create a French Team Site 4

Task 1 – Installing the French Language Pack. 4

Task 2 – Creating a New Team Site Using the French Templates 5

Exercise 1 Verification 6

Exercise 2: Create a Localized Silverlight Application 6

Task 1 – Creating the Resource Files for English and French. 6

Task 2 – Modifying the Silverlight Project for Localization. 9

Task 3 – Modifying the User Interface to Support Localization. 10

Exercise 2 Verification 12

Exercise 3: Create a Custom Silverlight Web Part 12

Task 1 – Determining Programmatically the CurrentUICulture. 12

Exercise 4: Deploy and Test the Localized Web Part 13

Task 1 – Deploying and Testing the Web Part and Application on Intranet.contoso.com. 13

Task 2 – Adding the SL Web Part to Intranet.contoso.com/frDemo. 15

Summary 16

Overview

SharePoint sites may be localized for a specific region. Silverlight applications can be localized using resource files, resources and resource managers. This is native Silverlight. Page-level parameters nested in the object tag for Silverlight is used to set the current UI culture. The out-of-the-box Silverlight Web Part does not determine site culture and set the parameter. A custom Silverlight Web Part can be created to output the correct Param element to support Silverlight localization.

Objectives

This lab will demonstrate how to create a localized Silverlight application and a custom Web Part to dynamically set the required page param element.

·  Create a French-based team site

·  Create a localized Silverlight application.

·  Create a custom Silverlight Web Part.

System Requirements

You must have the following items to complete this lab:

·  2010 Information Worker Demonstration and Evaluation Virtual Machine

·  Microsoft Visual Studio 2010

·  Visual Studio 2010 SharePoint Power Tools

·  Silverlight 4 Toolkit

·  Silverlight WebPart

Setup

You must perform the following steps to prepare your computer for this lab...

1.  Download the 2010 Information Worker Demonstration and Evaluation Virtual Machine from http://tinyurl.com/2avoc4b and create the Hyper-V image.

2.  Install the Visual Studio 2010 Silverlight Web Part. The Silverlight Web Part is an add-on to Visual Studio 2010 and can be downloaded from http://code.msdn.microsoft.com/vsixforsp.

3.  Install the Silverlight 4 Toolkit located at http://silverlight.codeplex.com/

4.  Install the Visual Studio 2010 SharePoint Power Tools located at http://visualstudiogallery.msdn.microsoft.com/en-us/8e602a8c-6714-4549-9e95-f3700344b0d9

Exercises

This Hands-On Lab comprises the following exercises:

1.  Create a French Team Site

2.  Create a Localized Silverlight Application

3.  Create a Custom Silverlight Web Part

4.  Deploy and Test the Localized Web Part

Estimated time to complete this lab: 40 minutes.

Starting Materials

This Hands-On Lab includes the following starting materials.

·  Visual Studio solutions. The lab provides the following Visual Studio solutions that you can use as starting point for the exercises.

◦  SLLocalizationCustomSLWebPart\Source\Begin\ SilverlightCulture.sln: This solution contains a starter custom Silverlight Web Part and a starter localized Silverlight application.

Note: Inside each exercise folder, you will find an end folder containing a solution with the completed lab exercise.

Exercise 1: Create a French Team Site

In this exercise you will install the French Language Pack and create a French team site.

Task 1 – Installing the French Language Pack.

1.  Using Internet Explorer navigate to http://tinyurl.com/24rh5wk.

2.  Set the language to French and click Change link.

Figure 1

Change Language

3.  Click Télécharger button

Figure 2

Télécharger button

4.  Save ServerLanguagePack.exe to desktop.

5.  Double-click ServerLangaguePack.exe to start installation.

6.  Follow installation wizard to install the French Language Pack.

7.  Verify the Run the SharePoint Products Configuration Wizard now check box is checked.

8.  Click Close.

9.  Select Next and then Yes to start the configuration wizard.

10.  Click Finish when the wizard completes.

11.  The SharePoint 2010 Products Configuration Wizard will configure the new templates. The French templates are available after the wizard completes.

Task 2 – Creating a New Team Site Using the French Templates

1.  Navigate to http://intranet.contoso.com using Internet Explorer.

2.  Expand the Site Actions menu and click New Site.

3.  Select French in the language drop down located at the top of the New Site dialog.

4.  Select the Team Site template.

5.  Set the Site’s title to French Demo.

6.  Set the site’s Url to frDemo.

Figure 3

Select Language and set site’s url

7.  Click Create.

Figure 4

Created site

Exercise 1 Verification

In order to verify that you have correctly performed all steps of exercise 1, proceed as follows:

Verification 1

In this verification, the Silverlight Web Part will display the three tasks created in the Task list.

1.  Using Internet Explorer, navigate to http://intranet.contoso.com/frDemo.

2.  Verify the site French Demo site exists and displaying French text.

Exercise 2: Create a Localized Silverlight Application

In this exercise, you will create a simple Silverlight application that is localized for English and French.

Task 1 – Creating the Resource Files for English and French.

The application will use English as the natural language and French as a supported language. Two resource files are required for localization.

1.  Open the starter solution using Visual Studio 2010 located at:

◦  <INSTALL>\Labs\SLLocalizationCustomSLWebPart\Source\Begin\SilverlightCulture.sln

Figure 5

Starter solution in Solution Explorer

2.  Right-click on the SilverlightCulture project and select Add -> New Item

3.  Select the General category in the left hand pane.

4.  Select Resources File in the main pane.

5.  Set the name of the new file to ResourceLibrary.resx.

Figure 6

Add New Item dialog

6.  Click Add.

7.  Set the Access Modifier to Public.

Figure 7

Access Modifier

8.  Add the following name and values to ResourceLibrary.resx

Figure 8

Table loaded with values

9.  Save and close the ResourceLibrary.resx file.

10.  In Solution Explorer, expand the ResourceLibrary.resx file to display the ResourceLibrary.Designer.cs file.

Figure 9

ResourceLibrary.Designer.cs

11.  Right-click on the ResourceLibrary.Designer.cs file and select Open.

12.  Locate the ResourceLibrary constructor. Change the visibility from internal to public.

Figure 10

ResourceLibrary constructor

Note: if this modifier is set to internal the Silverlight application will display error in debug mode and the Silverlight application will not display. During development, this modifier may be reset to internal and may need to be reset to public.

13.  Save and close ResourceLibrary.Designer.cs.

14.  Repeat steps 2-9 to create a French resource file. This file must be named ResourceLibrary.fr.resx. The values for the French resource files are:

btnDisplayCulture: Affichage culture

CultureDialogMsg: Le thread actuel est de UICulture

GreetingsMsg: Salut

15.  Save and close ResourceLibrary.fr.resx.

Task 2 – Modifying the Silverlight Project for Localization.

The Silverlight application requires modification to set the default or natural language property as well as the list of supported languages.

1.  Right-click on SilverlightCulture project in Solution Explorer and select Properties.

2.  Select the Silverlight tab and click the Assembly Information button.

Figure 11

Silverlight tab

3.  Select English for the Neutral Language.

4.  Click Ok to close the Assembly Information dialog.

5.  Save and close the SilverlightCulture Property page.

6.  Right-click on SilverlightCulture project in Solution Explorer and select Unload Project.

7.  Right-click on SilverlightCulture project in Solution Explorer and select Edit SilverlightCulture.csproj.

8.  Locate the SupportedCultures element.

9.  Add fr between the start and end SupportedCultures element.

Figure 12

SupportedCultures tag

10.  Save and close the SilverlightCulture.csproj file.

11.  Right-click on SilverlightCulture project in Solution Explorer and select Reload Project.

Task 3 – Modifying the User Interface to Support Localization.

The user interface was designed without localization support. This task will use both programmatic and declarative methods to localize content.

1.  Right-click on MainPage.xaml and select View Code.

2.  Review MainPage.xaml.cs. Notice the existing ResourceManager variable. The ResourceManager programmatically retrieves the localized resource.

3.  Insert snippet 10.2.1 below the InitializeComponent method call in the MainPage’s constructor

Figure 13

Snippet 10.2.1

4.  This code creates an instance of the ResourceManager passing in the resource and the Assembly. The GetString method call returns the localized content and sets the txtGreetings’ text value to the appropriate content.

5.  Insert snippet 10.2.2 in the existing btnDisplayCulture_Click event handler.

Figure 14

Snippet 10.2.2

6.  Clicking the button will display a message box displaying the CurrentThread’s CurrentUICulture. This demonstrates programmatically binding to the resource.

7.  Save and close MainPage.xaml.cs.

8.  Right-click on MainPage.xaml and select Open.

9.  Add the SilverlightCulture namespace to the Xaml file.

Figure 15

SilverlightCulture namespace

10.  Add a UserControl Resource pointing to the ResourceLibrary.

Figure 16

UserControl resource pointing to ResourceLibrary

11.  Locate and bind the button’s content attribute to the UserControl Resource.

Figure 17

Binding to button’s content attribute

12.  This is demonstrating declaratively binding to the resource.

13.  Save and close MainPage.Xaml.

14.  Right-click the SilverlightCulture project in Solution Explorer and select Set as StartUp Project.

15.  Press F5 to run the Silverlight Project and click the Display Culture button.

Figure 18

Display Culture dialog

Exercise 2 Verification

In order to verify that you have correctly performed all steps of exercise 2, proceed as follows:

Verification 2

In this verification, the tasks have been completed correctly if the Silverlight application displays the correct language based on the client.

Exercise 3: Create a Custom Silverlight Web Part

In this exercise you will create a simple custom Web Part that will output the appropriate object tag and parameters used to display the localized Silverlight application.

Task 1 – Determining Programmatically the CurrentUICulture.

In this task, you programmatically determine the client’s culture.

1.  Right-click on CustomSLWebPart in Solution Explorer and select Open to expand the Web Part node.

2.  Right-click on CustomSLWebPart.cs in Solution Explorer and select Open.

3.  CustomSLWebPart is a simpleWebPart used to create the proper object tag and parameters in the page the Web Part is placed on.

4.  Use snippet 10.2.3 to create a string variable containing the name of the CurrentUIThread in the existing CreateChildControls method.

5.  Use snippet 10.2.4 to create a string variable to contain the formatted object tag.

6.  Use snippet 10.2.5 to create a Literal object with text that is contains formatted object tag.

Figure 19

Code Snippets

7.  The Literal control is added to the Controls collection and will output it’s content to the page. This will create an object tag with a param tag containing the value of the client UICulture. Silverlight will recognize this tag and set the application’s CurrentThread to the correct UICulture.

8.  Right-click the SilverlightCulture solution in Solution Explorer and select Deploy Solution.

Exercise 4: Deploy and Test the Localized Web Part

In this exercise you will deploy and test the custom Silverlight Web Part and localized application on the English intranet.contos.com site and the French intranet.contoso.com/frDemo site.

Task 1 – Deploying and Testing the Web Part and Application on Intranet.contoso.com.

In this task, you will deploy the Web Part and Silverlight application to intranet.contoso.com. You will add and configure the Web Part to display the localized Silverlight application culture.

1.  Right-click the SilverlightCulture solution in Solution Explorer and select Deploy Solution.

2.  Once the solution is deployed, navigate to http://intranet.contoso.com using Internet Explorer.

3.  Click on the Edit icon located in the left upper corner.

Figure 20

Edit icon

4.  Select the Insert Ribbon Tab.

5.  Click the Web Part Ribbon button.

6.  Select Custom from the categories pane and CustomSLWeb Part.

Figure 21

CustomSLWebPart

7.  Click the Add button.

8.  Select the CustomSLWebPart drop down and click Edit Web Part

Figure 22

Edit Web Part

9.  Set the Silverlight location property to http://intranet.contoso.com/siteassets/silverlightculture.xap

Figure 23

Silverlight location property

10.  Click OK.

11.  Click the Save icon in the left upper corner.

Figure 24

Save icon

12.  Click the Display Culture button.

Figure 25

Display Culture button

Task 2 – Adding the SL Web Part to Intranet.contoso.com/frDemo.

In this task, you will add the custom Silverlight Web Part to the French http://intranet.contoso.com demo site.

1.  Navigate to http://intranet.contoso.com/frDemo using Internet Explorer.

2.  Click on the Edit icon located in the left upper corner.

3.  Select the Insèrer Ribbon Tab.

4.  Click the Composant WebPart Ribbon button.

5.  Select Custom from the categories pane and CustomSLWebPart.

Figure 26

CustomSLWebPart

6.  Click the Ajouter button.

7.  Select the CustomSLWebPart drop down and click Modifier la composant WebPart

Figure 27

Modifier la composant WebPart option

8.  Set the Silverlight location property to http://intranet.contoso.com/siteassets/silverlightculture.xap

Figure 28

Silverlight location property

9.  Click OK.

10.  Click the Save icon in the left upper corner.

Figure 29

Save icon

11.  Click the Affichange culture button.

Figure 30

Affichange culture button

Summary

Silverlight applications can support the SharePoint Site’s culture using the a Silverlight object parameter tag in the web page. The out-of-the-box Silverlight Web Part does not allow for custom Param tags. A custom Silverlight Web Part can be created that passes the parent web’s culture to the Silverlight Web Part using param tags.