Compartir a través de

Tutorial: Incrustar recursos localizados en un archivo JavaScript

  • Artículo

Actualización: noviembre 2007

En este tutorial se muestra cómo incluir un archivo ECMAScript (JavaScript) como un recurso incrustado en un ensamblado, y cómo incluir las cadenas adaptadas para su uso en el archivo JavaScript. Cuando existe un componente de script de cliente que se debe distribuir con el ensamblado, se incrusta un archivo JavaScript en el ensamblado. Se puede hacer referencia al archivo JavaScript en una aplicación web que registra el ensamblado. Los recursos localizados se incrustan cuando es necesario modificar valores que usa el archivo JavaScript para diferentes idiomas y referencias culturales.

Requisitos previos

Para implementar los procedimientos de este tutorial necesitará:

  • Microsoft Visual Studio 2008.

    Nota:

    No puede usar Visual Web Developer Express, porque Visual Web Developer Express no permite crear el proyecto de bibliotecas de clase que precisa el tutorial.

Crear un ensamblado que contiene un archivo JavaScript incrustado

Para empezar, creará un ensamblado (archivo .dll) que contiene el archivo JavaScript que desea tratar como un recurso. Para ello, creará un proyecto de bibliotecas de clase en Visual Studio, que crea un ensamblado como resultado.

Para incrustar un archivo de script de cliente y recursos en un ensamblado

  1. En Visual Studio, cree un nuevo proyecto de bibliotecas de clase denominado LocalizingScriptResources.

  2. Agregue referencias a los ensamblados System.Web y System.Web.Extensions al proyecto.

  3. Agregue un nuevo archivo JScript al proyecto denominado CheckAnswer.js.

  4. Agregue el código siguiente al archivo CheckAnswer.js.

    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;
    }
}

    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;
    }
}

    El script comprueba el resultado del usuario en la suma de dos números. Usa la función alert para permitir al usuario conocer si la respuesta es correcta. El mensaje mostrado en el cuadro de diálogo alert se lee de un recurso localizado sin una devolución de datos al servidor.

    En el script se usa un marcador de posición denominado Answer para identificar los archivos de recursos que contienen las cadenas localizadas. El marcador de posición Answer se definirá más adelante en este procedimiento.

  5. En la ventana Propiedades de CheckAnswer.js, establezca Acción de compilación en Recurso incrustado.

  6. Agregue al proyecto una clase denominada ClientVerification.

  7. Reemplace el código del archivo de clase ClientVerification por el siguiente código:

    Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Resources

Public Class ClientVerification
    Inherits Control

    Private _button As Button
    Private _firstLabel As Label
    Private _secondLabel As Label
    Private _answer As TextBox
    Private _firstInt As Int32
    Private _secondInt As Int32


    Protected Overrides Sub CreateChildControls()
        Dim random = New Random()
        _firstInt = random.Next(0, 20)
        _secondInt = random.Next(0, 20)

        Dim rm = New ResourceManager("LocalizingScriptResources.VerificationResources", Me.GetType().Assembly)
        Controls.Clear()

        _firstLabel = New Label()
        _firstLabel.ID = "firstNumber"
        _firstLabel.Text = _firstInt.ToString()

        _secondLabel = New Label()
        _secondLabel.ID = "secondNumber"
        _secondLabel.Text = _secondInt.ToString()

        _answer = New TextBox()
        _answer.ID = "userAnswer"

        _button = New Button()
        _button.ID = "Button"
        _button.Text = rm.GetString("Verify")
        _button.OnClientClick = "return CheckAnswer();"

        Controls.Add(_firstLabel)
        Controls.Add(New LiteralControl(" + "))
        Controls.Add(_secondLabel)
        Controls.Add(New LiteralControl(" = "))
        Controls.Add(_answer)
        Controls.Add(_button)
    End Sub

End Class

    using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Resources;


namespace LocalizingScriptResources
{
    public class ClientVerification : Control
    {
        private Button _button;
        private Label _firstLabel;
        private Label _secondLabel;
        private TextBox _answer;
        private int _firstInt;
        private int _secondInt;

