Dot.Blog

L'été est là, avec son beau temps et sa chaleur, et tandis que vous savourez une boisson sur la plage, je rédige les articles pour la prochaine saison. Je ne vous oublie pas pour autant... Les vacances sont l'occasion idéale pour voyager, souvent à l'étranger, où il est essentiel de se faire comprendre... Nos applications rencontrent ce même défi tout au long de l'année ! Alors, comment procéder à la localisation des applications MAUI ?

Introduction à la Localisation dans MAUI

La localisation est un élément essentiel pour toute application moderne, surtout si vous aspirez à toucher un public international. Lorsque vous développez avec .NET MAUI (Multi-platform App UI), la localisation permet d'adapter votre application aux préférences linguistiques et culturelles de vos utilisateurs. En d'autres termes, cela consiste à traduire les textes de votre application, mais aussi à adapter d'autres éléments comme les formats de date, d'heure, ou de devise, en fonction des paramètres régionaux de l'utilisateur.

Configuration des Plateformes pour la Localisation

Avant de commencer à localiser votre application MAUI, il est crucial de configurer correctement chaque plateforme cible. Les exigences spécifiques varient légèrement en fonction de la plateforme, voici donc un aperçu de la configuration nécessaire pour iOS, Mac Catalyst, Windows, et Android.

iOS et Mac Catalyst

Pour les applications iOS et Mac Catalyst, vous devez vous assurer que le fichier Info.plist contient les paramètres appropriés pour les langues supportées. Ajoutez une clé CFBundleLocalizations avec les codes de langue que vous souhaitez prendre en charge :

<key>CFBundleLocalizations</key>
<array>
    <string>fr</string>
    <string>es</string>
</array>

Cela indique à iOS et Mac Catalyst que votre application prend en charge le français et l'espagnol, par exemple.

Windows

Pour les applications Windows, vous devez modifier le fichier Package.appxmanifest afin de spécifier les langues prises en charge. Ajoutez les langues à l'élément <Resources> :

<Resources>
    <Resource Language="en-US"/>
    <Resource Language="fr"/>
    <Resource Language="es"/>
</Resources>

Android

Sur Android, vous devez configurer les langues dans le fichier AndroidManifest.xml. Utilisez l'attribut android:localeConfig pour référencer un fichier res/xml/locales_config.xml dans lequel vous spécifiez les langues supportées :

<manifest>
    <application android:localeConfig="@xml/locales_config">
        ...
    </application>
</manifest>

Et dans le fichier res/xml/locales_config.xml :

<locale-config xmlns:android="http://schemas.android.com/apk/res/android">
    <locale android:name="en"/>
    <locale android:name="fr"/>
    <locale android:name="es"/>
</locale-config>

Utilisation des Ressources Localisées dans le Code

Une fois vos fichiers de ressources créés (ajoutez simplement autant de fichiers RESX que de langues à supporter, vérifiez la doc officielle pour la convention de nommage de ces fichiers), il est temps de les utiliser dans votre code. .NET MAUI offre une classe pratique nommée ResourceManager qui permet de charger et d'accéder aux ressources localisées.

Pour utiliser une chaîne de caractères localisée dans votre application, il vous suffit d'appeler la méthode GetString du ResourceManager, en lui passant la clé correspondant au texte que vous souhaitez afficher. Par exemple, si vous avez une clé "WelcomeMessage" dans votre fichier de ressources, vous pouvez récupérer et afficher le message localisé comme ceci :

var welcomeMessage = ResourceManager.GetString("WelcomeMessage");

Cela vous permet d’afficher le texte approprié en fonction de la langue sélectionnée.

Localisation d'un Texte : Un Exemple Pratique

Prenons un exemple concret pour illustrer la localisation d'un texte dans une application MAUI. Supposons que vous ayez un Label dans votre interface utilisateur et que vous souhaitiez que son texte soit localisé. Voici comment procéder :

1. Créer les fichiers de ressources : Créez deux fichiers .resx pour le français et l'anglais : AppResources.fr.resx et AppResources.en.resx.

2. Ajouter des paires clé/valeur : Dans le fichier AppResources.fr.resx, ajoutez une clé Greeting avec la valeur "Bonjour", et dans AppResources.en.resx, la même clé avec la valeur "Hello".

3. Utiliser la ressource dans XAML :

