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

Article
10/22/2014

Mise à jour : novembre 2007

Cette procédure pas à pas vous indique comment inclure des ressources localisées dans un fichier ECMAScript (JavaScript). Dans cette procédure pas à pas les ressources sont des chaînes. Vous incluez des ressources localisées dans un fichier JavaScript lorsque vous avez créé un fichier JavaScript autonome et que votre application doit fournir des valeurs différentes pour des langues et cultures différentes.

Un JavaScript autonome n'est pas incorporé comme ressource dans un assembly et par conséquent ne peut pas accéder aux valeurs d'un fichier de ressources. À la place, vous incluez directement les valeurs de chaîne localisées dans le fichier de script. Les valeurs localisées sont récupérées lorsque le script est exécuté dans le navigateur.

Vous créez un fichier de script séparé pour chaque langue et culture prises en charge. Dans chaque fichier de script, vous incluez un objet au format JSON qui contient les valeurs de ressources localisées pour cette langue et cette culture.

Composants requis

Pour implémenter les étapes de ce didacticiel, vous aurez besoin de :

Microsoft Visual Studio 2005 ou Microsoft Visual Web Developer Express
Un site Web ASP.NET AJAX.

Création d'un fichier JavaScript qui contient des valeurs de ressource localisées

Pour ajouter des valeurs de ressource à un fichier JavaScript

Dans le répertoire racine du site Web, ajoutez un dossier nommé Scripts.

Dans le dossier Scripts, ajoutez un fichier JScript nommé CheckAnswer.js, puis ajoutez le code suivant au fichier.

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

Le code de script ajoute un gestionnaire pour l'événement de chargement de la classe Sys.Application. Le gestionnaire définit le texte du bouton. Au lieu d'affecter le texte à une chaîne, il affecte au texte une valeur définie dans une classe nommée Answer.Verify. Cela permet au code d'utiliser une valeur localisée.

Le script contient également une fonction qui vérifie le résultat de l'utilisateur pour ajouter deux nombres. Il utilise la fonction alert pour permettre à l'utilisateur de savoir si la réponse est correcte. Comme avec le texte du bouton, le message affiché dans la boîte de dialogue alert a pour valeur une chaîne localisée sans publication (postback) sur le serveur.

Un type nommé Answer est utilisé dans le script pour définir la collection de valeurs localisées à utiliser dans le fichier. Le type Answer est défini au format JSON à la fin du fichier CheckAnswer.js.

Dans le dossier Scripts, ajoutez un fichier JScript nommé CheckAnswer.it-IT.js. Ajoutez le code suivant au fichier.

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

Ce fichier est identique au fichier CheckAnswer.js mais il contient un type Answer avec des valeurs en italien.

Pour fournir le texte localisé dans les autres langues, vous pouvez créer des fichiers JavaScript supplémentaires. Le code JavaScript est toujours le même, mais les valeurs définies dans le type Answer sont dans des langues différentes. Le nom de chaque fichier JavaScript doit inclure la langue et les paramètres régionaux appropriés.

Utilisation des valeurs de ressource JavaScript dans une page ASP.NET

Vous pouvez maintenant créer une page Web ASP.NET qui utilise le code de script que vous avez créé. La page vous permet de tester l'effet de la modification d'une langue.

Pour utiliser des valeurs de ressource JavaScript dans une page Web ASP.NET

Créez une page Web ASP.NET.

Remplacez le contenu de la page Web par la balise et le code suivants :

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

La balise crée un contrôle DropDownList, deux contrôles Label, un contrôle TextBox et un contrôle Button. La page affiche deux entiers générés aléatoirement et demande à l'utilisateur de les ajouter, et il fournit une zone de texte pour une réponse. La fonction JavaScript CheckAnswer est appelée par un clic sur le bouton.

Le contrôle DropDownList vous permet de modifier les paramètres de langue sans modifier les paramètres du navigateur. Lorsque la propriété SelectedIndex du contrôle DropDownList change, la propriété CurrentUICulture de l'instance CurrentThread prend la valeur que vous avez sélectionnée.

Remarque :
Pour plus d'informations sur la définition des informations de culture pour un thread, consultez Comment : définir la culture et la culture de l'interface utilisateur pour la globalisation des pages Web ASP.NET.

Le contrôle ScriptManager inclut une référence au fichier script CheckAnswer.js. Elle oblige la page à récupérer le fichier CheckAnswer.js lorsqu'elle est exécutée.

La propriété ResourceUICultures de la référence est définie sur "il-TI" pour indiquer que le site Web contient une version italienne du script. En conséquence, l'objet ScriptManager récupère la version italienne lorsque vous sélectionnez "italien" dans le contrôle DropDownList ou lorsque vous définissez "italien" comme langue par défaut dans le navigateur.

Exécutez la page.

Vous rencontrez 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 voyez 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 affichée en anglais.
Remplacez la langue par l'italien en sélectionnant "italien" dans la liste déroulante.
Effectuez à nouveau le test.

Cette fois, la réponse est en italien

Récapitulatif

Cette procédure pas à pas vous a montré comment ajouter des valeurs de ressource localisées à un fichier JavaScript autonome. Les valeurs localisées sont créées en tant qu'objets au format JSON et font partie des fichiers JavaScript localisés individuels. Les valeurs localisées sont affichées au moyen d'une référence à l'objet JSON et non en utilisant des chaînes codées en dur. Les chaînes localisées sont affichées selon le paramètre de langue du navigateur ou le paramètre de langue fourni 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 : incorporation de ressources localisées pour un fichier JavaScript