Procédure pas à pas : incorporation de ressources localisées pour un fichier JavaScript

Article
10/22/2014

Mise à jour : novembre 2007

Cette procédure pas à pas explique comment inclure un fichier ECMAScript (JavaScript) comme ressource incorporée dans un assembly, ainsi que comment inclure des chaînes localisées à utiliser dans le fichier JavaScript. Un fichier JavaScript doit être intégré dans un assembly lorsqu'un composant de script client doit être distribué avec l'assembly. Le fichier JavaScript peut être référencé à partir d'une application Web qui enregistre l'assembly. Vous devez intégrer les ressources localisées lorsque les valeurs utilisées par le fichier JavaScript pour des langues et cultures différentes doivent être modifiées.

Composants requis

Pour implémenter les étapes de cette procédure pas à pas, vous aurez besoin de :

Microsoft Visual Studio 2008.

Remarque :
Vous ne pouvez pas utiliser Visual Web Developer Express car Visual Web Developer Express ne vous permet pas de créer le projet de bibliothèque de classes requis dans la procédure pas à pas.

Création d'un assembly contenant un fichier JavaScript incorporé

Vous commencerez par créer un assembly (fichier .dll) qui contient le fichier JavaScript que vous souhaitez traiter en tant que ressource. Vous allez pour cela créer un projet de bibliothèque de classes dans Visual Studio afin de produire un assembly.

Pour incorporer un fichier de script client et ressources dans un assembly

Dans Visual Studio, créez un projet de bibliothèque de classes nommé LocalizingScriptResources.
Ajoutez au projet des références aux assemblys System.Web et System.Web.Extensions.
Ajoutez un nouveau fichier JScript nommé CheckAnswer.js au projet.

Ajoutez le code suivant au fichier 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;
    }
}

Le script vérifie le résultat de l'utilisateur pour l'ajout de deux nombres. Il utilise la fonction alert pour permettre à l'utilisateur de savoir si la réponse est correcte. Le message affiché dans la boîte de dialogue alert est lu à partir d'une ressource localisée sans publication (postback) sur le serveur.

Un espace réservé nommé Answer est utilisé dans le script pour identifier les fichiers de ressources qui contiennent les chaînes localisées. L'espace réservé Answer sera défini dans la suite de cette procédure.

Dans la fenêtre Propriétés du fichier CheckAnswer.js, affectez l'option Ressource incorporée à Action de génération.
Ajoutez une classe au projet nommé ClientVerification.

Remplacez le code du fichier de classe ClientVerification par le code suivant :

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

Le code crée un contrôle ASP.NET personnalisé. Il contient deux contrôles Label, un contrôle TextBox et un contrôle Button. Le code affiche deux entiers générés aléatoirement et fournit une zone de texte pour une réponse. La fonction CheckAnswer est appelée par un clic sur le bouton.

Ajoutez un fichier de ressources au projet et nommez-le VerificationResources.resx.
Ajoutez une ressource de type chaîne nommée Correct et ayant la valeur « Oui, votre réponse est correcte ».
Ajoutez une ressource de type chaîne nommée Incorrect et ayant la valeur « Non, votre réponse est incorrecte ».
Ajoutez une ressource de type chaîne nommée Vérifiez et ayant la valeur « Vérifiez la réponse ».

Cette ressource n'est pas récupérée à l'aide du script client. Elle est en revanche utilisée pour définir la propriété Text du contrôle Button lors de la création du bouton.
Enregistrez et fermez le fichier VerificationResources.resx.
Ajoutez un fichier de ressources nommé VerificationResources.resx.

Ce fichier contiendra des chaînes de ressources en italien.
Ajoutez une ressource de chaîne nommée Correct et ayant « Si, la risposta e' corretta ».
Ajoutez une ressource de chaîne nommée Incorrect et ayant la valeur « No, la risposta e' sbagliata ».
Ajoutez une ressource de chaîne nommée Vérifiez et ayant la valeur « Verificare la risposta ».

Comme pour la ressource « Vérifiez » que vous avez créée en français, cette ressource n'est pas récupérée à l'aide du script client. Elle est en revanche utilisée pour définir la propriété Text du contrôle Button lors de la création du bouton.
Enregistrez et fermez le fichier VerificationResources.it.resx.

Ajoutez la ligne suivante au fichier AssemblyInfo. Vous pouvez spécifier tout nom pour le nom de type dans l'attribut ScriptResourceAttribute, mais il doit correspondre au nom de type utilisé dans le script client. Dans cet exemple, il s'agit de 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")]

Remarque :
Le fichier AssemblyInfo.vb est dans le nœud My Project de l'Explorateur de solutions. Si vous ne voyez pas de fichiers dans le nœud My Project, procédez comme suit : dans le menu Projet, cliquez sur Afficher tous les fichiers. Le fichier AssemblyInfo.cs est dans le nœud Propriétés de l'Explorateur de solutions.

