sencha touch i18n 基础知识

Posted

技术标签:

【中文标题】sencha touch i18n 基础知识【英文标题】:sencha touch i18n basics 【发布时间】:2011-09-06 10:27:25 【问题描述】:

如何在 Sencha touch 中处理 i18n? (我说的是对字符串的本地化支持,还有本地化组件)

一个更具体的问题:我有一个包含日期选择器的表单,当我使用法国安卓手机访问应用程序时,如何确保日期以欧洲格式显示和选择?

干杯

【问题讨论】:

【参考方案1】:

SenchaTouch 中还没有针对 i18n 的官方 API。尽管在 Ext 4 中,/locale 文件夹中的所有组件都有本地化文件。

有一个旧的tutorial 表示方法,通过根据语言环境动态设置脚本标记的src 属性。

<script type="text/javascript" id="extlocale"></script>
<script type="text/javascript">

var browserLang = window.navigator.language; // get the browsers language
var locales = [ 'fr', 'es', 'pt', 'pt-BR', 'pt-PT' ]; // available locale files
var locale = 'fr'; // default locale

// check browser language against available locale files
for (var i = locales.length - 1; i >= 0; i--) 
    if (browserLang === locales[i]) 
        locale = browserLang;
        break;
    
;

// Insert src attribute to extlocale
if(locale) 
    Ext.fly('extlocale').set(src:'ext/locale/ext-lang-' + locale + '.js');


</script>

使用 window.navigator.language 来检查浏览器的语言。

必须在 /ext/locale/ext-lang-fr.js 中设置语言环境文件 您可以在哪里覆盖组件属性。

Ext.onReady(function() 

if(Date)
    Date.shortMonthNames = [
        "Janv",
        "Févr",
        "Mars",
        "Avr",
        "Mai",
        "Juin",
        "Juil",
        "Août",
        "Sept",
        "Oct",
        "Nov",
        "Déc"
    ];

    Date.getShortMonthName = function(month) 
        return Date.shortMonthNames[month];
    ;

    Date.monthNames = [
        "Janvier",
        "Février",
        "Mars",
        "Avril",
        "Mai",
        "Juin",
        "Juillet",
        "Août",
        "Septembre",
        "Octobre",
        "Novembre",
        "Décembre"
    ];

    Date.monthNumbers = 
        "Janvier" : 0,
        "Février" : 1,
        "Mars" : 2,
        "Avril" : 3,
        "Mai" : 4,
        "Juin" : 5,
        "Juillet" : 6,
        "Août" : 7,
        "Septembre" : 8,
        "Octobre" : 9,
        "Novembre" : 10,
        "Décembre" : 11
    ;

    Date.getMonthNumber = function(name) 
        return Date.monthNumbers[Ext.util.Format.capitalize(name)];
    ;

    Date.dayNames = [
        "Dimanche",
        "Lundi",
        "Mardi",
        "Mercredi",
        "Jeudi",
        "Vendredi",
        "Samedi"
    ];

    Date.getShortDayName = function(day) 
        return Date.dayNames[day].substring(0, 3);
    ;

    Date.parseCodes.S.s = "(?:er)";

    Ext.override(Date, 
        getSuffix : function() 
            return (this.getDate() == 1) ? "er" : "";
        
    );


);

我制作了一个工作原型,您可以在这里查看:http://lab.herkulano.com/sencha-touch/date-picker-i18n/

【讨论】:

Ext.fly('extlocale').set(src:'ext/locale/ext-lang-' + locale + '.js');似乎对我不起作用。你能帮我解决这个问题吗?【参考方案2】:

对于你自己的字符串(不是说原生触摸组件)你可以做这样的事情。

1) 在 head 部分的 index.html 中,在

之前加载一个 LocaleManager.js 文件(无论名称如何)

&lt;script id="microloader" type="text/javascript" src="sdk/microloader/development.js"&gt;&lt;/script&gt;

在您的 localeManager 中,根据浏览器的语言加载与您的语言对应的资源文件 (myStrings-fr.js | myStrings-en.js )

您可以执行以下操作来获取浏览器中的语言:

window.navigator.language || window.navigator.userLanguage || window.navigator.browserLanguage || window.navigator.systemLanguage

2) 使用翻译后的字符串创建资源文件

英文版 (myStrings-en.js) 应该是这样的:

var myStrings = 
MyPackage1: 
    myString1: 'Seach...'
;

例如,法语版本 (myStrings-fr.js) 应该如下所示:

var myStrings = 
MyPackage1: 
    myString1: 'Recherchez...'
;

