Cordova - Mondialisation

Ce plugin est utilisé pour obtenir des informations sur la langue locale des utilisateurs, la date et le fuseau horaire, la devise, etc.

Étape 1 - Installation du plug-in de globalisation

Ouvert command prompt et installez le plugin en tapant le code suivant

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

Étape 2 - Ajouter des boutons

Nous ajouterons plusieurs boutons à index.html pour pouvoir appeler différentes méthodes que nous créerons plus tard.

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

Étape 3 - Ajouter des écouteurs d'événements

Des écouteurs d'événements seront ajoutés à l'intérieur getDeviceReady fonction dans index.js pour nous assurer que notre application et Cordova sont chargés avant de commencer à l'utiliser.

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

Étape 4A - Fonction de langage

La première fonction que nous utilisons renvoie la balise de langue BCP 47 de l'appareil du client. Nous utiliseronsgetPreferredLanguageméthode. La fonction a deux paramètres onSuccess etonError. Nous ajoutons cette fonction dansindex.js.

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
}

Une fois que nous appuyons sur le LANGUAGE bouton, l'alerte sera affichée à l'écran.

Étape 4B - Fonction locale

Cette fonction renvoie la balise BCP 47 pour les paramètres locaux du client. Cette fonction est similaire à celle que nous avons créée auparavant. La seule différence est que nous utilisonsgetLocaleName méthode cette fois.

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
}

Lorsque nous cliquons sur le LOCALE bouton, l'alerte affichera notre balise locale.

Étape 4C - Fonction de date

Cette fonction est utilisée pour renvoyer la date en fonction des paramètres régionaux et de fuseau horaire du client. date paramètre est la date actuelle et options le paramètre est facultatif.

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }
   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
}

Nous pouvons maintenant exécuter l'application et appuyer sur DATE bouton pour voir la date actuelle.

La dernière fonction que nous allons afficher est de renvoyer les valeurs de devise en fonction des paramètres de l'appareil du client et du code de devise ISO 4217. Vous pouvez voir que le concept est le même.

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
}

le CURRENCY Le bouton déclenchera une alerte qui montrera le modèle de devise des utilisateurs.

Ce plugin propose d'autres méthodes. Vous pouvez voir tout cela dans le tableau ci-dessous.

méthode	paramètres	détails
getPreferredLanguage	onSuccess, onError	Renvoie la langue actuelle du client.
getLocaleName	onSuccess, onError	Renvoie les paramètres régionaux actuels du client.
dateToString	date, onSuccess, onError, options	Renvoie la date en fonction des paramètres régionaux et du fuseau horaire du client.
stringToDate	dateString, onSuccess, onError, options	Analyse une date en fonction des paramètres du client.
getCurrencyPattern	currencyCode, onSuccess, onError	Renvoie le modèle de devise du client.
getDatePattern	onSuccess, onError, options	Renvoie le modèle de date du client.
getDateNames	onSuccess, onError, options	Renvoie un tableau de noms des mois, des semaines ou des jours selon les paramètres du client.
isDayLightSavingsTime	date, succèsCallback, errorCallback	Utilisé pour déterminer si l'heure d'été est active en fonction du fuseau horaire et du calendrier du client.
getFirstDayOfWeek	onSuccess, onError	Renvoie le premier jour de la semaine selon les paramètres du client.
numberToString	nombre, onSuccess, onError, options	Renvoie le nombre selon les paramètres du client.
stringToNumber	chaîne, onSuccess, onError, options	Analyse un nombre en fonction des paramètres du client.
getNumberPattern	onSuccess, onError, options	Renvoie le modèle numérique en fonction des paramètres du client.