La définition WebResource doit inclure l'espace de noms par défaut de l'assembly et le nom du fichier .js. La définition ScriptResource n'inclut pas l'extension de nom de fichier ni les fichiers .resx localisés.

Générez le projet.

La compilation produit un assembly nommé LocalizingScriptResources.dll. Le code JavaScript dans le fichier CheckAnswer.js et les ressources dans les deux fichiers .resx sont intégrés en tant que ressources dans cet assembly.

Vous aurez également un assembly nommé LocalizingScriptResources.resources.dll (un assembly satellite) qui contient les ressources italiennes pour le code serveur.

Référencement du script et des ressources intégrés

Vous pouvez maintenant utiliser l'assembly dans un site Web ASP.NET AJAX. Vous serez en mesure de lire le fichier .js et les valeurs de ressource dans le script client.

Remarque :
Bien que vous puissiez créer le projet de bibliothèque de classes et le site Web dans la même solution Visual Studio, cette procédure pas à pas ne présuppose pas ce fait. Avoir les projets dans des solutions séparées permet de simuler la manière dont travailleraient un développeur de contrôles et un développeur de pages séparément. Toutefois, par commodité, vous pouvez créer les deux projets dans la même solution et apporter de petites modifications aux étapes de la procédure pas à pas.

Bien que vous puissiez créer le projet de bibliothèque de classes et le site Web dans la même solution Visual Studio, cette procédure pas à pas ne présuppose pas ce fait. Avoir les projets dans des solutions séparées permet de simuler la manière dont travailleraient un développeur de contrôles et un développeur de pages séparément. Toutefois, par commodité, vous pouvez créer les deux projets dans la même solution et apporter de petites modifications aux étapes de la procédure pas à pas.

Pour référencer le script et les ressources intégrés

Dans Visual Studio, créez un site Web AJAX.
Ajoutez un dossier Bin sous la racine du site Web.

Ajoutez l'assembly LocalizingScriptResources.dll du projet de bibliothèque de classes au dossier Bin.

Remarque :
Si vous avez créé le projet de bibliothèque de classes et le site Web dans la même solution Visual Studio, vous pouvez ajouter une référence au projet de bibliothèque de classes dans le site Web. Pour plus d'informations, consultez Comment : ajouter une référence à un projet Visual Studio dans un site Web.

Créez un dossier dans le dossier Bin et nommez-le it (pour italien).
Ajoutez l'assembly satellite LocalizingScriptResources.resources.dll du dossier it du projet LocalizingScriptResources au dossier it du site Web.
Ajoutez une nouvelle page Web ASP.NET au projet.

Remplacez le code de la page par le code suivant :

<%@ 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>

Le contrôle que vous avez créé dans le projet LocalizingScriptResources est inclus dans la page. Ce contrôle affiche deux nombres que l'utilisateur doit ajouter et un contrôle TextBox pour lui permettre d'entrer une réponse. Il affiche également un bouton qui appelle le script dans la fonction CheckAnswer lors d'un clic sur le bouton. La fonction CheckAnswer s'exécute dans le navigateur et affiche un message localisé qui indique si la réponse est correcte.

Vous devez affecter à la propriété EnableScriptLocalization de l'objet ScriptManager la valeur true pour permettre au contrôle ScriptManager de récupérer les ressources localisées. Vous devez également affecter à la culture et à la culture d'interface utilisateur la valeur « auto » pour afficher les chaînes basées sur les paramètres du navigateur.

La page contient un contrôle DropDownList que vous pouvez utiliser pour modifier les paramètres de langue sans modifier les paramètres dans le navigateur. Lorsque la propriété SelectedIndex du contrôle DropDownList change, la propriété CurrentUICulture de l'instance de CurrentThread prend la valeur que vous avez sélectionnée.

Exécutez le projet.

Vous allez rencontrer un problème d'addition avec deux nombres générés aléatoirement et un contrôle TextBox pour entrer une réponse. Lorsque vous entrez une réponse et que vous cliquez sur le bouton Vérifiez la réponse, vous consultez la réponse dans une fenêtre de messages qui vous indique si la réponse est correcte. Par défaut, la réponse est retournée en anglais.

Toutefois, si vous avez défini italien comme langue par défaut dans le navigateur, la réponse sera en italien. Vous pouvez modifier la langue de réponse en la sélectionnant dans le contrôle DropDownList ou en modifiant la langue par défaut dans le navigateur.

Récapitulatif

Cette procédure pas à pas a introduit le concept d'incorporation d'un fichier JavaScript en tant que ressource dans un assembly et d'inclusion des chaînes localisées. Le fichier de script intégré peut être référencé et accédé à partir d'une application Web qui contient l'assembly. Les chaînes localisées sont affichées selon le paramètre linguistique du navigateur ou la langue spécifiée par l'utilisateur.

Voir aussi

Tâches

Vue d'ensemble de la localisation de ressources pour les bibliothèques de composants

Procédure pas à pas : ajout de ressources localisées à un fichier JavaScript