Skip to content

6. Internacionalização de visualizações

Aqui abordaremos a questão da internacionalização de vistas. Trata-se de um tema complexo, e pode encontrar-se uma boa descrição do mesmo no seguinte artigo de Scott Hanselman:

[http://www.hanselman.com/blog/GlobalizationInternationalizationAndLocalizationInASPNETMVC3JavaScriptAndJQueryPart1.aspx]

Primeiro, vamos rever as suas definições dos vários termos relacionados com a internacionalização de vistas:

Internacionalização (i18n)
fazer com que a aplicação suporte diferentes idiomas e configurações regionais
Localização (l10n)
fazer com que a aplicação suporte um par específico de idioma/configuração regional
Globalização
a combinação de internacionalização e localização
Idioma
língua falada – designada por um código ISO (fr: francês, es: espanhol, en: inglês, ...)
Configuração regional
uma variante da língua – também designada por um código ISO (en_GB: inglês britânico, en_US: inglês americano, ...)

Vamos abordar o problema com um primeiro exemplo.

6.1. Localização de números reais

Poderá notar uma anomalia no formulário de entrada anterior:

Image

Para o número real, digitámos [0,3] e não foi aceite. Deve digitar [0,3]:

Image

O formato esperado é, portanto, o formato anglo-saxónico, e não o formato francês. Uma pesquisa rápida online revela algumas soluções. Aqui está uma delas.

As ações [GET] e [POST] passam a ser as seguintes:


    // Action13-GET
    [HttpGet]
    public ViewResult Action13Get()
    {
      return View("Action13Get", new ViewModel11());
}



    // Action13-POST
    [HttpPost]
    public ViewResult Action13Post(ViewModel11 modèle)
    {
      return View("Action13Get", modèle);
}

A vista [Action13Get.cshtml] é idêntica à vista [Action12Get.cshtml], exceto pelos scripts JavaScript:


<head>
  <meta name="viewport" content="width=device-width" />
  <title>Action13Get</title>
  <link rel="stylesheet" href="~/Content/Site.css" />
  <script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
  <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
...
  <script type="text/javascript" src="~/Scripts/myscripts.js"></script>
 
</head>

Nota: Linha 5, ajuste a versão do jQuery para corresponder à sua versão do Visual Studio.

  • Na linha 9, adicionámos um script [ myscripts.js ]. É o seguinte: 

// http://blog.instance-factory.com/?p=268
$.validator.methods.number = function (value, element) {
  return this.optional(element) ||
      !isNaN(Globalize.parseFloat(value));
}
 
$.validator.methods.date = function (value, element) {
  return this.optional(element) ||
      !isNaN(Globalize.parseDate(value));
}
 
jQuery.extend(jQuery.validator.methods, {
  range: function (value, element, param) {
    //Use the Globalization plugin to parse the value        
    var val = Globalize.parseFloat(value);
    return this.optional(element) || (
        val >= param[0] && val <= param[1]);
  }
});
 
// au chargement du document
$(document).ready(function () {
  var culture = 'fr-FR';
  Globalize.culture(culture);
});

Indiquei na linha 1 onde este script foi encontrado. Não vou tentar explicá-lo porque não o compreendo. O JavaScript pode, por vezes, ser um pouco enigmático. Nas linhas 4, 9 e 15, é utilizado um objeto [Globalize]. Este é fornecido pela biblioteca jQuery Globalization, que pode ser obtida através do [NuGet]:

  • em [1], gerir os pacotes [NuGet] para o projeto [Example-03];
  • em [2], navegue pelos pacotes online;
  • em [3], digite o termo [globalização];
  • em [4], instale o pacote [Globalize] para o projeto JQuery.

Assim que o pacote [Globalize] estiver instalado, surge uma nova pasta na pasta [Scripts]:

  • em [1], foi criada uma pasta [globalize] com o script principal [globalize.js];
  • em [2], o script principal [globalize.js] é complementado por scripts específicos para cada idioma e localidade;
  • em [3], os scripts específicos para o idioma francês com as configurações regionais belga (BE), canadiana (CA), francesa (FR), suíça (CH), luxemburguesa (LU) e monegasca (MC).

O script [globalize.js] e o nosso script de cultura [globalize.culture.fr-FR.js] devem ser incluídos na lista de scripts da nossa página [Action13Get.cshtml]:


<head>
  <meta name="viewport" content="width=device-width" />
  <title>Action13Get</title>
...
  <script type="text/javascript" src="~/Scripts/globalize/globalize.js"></script>
  <script type="text/javascript" src="~/Scripts/globalize/cultures/globalize.culture.fr-FR.js"></script>
  <script type="text/javascript" src="~/Scripts/myscripts.js"></script>
</head>

  • linha 5: o script [globalize];
  • linha 6: o script [globalize.culture.fr-FR.js];
  • linha 7: o script [myscripts.js];

Vamos dar uma olhadela mais de perto a este último script:


// http://blog.instance-factory.com/?p=268
$.validator.methods.number = function (value, element) {
  return this.optional(element) ||
      !isNaN(Globalize.parseFloat(value));
}
 
...
 
// au chargement du document
$(document).ready(function () {
  var culture = 'fr-FR';
  Globalize.culture(culture);
});

As linhas 10–13 definem a cultura do lado do cliente como [fr-FR]:

  • linha 10: a função [ready] do jQuery é executada quando o documento que contém o script tiver sido totalmente carregado pelo navegador;
  • linhas 11–12: a cultura do lado do cliente é definida como [fr-FR]. Para que isto funcione, o ficheiro [globalize.culture.fr-FR.js] deve estar incluído na lista de scripts JavaScript associados ao documento.

Agora podemos testar a nova aplicação:

Image

Agora podemos introduzir [0,3] como número real, o que não podíamos fazer anteriormente. No entanto, deparamo-nos com outro problema:

Image

Acima, a validação do lado do cliente permite-nos introduzir [11,2] utilizando a notação anglo-saxónica. Este valor não é aceite no lado do servidor quando enviámos o formulário:

Image

Temos de escrever [11,2], e assim funciona tanto no lado do cliente como no lado do servidor. No lado do cliente, a notação anglo-saxónica não deve ser aceite. Isso deve ser possível...

Vamos agora abordar a internacionalização das visualizações. Continuaremos com o exemplo do formulário anterior, disponibilizando-o em duas línguas: francês e inglês.

6.2. Gerir uma cultura

O idioma das visualizações é controlado pelo objeto [Thread.CurrentThread.CurrentUICulture]. Para apresentar páginas na cultura [fr-FR], escrevemos:

Thread.CurrentThread.CurrentUICulture=new CultureInfo("fr-FR");

A localização (datas, números, moedas, horas, etc.) é controlada pelo objeto [Thread.CurrentThread.CurrentCulture]. À semelhança do que foi escrito anteriormente, escrevemos:

Thread.CurrentThread.CurrentCulture=new CultureInfo("fr-FR");

Estas duas instruções poderiam ser colocadas no construtor de cada controlador da aplicação. No entanto, talvez também queiramos separar este código que é comum a todos os controladores. Vamos adotar esta abordagem.

Criamos dois novos controladores:

Image

  • [I18NController] será a classe base para todos os controladores que utilizam internacionalização;
  • [SecondController] é um exemplo de controlador derivado de [I18NController].

O código para o controlador [I18NController] é o seguinte:


using System.Threading;
using System.Web;
using System.Web.Mvc;
 
namespace Exemples.Controllers
{
  public abstract class I18NController : Controller
  {
    public I18NController()
    {
      // retrieve the context of the current query
      HttpContext httpContext = HttpContext.Current;
      // examine the query for the [lang] parameter
      // look for it in the URL parameters
      string langue = httpContext.Request.QueryString["lang"];
      if (langue == null)
      {
        // look for it in the posted parameters
        langue = httpContext.Request.Form["lang"];
      }
      if (langue == null)
      {
        // search for it in the user's session
        langue = httpContext.Session["lang"] as string;
      }
      if (langue == null)
      {
        // 1st header parameter HTTP AcceptLanguages
        langue = httpContext.Request.UserLanguages[0];
      }
      if (langue == null)
      {
        // culture fr-FR
        langue = "fr-FR";
      }
      // put your tongue in session
      httpContext.Session["lang"] = langue;
      // changing thread cultures            
      Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(langue);
      Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
    }
  }
}

  • linha 7: [I18NController] deriva da classe [Controller];
  • linha 7: a classe é declarada como [abstract] para impedir a instanciação direta: só pode ser derivada para ser utilizada;
  • linha 9: o construtor da classe será executado sempre que um controlador derivado de [I18NController] for instanciado;
  • linha 12: recuperamos o contexto do pedido HTTP atualmente a ser processado pelo controlador;
  • linha 15: assumimos que o idioma é definido por um parâmetro [lang] que pode ser encontrado em vários locais. Pesquisamos na seguinte ordem:
    • linha 15: nos parâmetros da URL [?lang=en-US],
    • linha 19: nos parâmetros enviados [lang=de],
    • linha 24: na sessão do utilizador,
    • linha 29: nas preferências de idioma enviadas pelo cliente HTTP,
    • linha 26: se nada for encontrado, a localização é definida como [fr-FR];
  • linha 37: armazenamos a localização na sessão. É daí que ela será recuperada para pedidos subsequentes. O utilizador pode alterá-la incluindo-a nos parâmetros de um pedido GET ou POST;
  • linhas 39–40: definimos a localização para a visualização que será apresentada após o processamento da solicitação atual.

O controlador [SecondController] será o seguinte:


using Exemple_03.Models;
using Exemples.Controllers;
using System.Web.Mvc;
 
namespace Exemple_03.Controllers
{
    public class SecondController : I18NController
    {
      // Action14-GET
      [HttpGet]
      public ViewResult Action14Get()
      {
        return View("Action14Get", new ViewModel14());
      }
 
      // Action14-POST
      [HttpPost]
      public ViewResult Action14Post(ViewModel14 modèle)
      {
        return View("Action14Get", modèle);
      }
    }
}

  • Linha 7: [SecondController] estende [I18NController]. Isto garante que a localização para a vista a ser apresentada foi inicializada;
  • Linha 13: Utilizamos o modelo de visualização [ViewModel14], que apresentaremos em breve;
  • Linhas 13 e 20: A vista [Action14Get.cshtml] apresenta o formulário.

6.3. Internacionalização do modelo de visualização [ViewModel14]

O modelo de visualização [ViewModel14] é o seguinte:


using Exemple_03.Resources;
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Globalization;
using System.Net.Mail;
 
namespace Exemple_03.Models
{
  public class ViewModel14 : IValidatableObject
  {
 
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [Display(ResourceType = typeof(MyResources), Name = "chaineaumoins4")]
    [RegularExpression(@"^.{4,}$", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    public string Chaine1 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "chaineauplus4")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [RegularExpression(@"^.{1,4}$", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    public string Chaine2 { get; set; }
 
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [Display(ResourceType = typeof(MyResources), Name = "chaine4exactement")]
    [RegularExpression(@"^.{4,4}$", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    public string Chaine3 { get; set; }
 
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [Display(ResourceType = typeof(MyResources), Name = "entier")]
    public int Entier1 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "entierentrebornes")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [Range(1, 100, ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    public int Entier2 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "reel")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    public double Reel1 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "reelentrebornes")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [Range(10.2, 11.3, ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    public double Reel2 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "email")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [EmailAddress(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte", ErrorMessage="")]
    public string Email1 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "date1")]
    [RegularExpression(@"\s*\d{2}/\d{2}/\d{4}\s*", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    public string Regexp1 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "date2")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [DataType(DataType.Date)]
    public DateTime Date1 { get; set; }
 
    // validation
    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
      // error list
      List<ValidationResult> résultats = new List<ValidationResult>();
      // the same error msg for all
      string errorMessage=MyResources.ResourceManager.GetObject("infoIncorrecte", new CultureInfo(System.Web.HttpContext.Current.Session["lang"] as string)).ToString();
 
      // Date 1
      if (Date1.Date <= DateTime.Now.Date)
      {
        résultats.Add(new ValidationResult(errorMessage, new string[] { "Date1" }));
      }
      // Email1
      try
      {
        new MailAddress(Email1);
      }
      catch
      {
        résultats.Add(new ValidationResult(errorMessage, new string[] { "Email1" }));
      }
      // Regexp1
      try
      {
        DateTime.ParseExact(Regexp1, "dd/MM/yyyy", CultureInfo.CreateSpecificCulture("fr-FR"));
      }
      catch
      {
        résultats.Add(new ValidationResult(errorMessage, new string[] { "Regexp1" }));
      }
 
      // return the list of errors
      return résultats;
    }
  }
}

Este modelo é a versão internacionalizada do modelo anterior [ViewModel11]. Descreveremos o mecanismo de internacionalização para o primeiro atributo da primeira propriedade. Os outros atributos seguem o mesmo mecanismo.


    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
public string Chaine1 { get; set; }

No modelo anterior [ViewModel11], estas linhas eram as seguintes:


[Required(ErrorMessage = "Information requise")]
public string Chaine1 { get; set; }

Na versão internacionalizada, linha 1, o texto a ser exibido é colocado num ficheiro de recursos. Aqui, este ficheiro chama-se [MyResources.resx] (typeof) e foi colocado na raiz do projeto. É chamado de ficheiro de recursos.

Criámos três ficheiros de recursos aqui:

  • [MyResources]: recurso padrão quando não existe nenhum recurso para a localização atual;
  • [MyResources.fr-FR]: recurso para a localização [fr-FR];
  • [MyResources.en-US]: recurso para a localização [en-US];

Para criar um ficheiro de recursos, siga estes passos [1, 2, 3]:

Isto cria o ficheiro de recursos [MyResources2.resx]. Ao clicar duas vezes nele, é apresentada a seguinte página:

Um ficheiro de recursos é um dicionário que contém chaves e valores associados a essas chaves. Introduza a chave em [1], o valor em [2] e o âmbito do recurso em [3]. Para que estes recursos sejam legíveis, devem ter o âmbito [Public]. Voltemos à linha:


    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]

  • [ErrorMessageResourceType]: refere-se ao ficheiro de recursos. O parâmetro [typeof] é o nome do ficheiro. Este é convertido numa classe durante o processo de compilação, e o seu binário é incluído na montagem do projeto. Portanto, em última análise, [MyResources] é o nome da classe de recursos;
  • [ErrorMessageResourceName = "infoRequise"]: refere-se a uma chave no ficheiro de recursos. Em última análise, a linha significa que a mensagem de erro a ser exibida é o valor no ficheiro [MyResources] associado à chave [infoRequise].

Para criar a chave [infoRequise] e o seu valor associado no ficheiro [MyResources], proceda da seguinte forma:

Introduza a chave em [1], o valor em [2] e o âmbito do recurso em [3].

Há um último ponto a esclarecer: o namespace da classe [MyResources]. Este é definido nas propriedades do ficheiro [MyResources.resx]:

Em [1], definimos o namespace da classe [MyResources] que será criada a partir do ficheiro de recursos [MyResources.resx]. Voltemos à linha internacionalizada que analisámos:


[Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]

O operador typeof espera uma classe, neste caso a classe [MyResources]. Para que esta classe seja encontrada, o seu namespace deve ser importado para a classe [ViewModel14]:


using Exemple_03.Resources;

Para que a classe [MyResources] fique visível, o projeto deve ter sido compilado pelo menos uma vez desde que o ficheiro de recursos [MyResources] foi criado. O código desta classe está visível no ficheiro [MyResources.Designer.cs]:

Image

Ao clicar duas vezes neste ficheiro, acede ao código da classe [MyResources]:


namespace Exemple_03.Resources {
    using System;
 
 
[global::System.CodeDom.Compiler.GeneratedCodeAttribute("System.Resources.Tools.StronglyTypedResourceBuilder", "4.0.0.0")]
    [global::System.Diagnostics.DebuggerNonUserCodeAttribute()]
    [global::System.Runtime.CompilerServices.CompilerGeneratedAttribute()]
    public class MyResources2 {
 
  ...
         public static string infoRequise {
            get {
                return ResourceManager.GetString("infoRequise", resourceCulture);
            }
        }
    }
}

  • linha 1: o namespace da classe;
  • linha 11: a chave [infoRequise] tornou-se uma propriedade estática da classe [MyResources]. É acessível através da notação [MyResources.infoRequise]. Além disso, note que esta propriedade tem um âmbito [public]. Sem isto, não seria acessível. É importante lembrar isto porque, infelizmente, o âmbito padrão é [internal], e isto pode causar erros difíceis de compreender se se esquecer de alterar o âmbito.

Por que razão existem agora três ficheiros de recursos?

Image

Criámos o [MyResources.resx]. Este é o recurso raiz. Em seguida, criamos tantos ficheiros de recursos [MyResources.locale.resx] quantas forem as localizações (idiomas) a gerir. Aqui, estamos a lidar com o francês [fr-FR] e o inglês americano [en-US]. Quando a localização atual não é nem [fr-FR] nem [en-US], é utilizado o recurso raiz [MyResources.resx].

O conteúdo final de [MyResources.resx] é o seguinte:

Image

As mensagens estarão em francês quando a localização não for reconhecida. O conteúdo final de [MyResources.fr-FR.resx] é idêntico e obtido simplesmente copiando o ficheiro.

O conteúdo final do ficheiro [MyResources.en-US.resx] também é obtido através da cópia do ficheiro e, em seguida, modificado da seguinte forma:

Image

Voltemos à vista [ViewModel14] e ao seu método [Validate]:


    // validation
    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
      // liste des erreurs
      List<ValidationResult> résultats = new List<ValidationResult>();
      // le même msg d'erreur pour tous
      string errorMessage=MyResources.ResourceManager.GetObject("infoIncorrecte", new CultureInfo(System.Web.HttpContext.Current.Session["lang"] as string)).ToString();
 
      // Date 1
      if (Date1.Date <= DateTime.Now.Date)
      {
        résultats.Add(new ValidationResult(errorMessage, new string[] { "Date1" }));
      }
...
      // on rend la liste des erreurs
      return résultats;
}

A linha 7 mostra como recuperar uma mensagem do ficheiro de recursos [MyResources]. Aqui, queremos recuperar a mensagem associada à chave [infoIncorrecte] na cultura atual:

  • MyResources.ResourceManager.GetObject("infoIncorrecte", new CultureInfo("en-US")) : recupera o objeto associado à chave [infoIncorrecte] do ficheiro de recursos [MyResources.en-US.resx];
  • vimos que o controlador [I18NController] define a cultura atual na sessão associada à chave [lang]. A cultura atual pode, portanto, ser recuperada utilizando System.Web.HttpContext.Current.Session["lang"] as string;
  • O recurso é recuperado como um [object]. Para obter a mensagem de erro, aplicamos-lhe o método [ToString].

6.4. Internacionalização da vista [Action14Get.cshtml]

Atualizamos a vista de exibição do formulário da seguinte forma:

Image


@model Exemple_03.Models.ViewModel14
@using Exemple_03.Resources
@{
  Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Action14Get</title>
  <link rel="stylesheet" href="~/Content/Site.css" />
  <script type="text/javascript" src="~/Scripts/jquery-1.8.2.min.js"></script>
  <script type="text/javascript" src="~/Scripts/jquery.validate.min.js"></script>
  <script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
  <script type="text/javascript" src="~/Scripts/globalize/globalize.js"></script>
  <script type="text/javascript" src="~/Scripts/globalize/cultures/globalize.culture.fr-FR.js"></script>
  <script type="text/javascript" src="~/Scripts/globalize/cultures/globalize.culture.en-US.js"></script>
  <script type="text/javascript" src="~/Scripts/myscripts2.js"></script>
  <script>
    $(document).ready(function () {
      var culture = '@System.Threading.Thread.CurrentThread.CurrentCulture';
        Globalize.culture(culture);
      });
  </script>
 
</head>
<body>
  <h3>Formulaire ASP.NET MVC - Internationalisation</h3>
  @using (Html.BeginForm("Action14Post", "Second"))
  {
    <table>
      <thead>
        <tr>
          <th>@MyResources.type</th>
          <th>@MyResources.value</th>
          <th>@MyResources.error</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>@Html.LabelFor(m => m.Chaine1)</td>
          <td>@Html.EditorFor(m => m.Chaine1)</td>
          <td>@Html.ValidationMessageFor(m => m.Chaine1)</td>
        </tr>
...
      </tbody>
    </table>
    <p>
      <input type="submit" value="Valider" />
    </p>
  }
</body>
</html>
<!-- choice of language -->
@using (Html.BeginForm("Lang", "Second"))
{
  <table>
    <tr>
      <td><a href="javascript:postForm('fr-FR','/Second/Action14Get')">Français</a></td>
      <td><a href="javascript:postForm('en-US','/Second/Action14Get')">English</a></td>
    </tr>
  </table>
}

Nota: Linha 14 — certifique-se de que a versão do jQuery corresponde à sua versão do Visual Studio.

Vamos começar pela parte mais simples, as linhas 36–38. Estas utilizam as propriedades estáticas da classe [MyResources] que acabámos de descrever. Para aceder à classe [MyResources], deve importar o seu namespace (linha 2).

Nas mensagens internacionalizadas, deve também incluir as mensagens apresentadas pela estrutura de validação do lado do cliente. Para tal, utilize as bibliotecas jQuery nas linhas 17 a 19. Utilizamos os ficheiros jQuery para as duas configurações regionais que suportamos: [fr- FR] e [en-US]. Além disso, recorde-se de que a vista [Action13Get] utilizava o seguinte script JavaScript [myscripts.js]:


// document loading
$(document).ready(function () {
  var culture = 'fr-FR';
  Globalize.culture(culture);
});

Agora, a cultura já não é apenas [fr-FR]; varia. Por conseguinte, estas linhas são agora geradas pela própria vista [Action14Get] nas linhas 21–26. Estas seis linhas serão incluídas na página HTML enviada ao cliente.

  • Linha 23: A variável JavaScript [culture] é inicializada com a cultura atual do segmento de execução que está a tratar o pedido. Deve lembrar-se de que esta foi inicializada pelo construtor da classe [I18NController]: 


      // on met la langue en session
      httpContext.Session["lang"] = langue;
      // on modifie les cultures du thread            
      Thread.CurrentThread.CurrentCulture = new System.Globalization.CultureInfo(langue);
Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;

Se a cultura atual for [en-US], o script JavaScript incorporado na página HTML passa a ser:


  <script>
    $(document).ready(function () {
      var culture = 'en-US';
        Globalize.culture(culture);
      });
</script>

Já mencionámos que a função [$(document).ready] é executada assim que o navegador terminar de carregar a página. A sua execução definirá a cultura da estrutura de validação do lado do cliente. Com a cultura [en-US], as mensagens de erro da estrutura estarão em inglês e provirão do ficheiro de recursos [MyResources.en-US.resx]. Vamos ver como.

Agora, vamos examinar as linhas 57–65:


<!-- language selection -->
@using (Html.BeginForm("Lang", "Second"))
{
  <table>
    <tr>
      <td><a href="javascript:postForm('fr-FR','/Second/Action14Get')">Français</a></td>
      <td><a href="javascript:postForm('en-US','/Second/Action14Get')">English</a></td>
    </tr>
  </table>
}

Aqui está um segundo formulário; o primeiro encontra-se nas linhas 31–53. Este formulário apresenta os seguintes links na parte inferior da página:

  • linha 2: o formulário é enviado para a ação [Lang] do controlador [Second]. Por enquanto, não vemos quaisquer valores que possam ser enviados;
  • linhas 6 e 7: clicar nos links aciona a execução da função JavaScript [postForm]. Onde está localizada esta função? No script [myscripts2.js] referenciado na linha 20 da vista:

O seu conteúdo é o seguinte:


function postForm(lang, url) {
  // on récupère le deuxième formulaire du document
  var form = document.forms[1];
  // on lui ajoute l'hidden attribute lang
  var hiddenField = document.createElement("input");
  hiddenField.setAttribute("type", "hidden");
  hiddenField.setAttribute("name", "lang");
  hiddenField.setAttribute("value", lang);
  // ajout du champ caché dans le formulaire
  form.appendChild(hiddenField);
  // on lui ajoute l'hidden attribute url
  var hiddenField = document.createElement("input");
  hiddenField.setAttribute("type", "hidden");
  hiddenField.setAttribute("name", "url");
  hiddenField.setAttribute("value", url);
  // ajout du champ caché dans le formulaire
  form.appendChild(hiddenField);
  // soumission
  form.submit();
}
 
// http://blog.instance-factory.com/?p=268
$.validator.methods.number = function (value, element) {
  return this.optional(element) ||
      !isNaN(Globalize.parseFloat(value));
}
 
$.validator.methods.date = function (value, element) {
  return this.optional(element) ||
      !isNaN(Globalize.parseDate(value));
}
 
jQuery.extend(jQuery.validator.methods, {
  range: function (value, element, param) {
    //Use the Globalization plugin to parse the value        
    var val = Globalize.parseFloat(value);
    return this.optional(element) || (
        val >= param[0] && val <= param[1]);
  }
});

As linhas 22–40 são idênticas às já presentes no script [myscripts.js] utilizado no exemplo anterior. Não as iremos abordar novamente aqui. A função [postForm], que é executada quando se clica nos links de idioma, encontra-se nas linhas 1–20:

  • linha 1: a função recebe dois parâmetros, [lang], que é a cultura selecionada pelo utilizador, e [url], que é o URL para o qual o navegador do cliente deve ser redirecionado assim que a mudança de cultura for efetuada. Estes dois parâmetros são especificados na chamada: 

<td><a href="javascript:postForm('fr-FR','/Second/Action14Get')">Français</a></td>
<td><a href="javascript:postForm('en-US','/Second/Action14Get')">English</a></td>
  • linha 3: recuperamos uma referência ao segundo formulário no documento;
  • linhas 5-8: criamos programaticamente a tag 
<input type="hidden" value="xx-XX"/>

onde [xx-XX] é o valor do parâmetro [lang] da função;

  • Linha 10: Mais uma vez, utilizando código, adicionamos este campo ao segundo formulário. Em última análise, ele comporta-se como se este campo estivesse presente no segundo formulário desde o início. O seu valor será, portanto, enviado. É exatamente isso que pretendíamos;
  • Linhas 11–17: Repetimos o mesmo processo para uma tag 
<input type="hidden" value="url"/>

onde [url] é o valor do parâmetro [url] da função;

  • linha 19: o segundo formulário é agora enviado. Para que URL?

Precisamos de voltar ao código do segundo formulário na página [Action14Get.cshtml]:


@using (Html.BeginForm("Lang", "Second"))
{
...
}

O formulário é, portanto, enviado para a URL [/Second/Lang]. Em seguida, precisamos de definir uma ação [Lang] no controlador [SecondController]. Será da seguinte forma:


public class SecondController : I18NController
    {
      // Action14-GET
      [HttpGet]
      public ViewResult Action14Get()
      {
        return View("Action14Get", new ViewModel14());
      }
 
      // Action14-POST
      [HttpPost]
      public ViewResult Action14Post(ViewModel14 modèle)
      {
        return View("Action14Get", modèle);
      }
 
      // language
      [HttpPost]
      public RedirectResult Lang(string url)
      {
        // we redirect the client to url
        return new RedirectResult(url);
      }
 
    }
  • linha 18: a ação responde apenas a um [POST];
  • linha 19: recupera apenas o parâmetro denominado [url];
  • linha 22: instrui o cliente a redirecionar para este URL.

Mas o que aconteceu ao parâmetro chamado [lang]? Temos agora de nos lembrar que o controlador [SecondController] deriva da classe [I18NController] (linha 1 abaixo). É este controlador que trata do parâmetro [lang]:


  public abstract class I18NController : Controller
  {
    public I18NController()
    {
      // on récupère le contexte de la requête courante
      HttpContext httpContext = System.Web.HttpContext.Current;
      // on examine la requête à la recherche du paramètre [lang]
      // on le cherche dans les paramètres de l'URL
      string langue = httpContext.Request.QueryString["lang"];
      if (langue == null)
      {
        // on le cherche dans les paramètres postés
        langue = httpContext.Request.Form["lang"];
      }
      if (langue == null)
      {
        // on le cherche dans la session de l'utilisateur
        langue = httpContext.Session["lang"] as string;
      }
      if (langue == null)
      {
        // 1er paramètre de l'entête HTTP AcceptLanguages
        langue = httpContext.Request.UserLanguages[0];
      }
      if (langue == null)
      {
        // culture fr-FR
        langue = "fr-FR";
      }
      // on met la langue en session
      httpContext.Session["lang"] = langue;
      // on modifie les cultures du thread            
      Thread.CurrentThread.CurrentCulture = new CultureInfo(langue);
      Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
}

No nosso exemplo, o parâmetro [lang] é passado por referência. Por conseguinte, será encontrado na linha 13, armazenado na sessão na linha 31 e utilizado para atualizar a cultura do thread atual nas linhas 33–34.

O que acontece a seguir? Vamos rever os links:


<td><a href="javascript:postForm('fr-FR','/Second/Action14Get')">Français</a></td>
<td><a href="javascript:postForm('en-US','/Second/Action14Get')">English</a></td>

O URL de redirecionamento é [/Second/Action14Get]. A ação [Action14Get] é, portanto, executada:


public class SecondController : I18NController
    {
      // Action14-GET
      [HttpGet]
      public ViewResult Action14Get()
      {
        return View("Action14Get", new ViewModel14());
      }
...
}

Anteriormente, o construtor da classe [I18NController] é executado:


  public abstract class I18NController : Controller
  {
    public I18NController()
    {
      // on récupère le contexte de la requête courante
      HttpContext httpContext = System.Web.HttpContext.Current;
      // on examine la requête à la recherche du paramètre [lang]
      // on le cherche dans les paramètres de l'URL
      string langue = httpContext.Request.QueryString["lang"];
      if (langue == null)
      {
        // on le cherche dans les paramètres postés
        langue = httpContext.Request.Form["lang"];
      }
      if (langue == null)
      {
        // on le cherche dans la session de l'utilisateur
        langue = httpContext.Session["lang"] as string;
      }
      if (langue == null)
      {
        // 1er paramètre de l'entête HTTP AcceptLanguages
        langue = httpContext.Request.UserLanguages[0];
      }
      if (langue == null)
      {
        // culture fr-FR
        langue = "fr-FR";
      }
      // on met la langue en session
      httpContext.Session["lang"] = langue;
      // on modifie les cultures du thread            
      Thread.CurrentThread.CurrentCulture = new CultureInfo(langue);
      Thread.CurrentThread.CurrentUICulture = Thread.CurrentThread.CurrentCulture;
}

Desta vez, o parâmetro [lang] será encontrado na sessão na linha 18. Vamos supor que o seu valor seja [en-US]. Esta cultura torna-se, portanto, a cultura do thread que executa o pedido (linhas 33–34). Voltemos à ação [Action14Get]:


      // Action14-GET
      [HttpGet]
      public ViewResult Action14Get()
      {
        return View("Action14Get", new ViewModel14());
}

Na linha 5, será criada uma instância do modelo de visualização [ViewModel14]:


  public class ViewModel14 : IValidatableObject
  {
 
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [Display(ResourceType = typeof(MyResources), Name = "chaineaumoins4")]
    [RegularExpression(@"^.{4,}$", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    public string Chaine1 { get; set; }
....

Como a cultura do segmento de execução atual é [en-US], será utilizado o ficheiro [MyResources.en-US.resx]. As mensagens de erro serão, portanto, apresentadas em inglês.

Assim que o modelo [ViewModel14] for instanciado, a vista [Action14Get.cshtml] é apresentada:


@model Exemple_03.Models.ViewModel14
@using Exemple_03.Resources
@using System.Threading
@{
  Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Action14Get</title>
  ...
  <script>
    $(document).ready(function () {
      var culture = '@Thread.CurrentThread.CurrentCulture';
        Globalize.culture(culture);
      });
  </script>
 
</head>
<body>
  <h3>Formulaire ASP.NET MVC - Internationalisation</h3>
  @using (Html.BeginForm("Action14Post", "Second"))
  {
    <table>
      <thead>
        <tr>
          <th>@MyResources.type</th>
          <th>@MyResources.value</th>
          <th>@MyResources.error</th>
        </tr>
      </thead>
      <tbody>
        <tr>
...
        </tr>
<tr>

Como a localização atual do segmento é [en-US], o script incorporado na página nas linhas 15–20 é:


  <script>
    $(document).ready(function () {
      var culture = 'en-US';
        Globalize.culture(culture);
      });
  </script>

Isto garante que a estrutura de validação utilizará os formatos dos EUA (data, moeda, números, etc.). Pela mesma razão, as mensagens nas linhas 30–32 serão recuperadas do ficheiro de recursos [MyResources.en-US.resx] e, por conseguinte, estarão em inglês.

6.5. Exemplos de execução

Aqui estão alguns exemplos de execução:

  • em [1], o formulário em francês; em [2], o formulário em inglês.

  • Em [3], no lado do cliente, as mensagens de erro estão agora em inglês.

Se analisarmos o código-fonte da página, podemos ver que estas mensagens de erro foram incorporadas na página, o que significa que são geradas pela vista ASP.NET [Action14Get] e pelo seu modelo de vista [ViewModel14]:


        <tr>
          <td><label for="Reel1">Real number</label></td>
          <td><input class="text-box single-line" data-val="true" data-val-number="The field Real number must be a number." data-val-required="Required data" id="Reel1" name="Reel1" type="text" value="0" /></td>
          <td><span class="field-validation-valid" data-valmsg-for="Reel1" data-valmsg-replace="true"></span></td>
        </tr>
        <tr>
          <td><label for="Reel2">Real number in range [10.2-11.3]</label></td>
          <td><input class="text-box single-line" data-val="true" data-val-number="The field Real number in range [10.2-11.3] must be a number." data-val-range="Invalid data" data-val-range-max="11.3" data-val-range-min="10.2" data-val-required="Required data" id="Reel2" name="Reel2" type="text" value="0" /></td>
          <td><span class="field-validation-valid" data-valmsg-for="Reel2" data-valmsg-replace="true"></span></td>
</tr>

6.6. Internacionalização da data

A internacionalização é uma questão complexa. Vejamos a propriedade [Date1] e o seu calendário:

Image

Podemos ver que o calendário é francês, apesar de a cultura da página ser [en-US]. No HTML5, existe um atributo [lang] que permite definir o idioma da página ou de um componente da página. Podemos então escrever o seguinte código na vista [Action14Get.cshtml]:


@model Exemple_03.Models.ViewModel14
@using Exemple_03.Resources
@using System.Threading
@{
  Layout = null;
  var lang = Session["lang"] as string;  
}
 
<!DOCTYPE html>
 
<html lang="@lang">
<head>
...

  • linha 6: recuperar a localização da sessão;
  • linha 11: definimos o atributo [lang] da página para este valor.

Os testes mostram que o calendário permanece em francês mesmo quando a página é apresentada em inglês. Existe também um problema com o outro campo de data no formulário:

Em [1], a data continua a ser solicitada no formato francês dd/mm/aaaa (20/11/2013), enquanto o formato americano é mm/dd/aaaa (21/10/2013). Vamos tentar resolver estes dois problemas com uma nova vista e um novo modelo de vista.

O jQuery UI é um projeto derivado do projeto jQuery e oferece componentes de formulário, incluindo um calendário. Este calendário pode ser localizado. É isso que iremos demonstrar.

Para começar, vamos adicionar o [jQuery UI] ao nosso projeto.

Assim que o jQuery UI estiver instalado, surgem novos elementos no projeto:

  • em [1], a biblioteca [JQuery UI] nas versões normal e minimizada;
  • em [2], a folha de estilo [JQuery UI];

O calendário jQuery UI está em inglês por predefinição. Para o internacionalizar, é necessário adicionar os scripts disponíveis no URL [https://github.com/jquery/jquery-ui/tree/master/ui/i18n]:

Para ter o calendário jQuery UI em francês, copie o conteúdo do ficheiro [jquery.ui.datepicker-fr.js] acima para a pasta [Scripts] do projeto.

O código para a nova vista [Action15.cshtml] é obtido copiando a vista anterior [Action14.cshtml] e, em seguida, modificando-a. Apresentaremos apenas as alterações:


@model Exemple_03.Models.ViewModel15
@using Exemple_03.Resources
@using System.Threading
@{
  Layout = null;
}
 
<!DOCTYPE html>
 
<html lang="@Model.Culture">
<head>
  <meta name="viewport" content="width=device-width" />
  <title>Action15</title>
...
  <link rel="stylesheet" href="~/Content/themes/base/jquery-ui.css" />
  <script type="text/javascript" src="~/Scripts/jquery-ui-1.10.3.js"></script>
  <script type="text/javascript" src="~/Scripts/jquery.ui.datepicker-fr.js"></script>
  <script>
    $(document).ready(function () {
      var culture = '@Thread.CurrentThread.CurrentCulture';
      Globalize.culture(culture);
      $("#Date1").datepicker($.datepicker.regional['@Model.Regionale']);
    });
  </script>
</head>
<body>
  <h3>@MyResources.titre</h3>
  @using (Html.BeginForm("Action15", "Second"))
  {
    <table>
...
        <tr>
          <td>@Html.LabelFor(m => m.Date1)</td>
          <td>@Html.TextBox("Date1", Model.StrDate1)</td>
          <td>@Html.ValidationMessageFor(m => m.Date1)</td>
        </tr>
      </tbody>
    </table>
    <p>
      <input type="submit" value="Valider" />
    </p>
  }
  <!-- language selection -->
  @using (Html.BeginForm("Lang", "Second"))
  {
    <table>
      <tr>
        <td><a href="javascript:postForm('fr-FR','/Second/Action15')">Français</a></td>
        <td><a href="javascript:postForm('en-US','/Second/Action15')">English</a></td>
      </tr>
    </table>
  }
</body>
</html>

Nota: Linha 16, ajuste a versão do jQuery UI para corresponder à que descarregou.

  • Linha 15: Faça referência à folha de estilos do jQuery UI;
  • linha 16: faça referência à versão descarregada do jQuery UI;
  • linha 17: faça referência ao script do calendário francês que acabámos de descarregar;
  • linha 34: o método [Html.TextBox] irá gerar aqui uma tag [input], do tipo [text], com id [Date1] e nome [Date1];
  • linha 19: quando a página terminar de carregar, a função [datepicker] do jQuery UI será aplicada ao elemento com id [Date1], ou seja, o elemento na linha 34. Esta função garante que, quando o utilizador selecionar o campo de entrada [Date1], aparecerá um calendário que lhe permitirá selecionar uma data. A função [datepicker] aceita um parâmetro que especifica o idioma do calendário. A variável [@Model.Regionale] deve ser definida como:
  • 'fr' para um calendário em francês,
  • '' para um calendário em inglês;

O modelo para a vista anterior [Action15.cshtml] será o seguinte modelo [ViewModel15]:

O seu código é o do modelo [ViewModel14], ligeiramente modificado. Apresentamos apenas as alterações:


using Exemple_03.Resources;
...
using System.Web;
 
namespace Exemple_03.Models
{
  [Bind(Exclude = "Culture,Regionale,StrDate1,FormatDate")]
  public class ViewModel15 : IValidatableObject
  {
 
...
    [Display(ResourceType = typeof(MyResources), Name = "date1")]
    [RegularExpression(@"\s*\d{2}/\d{2}/\d{4}\s*", ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoIncorrecte")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    public string Regexp1 { get; set; }
 
    [Display(ResourceType = typeof(MyResources), Name = "date2")]
    [Required(ErrorMessageResourceType = typeof(MyResources), ErrorMessageResourceName = "infoRequise")]
    [DataType(DataType.Date)]
    public DateTime Date1 { get; set; }
 
    // manufacturer
    public ViewModel15()
    {
      // Culture of the moment
      Culture = HttpContext.Current.Session["lang"] as string;
      cultureInfo=new CultureInfo(Culture);
      // Regional calendar JQuery
      Regionale = MyResources.ResourceManager.GetObject("regionale", cultureInfo).ToString();
      // date format
      FormatDate = MyResources.ResourceManager.GetObject("formatDate", cultureInfo).ToString();
    }
 
 
 
    // validation
    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
      // error list
      List<ValidationResult> résultats = new List<ValidationResult>();
      // the same error msg for all
      string errorMessage = MyResources.ResourceManager.GetObject("infoIncorrecte", cultureInfo).ToString();
...
      // Regexp1
      try
      {
        DateTime.ParseExact(Regexp1, FormatDate, cultureInfo);
      }
      catch
      {
        résultats.Add(new ValidationResult(errorMessage, new string[] { "Regexp1" }));
      }
 
      // return the list of errors
      return résultats;
 
    }
 
    // fields outside the action model
    public string Culture { get; set; }
    public string Regionale { get; set; }
    public string StrDate1 { get; set; }
    public string FormatDate { get; set; }
 
    // local data
    private CultureInfo cultureInfo;
  }
}

Em comparação com o modelo anterior [ViewModel14], temos quatro propriedades adicionais:

  • linha 60: a localização da vista, 'fr-FR' ou 'en-US'. Esta localização é inicializada no construtor na linha 26;
  • linha 61: a cultura regional do calendário jQuery, 'fr' para um calendário francês, '' para um calendário inglês. Este campo é inicializado na linha 29 do construtor;
  • linha 63: o formato de data da linha 15: «dd/MM/yyyy» para uma data francesa, «MM/dd/yyyy» para uma data inglesa. Este campo é inicializado na linha 31 do construtor;
  • linha 62: a string a apresentar no campo de entrada [Date1]. Este campo será inicializado pela ação;
  • linha 47: a data [Regexp1] é agora validada de acordo com o formato da localização atual.

Os valores das propriedades [Regionale] e [FormatDate] encontram-se nos ficheiros de recursos [MyResources]. Os ficheiros de recursos em francês [MyResources] [MyResources.fr-FR] [1] e o ficheiro de recursos em inglês [2] alteram-se da seguinte forma:

Estamos quase prontos. Adicionamos uma ação [Action15] ao controlador [SecondController]:


      // Action15
      public ViewResult Action15(FormCollection formData)
      {
        // method HTTP
        string method = Request.HttpMethod.ToLower();
        // model
        ViewModel15 modèle = new ViewModel15();
        if (method == "get")
        {
          modèle.StrDate1 = "";
        }
        else
        {
          TryUpdateModel(modèle, formData);
          modèle.StrDate1 = modèle.Date1.ToString(modèle.FormatDate);
        }
        // view display
        return View("Action15", modèle);
}

  • Linha 2: O método [Action15] trata tanto de pedidos [GET] como [POST]. No último caso, os valores enviados são recuperados no parâmetro [formData];
  • linha 5: o método HTTP da solicitação é recuperado;
  • linha 7: o modelo de visualização a ser apresentado (o formulário) é criado;
  • linhas 8–11: no caso de uma solicitação [GET], o campo de entrada [Date1] é inicializado com uma string vazia;
  • linhas 12–16: no caso de uma solicitação [POST]:
    • linha 14: o modelo é inicializado com os valores enviados,
    • linha 15: o campo de entrada [Date1] é inicializado com uma string que corresponde ao valor de [Date1] formatado de acordo com a localidade atual [dd/MM/aaaa] para uma data em francês, [MM/dd/aaaa] para uma data em inglês;
  • linha 18: a vista [Action15.cshtml] é apresentada com o seu modelo.

Vamos realizar alguns testes:

  • em [1], um calendário em francês quando a página está em francês;
  • em [2], um calendário em inglês quando a página estiver em inglês;
  • em [3], uma data no formato francês quando a página está em francês;
  • em [4], a mesma data no formato inglês quando a página estiver em inglês;

6.7. Conclusão

Como podemos ver, o tema da internacionalização de aplicações é complexo...

https://stahe.gihub.io
Este curso-tutorial escrito por Serge Tahé é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Partilha nas mesmas condições 3.0 não adaptada.