Supporto per l'internazionalizzazione Phonegap/Cordova

Question

Sto sviluppando un'applicazione mobile con PhoneGap e ho bisogno di internazionalizzazione: visualizza una pagina html in diverse lingue. Capisco ora che questo non è un problema di PhoneGap - Devo internazionalizzare l'applicazione web.

• Qualche framework supporta l'internazionalizzazione (ad esempio jQuery Mobile)?
• È possibile utilizzare un approccio di modello, ad es. utilizzare file di proprietà e modello e generare l'HTML durante il processo di compilazione? `
• Se utilizzo l'approccio da Bourbon (vedere nelle risposte), come posso cambiare la lingua per impostazione delle opzioni?

Cordiali saluti, Christian

--- Modifica -

PhoneGap ha un bel plugin globalizzazione dal 2.2.0. Copre molte delle funzionalità di i18n. Controlla i documenti http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

Answer 1

PhoneGap è solo un framework per mostrare pagine Web in un'app nativa e utilizzare alcuni plug-in per connettersi con i sensori hardware del dispositivo. Il supporto dell'internazionalizzazione dipenderà dal tuo design html/js.

Per exemple è possibile utilizzare:

/html/en/index.html 
/html/fr/index.html 
... 

e chiamare la buona pagina di seconda lingua dell'utente.

Spero che questo vi aiuterà :-)

Answer 2

ho fatto esattamente quello borbonico suggerito, perché è una piccola applicazione e la duplicazione non era problema. Tuttavia ci sono schemi di modelli, penso che sia usato principalmente per mustache.

ho risolto la selezione della lingua in questo modo:

@Override 
public void onCreate(final Bundle savedInstanceState) 
{ 
    // ... 
    String language = getValue("language", "de"); 
    if (language.equals("de")) { 
     super.loadUrl("file:///android_asset/www/de/index.html", 1); 
    } 
    else { 
     super.loadUrl("file:///android_asset/www/en/index.html", 1); 
    } 
} 

private String getValue(final String key, final String defaultValue) 
{ 
    SharedPreferences prefs = getSharedPreferences(
      getApplicationInfo().packageName, MODE_PRIVATE); 
    return prefs.getString(key, defaultValue); 
} 

Come potete vedere, ho letto il valore fro i SharedPreferences. Ho anche creato un plugin per PhoneGap per impostare questo valore dal codice JavaScript ogni volta che l'utente cambia la lingua.

Answer 3

Non sono riuscito a trovare alcun framework per fare ciò, così ho avviato il mio plugin. Volevo scrivere solo un html e lasciare che l'internazionalizzazione avvenga con strings.xml (al momento sono interessato solo ad Android).

Date un'occhiata a esso, potrebbe aiutarti: https://github.com/zeitos/i18nplugin

Answer 4

ho preso un approccio diverso in base a @ChrLipp

super.loadUrl("file:///android_asset/www/index.html?lang=" + lang); 

poi Ho uno script js che caricare i file corretti a seconda della lingua fornita nella stringa di query

(function() { 
    var lang; 
    try { 
     lang = RegExp('[?&]lang=([^&]*)').exec(window.location.search)[1]; 
    } catch (ex) { 
     lang = "es"; 
    } 
    document 
      .write(unescape("%3Cscript type='text/javascript' src='locale/angular-locale_" 
        + lang + ".js'%3E%3C/script%3E")); 
    document 
      .write(unescape("%3Cscript type='text/javascript' src='locale/i18n_" 
        + lang + ".js'%3E%3C/script%3E")); 
})(); 

Utilizzando questo approccio si scala facilmente.

Dopo aver scritto questa risposta ho scoperto un modo migliore, usando solo JS:

lang = navigator.language.split('-')[0]; 

Mozilla developer, navigator

E che risolve il problema di scrivere codice per ottenere il locale in una piattaforma diversa, come iOS .

Speranza che aiuta

