Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Globalization – Preparing an ASP.NET application s UI for different languages

We can say that “globalizing” means more than just “translating” your application into one or more languages, preparing it to work in more than one “culture”, that is, another language, another date/hour format, currency etc!

Globalization – Preparing an ASP.NET application’s UI for different languages

Roberto Lopes

We can say that “globalizing” means more than just “translating” your application into one or more languages, preparing it to work in more than one “culture”, that is, another language, another date/hour format, currency etc! .NET platform brought many new features in this sense, mainly in its 2.0 version. In this article I will specifically focus the customization of more than one language in a Web application using ASP.NET 2.0, that is, the culture of the user interface (UI).

Overview of .NET localization

Saying localize an application is the same as saying adjust the culture of an application (see Culture window). Observe some items subject of localization in Table 1.

 

Item

Descrição

Date Format

Each country has its own standard notation for dates. Example: USA uses mm/dd/yyyy; Brazil uses the dd/mm/yyyy standard.

Language

It would be like translating your application to two or more languages. With .NET Framework 2.0, this is possible without a code line having to be written.

Currency Format

Such as date format, each country has its own standard notation for currency. For example, USA uses $999,999.99; Brazil uses R$999.999,99.

Table 1. Example of items subject to localization

Culture

A culture represents a localization or a country. Windows uses the RFC 1766 standard to referendum a culture, using the following notation: <Language>-<Country/RegionCode> Example: en-US (English and United States), pt-BR (Portuguese and Brazil), fr-FR (French and France), es-MX (Spanish and Mexico).

Language - Represented by two or three small letters, derivative from ISO 639-1 standard (two letters) or ISO 639-2 standard (three letters).

Country/Region – Represented by two capital letters, derivative from ISO 3166 standard.

 

There are two kinds of culture to be considered in an ASP.NET application:

·        Culture – Responsible for formatting the data to be used by the system (date, currency etc.);

·        UICulture – Responsible for formatting the resources to be presented in the user interface, that is, translation of the Web Form existing data (labels’ contents, buttons, titles, tooltips etc.).

 

As mentioned before, the focus of this article is aimed at preparing the Web application to work with more than one language. This way, it is clear that we’ll be using UICulture.

There are two kinds of localization to a page: Implicit and Explicit:

Implicit – Uses local resources (a set of files for a one single page). Each page (ASPX) has one resource file (RESX) for each language. Each page must have one resource file for each language, keeping in mind that all resource files of a certain page must have the same properties, only the values changing. Each page component is linked to one or more items of the resource file. For example: if the page default.aspx is translated to Portuguese and English, two resource files will be created for this page: one for English and one for Portuguese (not considering the neutral language, of which we’ll talk about later). If the item lblTitle.Text exists in the English resource file, it must also exist for Portuguese. We can even say that implicit localization is directly connected to the attribute “meta:resourcekey”,  which will be seen further ahead.

Explicit – Uses global resources (a set of files shared for the whole assembly). The explicit localization is used when there isn’t any association to a page’s specific component. It is very useful to create resources to be shared by the whole application (an error message, for instance).

Creating an implicitly localized project

To make the concept of implicit localization clear, we’ll create an ASP.NET 2.0 application, using the English language (en-US) as application base (neutral culture), Canadian French (fr-CA) and Portuguese (pt-BR).

In the Visual Studio 2005, create a new Web Site called “Demo”. I will use the C# language, but the conversion into VB.NET will be very simple, since in framework 2.0 the implicit localization demands extremely little code.

Open the Default.aspx page (in case it is in Source Mode, change it to Design Mode), add and set up the controls according to Table 2, adjusting the controls in agreement to Figure 1.

 

Control

Name (ID)

Property

Value

Label

lblTitle

Text

Welcome

DropDownList

ddlCulture

AutoPostBack

True

 

 

Items

Text

Value

English

Portuguese

French

En-US

pt-BR

fr-CA

Label

Label1

Text

Culture:

Label

lblCulture

Text

 

Button

btnMessage

Text

Message

Table 2. Controls to be added to the Default.aspx page

image001.png

Figure 1
. Global Site Page