        protected override void CreateChildControls()
        {
            Random random = new Random();
            _firstInt = random.Next(0, 20);
            _secondInt = random.Next(0, 20);

            ResourceManager rm = new ResourceManager("LocalizingScriptResources.VerificationResources", this.GetType().Assembly);
            Controls.Clear();

            _firstLabel = new Label();
            _firstLabel.ID = "firstNumber";
            _firstLabel.Text = _firstInt.ToString();

            _secondLabel = new Label();
            _secondLabel.ID = "secondNumber";
            _secondLabel.Text = _secondInt.ToString();

            _answer = new TextBox();
            _answer.ID = "userAnswer";

            _button = new Button();
            _button.ID = "Button";
            _button.Text = rm.GetString("Verify");
            _button.OnClientClick = "return CheckAnswer();";

            Controls.Add(_firstLabel);
            Controls.Add(new LiteralControl(" + "));
            Controls.Add(_secondLabel);
            Controls.Add(new LiteralControl(" = "));
            Controls.Add(_answer);
            Controls.Add(_button);
        }
    }
}

    El código crea un control ASP.NET personalizado. Contiene dos controles Label, un control TextBox y un control Button. El código muestra dos números enteros generados de forma aleatoria y proporciona un cuadro de texto para la respuesta. Cuando se hace clic en el botón, se llama a la función CheckAnswer.

  8. Agregue un archivo de recursos al proyecto y denomínelo VerificationResources.resx.

  9. Agregue un recurso de cadena denominado Correct con un valor "Yes, your answer is correct".

  10. Agregue un recurso de cadena denominado Incorrect con un valor "No, your answer is incorrect".

  11. Agregue un recurso de cadena denominado Verify con un valor "Verify Answer".

    Este recurso no se recupera con el script de cliente. De hecho, se usa para establecer la propiedad Text del control Button cuando se crea el botón.

  12. Guarde y cierre el archivo VerificationResources.resx.

  13. Agregue un archivo de recursos denominado VerificationResources.resx al proyecto.

    Este archivo contendrá las cadenas del recurso en español.

  14. Agregue un recurso de cadena denominado Correcta con un valor "Sí, la respuesta es correcta".

  15. Agregue un recurso de cadena denominado Incorrecta con un valor "No, la respuesta no es correcta".

  16. Agregue un recurso de cadena denominado Comprobar con un valor "Comprobar la respuesta".

    Como en el recurso "Verify" que creó en inglés, este recurso no se recupera con el script de cliente. De hecho, se usa para establecer la propiedad Text del control Button cuando se crea el botón.

  17. Guarde y cierre el archivo VerificationResources.es.resx.

  18. Agregue la siguiente línea al archivo AssemblyInfo. Puede especificar cualquier nombre para el nombre de tipo en el atributo ScriptResourceAttribute, pero debe coincidir con el nombre de tipo que se usa en el script de cliente. En este ejemplo, se establece en Answer.

    <Assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")> 
<Assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")> 

    [assembly: System.Web.UI.WebResource("LocalizingScriptResources.CheckAnswer.js", "application/x-javascript")]
[assembly: System.Web.UI.ScriptResource("LocalizingScriptResources.CheckAnswer.js", "LocalizingScriptResources.VerificationResources", "Answer")]
    Nota:

    El archivo AssemblyInfo.vb está en el nodo My Project del Explorador de soluciones. Si no ve ningún archivo en el nodo My Project, en el menú Proyecto, haga clic en Mostrar todos los archivos. El archivo AssemblyInfo.cs está en el nodo Propiedades del Explorador de soluciones.

    La definición WebResource debe incluir el espacio de nombres predeterminado del ensamblado y el nombre del archivo .js. La definición ScriptResource no incluye la extensión de nombre de archivo ni los archivos .resx localizados.

  19. Genere el proyecto.

    Cuando la compilación finalice, tendrá un ensamblado denominado LocalizingScriptResources.dll. El código JavaScript del archivo CheckAnswer.js y los recursos de los dos archivos .resx se incrustan en este ensamblado como recursos.

    También tendrá un ensamblado denominado LocalizingScriptResources.resources.dll (un ensamblado satélite) que contiene los recursos en español para el código de servidor.

Referencia al script incrustado y a los recursos

Ahora puede usar el ensamblado en un sitio web ASP.NET habilitado para AJAX. Podrá leer el archivo .js y los valores de recurso en el script de cliente.

Nota:

