Demonstra Passo a passo: Adicionando recursos localizados em um arquivo JavaScript

Artigo
10/15/2014

Essa explicação passo a passo mostra como incluir recursos localizados em um arquivo ECMAScript (JavaScript).Nessa explicação passo a passo os recursos são sequências de caracteres.Você inclui recursos localizados em um arquivo JavaScript quando você tiver criado um arquivo JavaScript autônomo e quando seu aplicativo deve fornecer valores diferentes para diferentes idiomas e culturas.

Um programa autônomo JavaScript não está incorporado como um recurso em um conjunto de módulos (assembly) e, portanto, não pode acessar valores em um arquivo de recursos.Em vez disso, você inclui os valores da sequência de caracteres localizadas diretamente na arquivo de script.Os valores localizados são recuperados quando o script é executado no navegador.

Você deve criar um arquivo de script separado para cada idioma e cultura suportados.Em cada arquivo de script, você incluir um objeto no formato JSON que contém os valores localizados dos recursos para esse idioma e cultura.

Pré-requisitos

Para implementar os procedimentos deste tutorial você precisa:

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express Edition.
Um site da Web ASP.NET habilitado para AJAX.

Criando um arquivo de JavaScript que contém valores de recursos localizados

Para adicionar valores de recursos à um arquivo JavaScript

Na diretório raiz do Web site, adicione uma pasta chamada Scripts.

Na pasta Scripts, adicione um arquivo JScript chamado CheckAnswer.js e em seguida, adicione o seguinte código ao arquivo.

Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}

Answer={
"Verify":"Verify Answer",
"Correct":"Yes, your answer is correct.",
"Incorrect":"No, your answer is incorrect."
};

Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}

Answer={
"Verify":"Verify Answer",
"Correct":"Yes, your answer is correct.",
"Incorrect":"No, your answer is incorrect."
};

O código de script adiciona um manipulador para o evento load da classe Sys.Application.O manipulador define o texto do botão.Em vez de configurar o texto como uma sequência de caracteres, ele determina o texto como um valor que é definido em uma classe denominada Answer.Verify.Isso permite que o código use um valor localizado.

O script também contém uma função que verifica o resultado do usuário para adicionar dois números.Ele usa a função alert para permitir que o usuário saiba se a resposta está correta.Como no botão texto, a mensagem exibida na caixa de diálogo alert é definida como um valor da sequência de caracteres localizado sem um postback para o servidor.

Um tipo chamado Answer é usado no script para definir o conjunto de valores localizadas a serem usados no arquivo.O tipo Answer é definido no formato JSON no final do arquivo CheckAnswer.js.

Na pasta scripts, adicione um arquivo JScript chamado CheckAnswer.it IT.js.Adicione o seguinte código ao arquivo.

Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}
Answer={
"Verify":"Verificare la risposta",
"Correct":"Si, la risposta e’ corretta.",
"Incorrect":"No, la risposta e’ sbagliata."
};

Sys.Application.add_load(SetButton);
function SetButton()
{
    $get('Button1').value = Answer.Verify;
}
function CheckAnswer()
{
    var firstInt = $get('firstNumber').innerText;
    var secondInt = $get('secondNumber').innerText;
    var userAnswer = $get('userAnswer');

    if ((Number.parseLocale(firstInt) + Number.parseLocale(secondInt)) == userAnswer.value)
    {
        alert(Answer.Correct);
        return true;
    }
    else
    {
        alert(Answer.Incorrect);
        return false;
    }
}
Answer={
"Verify":"Verificare la risposta",
"Correct":"Si, la risposta e’ corretta.",
"Incorrect":"No, la risposta e’ sbagliata."
};

Este arquivo é idêntico ao arquivo CheckAnswer.js, exceto pelo fato que ele contém um tipo Answer com valores em italiano.

Para fornecer texto localizado em outros idiomas, você pode criar mais arquivos JavaScript.O código de JavaScript é sempre o mesmo, mas os valores que são definidos no tipo Answer estão em diferentes idiomas.O nome de cada arquivo JavaScript deve incluir o idioma apropriado e a localidade.

Usando valores de recursos de JavaScript em uma página ASP.NET

Agora você pode criar um página ASP.NET que usa o código de script que você criou.A página permite que você teste o efeito de alterar um idioma.

Para usar valores de recursos JavaScript em um página da Web do ASP.NET

Crie um página ASP.NET.

Substitua o conteúdo de página da Web pela marcação e código a seguir:

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