Once page definition is concluded, your resource file must be created. Open the page in design mode (as shown in Figure 1) and select the item Generate Local Resource from the Tools menu (Figure 2). Observe that this menu item will only be accessible if the page to be localized is open in Design Mode.

 

http://www.devmedia.com.br/imagens/msdnmagazine1/mrbool_roberto_arquivos/image003.png

Figure 2. Generate Local Resource Menu

Once this process is completed, notice that a new folder called App_LocalResources was created, containing a new file called Default.aspx.resx (Figure 3).

 

image005.png

Figure 3. Folder Resources File and resource file

The Default.aspx.resx file is the file that will contain the text of all the page’s components in the neutral culture (in this case, English). Some components will have more than one occurrence (line) in this file, one for each property subject of translation. Example: The Label component will have occurrences for two properties (Text and Tooltip).

To see the content of the Default.aspx.resx file, double click it in the Solution Explorer. Notice that some properties are made available for localization, even if not requested.

 

Name

Value

btnMessageResource1.Text

Message

btnMessageResource1.ToolTip

 

DropDownList1Resource1.ToolTip

 

Label1Resource1.Text

Culture:  

Label1Resource1.ToolTip

 

lblCultureResource1.Text

 

lblCultureResource1.ToolTip

 

lblTitleResource1.Text

Welcome

lblTitleResource1.ToolTip

 

ListItemResource1.Text

English

ListItemResource1.Value

en-US

ListItemResource2.Text

Portuguese

ListItemResource2.Value

pt-BR

ListItemResource3.Text

French

ListItemResource3.Value

fr-CA

PageResource1.Title

Untitled Page

Table 3. Content of the generated resource file (Default.aspx.resx)

Open the page Default.aspx in Source Mode and notice that all of the page’s components have received a new attribute (meta:resourcekey). The value set up for this attribute is the “connecting link” between the value of the component to be translated and the resource file. See the page’s code part in Listing 1.

 

Listing 1. Default.aspx page’s components with the meta:resourcekey attribute

<asp:Label ID="lblCulture" runat="server"

meta:resourcekey="lblCultureResource1" Width="137px">

asp:Label>

 

<asp:Button ID="btnMessage" runat="server" OnClick="btnMessage_Click"

Text="Message" meta:resourcekey="btnMessageResource1" />

 

Observe that the attributes Culture and UICulture were added to the directive Page (see Listing 2) by the Generate Local Resources command. They will be the ones responsible for making the page automatically adjusted to the language set up in the user’s browser (received through the Accept-language header). In order to gain access to the Page directive, you must open the page in source mode (check the page’s HTML code).

 

Listing 2. Default.aspx page’s directive page

@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

Inherits="_Default" Culture="auto" meta:resourcekey="PageResource1"

UICulture="auto" %>

 

The next step is to create the resource files (one for each language). In order to do this, follow the steps:

 

1.      In the Solution Explorer, check the Default.aspx.resx file (resource file);

2.      Copy and paste the file using Ctrl+C and Ctrl+V. In doing this, a new file will be created with the name Copy of Default.aspx.resx.

3.      Now is the time to associate the desired culture to the file, which is made  based on its name. First, create the file for the culture “fr-CA” (French from Canada). In order to do so, rename the file copied to Default.aspx.fr-CA.resx (click the right hand button over the file and select Rename, or press F2).

4.      Open the renamed file and set up its values according to Table 4.

 

Name

Value

btnMessageResource1.Text

Message

Label1Resource1.Text

Culture:

lblTitleResource1.Text

Bienvenue

ListItemResource1.Text

Anglais

ListItemResource1.Value

en-US

ListItemResource2.Text

Portugais

ListItemResource2.Value

pt-BR

ListItemResource3.Text

Français

ListItemResource3.Value

fr-CA

PageResource1.Title

Untitled Page

Table 4. Default.aspx.fr-CA.resx resource file content

Repeat the previous steps (1 – 4) for the Portuguese Brazil culture (using pt-BR instead of fr-CA in item 3), using the data in Table 5.

 

Name

Value

btnMessageResource1.Text

Mensagem

Label1Resource1.Text

Cultura:

lblTitleResource1.Text

Bem-vindo

ListItemResource1.Text

Inglês

ListItemResource1.Value

en-US

ListItemResource2.Text

Português

ListItemResource2.Value