Aunque puede crear el proyecto de bibliotecas de clase y el sitio web en la misma solución de Visual Studio, en este tutorial no se supone que se haga esto. Si los proyectos se encuentran en soluciones independientes, se emula la forma en que un desarrollador de controles y un desarrollador de páginas funcionarían por separado. Sin embargo, por mayor comodidad, puede crear ambos proyectos en la misma solución y realizar pequeños ajustes en los procedimientos del tutorial.

Para hacer referencia al script incrustado y a los recursos

  1. En Visual Studio, cree un nuevo sitio web habilitado para AJAX.

  2. Agregue una carpeta Bin bajo la carpeta raíz del sitio web.

  3. Agregue el ensamblado LocalizingScriptResources.dll del proyecto de bibliotecas de clase a la carpeta Bin.

    Nota:

    Si creó el proyecto de bibliotecas de clase y el sitio web en la misma solución Visual Studio, puede agregar una referencia del proyecto de bibliotecas de clase al sitio web. Para obtener información detallada, vea Cómo: Agregar una referencia a un proyecto de Visual Studio en un sitio Web.

  4. Cree una carpeta en la carpeta Bin y denomínela es (por español).

  5. Agregue el ensamblado satélite LocalizingScriptResources.resources.dll de la carpeta es en el proyecto LocalizingScriptResources a la carpeta es del sitio web.

  6. Agregue una nueva página web ASP.NET al proyecto.

  7. Reemplace el código de la página por el siguiente código:

    <%@ Page Language="VB" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script >

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If (IsPostBack) Then
            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 Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification ID="ClientVerification1"  ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

    <%@ Page Language="C#" AutoEventWireup="true" UICulture="auto" Culture="auto" %>
<%@ Register TagPrefix="Samples" Namespace="LocalizingScriptResources" Assembly="LocalizingScriptResources" %>
<script >

    protected void Page_Load(object sender, EventArgs e)
    {
        if (IsPostBack)
        {
            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 >
    <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 Assembly="LocalizingScriptResources" Name="LocalizingScriptResources.CheckAnswer.js" />
        </Scripts>
        </asp:ScriptManager>
        <div>
        <Samples:ClientVerification  ></Samples:ClientVerification>
        </div>
    </form>
</body>
</html>

    El control que creó en el proyecto LocalizingScriptResources se incluye en la página. Este control muestra dos numeran para que el usuario sume y un control TextBox para que el usuario escriba una respuesta. También muestra un botón que llama al script de la función CheckAnswer cuando se hace clic en él. La función CheckAnswer se ejecuta en el explorador y muestra un mensaje localizado que indica si la respuesta es correcta.

    Debe establecer la propiedad EnableScriptLocalization del objeto ScriptManager en true para permitir que el control ScriptManager recupere los recursos localizados. También debe establecer la referencia cultural y referencia cultural de la interfaz de usuario en "automático" para mostrar las cadenas que se basan en la configuración del explorador.

    La página contiene un control DropDownList que puede usar para cambiar la configuración de idioma sin cambiar los valores en el explorador. Cuando la propiedad SelectedIndex del control DropDownList cambia, la propiedad CurrentUICulture de la instancia CurrentThread se establece en el valor que ha seleccionado.

  8. Ejecute el proyecto.

    Verá un problema de suma con dos números generados de forma aleatoria y un control TextBox para escribir una respuesta. Al escribir una respuesta y hacer clic el botón Verify Answer, ve la respuesta en una ventana de mensajes que indica si la respuesta es correcta. De forma predeterminada, la respuesta se devolverá en inglés.

    Sin embargo, si ha establecido el español como idioma preferido en el explorador, la respuesta aparecerá en español. Puede cambiar el idioma de la respuesta si selecciona un idioma en el control DropDownList o si cambia el idioma preferido en el explorador.

Revisión

Este tutorial ha presentado el concepto de incrustar un archivo JavaScript como un recurso en un ensamblado y de incluir cadenas localizadas. Se puede hacer referencia y obtener acceso al archivo de script incrustado en una aplicación web que contiene el ensamblado. Las cadenas localizadas se mostrarán en función de la configuración de idioma en el explorador o del idioma proporcionado por el usuario.

Vea también

Tareas

Información general sobre la localización de recursos para bibliotecas de componentes

Tutorial: Agregar recursos localizados a un archivo JavaScript