2011-08-24 13 views
5

私はExtJSアプリケーションをさまざまな言語で翻訳したいと思います。私の問題はExtJS MVCフレームワークを使用していることで、JSファイルのほとんどはフレームワーク自体によって動的にダウンロードされます。ExtJS MVC、動的ロードとi18n

私が考えた理想的な解決方法は、使用する言語を定義するExt.Loader(またはExt.app.Application)に余分なオプションがあり、これに応じて自動的にダウンロードすることです"a.MyClass.js"(これはExt.applyを含み、私の文字列リソースをオーバーライドします)をロードした後、 "a.MyClass.fr.js"のようなファイルです。これは現在、ExtJSフレームワークでは利用できません。

私が見ることのできる代替の解決策は、サーバー側でトリックを実行することです。最初に、言語を設定するためにクッキーがクライアント上に作成されます。サーバー側では、JSファイルへのリクエストをすべて捕まえることができました。クッキーが設定されている場合(例えば 'fr'の場合)、リクエストされたJSファイル(MyClass.js)とi18nの友人(MyClass .fr.js)をサーバー上で動的に実行し、結果を返します。それはうまくいくが、それは他のことを暗にしているので(キャッシング...)、それは本当に面倒だ。

たぶん最良の方法は、

...私はExtJSのフレームワークの中で自分自身を説明した最初の動作を実装することで、あなたはどう思いますか?私はそれを行うの本当にきれいできちんとした方法を探しています!感謝:)

答えて

9

私は最近、同じ問題で苦労しました。これを行うにはきれいな方法を見つける

はかなりの挑戦だった - ほとんどの選択肢は...

1のいずれかであった)ロケールごとにあなたのコードベース(WTH)

2重複)あなたのそれぞれをオーバーライドローカライズされたファイルをダウンロード(メンテナンス地獄?貧しい翻訳者についてはどうですか?)

3)翻訳を含む静的ファイルを使用/生成してください(すべての言語がダウンロードされますか?それを生成するための追加のビルドステップ? ?

)私はすべての世界の最高取得しようとする責任ユーティリティクラスになってしまった:

1)基本的にExtJSのベースコンポーネントに上書きを適用ExtJSの翻訳ファイル()

2のロード)ロケール固有のプロパティーresourcebundle(ロードするロケールを指定する)をサーバーからロードする。

3)Prototyping文字列の値に基づいて読み込まれたストア(サーバーからメッセージバンドルを含む)を照会して翻訳を返すtranslate()メソッドを使用したスト​​リング。

これは物事の要旨である:

バンドル&プロトタイピング:ビューから一例として

localeStore.load({ 
    callback : function(records, operation, success) { 
     // Define translation function (NB! Must be defined before any components which want to use it.) 
     function translate() { 
      var record = localeStore.getById(this.valueOf()) ; 
      if(record === null) { 
       alert('Missing translation for: ' + this.valueOf()); // Key is not found in the corresponding messages_<locale>.properties file. 
       return this.valueOf(); // Return key name as placeholder 
      } else { 
       var value = record.get('value'); 
      } 
      return value; 
     } 

     String.prototype.translate = translate; 
     callback.call(); // call back to caller(app.js/Ext.Application), loading rest of application 
    } 
}); 

this.copyButton = Ext.create('Ext.button.Button', { 
    disabled: true, 
    text: 'DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON'.translate(), 
    action: 'openCopyDialog' 
}); 

バンドルサーバ上(mesages_en.properties ): DOCUMENT_LIBRARY_MENU_COPYTO_BUTTON =ファイルをコピー e TC ..

長所:

  • 無大騒ぎコード「Your_key'.translate()は、それが読みやすく、これはローカライズされた文字列
  • なし/ほとんどメンテナンスのオーバーヘッド(保っていることを認識します各ロケールの上書きファイル?イエス..)
  • 必要なロケールだけをロードします。シャバン全体ではありません。
  • 本当にしたいのであれば、同じバンドル内のExtJSロケールファイル用に独自の翻訳を行うこともできます。
  • あなたはすべてのバンドルは、このように、後

短所孤立翻訳を避け、同じキーが含まれていることを保証するために、ユニットテストを書くことができます:

  • 同期 - ストアは、あなたのメインのアプリが起動する前にロードする必要があります。私はすべてのテキストがロードされた後に呼び出されたユーティリティクラスからのコールバックを追加することでこれを解決しました。
  • テキストのないリアルタイムの人口..私は私のユーザーを作りたくなかったもののどちらかのサーバーが過負荷に:P

をこれまでのところ、私のアプローチは、私の要件についてはかなりうまくいっています。 サイトの読み込みが著しく遅くなく、バンドル(バンドルあたり〜200個のキー/値を含む)が読み込み中に〜10kbで測定されます。

+0

プロトタイプのThanx JaySeeは、コードを読んでも簡単な翻訳方法を提供することを喜ばしくしています。 – Paul

+0

エレガントなソリューションをありがとう。 [Ext.ux.Cache](https://market.sencha.com/extensions/ext-ux-cache)を使用する場合、短所は長所に変更することができます – Pencroff

0

あなたが最初にあなたのUI翻訳して開発フェーズを完了し、プロジェクトを構築したり、I18sにEXT-all.jsファイルを使用する必要があります

+0

i18nがシステムによって適切に管理されるように、開発フレーズ以降にします。それぞれのクラスでは異なる人が働き、それぞれには翻訳ファイルが付属します。更新するのも簡単でなければなりません。現在のソリューションはすべてこのシナリオに適合しません。 – TigrouMeow

0

参照:http://docs.sencha.com/ext-js/4-0/#!/example/locale/multi-lang.html 適切な言語の修正スクリプト(/内線/ローカル/ ext-lang-xxx.js)は、extがロードされた後にロードする必要があります(動的にロードされるクラスを含む)。上記の例では、おそらくExt.Loader.loadScriptFileを使用しましたが、ダウンロードしたものを直接評価します。他の唯一のことは、クラスを異なる言語で構築する必要があること、あるいは変数を使用してlang固有の変数ファイルを参照することだけです。

あなたはまた、ローダパスに変数を使用することができます。

var lang='fr'; 
Loader 
{ 
paths: 
{ 
    'Ext': '.', 
    'My': './src/my_own_folder'+'/'+lang 
} 
+0

しかし、それでも私はすべての翻訳で最後に読み込まれた大きなファイルが必要なのですか?私は自分のクラスのそれぞれについてロケールファイルを持っていたいと思います(それぞれのビュー、または各コントローラを見てみましょう)。私は実際に何かを開発し、それは動作します、私は多分githubにアップロードする必要がありますか? – TigrouMeow

2

ので、私はExt.Loader上の自分のハック/アドオンを作成することを決めた解決策は現在ありません。 GitHub:https://github.com/TigrouMeow/extjs-locale-loaderにコードをアップロードしました。それはまさに私が必要としたものであり、他の人たちにも役立つことを本当に願っています!

+0

多くの言語のコンボがあり、ユーザーがコンボの値を変更すると、すべてのアプリケーションがロケールリソースを読み込んで言語を更新します???ありがとう –

関連する問題