pt-BR

ListItemResource3.Text

Francês

ListItemResource3.Value

fr-CA

PageResource1.Title

Untitled Page

Table 5. Default.aspx.pt-BR.resx resource file content

Notice that there won’t be a specific resource file for English (en-US). This is because the default file (Default.aspx.resx) is already all in English and will be used as Neutral Culture (see Neutral Culture box).

 

Neutral Culture

Neutral culture means that, in case the customer’s language does not have resource files in the application, this language will be used. In the application presented, in case the language set up in the customer’s browser is not any of the two specific languages defined by the application (fr-CA or pt-BR), the presented language will be English (en-US). Notice that the language of the Neutral Culture does not need to have a specific resource file (such as Default.aspx.En-US.resx in our example), because in case the customer is not fr-CA or pt-BR, the language to be used will be the neutral one, where the text is written in English.

 

There! We can say that the application is prepared to work in more than one language. The page will be presented according to the language set up in the customer’s browser. Notice that no code line was written so far! To test what the site would be like in another language, follow the steps set out ahead.

Testing the project using implicit localization

1. Change the browser setup for one of the languages selected in the application (en-US, fr-CA or pt-BR). In case you are using Internet Explorer, select Internet Options in the Tools menu. In the General tab, click the Languages button. Click the Add button and add the cultures used in the application;

2. Change the order in which the cultures appear in the list, for example pt-BR in first place. Click OK and OK again;

3. Run the application and see that the page will work in the Portuguese language;

4. Change the order again in which the cultures appear in the list, however now placing fr-CA in first place;

5. Run the application and see that the page will appear in the French language;

Modifying the language through code

The application is already working, however lblCulture label is not have functional and if you change the language in the DropDownList, you will notice that it also is not functioning, this is, changing the language in ddlCulture, does not change the language in the page. It is not working because we have only set up our application to detect the customer language automatically, but have not programmed anything in response to a selection in ddlCulture. For this, some code lines need to be written.

The idea is to make it so that when changing the item of the DropDownList, the page adjusts itself to the selected culture, using the data of the resource file of the selected language.

For this functionality to be implemented, we need very little code. First of all, we need to make an override to the InitializeCulture method. This method runs at the very beginning of a Web Form’s life cycle, even before the components and properties for a page are created. For this, to detect the selected culture of the ddlCulture component, instead of using methods such as Click or SelectedItemChanged, we must obtain data straight from the request.

Open the file Default.aspx.cs (if you have the page open in design or source mode, just press the F7 key) and add the code in Listing 3, right at the beginning of the file, and the one in Listing 4 anywhere inside the ­_Default class (after Page_Load method, for example).

 

Listing 3. Namespaces to be added to the project

using System.Threading;

using System.Globalization;

 

Listing 4. InitializeCulture Method

protected override void InitializeCulture()

{

      string strUICulture = string.Empty;

 

      if (Request.Form["ddlCulture"] != null)

            strUICulture = Request.Form["ddlCulture"].ToString();

      else

            strUICulture = CultureInfo.CurrentCulture.Name.ToString();

 

      if (strUICulture != string.Empty)

      {

Thread.CurrentThread.CurrentUICulture = new

CultureInfo(strUICulture);

            Thread.CurrentThread.CurrentCulture =

CultureInfo.CreateSpecificCulture(strUICulture);

      }

      base.InitializeCulture();

}

 

When the application is executed, the customer language set up (set up in the browser) is obtained. At this moment, it is necessary to synchronize the language in the DropDownList. Therefore, add the code from Listing 5 to the Page_Load method of the Default.aspx page. Since the update of DropDownList only needs to be made when the application is executed for the first time (when it gets the language set up in the customer’s browser), the SelectedValue property is only set up when it is not a PostBack. However, the lblCulture is always updated (outside the “!IsPostback”).

 

Listing 5. Updating the controls in the Page_Load

protected void Page_Load(object sender, EventArgs e)

{

      if (!IsPostBack)

            ddlCulture.SelectedValue =

                  CultureInfo.CurrentCulture.Name.ToString();

 

       lblCulture.Text = CultureInfo.CurrentCulture.Name.ToString();

 }

 

There! With these few code lines, the DropDownList is already working. Now, when the language is changed in the ddlCulture, all the data in the page is adjusted to the selected language.

