Estoy desarrollando una aplicación para móviles con Phonegap y necesito internacionalización – mostrar una página html en diferentes idiomas. Entiendo ahora que esto no es una Phonegap problema – me tienen para internacionalizar la aplicación web.

  • Cualquier marco de apoyo a la internacionalización (por ejemplo, jQuery Mobile)?
  • Es posible el uso de una plantilla de enfoque, por ejemplo, el uso de los bienes y archivos de la plantilla y generar el código HTML durante el proceso de compilación?`
  • Si puedo usar el enfoque de Bourbon (ver en las respuestas), ¿cómo puedo cambiar el idioma por valor de opción?

Saludos, Christian

Editar

Phonegap tiene un buen Globalización plugin desde 2.2.0. Se cubre una gran parte de la i18n de la funcionalidad. Verificación de la documentación http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

  • Yo estaba buscando la misma cosa hoy en día, cuando el inicio de la elaboración de Córdoba aplicaciones. CPU recursos son limitados en algunos teléfonos por lo tanto me gustaría minimizar JavaScript. Yo voto por la plantilla de enfoque – sería mucho más ligero en el cliente móvil.
  • Este plugin no tiene nada que ver con los idiomas, sólo devuelve los navegadores lenguaje actual, pero también podemos usar la i18n de los diferentes idiomas
InformationsquelleAutor ChrLipp | 2012-01-16

9 Comentarios

  1. 9

    Phonegap es sólo un marco para ser capaz de mostrar páginas web en un nativo de la aplicación, y el uso de algún plugin para conectar con el dispositivo de hardware de los sensores. El apoyo de la internacionalización dependerá de tu html/js diseño.

    Por ejemplo, puede usar :

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

    Y llamar a la buena página, dependiendo del idioma del usuario.

    Espero que esto te ayudará a 🙂

    • «Y llamar a la buena página, dependiendo del idioma del usuario.» ¿Cómo puede saber el idioma del usuario?
  2. 11

    Tomé una aproximación a este problema que permite a otros a contribuir con traducciones de idioma para mi aplicación.

    Pros:

    • Utiliza en la web «madurado» bibliotecas
    • Multitud De Origen Traducciones
    • No nativos de hacking
    • Utiliza plantillas
    • Muy fácil de implementar HTML/JS y fácil de probar
    • Soporta detección de Idioma
    • Apoya A La Dirección Del Texto (BiDi)
    • No Nativo dependencias en todo lo que va a trabajar en Android/iOS/BB/WP bla bla..
    • Comprobable en el navegador web

    Contras:

    • Las necesidades de los proyectos a ser de código abierto y cumplir TranslateWiki los requisitos de
    • Un poco difícil de implementar el comprometemos a Gerrit si usted viene de una rama/fusionar mundo.

    He utilizado el manillar de plantillas y la html10n biblioteca de traducción de la lógica, cadenas traducidas provienen de la comunidad contribuido json archivos.

    TranslateWiki proporciona las traducciones reales a través del poder de crowd-sourcing. La mayoría de la carga pesada de mi aplicación se realiza por TranslateWiki, una fuente libre y abierto de servicio a la comunidad de la Wiki de los Medios de comunicación de la Fundación.

    El manillar y la html10n de la biblioteca son de gran alcance, construido para la web y ampliamente utilizado. Que ser extremadamente útil bibliotecas para esta aplicación.

    Ningún código nativo o plugins son necesarios.

    index.html

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

    locales.json

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

    locales/es.json

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

    locales/fr.json

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

    index.js

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

    Para cambiar entre los idiomas de traer a su navegador de la consola de javascript y tipo de

    html10n.localize("fr");
    

    Lógica adicional que se necesita para hacer de explorador de detección de idioma, yo uso Etherpad de la aplicación para lograr esto.

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

    Que es, un hack gratis la receta para el despliegue de i18n en su Cordova Aplicación.

    • Hey, ¿puedo usarlo como se muestra? No necesito poner el manillar cosas dentro de una plantilla, compilación, procesamiento, etc?
    • No funciona en todos.
    • Esta respuesta se merece toneladas de upvotes sólo para Hello Baguette World.
  3. 7

    Hice exactamente lo Bourbon sugerido, porque es una aplicación pequeña y la duplicación no era el problema.
    Sin embargo, hay plantillas de marcos, creo que la más utilizada es bigote.

    He resuelto la selección de la lengua como este:

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

    Como se puede ver, leer el valor de venir a la SharedPreferences. También he creado un plugin de Phonegap para establecer este valor desde el código JavaScript cuando el usuario cambia el idioma.

  4. 5

    Esta es mi solución MUY SIMPLE. Puedo usar jQuery en mi APLICACIÓN, a continuación, agregue class="lang" a todos los elementos que contengan una cadena que debe ser traducido, y para el mismo elemento también agrego:

    • data-lang=»variable»
    • data-lang-a=»recibir» < opcional >

    por ejemplo:

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

    esta es mi clase:

    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
    
  5. 2

    Me he tomado un enfoque diferente basado en @ChrLipp

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

    entonces tengo un js script que carga los archivos correctos según el texto de la cadena de consulta

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

    El uso de este enfoque, se escala fácilmente.

    Después de escribir esta respuesta que he encontrado una mejor manera, simplemente utilizando js:

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

    Mozilla developer, navegador

    Y que resuelve el problema de escritura de código para obtener la configuración regional en una plataforma diferente, tales como iOS.

    Espero que ayude

    • Esto se producirá en WP8 debido a una ? estar en la URL, es necesario utilizar #?
  6. 2

    Si alguien como yo se preguntan, ¿por qué no hay soluciones para una tarea simple: jQuery.localizar puede resolver sus problemas.

    1. Agregar <script type="text/javascript" src="jquery.localize.js"></script> de su índice archivo html
    2. Agregar etiquetas para localizable objetos html: <h1 data-localize="greeting"> Hello! </h1>
    3. Agregar localization-ru.json a su proyecto:

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

    Lo he añadido a system/localization/localization-ru.json. El ru sufijo es el archivo de idioma (ru – ruso, por ejemplo). Usted probablemente necesitará localization-en.json, localization-de.json etc:

    1. Agregar idioma de carga y html de la página de actualización de 'deviceready' evento de devolución de llamada de escucha:

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

    2. Para javascript cadenas de localización es la siguiente:

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

    Donde "system/localization/localization" es la ruta de acceso a su localización.json de www carpeta, y probablemente escribir un acceso directo (la primera y la última vez que usted realmente necesita el código de algo).

  7. 1

    No podía encontrar ningún marco para hacer, así que empecé mi propio plugin.
    Yo quería escribir una sola html y vamos a la internacionalización suceder con strings.xml (sólo estoy interesado en android ahora mismo).

    Tener una mirada en ella, puede ayudarle a:
    https://github.com/zeitos/i18nplugin

  8. 1

    Estoy desarrollando un Córdoba-AngularJS Aplicación.
    He tomado el siguiente método sencillo.
    La utilización de un servicio para que haga la traducción:

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

    He incluido un JSON-Objeto en el global de la Ventana de alcance para cada idioma que yo apoyo a mi candidatura. Por ejemplo:

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

    y

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

    Usted puede fácilmente usar un JS-Archivo por idioma para disponer de la correspondiente JSON-Objetos.

    Que la forma en que el servicio podría acceder a los objetos como

    window['__' + lang]
    

    y devolver la traducción de la cadena.

    A todos a hacer ahora es inyectar el Servicio y su método getString en cada controlador que necesita la localización de la estática cadenas. Usted también tiene que hacer una referencia a un ámbito local de var para el uso de la localización en la Plantilla de Archivos.

    Cadenas que están en el interior de la controladora y de las cadenas en Plantilla-los Archivos se traduce a través de

    __("stringToBeTranslated");
    

    Aquí es un controlador de ejemplo:

    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.__ = __;
    
      //...
    }]);
    
  9. 0

    Has intentado usar iónica marco para el mismo?

    • Qué utilizar para la internalización y la iónica? Qué recomienda usted i18n Iónicos?
    • Iónica es mejor ir a por
    • he usado angular de traducir para ionic1 y ngx-traducir para ionic2 y de arriba para crear el efecto.

Dejar respuesta

Please enter your comment!
Please enter your name here