Подтвердить что ты не робот

Поддержка интернационализации Phonegap/Cordova

Я разрабатываю мобильное приложение с Phonegap, и мне нужна интернационализация - отображать страницу html на разных языках. Теперь я понимаю, что это не проблема с Phonegap - я должен интернационализировать веб-приложение.

  • Поддерживает ли какая-либо инфраструктура интернационализация (например, jQuery Mobile)?
  • Можно ли использовать шаблонный подход, например. использовать файлы свойств и шаблон и генерировать HTML во время процесса сборки? `
  • Если я использую подход из Bourbon (см. ответы), как я могу переключить язык на один параметр?

С уважением, христианин

--- Изменить -

У Phonegap есть хороший плагин глобализации с версии 2.2.0. Он охватывает многие функции i18n. Проверьте документы http://docs.phonegap.com/en/edge/cordova_globalization_globalization.md.html#Globalization

4b9b3361

ОТВЕТЫ

Ответ 1

Phonegap - это всего лишь фреймворк, позволяющий показывать веб-страницы в собственном приложении и использовать некоторый плагин для подключения к аппаратным датчикам устройства. Поддержка интернационализации будет зависеть от вашего дизайна html/js.

Например, вы можете использовать:

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

И вызвать хорошую страницу в зависимости от языка пользователя.

Надеюсь, это поможет вам: -)

Ответ 2

Я применил подход к этой проблеме, который позволяет другим предоставлять языковые переводы для моего приложения.

Плюсы:

  • Использует библиотеки, созданные через веб-сайт.
  • Переводы Crowd Sourced.
  • Нет собственного взлома
  • Использование шаблонов
  • Очень легко реализовать HTML/JS и легко протестировать
  • Поддержка определения языка
  • Поддержка текстового направления (BiDi)
  • Никакие родные зависимости вообще не будут работать на Android/iOS/BB/WP yada yada..
  • Тестируемый в веб-браузере

Минусы:

  • Ваш проект должен быть открытым исходным кодом и выполнять требования TranslateWiki.
  • Немного сложно реализовать коммит на Gerrit, если вы пришли из мира ветки/слияния.

Я использовал рули для шаблонов и библиотеку html10n для обеспечения логики перевода, переведенные строки поступают из файлов json, внесенных сообществом.

TranslateWiki предоставляет фактические переводы благодаря мощью источников толпы. Большая часть тяжелой работы по моей реализации осуществляется TranslateWiki, бесплатной и открытой службой сообщества из Wiki Media Foundation.

Handlebars и библиотека html10n являются мощными, построенными для Интернета и широко используемыми. Они оказываются чрезвычайно полезными библиотеками для этой реализации.

Не требуется собственный код или плагины.

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

локали/en.json

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

локали/fr.json

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

index.js

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

Чтобы переключиться между языками, поднимите консоль javascript браузера и введите

html10n.localize("fr");

Для определения языка браузера требуется дополнительная логика, я использую реализацию Etherpad для выполнения этого.

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

Что это, безрецептурный рецепт для развертывания i18n в вашем приложении Cordova.

Ответ 3

Я сделал именно то, что предложил Бурбон, потому что это небольшое приложение, и дублирование не было проблемой. Однако существуют шаблонные шаблоны, я думаю, что в основном используется mustache.

Я решил выбор языка следующим образом:

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

Как вы можете видеть, я прочитал значение для SharedPreferences. Я также создал плагин Phonegap, чтобы установить это значение из кода JavaScript, когда пользователь меняет язык.

Ответ 4

Это мое ОЧЕНЬ ПРОСТОЕ решение. Я использую jQuery в своем APP, затем добавляю class="lang" ко всем элементам, которые содержат строку, которая должна быть переведена, и к тому же элементу я также добавляю:

  • данные языки = "переменный"
  • data-lang-to = "receive" < необязательно >

например:

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

это мой класс:

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

Я использовал другой подход, основанный на @ChrLipp

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

то у меня есть js script, который загружает правильные файлы в зависимости от языка, содержащегося в строке запроса

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

Используя этот подход, он легко масштабируется.

После написания этого ответа я узнал лучший способ, просто используя js:

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

Разработчик Mozilla, навигатор

И это решает проблему написания кода, чтобы получить локаль на другой платформе, такой как iOS.

Надеюсь, что это поможет

Ответ 6

Если кто-то вроде меня задается вопросом, почему нет готовых решений для такой простой задачи: jQuery.localize может решить ваши проблемы.

  • Добавить <script type="text/javascript" src="jquery.localize.js"></script> в ваш индексный html файл
  • Добавить теги для локализованных объектов html: <h1 data-localize="greeting"> Hello! </h1>

  • Добавьте localization-ru.json в свой проект:

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

Я добавил его в system/localization/localization-ru.json. Суффикс ru - это язык файла (ru - русский, например). Вам, вероятно, понадобится localization-en.json, localization-de.json и т.д.:

  1. Добавить загрузку языка и обновление страницы html из 'deviceready' прослушивателя обратного вызова событий:

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

  2. Локализация строк javascript выглядит следующим образом:

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

Где "system/localization/localization" - путь к вашей папке localization.json из www, и вы, вероятно, напишите для него ярлык (первый и последний раз, когда вам действительно нужно что-то закодировать).

Ответ 7

Я не мог найти рамки для этого, поэтому я начал свой собственный плагин. Я хотел написать только один html и позволить интернационализации произойти с strings.xml(меня сейчас интересует андроид).

Взгляните на это, это может помочь вам: https://github.com/zeitos/i18nplugin

Ответ 8

Я разрабатываю приложение Cordova-AngularJS. Я сделал следующий простой подход. Используйте услугу для фактического перевода:

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

}]);

Я включил JSON-Object в глобальную область окна для каждого языка, который я поддерживаю в своем приложении. Например:

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

и

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

Вы можете легко использовать один JS файл для каждого языка для хранения соответствующих объектов JSON.

Таким образом, служба могла получить доступ к таким объектам, как

window['__' + lang]

и верните переведенную строку.

Все, что нужно сделать, это ввести службу и ее метод -getString в каждый контроллер, которому требуется локализация статических строк. Вы также должны сделать ссылку на локальную область var, чтобы использовать локализацию в Template-Files.

Строки, установленные внутри контроллера и строки в файлах шаблонов, переводятся через

__("stringToBeTranslated");

Вот пример контроллера:

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

Пробовали ли вы использовать ionic для того же?