<Label Text="{x:Static local:AppResources.Greeting}" />

4. Chargement des ressources dans le code-behind (si nécessaire) :

var greeting = AppResources.Greeting;

En suivant ces étapes, votre application affichera "Bonjour" ou "Hello" en fonction de la langue de l'utilisateur.

Localisation des Images

La localisation des images est un aspect souvent négligé, mais tout aussi important que la traduction des textes. Selon les langues et les cultures, certaines images peuvent nécessiter des adaptations. MAUI facilite cette tâche en permettant de spécifier différentes versions d'une image pour différentes langues.

Pour localiser une image, vous devez créer des dossiers spécifiques aux langues sous le dossier Resources/Images de votre projet. Par exemple :

Resources/Images/
    fr/
        logo.png
    en/
        logo.png

Dans votre XAML, vous référencerez simplement l'image par son nom, et MAUI choisira automatiquement l'image appropriée en fonction de la langue courante :

<Image Source="logo.png" />

Cette approche garantit que l'utilisateur voit toujours l'image la plus pertinente pour sa culture.

Localisation du Nom de l'Application

Le nom de l'application est la première chose que les utilisateurs voient, et il est donc important de le localiser également. Pour ce faire, chaque plateforme dispose de ses propres méthodes.

iOS et Mac Catalyst

Dans le fichier Info.plist, ajoutez une clé pour chaque langue que vous supportez sous l'élément CFBundleDisplayName :

<key>CFBundleDisplayName</key>
<dict>
    <key>fr</key>
    <string>MonApp</string>
    <key>en</key>
    <string>MyApp</string>
</dict>

Android

Sur Android, vous devez ajouter des fichiers de chaînes localisées dans Resources/values et Resources/values-fr, par exemple :

<!-- res/values/strings.xml -->
<resources>
    <string name="app_name">MyApp</string>
</resources>

<!-- res/values-fr/strings.xml -->
<resources>
    <string name="app_name">MonApp</string>
</resources>

Windows

Pour Windows, ajoutez les traductions dans le fichier Package.appxmanifest sous l'élément <Applications>.

Spécifier la Langue par Défaut

Il peut être utile de spécifier une langue par défaut pour votre application, surtout si la langue de l'utilisateur n'est pas supportée. Cela se fait dans le fichier csproj en ajoutant une propriété <NeutralLanguage> :

<PropertyGroup>
    <NeutralLanguage>en</NeutralLanguage>
</PropertyGroup>

Tester et Déployer une Application Localisée

Une fois la localisation en place, il est essentiel de la tester soigneusement pour s'assurer que tout fonctionne comme prévu. Cela inclut non seulement la vérification des traductions, mais aussi l’assurance que les formats de date, d'heure, et de devises sont corrects et cohérents avec les attentes culturelles des utilisateurs.

Enfin, lorsque vous déployez votre application, assurez-vous d'inclure tous les fichiers de ressources nécessaires dans le package de l'application. Cela garantira que les utilisateurs, quel que soit leur emplacement, auront accès à une version de votre application adaptée à leur langue et culture.

Conclusion

La localisation est une étape incontournable pour toute application qui vise un public international. Grâce à .NET MAUI, ce processus est largement simplifié, vous permettant de vous concentrer sur la création d'une expérience utilisateur riche et adaptée à un large éventail de cultures. Que ce soit pour un projet personnel ou une application commerciale, maîtriser la localisation vous ouvre la porte à un monde d'opportunités. En suivant les étapes que je viens de décrire, vous êtes désormais bien équipé pour localiser efficacement vos applications MAUI et ainsi toucher un public mondial.
Il est important de noter que la localisation d'une application peut nécessiter des étapes supplémentaires, comme offrir à l'utilisateur la possibilité de choisir la langue de l'application et de permettre que ce changement soit effectif immédiatement, sans nécessiter un redémarrage de l'application. Cela implique naturellement un peu plus de programmation. Heureusement, il existe des méthodes éprouvées pour faciliter l'implémentation de telles fonctionnalités. Je vous en dirai plus une autre fois. Pour l'instant, il fait chaud devant l'ordinateur, il est alors temps de conclure cet article !

D'ailleurs si vous pensez à des sujets que vous voulez que j'aborde ou que je creuse plus, n'hésitez à le dire dans les commentaires !

Stay Tuned !