<script >


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        Dim _firstInt As Int32
        Dim _secondInt As Int32

        Dim _random As New Random()
        _firstInt = _random.Next(0, 20)
        _secondInt = _random.Next(0, 20)

        firstNumber.Text = _firstInt.ToString()
        secondNumber.Text = _secondInt.ToString()

        If (IsPostBack) Then
            userAnswer.Text = ""
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
        Else
            selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = True
        End If
    End Sub

    Protected Sub selectLanguage_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
        System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue)
    End Sub
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1"  >
        <asp:DropDownList  AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
            <asp:ListItem Text="English" Value="en"></asp:ListItem>
            <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
        </asp:DropDownList>
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" >
        <Scripts>
            <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" ></asp:Label>
        +
        <asp:Label ID="secondNumber" ></asp:Label>
        =
        <asp:TextBox ID="userAnswer" ></asp:TextBox>
        <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" ></asp:Label>
        </div>
    </form>
</body>
</html>

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


    protected void Page_Load(object sender, EventArgs e)
    {   
        int _firstInt;
        int _secondInt;

        Random random = new Random();
        _firstInt = random.Next(0, 20);
        _secondInt = random.Next(0, 20);

        firstNumber.Text = _firstInt.ToString();
        secondNumber.Text = _secondInt.ToString();

        if (IsPostBack)
        {
            userAnswer.Text = "";
            System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
        }
        else
        {
            selectLanguage.Items.FindByValue(System.Threading.Thread.CurrentThread.CurrentUICulture.TwoLetterISOLanguageName).Selected = true;
        }
    }

    protected void selectLanguage_SelectedIndexChanged(object sender, EventArgs e)
    {
        System.Threading.Thread.CurrentThread.CurrentUICulture = System.Globalization.CultureInfo.CreateSpecificCulture(selectLanguage.SelectedValue);
    }
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title>Client Localization Example</title>
</head>
<body>
    <form id="form1"  >
        <asp:DropDownList  AutoPostBack="true" ID="selectLanguage" OnSelectedIndexChanged="selectLanguage_SelectedIndexChanged">
            <asp:ListItem Text="English" Value="en"></asp:ListItem>
            <asp:ListItem Text="Italian" Value="it"></asp:ListItem>
        </asp:DropDownList>
        <br /><br />
        <asp:ScriptManager ID="ScriptManager1" EnableScriptLocalization="true" >
        <Scripts>
            <asp:ScriptReference Path="scripts/CheckAnswer.js" ResourceUICultures="it-IT" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <asp:Label ID="firstNumber" ></asp:Label>
        +
        <asp:Label ID="secondNumber" ></asp:Label>
        =
        <asp:TextBox ID="userAnswer" ></asp:TextBox>
        <asp:Button ID="Button1"  OnClientClick="return CheckAnswer()" />
        <br />
        <asp:Label ID="labeltest" ></asp:Label>
        </div>
    </form>
</body>
</html>

A marcação cria um controle DropDownList, dois controles Label, um controle TextBox e um controle Button.A página exibe dois inteiros gerados aleatoriamente e pede ao usuário para adicioná-los, e fornece um caixa de texto para uma resposta.Quando o botão é clicado, a função CheckAnswer do JavaScript é chamada.

O controle DropDownList permite que você altere as configurações de idioma sem alterar as configurações do navegador.Quando a propriedade SelectedIndex do controle DropDownList é alterada, a propriedade CurrentUICulture da instância CurrentThread é definida como o valor que você selecionou.

Observação:
Para obter informações sobre como conjunto informações culturais para um segmento, consulte Como: conjunto a cultura e UI Culture for ASP.NET Web página globalização.

O controle ScriptManager inclui uma referência para o arquivo de script CheckAnswer.js.Isso faz com que a página recupere o arquivo CheckAnswer.js quando ela é executada.

A propriedade ResourceUICultures da referência é definida como " it-IT " para indicar que o site contém uma versão em italiano do script.Como resultado, o objeto ScriptManager recupera a versão em italiano quando você seleciona "Italiano" no controle DropDownList ou quando você define "Italiano" como o idioma padrão no navegador.

Execute a página.

Você verá um problema de adição com dois números gerados aleatoriamente e um controle TextBox para inserir uma resposta.Quando você digitar uma resposta e clica no botão Verificar Resposta, você vê a resposta em uma janela de mensagem que informa se a resposta é correta.

Por padrão, a resposta é exibida em inglês.
Altere o idioma para Italiano selecionando "Italiano" na lista suspensa.
Execute o teste novamente.

Desta vez, a resposta está em italiano

Revisão

Essa explicação passo a passo mostrou como adicionar valores de recurso localizado para um arquivo autônomo JavaScript.Os valores localizadas são criados como objetos no formato JSON que fazem parte de arquivos JavaScript individuais localizados.Valores localizados são exibidos consultando o objeto JSON em vez de usando sequências de caracteres pré-programadas.As sequências de caracteres localizados são exibidas com base na configuração de idioma do navegador ou na configuração de idioma que é fornecida pelo usuário.

Consulte também

Tarefas

Visão geral da Localização de Recursos para Componentes de Bibliotecas

Demonstra Passo a passo: A incorporação de recursos localizados de um arquivo JavaScript

Compartilhar via