3) 在您的 sencha 触摸代码中,例如用于搜索字段占位符值

xtype: 'searchfield',
id: 'searchToolbarItem',
placeHolder: myStrings.MyPackage1.myString1

希望它会有所帮助。

另一种解决方案可能是修改 sencha touch 应用的构建过程,并在构建时创建应用的本地化版本。因此,每种语言都会有一个版本。然后根据浏览器语言,在浏览器中加载应用程序时,您将加载正确版本的应用程序。

【讨论】:

嗨罗南,这是我一直在寻找的。请问你有 LocaleManager.js 的实现吗?谢谢。丽莎 对不起,我不能给你密码。您只需要使用 JQuery 以 myStrings-XX.js 作为 src 将新的 Script 元素添加到您的页面。【参考方案3】:

我写了自己的 i18n 类,这里是:

Ext.define('MyApp.util.I18n', 
    singleton : true,

    config : 
        defaultLanguage : 'en',
        translations : 
            'en' : 
                'signIn' : 'Sign in',
                'name' : 'Name',
                'hello' : 'Hello 0 !',
                        'enOnly' : 'English only !'
            'fr' : 
                'signIn' : 'Identifiez-vous',
                        'name' : 'Nom',
                        'hello' : 'Bonjour 0 !'
            
        
    ,

    constructor: function(config) 
        this.initConfig(config);
        this.callParent([config]);
    ,

    translate: function (key) 

        // Get browser language
        var browserLanguage = window.navigator.userLanguage || window.navigator.language;

        // Is it defined ? if not : use default
        var language = this.getTranslations()[browserLanguage] === undefined ? this.getDefaultLanguage() : browserLanguage;

        // Translate
        var translation = "[" + key + "]";
        if (this.getTranslations()[language][key] === undefined) 

            // Key not found in language : tries default one
            if (this.getTranslations()[this.getDefaultLanguage()][key] !== undefined) 
                translation = this.getTranslations()[this.getDefaultLanguage()][key];
            

         else 

            // Key found
            translation = this.getTranslations()[language][key];
        

        // If there is more than one argument : format string
        if (arguments.length > 1) 

            var tokenCount = arguments.length - 2;
            for( var token = 0; token <= tokenCount; token++ )
            
                translation = translation.replace( new RegExp( "\\" + token + "\\", "gi" ), arguments[ token + 1 ] );
            

        

        return translation;

    
);

那么你可以这样称呼它:

MyApp.util.I18n.translate('signIn'); 
// Gives 'Identifiez-vous'

MyApp.util.I18n.translate('hello', 'Gilles'); 
// Gives 'Bonjour Gilles !'

MyApp.util.I18n.translate('enOnly'); 
// Gives 'English only !' (defaults to en, as the key is not defined for fr)

MyApp.util.I18n.translate('missing'); 
// Gives '[missing]' (the key is never defined, so it is returned into brackets)

有关更多信息,您可以在此处阅读原始博客文章:http://zippy1978.tumblr.com/post/36131938659/internationalization-i18n-with-sencha-touch

【讨论】:

【参考方案4】:

这是我的实现:

我希望我的应用程序根据设备的语言翻译成英语和西班牙语,如果语言不是西班牙语,则采用默认语言(英语)。 这是我的课程:

Ext.define('MyApp.i18n.I18N', 
    alternateClassName: 'i18n',
    singleton: true,
    constructor: function(config) 
        var lang = window.navigator.userLanguage || window.navigator.language

        if(lang==='undefined' || lang.substring(0,2) != 'es') //don't care about region
            lang = 'defaultLocale';
        

        return Ext.create('MyApp.i18n.locales.' + lang, config);
    
);


Ext.define('MyApp.i18n.locales.defaultLocale', 
    hello:'Hello'
);

Ext.define('MyApp.i18n.locales.es', 
    extend: 'MyApp.i18n.locales.defaultLocale',
      hello:'Hola'
);

你是这样称呼它的:

i18n.hello

希望对你有帮助。

【讨论】:

【参考方案5】:

locale 文件夹在 sencha touch 的 /src 文件夹下

【讨论】:

以上是关于sencha touch i18n 基础知识的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 sencha-touch.jsb3 构建 Sencha Touch?

Sencha Touch实战OA系统开发|Sencha Touch项目教程

Sencha Touch - sencha touch js 大小的性能问题

将 Sencha Architect 项目从 Sencha Touch v2.0.x 更新到 Sencha Touch 2.1.x

iPhone Sencha Touch - 如何在 sencha touch 中将表格视图添加到拆分视图

将 Sencha Touch 1.X 升级到 Sencha Touch 2.X