Answer 5

I took an approach to this problem that allows others to contribute language translations for my application.

Pro:

• utilizza le librerie "web-stagionato"
• Folla Sourced Traduzioni
• No nativo violazione al sistema
• Utilizza template
• molto facile da implementare HTML/JS e facile da testare
• supporta il rilevamento Lingua
• Supporta Direzione Testo (BiDi)
• Nessuna dipendenza nativi affatto così funzionerà su Android/iOS/BB/WP bla bla ..
• testabile nel browser web

Contro:

• Il vostro progetto deve essere open source e soddisfare TranslateWiki I requisiti
• Un po 'complicato da implementare il commit su Gerrit se vieni da un mondo di branch/merge.

Ho usato manubri per i modelli e la libreria html10n per fornire la logica di traduzione, le stringhe tradotte provengono da file json forniti dalla comunità.

TranslateWiki fornisce le traduzioni effettive attraverso il potere del crowdsourcing. La maggior parte della pesante implementazione della mia implementazione è effettuata da TranslateWiki, un servizio di community gratuito e open source della Wiki Media Foundation.

I manubri e la libreria html10n sono potenti, costruiti per il Web e ampiamente utilizzati. Risultano essere librerie estremamente utili per questa implementazione.

Non sono richiesti codici nativi o plug-in.

index.html

<head> 
    <script type="text/javascript" src="js/handlebars.js"></script> 
    <script type="text/javascript" src="js/html10n.js"></script> 
    <link rel="localizations" type="application/l10n+json" href="locales.json"> 
</head> 
<body> 
    {{html10n "helloWorld"}} 
</body> 

locales.json

{ 
    "fr":"locales/fr.json", 
    "en":"locales/en.json" 
} 

locali/en.json

{ 
    "en":{ 
    "helloWorld":"Hello Cruel World" 
    } 
} 

locali/fr.JSON

{ 
    "fr":{ 
    "helloWorld":"Hello Baguette World" 
    } 
} 

index.js

Handlebars.registerHelper('html10n', function(str,a){ 
    return (html10n != undefined ? html10n.get(str) : str); 
}); 

Per passare da una lingua all'altra portare il browser javascript console e digitare

html10n.localize("fr"); 

è necessaria Alcuni logica aggiuntiva per fare il rilevamento lingua del browser, io uso L'implementazione di Etherpad per realizzare questo.

var language = document.cookie.match(/language=((\w{2,3})(-\w+)?)/); 
if(language) language = language[1]; 
html10n.bind('indexed', function() { 
    html10n.localize([language, navigator.language, navigator.userLanguage, 'en']) 
}) 
html10n.bind('localized', function() { 
    document.documentElement.lang = html10n.getLanguage() 
    document.documentElement.dir = html10n.getDirection() 
    // Then I display the index page using handlebars to render a template. 
}); 

Questo è tutto, una ricetta libera hack per stendere i18n nel vostro Cordova applicazione.

Answer 6

Questa è la mia soluzione MOLTO SEMPLICE. Io uso jQuery nel mio APP quindi aggiungere class="lang" a tutti gli elementi che contengono una stringa che dovrebbe essere tradotto, e allo stesso elemento Ho anche aggiungere:

• dati-lang = "variabile"
• dati-lang -per = "ricevono" < opzionale>

ad esempio:

<input type="search" placeholder="Search..." class="lang" data-lang="search" data-lang-to="placeholder" /> 

questa è la mia classe:

var localize={ 
    locals: { 
     'it': { 
      click_activation: 'clicca qui per ricevere il codice di attivazione', 
      search: "Cerca..." 
     }, 
     'en-us': { 
      click_activation: 'click here to re-send the activation code', 
      search: "Search User..." 
     } 
    }, 
    start: function(lang){ 
     lang=lang.toLowerCase(); 
     var langs=this.locals; 
     $('.lang').each(function(){ 
      var txt=$(this).data('lang'); 
      var to=$(this).data('lang-to'); 
      if(txt!==''&&typeof langs[lang][txt]!=='undefined'){ 
       switch(to){ 
        case 'text': 
         $(this).text(langs[lang][txt]); 
         break; 
        case 'placeholder': 
        case 'alt': 
        case 'title': 
         $(this).attr(to, langs[lang][txt]); 
         break; 
        case 'html': 
        default: 
         $(this).html(langs[lang][txt]); 
         break; 
       } 
      } 
     }); 
    } 
}; 

localize.start(lang); //use phonegap globalization to discover this one if you want 

Answer 7

Se qualcuno come me si chiede, perché non ci sono soluzioni pronte per un compito così semplice: jQuery.localize può risolvere i tuoi problemi.

1. Aggiungi <script type="text/javascript" src="jquery.localize.js"></script> al file html indice
2. aggiungere tag per gli oggetti localizzabili html: <h1 data-localize="greeting"> Hello! </h1>

3. Aggiungi localization-ru.json al progetto:

   { "greeting": "Привет!" }

ho aggiunto a system/localization/localization-ru.json. Il suffisso ru è la lingua del file (ru - Russian, ad esempio). Probabilmente avrete bisogno localization-en.json, localization-de.json ecc:

4. Aggiungi lingua di carico e pagina html aggiornamento da 'deviceready' evento di callback ascoltatore:

   $("[data-localize]").localize("system/localization/localization")

5. Per javascript stringhe di localizzazione è il seguente:

   $.localize.data.["system/localization/localization"]["greeting"]; 
   

Dove "system/localization/localization" è il percorso della cartella localization.json dalla cartella www e probabilmente scriverai una scorciatoia per essa (la prima e l'ultima volta che devi effettivamente codificare qualcosa).

Answer 8

Hai provato a utilizzare il framework ionic per lo stesso?

Answer 9

Sto sviluppando un'applicazione Cordova-AngularJS. Ho seguito il seguente approccio semplice. utilizzare un servizio a fare la traduzione reale:

angular.module('App.services.Localization', []) 

.factory('__', ['$window', function(window){ 
    var lang = navigator.language.split('-')[0]; 
    console.log('lang: ' + lang); 
    //default language 
    var default_language = 'de'; 

    return function(string) { 
     var lang_json = window['__' + lang]; 
     var loc_str = ""; 
     if(lang_json === undefined){ 
     //use default lang 
     loc_str = window["__" + default_language][string]; 
     }else{ 
     loc_str = window["__" + lang][string]; 
     } 

     return loc_str; 
    }; 

}]); 

ho inserito un JSON-oggetto a portata finestra globale per ogni lingua sostengo nella mia applicazione. Per esempio:

var __de = { 
    'Speisekarte' : 'Speisekarte', 
    'Löschen'  : 'Löschen' 
} 

e

var __en = { 
    'Speisekarte' : 'Menu', 
    'Löschen'  : 'Delete' 
} 

si potrebbe facilmente utilizzare uno JS-File per lingua per contenere i corrispondenti JSON-Objects.

questo modo il servizio potrebbe accedere agli oggetti come

window['__' + lang] 

e restituisce la stringa tradotta.

Tutto ciò che deve fare ora è iniettare il servizio e il suo metodo -getString in ogni controller che richiede la localizzazione di stringhe statiche. Devi anche fare riferimento a un var scope locale per usare la localizzazione in Template-Files.

stringhe che sono impostati all'interno del controllore e archi in Template-Files sono tradotte tramite

__("stringToBeTranslated"); 

Ecco un esempio di controllo:

angular.module('App.controllers.Menu', [ 
    'App.services.Localization' 
]) 

.controller('MenuController', ['$scope', '__', function(scope, __) { 

    //... 
    //pass the Localization service __(string)-Method to the local scope to be used in Template-Files 
    scope.__ = __; 

    //... 
}]);