Explicit Localization

In the explicit localization, differently than in the implicit one (that uses the attribute meta:resourcekey), there is no link between the text and the components/properties. Its use is recommended when the necessity of localization of an independent form text or component exists.

You must have noticed that the btnMessage button does not have any functionality so far, only having its text automatically modified when a different culture is selected (through implicit localization). I added this button since the beginning of the project not only to illustrate this functionality, but to use it to implement a functionality using explicit localization.

First, create a new resource file, that this time will not be a local resource file, but a global one. For this matter, open the Solution Explorer, click the right hand button over the project name and select Add New Item, as shown in Figure 4.

 

 

image007.png

Figure 4. Adding a new item (Resource File)

Select the Resource File template, keep the suggested name (Resource.resx) and click the Add button. A dialogue box will appear (Figure 5) asking if you wish to add the new resource file to the standard folder App_GlobalResources. Click Yes and notice that the new folder is created containing the Resource.resx file.

 

image009.png

Figure 5. Dialog window questioning the creation of the folder of global resources

 

The resource file editor has probably opened automatically (in case it does not open, double click the Resource.resx file). Add data according to Table 6.

 

Name

Value

Comment

Message

Hello World!

 

Table 6. Resource.resx resource file content

Duplicate the Resource.resx file for the other languages, in the same way that we have done in the resource files for implicit localization (copy, paste and rename). The file content Resource.fr-CA.resx must have its content in agreement to Table 7 and the Resource.pt-BR.resx file must have its content in agreement to Table 8.

 

Name

Valor

Comment

Mensagem

Bonjour Monde!

 

Table 7. Resource.fr-CA.resx resource file content

Name

Valor

Comment

Mensagem

Olá Mundo!

 

Table 8. Resource.pt-BR.resx resource file content

Solution Explorer should now look like the one in Figure 6.

 

image011.png

Figure 6. Solution Explorer final result

Open the Default.aspx page in Design Mode and add a new Label (change the property Name to lblMessage) just below btnMessage button, such as Figure 7.

 

image013.png

Figure 7. Default.aspx page with added Label

Open code file Default.aspx.cs (or just click F7, if you are still in the design page). Add the code of Listing 6 to the event Click of the btnMessage button. Notice that when typing ‘dot’ after the word Resources, IntelliSense automatically presents the available options, making it very clear that this is a strong typed class. See that all the resources that are added to the global resource file will be displayed. As we only added the item “Message”, only this will be available. In our case that, select Message.

 

Listing 6. Click event codification of the btnMessage button

protected void btnMessage_Click(object sender, EventArgs e)

{

      lblMessage.Text = Resources.Resource.Message.ToString();

}

 

Once again we can say, there! To understand exactly what we’ve done in this last step, run the application. Change the language in the DropDownList to French and click the btnMessage button. The message “Bonjour Monde!” will appear. This is something fantastic, for we are using a strong typed class, obtaining localized data.  

I would only like to strengthen the difference between implicit and explicit localization with one more example: change again the DropDownList and check that the whole page is automatically adjusted to the selected language, except lblMessage. This because we are not using the “meta:resourcekey” attribute (implicit localization). For the lblMessage text to be localized, click again in the btnMessage button and see that the text was localized correctly.

Conclusion

In this brief demonstration of how to localize a Web Site in the ASP.NET 2.0, we could notice the power of the localization/globalization and the simplicity of its use that .NET Framework 2.0 places in our hands. There are many more resources that can be presented on this subject, being enough to say that I only quoted the “translation” of a Web Site, however we can go way beyond this, also setting up regional standards, but this we shall leave for another opportunity.

 

 

 

Roberto Lopes (robertoctlopes@yahoo.ca) is a Senior Systems Analyst in the company Direct Energy in Toronto/Canada; during many years he was instructor of Visual Basic in the Senac/SP and is Microsoft .NET certified. He works with Microsoft platform using C#, ASP.NET, SQL Server, Oracle and BizTalk in web projects, customer/server and multilayer. He is also responsible for the SQL Server, ASP.NET and Architecture technologies in.NET user group Build Developers (www.builddevelopers.net).

 

 



colunista nao disponivel

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login